|
| 1 | +<palign="center"> |
| 2 | + <imgalt="preview of page"src="https://github.com/gillkyle/images/blob/master/Screen%20Shot%202019-03-21%20at%209.14.46%20PM.png" /> |
| 3 | +</p> |
| 4 | +<h1align="center"> |
| 5 | + Gatsby Landing Page Starter |
| 6 | +</h1> |
| 7 | + |
| 8 | +A simple, minimal, easy-to-use landing page starter without all sorts of bells and whistles bolted on that you'll just have to strip out later. Create a super fast, beautiful landing page from a barebones template with a single page that already looks good. |
| 9 | + |
| 10 | +##Prerequisites |
| 11 | + |
| 12 | +If you do not have the Gatsby CLI installed yet, do it first. |
| 13 | + |
| 14 | +```bash |
| 15 | +npm install --global gatsby-cli |
| 16 | +``` |
| 17 | + |
| 18 | +The Gatsby CLI uses Node and npm which you will also need installed. More information can be found on[GatsbyJS.org](https://www.gatsbyjs.org/tutorial/part-one/). |
| 19 | + |
| 20 | +##🚀 Getting Started |
| 21 | + |
| 22 | +Install the starter using the Gatsby new command. |
| 23 | + |
| 24 | +```bash |
| 25 | +gatsby new landing-page https://github.com/gillkyle/gatsby-starter-landing-page.git |
| 26 | +``` |
| 27 | + |
| 28 | +Navigate into the project directory and launch the site. |
| 29 | + |
| 30 | +```bash |
| 31 | +cd landing-page&& gatsby develop |
| 32 | +``` |
| 33 | + |
| 34 | +The site will be opened up in your default browser onhttp://localhost:8000 |
| 35 | + |
| 36 | +Edit code in the`/src`, save your changes, and they'll reload instantly in the browser. |
| 37 | + |
| 38 | +##🧐 What's inside? |
| 39 | + |
| 40 | +The minimal landing page starter comes with a few plugins installed already, but it's main focus is on staying simple and looking clean. These things are included by default: |
| 41 | + |
| 42 | +- 🖼 Gatsby Image: images added to the`src/images` folder are automatically optimized by the`gatsby-image` plugin and can be pulled into components with lazy loading and blur up effects |
| 43 | +- 📊 Analytics: add your Google Analytics tracking id to`gatsby-config.js` to automatically begin tracking visitors to the site |
| 44 | +- 🗺 Sitemap: any new pages added to the site are automically assembled together into a sitemap through`gatsby-plugin-sitemap` |
| 45 | +- 🎨 Color Theme: the`src/styles/constants.js` file contains a set of colors and default styles that are applied inline to components on the site that can be overriden with your own styles |
| 46 | + |
| 47 | +##🧪 Experiment |
| 48 | + |
| 49 | +If you want to try playing with the source code in an online playground you can open the repo in Codesandox with this button. |
| 50 | + |
| 51 | +[](https://codesandbox.io/s/github/gillkyle/gatsby-starter-landing-page/tree/master/) |
| 52 | + |
| 53 | +##💫 Deploy |
| 54 | + |
| 55 | +If you just want to see a site online real fast you can deploy a copy of the site to Netlify with this button. |
| 56 | + |
| 57 | +[](https://app.netlify.com/start/deploy?repository=https://github.com/gillkyle/gatsby-starter-landing-page) |
| 58 | + |
| 59 | +To create an optimized build of the site run this command |
| 60 | + |
| 61 | +```bash |
| 62 | +gatsby build |
| 63 | +``` |
| 64 | + |
| 65 | +A`/public` folder will be assembled that can be deployed to a service like Netlify, Surge, GitHub Pages, AWS S3, Firebase hosting, or your own file server. |