How I built a minimalist blog

gatsby is attractive

I've been planning to setup my blog for quite a bit of time. However, I kept postponing this because I guess it wasn't the right time. I learnt about Gatsby last year, but I hadn't learnt React yet and to be honest, the whole thing was a bit over my head. However, after learning and working with React for a while, Gatsby felt like the perfect choice.

It uses GraphQL, it's fully customizable, makes adding new pages to the blog a breeze and I love the fact that it uses markdown for blog posts. Also, later on, I plan to build some themes with it, so all in all, it feels like the perfect choice for me.

So, here's how I built this blog. Bear in mind, this is not a fully detailed tutorial. There are many guides out there and I highly recommend Yihua's tutorial in Complete React Developer in 2020 (w/ Redux, Hooks, GraphQL) by Andrei Neagoie and Yihua Zhang.

Setup

First, setup a new Gatsby blog.

npx gatsby new gatsby-blog

Then, cd into the gatsby-blog directory and start the server using:

npm run develop

Setup the site metadata to your liking in gastby-config.js

siteMetadata: {
  title: `MY BLOG`,
  description: `My thoughts...`,
  author: `@yourname`,
},

You can also, in the same file, tag your own icon by linking to the correct path.

options: {
  name: `gatsby-starter-default`,
  short_name: `starter`,
  start_url: `/`,
  background_color: `#663399`,
  theme_color: `#663399`,
  display: `minimal-ui`,
  icon: `src/images/<your-logo-filename>`,
},

Use Markdown

In order to use markdown for your blogposts, we then need to add the following in the gatsby-config.js file, in the plugins, so that Gatbsy has access to the markdown files.

plugins: [
    `gatsby-plugin-react-helmet`,
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `images`,
        path: `${__dirname}/src/images`,
      },
    },
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `markdowns`,
        path: `${__dirname}/src/markdown-pages`,
      },
    },

Once this is done, let's restart the server so everything reloads.

Fetching data from our files

To do this, we need to install a transformer plugin to enable us to fetch the data in our files we queried using graphQL.

npm i gatsby-transformer-remark

add gatsby-transformer-remark to gatsby-config.js:

{
`gatsby-transformer-remark`,
`gatsby-transformer-sharp`,
`gatsby-plugin-sharp`,
},

Clean-up index.js file

To clean things up a bit, we can export the function representing the index page component. So, let's remove the export default IndexPage line and export the function, passing in the data as props.

export default ({ data }) => (
  <Layout>
    <SEO title="Home" />
    <div>
      <h1>My Blog</h1>
    </div>
  </Layout>
)

export const query = graphql`
  query {
    allMarkdownRemark() {
      edges {
        node {
          id
          frontmatter {
            date
            title
          }
          fields {
            slug
          }
          excerpt
        }
      }
    }
  }
`

The data is fetched from the graphQL query below the function. In order to create the appropriate query using graphQL, I recommend using the graphQL interface at localhost:8000/___graphql as it is very user friendly.

Populating Index page with blog briefs

export default ({ data }) => (
  <Layout>
    <SEO title="Home" />
    <div>
      <h1>My Blog</h1>
      <h4>{data.allMarkdownRemark.totalCount} Posts</h4>
      {data.allMarkdownRemark.edges.map(({ node }) => (
        <div key={node.id}>
          <Link to={node.fields.slug}>
            <h3>
              {node.frontmatter.title} - {node.frontmatter.date}
            </h3>
          </Link>
          <p>{node.excerpt}</p>
        </div>
      ))}
    </div>
  </Layout>
)

export const query = graphql`
  query {
    allMarkdownRemark() {
      totalCount
      edges {
        node {
          id
          frontmatter {
            date
            title
          }
          fields {
            slug
          }
          excerpt
        }
      }
    }
  }
`

Now, the index page will show the title, date and an excerpt of each blog posts in your mardown-pages folder.

Sorting by latest first

We do want to see the latest blog posts first, so we can modify the allMarkdownRemark part in the query:

query {
  allMarkdownRemark(sort: { fields: [frontmatter___date], order: DESC })

Styles

To properly style the components, it is recommended to bring in the styled-components plugin. So, let's first install it.

npm i gatsby-plugin-styled-components styled-components babel-plugin-styled-components

And then add gatsby-plugin-styled-components to gatsby-config.js.

},
`gatsby-transformer-remark`,
`gatsby-transformer-sharp`,
`gatsby-plugin-styled-components`,
`gatsby-plugin-sharp`,
{

We can thus import it in the index.js file and use styled components in our blog.

import styled from "styled-components"

Deploy

First, create repo on GitHub (or GitLab, Bitbucket, ...) and push your blog to it.

git add -A
git commit -m "Add all blog code for deployment"
git remote add origin <your-github-url-here>
git push origin master

Second, for the hosting, it's up to you... However, for my part, I chose to host this blog on Netlify for the ease of continuous integration. So, for Netlify, here are the steps:

• Create an account and then login.
• Click on the New site from Git button and choose GitHub (or GitLab or Bitbucket, depending on where you pushed your code).
• Allow authorization and find name of repo. Click on deploy.

And we're done! We now have full CI/CD on our blog. You can now simply push changes on your blog to your version control and Netlify will automatically rebuild your site.

If you want to add a custom domain, I invite you to follow the Netlify documentation as it is very easy to follow.

Now, we can enjoy our new blog!

From here

So, I hope you enjoyed these steps, which aimed at helping you quickly setup a Gatsby blog.

If you need more information, here are a couple of links from the official Gatsby documentation:

• Gatsby Quick Start
• Gatsby Tutorial