How I built a minimalist blog

Sylvain Dessureault — Tue, 01 Sep 2020 13:29:56 +0000

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:

DEV Community: Sylvain Dessureault