├── .gitignore ├── .prettierrc ├── LICENSE ├── README.md ├── gatsby-config.js ├── package.json ├── src ├── components │ ├── button.js │ ├── content.js │ ├── cta.js │ ├── footer.js │ ├── header.js │ ├── hero.js │ ├── image.js │ ├── layout.js │ ├── section-header.js │ └── seo.js ├── images │ ├── feature.png │ ├── header.png │ ├── mockup-content.png │ └── mockup-frame.png ├── pages │ ├── 404.js │ └── index.js └── styles │ ├── button.css │ ├── constants.js │ └── default.css └── yarn.lock /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | 8 | # Runtime data 9 | pids 10 | *.pid 11 | *.seed 12 | *.pid.lock 13 | 14 | # Directory for instrumented libs generated by jscoverage/JSCover 15 | lib-cov 16 | 17 | # Coverage directory used by tools like istanbul 18 | coverage 19 | 20 | # nyc test coverage 21 | .nyc_output 22 | 23 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 24 | .grunt 25 | 26 | # Bower dependency directory (https://bower.io/) 27 | bower_components 28 | 29 | # node-waf configuration 30 | .lock-wscript 31 | 32 | # Compiled binary addons (http://nodejs.org/api/addons.html) 33 | build/Release 34 | 35 | # Dependency directories 36 | node_modules/ 37 | jspm_packages/ 38 | 39 | # Typescript v1 declaration files 40 | typings/ 41 | 42 | # Optional npm cache directory 43 | .npm 44 | 45 | # Optional eslint cache 46 | .eslintcache 47 | 48 | # Optional REPL history 49 | .node_repl_history 50 | 51 | # Output of 'npm pack' 52 | *.tgz 53 | 54 | # dotenv environment variables file 55 | .env 56 | 57 | # gatsby files 58 | .cache/ 59 | public 60 | 61 | # Mac files 62 | .DS_Store 63 | 64 | # Yarn 65 | yarn-error.log 66 | .pnp/ 67 | .pnp.js 68 | 69 | # Yarn Integrity file 70 | .yarn-integrity 71 | -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "endOfLine": "lf", 3 | "semi": false, 4 | "singleQuote": false, 5 | "tabWidth": 2, 6 | "trailingComma": "es5" 7 | } 8 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2019 gillkyle 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | 23 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |

2 | preview of page 3 |

4 |

5 | Gatsby Landing Page Starter 6 |

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 on http://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 | [![Edit gatsby-starter-portfolio-cara](https://codesandbox.io/static/img/play-codesandbox.svg)](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 | [![Deploy to Netlify](https://www.netlify.com/img/deploy/button.svg)](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. 66 | -------------------------------------------------------------------------------- /gatsby-config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | siteMetadata: { 3 | title: `Starter Landing Page`, 4 | description: `A barebone landing page starter with some minimal styles.`, 5 | author: `@gillkyle`, 6 | siteUrl: `https://gatsby-starter-landing-page.netlify.com`, 7 | }, 8 | plugins: [ 9 | `gatsby-plugin-react-helmet`, 10 | `gatsby-transformer-sharp`, 11 | `gatsby-plugin-sharp`, 12 | `gatsby-plugin-sitemap`, 13 | { 14 | resolve: `gatsby-plugin-google-analytics`, 15 | options: { 16 | trackingId: "YOUR_GOOGLE_ANALYTICS_TRACKING_ID", 17 | }, 18 | }, 19 | { 20 | resolve: `gatsby-source-filesystem`, 21 | options: { 22 | name: `images`, 23 | path: `${__dirname}/src/images`, 24 | }, 25 | }, 26 | ], 27 | } 28 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "gatsby-starter-landing-page", 3 | "private": true, 4 | "description": "A simple starter to create a minimal landing page with Gatsby", 5 | "version": "0.1.0", 6 | "author": "Kyle Gill ", 7 | "dependencies": { 8 | "gatsby": "^2.1.37", 9 | "gatsby-image": "^2.0.34", 10 | "gatsby-plugin-google-analytics": "^2.0.17", 11 | "gatsby-plugin-react-helmet": "^3.0.10", 12 | "gatsby-plugin-sharp": "^2.0.29", 13 | "gatsby-plugin-sitemap": "^2.0.10", 14 | "gatsby-source-filesystem": "^2.0.27", 15 | "gatsby-transformer-sharp": "^2.1.17", 16 | "prop-types": "^15.7.2", 17 | "react": "^16.8.4", 18 | "react-dom": "^16.8.4", 19 | "react-helmet": "^5.2.0", 20 | "sharp": "^0.22.0" 21 | }, 22 | "devDependencies": { 23 | "prettier": "^1.16.4" 24 | }, 25 | "keywords": [ 26 | "gatsby" 27 | ], 28 | "license": "MIT", 29 | "scripts": { 30 | "build": "gatsby build", 31 | "develop": "gatsby develop", 32 | "format": "prettier --write src/**/*.{js,jsx}", 33 | "start": "npm run develop", 34 | "serve": "gatsby serve", 35 | "test": "echo \"Write tests! -> https://gatsby.dev/unit-testing\"" 36 | }, 37 | "repository": { 38 | "type": "git", 39 | "url": "https://github.com/gatsbyjs/gatsby-starter-default" 40 | }, 41 | "bugs": { 42 | "url": "https://github.com/gatsbyjs/gatsby/issues" 43 | } 44 | } 45 | -------------------------------------------------------------------------------- /src/components/button.js: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | 3 | import { COLORS, BORDER_RADIUS, GRADIENT } from "../styles/constants" 4 | import "../styles/button.css" 5 | 6 | const Button = ({ children }) => ( 7 | 20 | ) 21 | 22 | export default Button 23 | -------------------------------------------------------------------------------- /src/components/content.js: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | 3 | import feature from "../images/feature.png" 4 | import SectionHeader from "./section-header" 5 | import { COLORS } from "../styles/constants" 6 | 7 | const Content = () => ( 8 |
9 | 13 | 21 |
22 |

What you need to Start

23 |

24 | Includes plugins for analytics, building sitemaps, and optimizing 25 | images 26 |

27 |
28 |
29 | a blank card floating over colorful graphics 30 |
31 | 32 |
33 | ) 34 | 35 | export default Content 36 | -------------------------------------------------------------------------------- /src/components/cta.js: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | 3 | import Button from "../components/button" 4 | import SectionHeader from "./section-header" 5 | 6 | const CallToAction = () => ( 7 |
8 | 12 | 13 |
14 | ) 15 | 16 | export default CallToAction 17 | -------------------------------------------------------------------------------- /src/components/footer.js: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | import PropTypes from "prop-types" 3 | 4 | import { COLORS } from "../styles/constants" 5 | 6 | const Footer = ({ siteTitle }) => ( 7 | 38 | ) 39 | 40 | Footer.propTypes = { 41 | siteTitle: PropTypes.string, 42 | } 43 | 44 | Footer.defaultProps = { 45 | siteTitle: ``, 46 | } 47 | 48 | export default Footer 49 | -------------------------------------------------------------------------------- /src/components/header.js: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | import PropTypes from "prop-types" 3 | import { Link } from "gatsby" 4 | 5 | const Header = ({ siteTitle }) => ( 6 |
12 |
13 |

14 | 21 | {siteTitle} 22 | 23 |

24 |
25 |
26 | ) 27 | 28 | Header.propTypes = { 29 | siteTitle: PropTypes.string, 30 | } 31 | 32 | Header.defaultProps = { 33 | siteTitle: ``, 34 | } 35 | 36 | export default Header 37 | -------------------------------------------------------------------------------- /src/components/hero.js: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | import PropTypes from "prop-types" 3 | 4 | import Button from "../components/button" 5 | import headerImage from "../images/header.png" 6 | import MockupContent from "./image" 7 | import mockupFrame from "../images/mockup-frame.png" 8 | 9 | const Header = ({ siteTitle }) => ( 10 |
18 |
29 |

Landing Page Starter

30 |

31 | This landing page looks great on all devices and is minimal in design. Add 32 | what you want and deploy. 33 |

34 | 35 |
36 |
37 | 38 |
39 |
46 | outlines of shapes and confetti in the background 50 |
51 |
52 |
53 | ) 54 | 55 | Header.propTypes = { 56 | siteTitle: PropTypes.string, 57 | } 58 | 59 | Header.defaultProps = { 60 | siteTitle: ``, 61 | } 62 | 63 | export default Header 64 | -------------------------------------------------------------------------------- /src/components/image.js: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | import { StaticQuery, graphql } from "gatsby" 3 | import Img from "gatsby-image" 4 | 5 | /* 6 | * This component is built using `gatsby-image` to automatically serve optimized 7 | * images with lazy loading and reduced file sizes. The image is loaded using a 8 | * `StaticQuery`, which allows us to load the image from directly within this 9 | * component, rather than having to pass the image data down from pages. 10 | * 11 | * For more information, see the docs: 12 | * - `gatsby-image`: https://gatsby.dev/gatsby-image 13 | * - `StaticQuery`: https://gatsby.dev/staticquery 14 | */ 15 | 16 | const Image = () => ( 17 | } 30 | /> 31 | ) 32 | export default Image 33 | -------------------------------------------------------------------------------- /src/components/layout.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Layout component that queries for data 3 | * with Gatsby's StaticQuery component 4 | * 5 | * See: https://www.gatsbyjs.org/docs/static-query/ 6 | */ 7 | 8 | import React from "react" 9 | import PropTypes from "prop-types" 10 | import { StaticQuery, graphql } from "gatsby" 11 | 12 | import Footer from "./footer" 13 | import "../styles/default.css" 14 | 15 | const Layout = ({ children }) => ( 16 | ( 27 | <> 28 |
33 |
{children}
34 |
35 |