Building a website with GatsbyJS is incredibly simple. This tutorial will teach you how to use this static website generator to build your own website. You will learn about creating and linking pages, handling 404, managing static files and more. Learn what you need to know about GatsbyJS and build your own website. It is easier than you think.

How to Build a Simple Website with GatsbyJS & PostCSS Part 1.

Project outline

Before we begin, let’s again take a quick look at the outline for this tutorial. The outline below is what you get when you finish this second part, and also use the code from the part 1. Jut to remind you, the .cache and public directories are generated by GatsbyJS. They are not created by you.

gatsbyjs-website
├── .cache/
├── node_modules/
├── public/
├── src/
│   └── components/
│       └── footer.js
│       └── header.js
│       └── layout.js
│   └── images/
│       └── gatsby-icon.png
│   └── pages/
│       └── 404.js
│       └── about-me.js
│       └── contact.js
│       └── index.js
│   └── styles/
│       └── _base.css
│       └── _footer.css
│       └── _grid.css
│       └── _header.css
│       └── styles.css
├── static
│       └── sendEmail.php
├── gatsby-config.js
└── package.json

Adding default styles

Let’s start with something easier, such as PostCSS and adding some basic styles to make your GatsbyJS website nicer. These styles will be mostly resets applied to html, body and general elements you will see in this tutorial. This will help ensure browsers will render your website as you want. So, let’s create a new stylesheet in src/styles. It can be called _base.css.

/* src/styles/_base.css */

html {
    box-sizing: border-box;
  font-size: 16px;
  line-height: 1.15;
    -webkit-text-size-adjust: 100%;
}

*,
*::before,
*::after {
    box-sizing: inherit;
}

:root {
    -moz-tab-size: 4;
    tab-size: 4;
}

body {
  margin: 0;
  font: 1rem / 1.616 georgia, serif;
  -moz-font-feature-settings: 'kern', 'liga', 'clig', 'calt';
  -ms-font-feature-settings: 'kern', 'liga', 'clig', 'calt';
  -webkit-font-feature-settings: 'kern', 'liga', 'clig', 'calt';
  font-feature-settings: 'kern', 'liga', 'clig', 'calt';
  font-kerning: normal;
  font-weight: 400;
  word-wrap: break-word;
  color: hsla(0, 0%, 0%, .8);
}

b,
strong {
    font-weight: bolder;
}

button,
input,
textarea {
    font-family: inherit;
    font-size: 100%;
    line-height: 1.15;
    margin: 0;
}

button,
select {
    text-transform: none;
}

button,
[type='button'],
[type='submit'] {
    -webkit-appearance: button;
}

button::-moz-focus-inner,
[type='button']::-moz-focus-inner,
[type='submit']::-moz-focus-inner {
    border-style: none;
    padding: 0;
}

button:-moz-focusring,
[type='button']:-moz-focusring,
[type='submit']:-moz-focusring {
    outline: 1px dotted ButtonText;
}

fieldset {
    padding: 0;
  border: 0;
}

.page-wrapper {
  display: flex;
  flex-flow: column wrap;
  min-height: 100vh;
}

.page-content {
  flex: 1; /* Make sure footer is always on the bottom. */
}

These styles are the bare minimum. However, it is still a good starting point for building your website with GatsbyJS. Next, still in the src/styles directory, let’s create another file called styles.css. We will use this file as the main point for PostCSS and for importing all other stylesheets you will create.

Now, you can add imports for _base.css stylesheet. You can also add imports for stylesheets you created for Footer and Header components in the previous part. Finally, let’s also add one more import. This will be a import for stylesheet with grid you will create next.

/* src/styles/styles.css */

/* Import base styles */
@import '_base.css';

/* Import grid */
@import '_grid.css';

/* Import components */
@import '_header.css';
@import '_footer.css';

#gatsbyjs #postcss #javascript #reactjs #design development