Create Pages

Setup Gatsby Project

mkdir learn-gatsby
cd learn-gatsby
npm init --y

mkdir is the command to create a folder in bash command prompt. It’s equivalent to right click on File Explorer > New Folder.
cd is change directory. cd learn-gatsby is equivalent to double click the “learn-gatsby” folder.
npm init is an utility command to start a new projects, which is actually creating a package.json file in current folder. By default it will ask you few questions that you need to reply one-by-one, but I am lazy and add the --y flag to automatically answer Yes for all the questions.

You should see a package.json created in learn-gatsby folder.

package.json

{
  "name": "learn-gatsby",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

Now let’s install the libraries we need:

npm install react react-dom gatsby

npm install installs third-party libraries for your project. It will download the libraries and put them in node_modules folder and add the libraries’ name and version in the package.json file.

package.json

{
  "name": "learn-gatsby",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "gatsby": "^2.13.7",
    "react": "^16.8.6",
    "react-dom": "^16.8.6"
  }
}

Next, let’s setup our repository so we can properly record our changes and push it to GitHub.

touch .gitignore

.gitignore

.cache
node_modules
/public

git init
git add .
git commit -m "initial commit"

Create First Page

Components are main building blocks of a Gatsby site

mkdir -p src/pages
touch src/pages/index.js

src/pages/index.js

import * as React from 'react';

const HomePage = () => {
  return (
    <div>
      <h1>Welcome to Malcolm Kee's Website</h1>
      <p>crafted with tears and love.</p>
    </div>
  );
};

export default HomePage;

package.json

{
  "name": "learn-gatsby",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "gatsby develop"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "gatsby": "^2.13.7",
    "react": "^16.8.6",
    "react-dom": "^16.8.6"
  }
}

npm start

Open localhost:8000 and you should able to see your page. Try to edit the content and see how the content is updated instantly.

git add .
git commit -m "add home page"

Create Not Found Page

touch src/pages/404.js

src/pages/404.js

import * as React from 'react';

const NotFoundPage = () => {
  return (
    <div>
      <h1>Page Not Found</h1>
      <p>Man... I'm sorry for you</p>
    </div>
  );
};

export default NotFoundPage;

git add .
git commit -m "add not found page"

Use React Components to Compose Your Page

mkdir src/components
touch src/components/header.jsx
touch src/components/layout.jsx

src/components/header.jsx

import * as React from 'react';

export const Header = () => {
  return (
    <header className="header">
      <div className="header-container">Malcolm Kee</div>
    </header>
  );
};

src/components/layout.jsx

import * as React from 'react';
import { Header } from './header';

export const Layout = ({ children }) => {
  return (
    <>
      <Header />
      <main className="layout-container">{children}</main>
    </>
  );
};

Then use the Layout component in both our home page and not found page:

src/pages/index.js

import * as React from 'react';
import { Layout } from '../components/layout';

const HomePage = () => {
  return (
    <Layout>
      <h1>Welcome to Malcolm Kee's Website</h1>
      <p>crafted with tears and love.</p>
    </Layout>
  );
};

export default HomePage;

src/pages/404.js

import * as React from 'react';
import { Layout } from '../components/layout';

const NotFoundPage = () => {
  return (
    <Layout>
      <h1>Page Not Found</h1>
      <p>Man... I'm sorry for you</p>
    </Layout>
  );
};

export default NotFoundPage;

Add Styles

touch src/components/header.css
touch src/components/layout.css

header.css

.header {
  background-color: rgb(102, 51, 153);
  color: #fff;
}

.header-container {
  font-size: 3rem;
  padding: 8px;
  margin: 0 auto;
  max-width: 1020px;
}

src/components/header.jsx

import * as React from 'react';
import './header.css';

export const Header = () => {
  return (
    <header className="header">
      <div className="header-container">Malcolm Kee</div>
    </header>
  );
};

layout.css

.layout-container {
  margin: 0 auto;
  max-width: 1020px;
}

src/components/layout.jsx

import * as React from 'react';
import { Header } from './header';
import './layout.css';

export const Layout = ({ children }) => {
  return (
    <>
      <Header />
      <main className="layout-container">{children}</main>
    </>
  );
};

Commit Changes

git add .
git commit -m "add layout component"

Linking Pages

Let’s add third page in our site

touch src/pages/about-me.js

src/pages/about-me.js

import * as React from 'react';
import { Layout } from '../components/layout';

const AboutMePage = () => {
  return (
    <Layout>
      <h1>Malcolm Kee</h1>
      <ul>
        <li>Full-Snack Developer</li>
        <li>KL, Malaysia</li>
      </ul>
    </Layout>
  );
};

export default AboutMePage;

Let’s add the link to this new page from home page:

src/pages/index.js

import { Link } from 'gatsby';
import * as React from 'react';
import { Layout } from '../components/layout';

const HomePage = () => {
  return (
    <Layout>
      <h1>Welcome to Malcolm Kee's Website</h1>
      <p>crafted with tears and love.</p>
      <Link to="/about-me">About</Link>
    </Layout>
  );
};

export default HomePage;

Add the link to home page from Not Found page and About page:

src/pages/404.js

import { Link } from 'gatsby';
import * as React from 'react';
import { Layout } from '../components/layout';

const NotFoundPage = () => {
  return (
    <Layout>
      <h1>Page Not Found</h1>
      <p>Man... I'm sorry for you</p>
      <Link to="/">Home</Link>
    </Layout>
  );
};

export default NotFoundPage;

src/pages/about-me.js

import { Link } from 'gatsby';
import * as React from 'react';
import { Layout } from '../components/layout';

const AboutMePage = () => {
  return (
    <Layout>
      <h1>Malcolm Kee</h1>
      <ul>
        <li>Full-Snack Developer</li>
        <li>KL, Malaysia</li>
      </ul>
      <Link to="/">Home</Link>
    </Layout>
  );
};

export default AboutMePage;

Build and Deploy Your Gatsby Site

package.json

{
  "name": "learn-gatsby",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "gatsby develop",
    "build": "gatsby build",
    "serve": "gatsby serve"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "gatsby": "^2.13.7",
    "react": "^16.8.6",
    "react-dom": "^16.8.6"
  }
}

npm run build
npm run serve

Then open localhost:9000 to view the optimized static files.

push code to GitHub repo
create account in Netlify