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.
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, 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.
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.
Once you had published your blog post on Contentful, Netlify will automatically initiate a webhook that pulls your blog source code from GitLab.
A GraphQL endpoint is created by pulling your content from Contentful for Gatsby to consumes to generate static files.
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.
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.
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
To start using the ryanwiemer project. Enter the following command to create a new Gatsby project.
git clone https://github.com/ryanwiemer/gatsby-starter-gcn.git npm i
gatsby new gatsby-starter-gcn https://github.com/ryanwiemer/gatsby-starter-gcn.git
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.
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
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.
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.
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.
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.
I hope that you have launched your developer blog with this 2 part series. Please do drop an email to me at firstname.lastname@example.org if you encounter any problems while launching your blog.
- 11 Best Practices for Including Images in Your Blog Posts
- How to write technical blog posts - talk by Quincy Larson
- gatsby-starter-gcn By ryanwiemer
- Blogging For Software Developers
The original source for this article is at Starting Your Own Developer Blog With Gatsby - Part 2 (Read Time: 10 Mins)