Gatsby - Customize a simple Coming-Soon page

Hello Coder,

Thank you for landing on this page. This article demonstrates how to build a coming soon page starting from a Gatsby boilerplate. The code referred here is published on Github on a public repository, under a permissive license (CCA 3.0 License - preserve the footer).

What is Gatsby

Gatsby is a free and open source framework based on React that helps developers build blazing fast websites and apps. A few reasons to use Gatsby:

  • modern tooling out of the box.
  • plugins for almost anything
  • All apps built with Gatsby will score more than 90 on Lighthouse
  • usable starters for many types of apps and technologies: one-page, eCommerce, blogs
  • comprehensive docs
  • live support on spectrum & Discord

Let's start with our simple app and clone the sources. The Gatsby boilerplate we will use as a code-base in this article is published under repository Gatsby Aerial

GatsbyJS Aerial - Gif animated intro.


Build the App

To clone and build the app we need a few tools already installed on our system: Git, Gatsby CLI and Node / Npm. To setup your system with these prerequisites please follow this comprehensive tutorial published in the official Gatsby docs.

To clone and build the app we need a few lines of typed in the terminal:

$ git clone https://github.com/app-generator/gatsby-html5up-aerial.git
$ cd gatsby-html5up-aerial

$ # install modules
$ yarn 

$ # start the app
$ yarn start

$ # App is running on http://localhost:8000 

If all goes well, you should see the app running in your browser. Now let's customize the app. To update the information, we need to update some relevant files, save the changes and checkout the browser.

Home Page

Src / Pages / Index.js - refers the page loaded as the home page in our app. The page uses a set of components (Header, Footer) injected in the master Layout component

# Index.js - file contents

import Layout from '../components/layout';
import Footer from '../components/Footer';
import Header from '../components/Header';

const IndexPage = () => (
  <Layout>
    <>
      <div id="bg" />
      <div id="overlay" />
      <div id="main">
        <Header />
        <Footer />
      </div>
    </>
  </Layout>
);

export default IndexPage;

This react component, ( defined in  src / components / Footer.js file ) is a simple one with a few lines of code:

# Footer.js - file contents

import React from 'react';

export default function Footer() {
  return (
    <footer id="footer">
      <span class="copyright">
        &copy; AppSeed, Design: <a href="http://html5up.net">HTML5 UP</a>.
      </span>
    </footer>
  );
}

To customize it, just replace `AppSeed` string with your awesome company name. The changes should be reflected automatically in the browser.

Header Component

To update the information, please open the file from the path src / components / Header.js

# Header.js - file contents

import React from 'react';

import config from '../../config';
export default function Footer() {
  return (
    <header id="header">
      <h1>
        <a href="https://www.gatsbyjs.org/">Gatsby</a> Html5up
      </h1>
      <p>Open-Source app with Aerial design</p>
      <nav>
        <ul>
          {config.authorSocialLinks.map(social => {
            const { icon, name, url } = social;
            return (
              <li>
                <a href={url} class={`icon ${icon}`}>
                  <span class="label">{name}</span>
                </a>
              </li>
            );
          })}
        </ul>
      </nav>
    </header>
  );
}

This component iterate the items defined in config.js (in the root of the project) and build the social links to be displayed under the site name.

# Config.js - file contents, relevant lines only 

...
authorSocialLinks: [
    {
      icon: 'fa-github',
      name: 'Github',
      url: 'https://github.com/app-generator/gatsby-html5up-aerial',
    },
    {
      icon: 'fa-twitter',
      name: 'Twitter',
      url: 'https://twitter.com/webappseed',
    }
  ],
...

The file updates, will be reflected in the browser, without a refresh.

After adding your information, just type `yarn build` to build the app for production and you're all set. That was easy, right?


Where to go from here?

For more Gatsby Apps or LIVE support (PAID plans only)  please access AppSeed.  Thank you!

Show Comments

Get the latest posts delivered right to your inbox.