Starting Your Own Developer Blog With Gatsby - Part 2 (Read Time: 10 Mins)
Tags: blogging, webdev, developer
Published: 2018-12-30 07:13:39

---
title: Starting Your Own Developer Blog With Gatsby - Part 2 (Read Time: 10 Mins)
published: true
description: Starting your own developer blog with Gatsby Part 2
tags: blogging, webdev, developer
---

![Photo by Debby Hudson on Unsplash](https://thepracticaldev.s3.amazonaws.com/i/6xxalndla7rc54z8qswz.jpg)

## 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][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
![Developer Blog Workflow](https://thepracticaldev.s3.amazonaws.com/i/tlevhr36dibrri2adcqj.png)

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][3] 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][4] - Hosting of the source code of your blog in a repository
* [Netlify][5] - To host your blog with SSL, DNS enabled
* [Contentful][6] - Management of your blog and stores your content in it

## Project Setup in Local Machine
To start using the [ryanwiemer][3] 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**.

![Menu to access API Keys][7]

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. 

![API Key Details][8]

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

![Netlify Webhook][9]

## 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
* [11 Best Practices for Including Images in Your Blog Posts][10]
* [How to write technical blog posts - talk by Quincy Larson][11]
* [Unsplash][12]
* [gatsby-starter-gcn By ryanwiemer][3]
* [Grammarly][13]
* [Blogging For Software Developers][14]


The original source for this article is at [Starting Your Own Developer Blog With Gatsby - Part 2 (Read Time: 10 Mins)](https://www.maxongzb.com/starting-your-own-developer-blog-with-gatsby-part-2-read-time-10-mins/)

[1]: https://www.maxongzb.com/starting-your-own-developer-blog-with-gatsby-part-1-reading-time-4-mins/
[2]: //images.ctfassets.net/ly2f59p4unnn/3GENcTXuZ2EcKkgySASKu2/3db0eef46f65893b9230a2ec0a582f74/Developer_Blog_Workflow.png
[3]: https://github.com/ryanwiemer/gatsby-starter-gcn
[4]: https://gitlab.com/users/sign_in
[5]: https://app.netlify.com/signup
[6]: https://www.contentful.com/sign-up/
[7]: //images.ctfassets.net/ly2f59p4unnn/1mqYgsNLIQsYMISSM4Ek2e/954661f185a4935a271f4cf96dd8be3b/menu_to_access_API_Keys.png
[8]: //images.ctfassets.net/ly2f59p4unnn/9wjEp4eq3uCI0CoQcYKew/45d0f014b848729a8bdf1feefde3f93b/API_Key_Details.png
[9]: //images.ctfassets.net/ly2f59p4unnn/4qZ6dourLqISi6wiwOSqAa/7d67dc8ea144d0cd8cfae15ea420947d/Netlify_Webhook.png
[10]: https://neilpatel.com/blog/blog-post-image-guide/
[11]: https://youtu.be/YODPgBadj80
[12]: https://unsplash.com/
[13]: https://www.grammarly.com/
[14]: https://simpleprogrammer.com/blogging-software-developers/