How To Build A Blog From Scratch With React, Markdown, GraphQL and GatsbyJS

Whether it’s to customize, monetize, add security, or just learn, today, I’ll show you how to code your own blog from scratch.

Aman Mittal
Nov 20, 2018 · 10 min read
Image for post
Image for post

What is GatsbyJS?

Gatsby is a simple, robust, and fast static site generator. It uses ReactJS to render static content on the web. The content in a Gatsby app is written in the same way as any other React app: through components. These components are rendered at build time to the DOM as static HTML, CSS, and JavaScript.

Why use Gatsby?

Gatsby takes care of a lot behind the scenes.

  • Gatsby has a rich plugin ecosystem that is easily extensible
  • Pre-configured Webpack based build system (no need to break your head)
  • Supports PWA (Progressive Web App) by default
  • Optimized for speed. Gatsby loads only critical parts so that your site loads as fast as possible. Once loaded, Gatsby prefetches resources for other pages so that clicking on the site feels incredibly fast

Pre-requisites

  • Familiarity with HTML, JavaScript, ReactJS
  • Nodejs with npm or yarn installed
  • Gatsby CLI (which we are going to install in next section)

Getting Started with Gatsby

To start, we need to install the command line utility provided by GatsbyJS to quickly scaffold projects. Open your terminal and type the following command.

Image for post
Image for post
Image for post
Image for post
Image for post
Image for post

Running a GraphQL Query

Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post

Writing our first Markdown blog post

Gatsby makes use of various plugins for building static sites. In this section, we are going to install and configure in order to make use of gatsby-source-filesystem and gatsby-transformer-remark to work with locally stored Markdown files. Open your terminal and type.

Image for post
Image for post

Creating the Blog Template

If you take a look at your blog in a browser, you will see that Gatsby is not yet displaying any blog posts that you have created. This is because Gatsby still does not know where these blog posts are or that you even want them to be displayed in the browser. However, if you try to query it in the GraphiQL browser tab, you can see that frontmatter data of blog post is available.

Image for post
Image for post
Image for post
Image for post
Image for post
Image for post

Adding Previous and Next Blog Post Links

For this feature to work with our blog, we are going to make use Gatsby Link component. It is a wrapper around @reach/router’s Link component that adds enhancements specific to Gatsby and you can even use props such as activeStyle or activeClassName to add styling attributes to the rendered element when it matches the current URL. Just like how a normal routing component in React behaves. Open blogPost.js file and add this.

Image for post
Image for post

Display all posts on Homepage

Since all of our markdown posts are getting rendered into HTML correctly, the next and previous post feature working too. So let us move ahead and display all the blog posts on the home page. Not the complete posts, but a link to each one.

Image for post
Image for post

Conclusion

We now have a functioning blog!

Image for post
Image for post

Building A Web Or Mobile App?

Crowdbotics is the fastest way to build, launch and scale an application.

Crowdbotics

The fastest way to build your next app.

Thanks to William Wickey

Aman Mittal

Written by

👨‍💻Developer 👉 Nodejs, Reactjs, ReactNative | Tech Blogger with 1M+ views at Medium| My weekly dev newsletter 👉 tinyletter.com/amanhimself

Crowdbotics

The fastest way to build your next app.

Aman Mittal

Written by

👨‍💻Developer 👉 Nodejs, Reactjs, ReactNative | Tech Blogger with 1M+ views at Medium| My weekly dev newsletter 👉 tinyletter.com/amanhimself

Crowdbotics

The fastest way to build your next app.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight.

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox.

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store