Max Ong Zong Bao

Posted on Dec 30, 2018

Starting Your Own Developer Blog With Gatsby - Part 2 (Read Time: 10 Mins)

#blogging #webdev #developer

Introduction

In the last post, I touched on the various steps on getting started from why you should start to set aside time to write your blog post.

If you had just stumbled across this article, go to part 1 to start creating a blog.

For 2nd part of the series, I will cover from my workflow of how I publish my articles to hosting your blog on Netlify.

Developer Blog Workflow

Here is my current workflow where I publish my weekly blog post. You can adapt it to suit your needs when to help you in getting started.

First draft and proofreading with Grammarly & Contentful

First, I will write content on Grammarly which is free so that it will provide the first proofread. By checking for my grammar and spelling mistakes when I am focusing on writing my blog post.

Once I am satisfied with my blog post, during the editing phase of my first draft.

I will copy my content into Contentful to add the markdown and photos based upon my blog post template that was saved previously.

Importance of an Images in your blog

Based on the tips of Quincy Larson from FreeCodeCamp that has one of the largest developer focus publication on Medium.

One of the keys to attracting a potential reader to read your blog post is to have a high-quality cover image and images after every 300 words in your blog post.

With a high-quality cover image, a person will stop and click on your blog post because it looks interesting.

Using a beautiful cover image and title especially if you are competing with a bunch of distractions like Twitter, Linkedin, Instagram or Facebook to make your blog post standout.

I source my cover image and other related images for my blog post on Unsplash as it offers a wide range of stock photos for free to be used in your blog post.

Publishing Your Blog Post through Netlify

Once you had published your blog post on Contentful, Netlify will automatically initiate a webhook that pulls your blog source code from GitLab.

To start the process of generating static files which is HTML, Javascript and CSS using Gatsby & GraphQL.

A GraphQL endpoint is created by pulling your content from Contentful for Gatsby to consumes to generate static files.

Choosing Your Blog Template

I would start by choosing an existing Gatsby Starter instead of building it from scratch.

The reason is that getting the ball rolling in creating content for your developer blog is far more important than spending time in building your developer blog from scratch.

Which is why Wix, WordPress or Squarespace are popular for new bloggers.

Requirements of a Starter Blog

There's a bunch of Gatsby Starter website, so I will list down the bare minimum of features a developer blog has to have.

SEO - For traffic to your blog through search engines
Tags - Organising your blog post by tags for ease of reading
Cover image for each blog article - Increase the possibility for your blog post to be read
Syntax Highlighting - So that you can add in code blocks that are easy to follow with syntax highlighting in your blog posts.
Google Analytics - This is important for measuring your amount of visitors coming to your blog.
RSS Feed - for any of your visitors to subscribe to your blog
Contentful - Headless CMS for managing your blog like WordPress

After looking around with the website demos of these starter blogs, I had found that ryanwiemer has all the things I need to get started.

Besides that ryanwiemer provided documentation to allow me to get started using contentful therefore this tutorial will be using his starter blog.

Account Creation for Services

Base upon the workflow above you need to create the following accounts for hosting your blog to get started they are as follows.

GitLabs - Hosting of the source code of your blog in a repository
Netlify - To host your blog with SSL, DNS enabled
Contentful - Management of your blog and stores your content in it

Project Setup in Local Machine

To start using the ryanwiemer project. Enter the following command to create a new Gatsby project.

NPM Install

git clone https://github.com/ryanwiemer/gatsby-starter-gcn.git
npm i

Gatsby CLI Install

gatsby new gatsby-starter-gcn https://github.com/ryanwiemer/gatsby-starter-gcn.git

Contentful Setup

Getting the Space ID and Access Keys

Use one empty space in Contentful, click on API Keys under Settings.

In API Keys, click an api key called Example Key 1. Inside the API Key details, copy both the Space ID and Content Delivery API - access token as shown in the screenshot below.

Setup Contentful With Your Gatsby Project

Now with both the Space ID and the Content Delivery API - access token.

Go to your root directory and enter the following command below to set up your Contentful API connection as a GraphQL endpoint.

npm run setup
gatsby develop

Netlify Deployment From Git

With Netlify it will provide automated re-deployment of your project from Gitlab using the repository's **master **branch.

Whenever there are changes made to your project, be it your Contentful contents or Gitlab project changes.

Import GitLab Repository to Netlify

To enable this to work on Netlify, you need to connect GitLab and import your repository which contains the Gatsby project you would like to host by following the steps below.

Navigate to Deploy and select Trigger deploy to manually deploy and publish your website on Netlify from the repository's master branch.

Adding Webhook on Contentful

To enable the webhook, go to the Contentful website. Then proceed to the Settings and click on Webhooks.

Once redirected to the webhooks, click on Add Webhook to select the select specific triggering events Netlify rebuilds the entire project.

Adding Custom Domain To Developer Blog

By default, Netlify will provide you with a randomly generated domain which you could use for basic needs.

To take advantage of Netlify's free DNS and HTTP services, you are required to provide a custom domain name you had brought previously.

To add a custom domain on Netlify, select Settings in your website that is hosting your Gatsby project and then navigates to the tab called Domain Management click the Add Custom Domain button.

Netlify provides a step by step guide to add the custom domain that you had brought. Domain activation takes about 24 hours to be activated.

Conclusion

I hope that you have launched your developer blog with this 2 part series. Please do drop an email to me at steelwolf180@gmail.com if you encounter any problems while launching your blog.

References & Link

The original source for this article is at Starting Your Own Developer Blog With Gatsby - Part 2 (Read Time: 10 Mins)

DEV Community