How I built a minimalist blog
Tags: gatsby, blog
Published: 2020-09-01 13:29:56

### 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)](https://www.udemy.com/course/complete-react-developer-zero-to-mastery/) by [Andrei Neagoie](https://github.com/aneagoie) and [Yihua Zhang](https://github.com/ZhangMYihua).

#### 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.

```javascript
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.

```javascript
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

```javascript
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:

```javascript
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.

```javascript
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](https://www.netlify.com/) 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](https://docs.netlify.com/domains-https/custom-domains/#definitions) as it is very easy to follow.

Now, we can [enjoy our new blog](https://devdess.netlify.app)!

### 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](https://www.gatsbyjs.org/docs/quick-start/)
- [Gatsby Tutorial](https://www.gatsbyjs.org/tutorial/)