GatsbyJS is an open source static site generator, that is based on React.

I chose it for my blog, because all I needed were static pages, that can be generated via markdown, and then be stored somewhere in cloud to be served.

Getting started

You can install Gatsby via npm

npm install -g gatsby-cli

This gives you a handy CLI to develop against.

There are a lot of starter templates that you can find here. I went with the default one, gatsby-starter-default.

gatsby new my-default-starter https://github.com/gatsbyjs/gatsby-starter-default

Navigate into that directory, and start it up.

cd my-default-starter
gatsby develop

This will then be accessible at http://localhost:8000.

Now what?

Great, it's installed a bunch of things and I don't know what they do.

So, I decided to go and uninstall/delete files until I stripped it clean.

I went from

"dependencies": {
    "gatsby": "^2.21.0",
    "gatsby-image": "^2.4.0",
    "gatsby-plugin-manifest": "^2.4.0",
    "gatsby-plugin-offline": "^3.2.0",
    "gatsby-plugin-react-helmet": "^3.3.0",
    "gatsby-plugin-sharp": "^2.6.0",
    "gatsby-source-filesystem": "^2.3.0",
    "gatsby-transformer-sharp": "^2.5.0",
    "prop-types": "^15.7.2",
    "react": "^16.12.0",
    "react-dom": "^16.12.0",
    "react-helmet": "^6.0.0"
  }

to

"dependencies": {
    "gatsby": "^2.21.0"
    "react": "^16.12.0",
    "react-dom": "^16.12.0"
}

And then I started developing.

Plugins

Plugins are in the Gatsby are a great feature in the Gatsby ecosystem. They are tools which someone else has wrote to help you build your site.

gatsby-plugin-alias-imports

This was the first plugin I installed. It lets you reference modules with a custom alias, such as @post.

You would configure in gatsby-config.js, which is at the root of your directory.

const path = require('path');

module.exports = {
    plugins: [
        {
            resolve: `gatsby-plugin-alias-imports`,
            options: {
                alias: {
                    '@core': path.resolve(__dirname, 'src/core'),
                    '@post': path.resolve(__dirname, 'src/modules/post'),
                },
            },
        },
    ],
};

This would then point @post to src/modules/post.

gatsby-plugin-emotion

I wanted to use Tailwind CSS with Emotion.

This plugin, along with gatsby-plugin-postcss gave me the ability to style my components in js with tailwind.

const Title = styled.h1`
  ${tw`
    text-4xl lg:text-5xl
  `}
`

// We can then use it
<Title>{post.title}</Title>

gatsby-transformer-remark

And finally, I needed a plugin to transform my markdown files. This plugin along with gatsby-source-filesystem did that.

gatsby-remark-prismjs

This goes really well with the previous plugin as it uses PrismJS to format code blocks.

gatsby-plugin-react-helmet

This uses React Helmet to insert data into your document header, as Gatsby does not provide a native way of doing it.

<>
    <Helmet title="Blog - dctcheng" defer={false} />
    <Layout></Layout>
</>

It's also meant to help with SEO, but I haven't looked into that yet.

gatsby-plugin-sharp

Uses Sharp image processing library.

This package is consumed by gatsby-remark-images to extract images from inline markdown.

So thats about it, brief intro to Gatsby and it's plugins.