Blazing fast Gatsby starter with a blazing quick setup.
Deploy in minutes and use as a temporary landing page while you build your Gatsby site.
Deploy in minutes: everything is set up in gatsby-config.js.
See Setup for instructions.
Performance is only hindered by Google Fonts being hosted on Google's CDN.
If you don't need to dynamically change typefaces, consider self-hosting webfonts. I recommend typefaces by Kyle Matthews.
The Google Font(s) you choose in gatsby-config.js will be dynamically imported from Google's CDN.
Choose from a selection of CSS3 background patterns by Lea Verou.
The available patterns can be found here
Dynamically render social icons with Jake Trent's react-social-icons.
Transitions on page rendering with react-transition-group.
- npm or yarn
- gatsby
- Clone the repository into
my-gatsby-site
git clone https://github.com/robinmetral/gatsby-starter-under-construction.git my-gatsby-site
cd my-gatsby-site
- Install dependencies
| npm | yarn |
|---|---|
npm install |
yarn install |
- Start the local server
gatsby develop
Edit the siteMetadata variables in gatsby-config.js:
| variable | required? | type | value |
|---|---|---|---|
title |
yes | string (any) | The page's heading and your site's <title> |
message |
yes | string (any) | The message to display below the heading |
pattern |
yes | string (pattern name) | The CSS3 background pattern. See all available patterns at /patterns |
color |
yes | string (hex color code with #) | The color for text and social icons |
headingFont |
yes | string (Google Font name) | The heading's Google Font |
textFont |
yes | string (Google Font name) | The message's Google Font |
social |
yes | array of url strings | Array of social links, powered by react-social-icons |
Example setup:
module.exports = {
siteMetadata: {
title: "Hi, looking for a starter? 🔎",
message: "🚧 Host me on your domain while you build your new Gatsby site! (or keep me longer, that's fine too) 👷",
pattern: "Seigaiha",
// choose a color for your text and icons
color: "#4c4c4c",
// choose a Google Font for the title
headingFont: "Lobster",
// choose a Google Font for the message
textFont: "Montserrat",
// display social icon links by adding your social urls to the array
social: ["https://github.com/robinmetral/gatsby-starter-under-construction", "https://twitter.com/robinmetral"],
},
}MIT