Automating a Gatsby Blog with GitHub and Buddy

Michael Wanyoike

Launching a successful blog or website means your server will need to be able handle traffic that will increase rapidly in the coming months. An effective advertising campaign or a partnership with a content distributor can easily generate 10x more traffic within a very short period of time.

In this article, you will learn how to build and run a static website capable of handling massive amounts of traffic without requiring expensive and complex hosting infrastructure. We will use Gatsby, a static website generator, and Buddy, a continuous integration and deployment platform. I will also show you an effective workflow for publish new posts and updating existing ones using a GitHub repository.

Before we get started, I would like you to show you a great example, Evie Magazine . It runs on the same technology I am going to teach you. Take note of how fast and responsive the site is while clicking links.

Let’s now look at what’s wrong with content management systems:

Why you shouldn’t use Content Management System

The most popular way of creating websites is to use WordPress or an alternative content management system such as Drupal and Joomla. They all work using the same technology: PHP and MySQL Database. A CMS is great for non-technical users looking to start running their own website. It’s easy to use and requires little technical expertise to publish content with it. However, when traffic starts becoming massive, site management quickly spirals out of control.

CMS Issues

The first issue is performance. For every request a visitor makes, two server programs(PHP server and MySQL database) are required to process the request. Under normal traffic, this usually takes a few seconds to process. However, if the website is heavily designed and loaded with plugins, it can take longer. The problem gets worse with high traffic as the server programs struggle to process each request in time.

The second issue is security. Take a minute and visit CVEDetails. This is an online security website that lists vulnerabilities discovered in all kinds of software. You will be shocked to see the number of vulnerabilities found in PHP and SQL databases. To make things worse, there are hundreds of tutorials you can find online that teach users different techniques for hacking a WordPress website. The instructions are simple to follow that even a 12 year old can do it.

Fortunately, there are workarounds and solutions to all these problems. Unfortunately, some of them involve a lot of time and money to implement. Spending money is not a big deal if you can get an issue resolved quickly. But spending time on the same problem all the time will put a serious dent on productivity.

Am sure like most people, you would want to spend more time producing content and not deal with hosting and security issues. To find out how you can achieve that, take a look at the next section.

Introducing Gatsby - Static Website Generator

Gatsby is a free open-source static-site generator based on React. It generates static HTML files using data sourced from markdown files, content management systems or a custom API. Below is an illustration of the setup:

Static Website Workflow

In this example, articles are written as markdown files and saved on a private repository. A continuous deployment system automatically picks submitted markdown articles, and uses Gatsby to convert them into static web pages which are then deployed to a web server. Visitors simply load these static web pages while browsing the website.

The first advantage for static websites** is that page loading occurs instantly as no processing takes place on the server. Hence a single server is capable of serving more requests per second than a PHP server using the same CPU and memory resources. Static websites are also far much easier to scale since there’s no database involved.

The second advantage for static websites is security. There is no plugin, server code or database to exploit on the public web server. There are also no credentials or confidential information stored on the static website. This effectively eliminates the incentive for a hacker to look for ways to intrude your website. In addition, you no longer have to spend time dealing with software patches or troubleshooting security and performance issues.

There are many more benefits I haven’t mention. I believe I have said enough to warrant your attention. In the subsequent sections, I’ll show you how to setup your static website using Gatsby, GitHub and Buddy.

Prepare a Live Hosting Site

The first thing you’ll need to do is to setup an online location to deploy your static website. There are so many online services that allow you to do this such as:

  • Amazon S3
  • AWS Amplify
  • Firebase
  • CloudFront
  • Now
  • Surge
  • GitHub Pages
  • Heroku

You can also deploy to a shared web hosting site which is what we’ll be using for this tutorial. I prefer shared hosting since you get access to more value for your buck e.g. email hosting, FTP, SSH, domain management, free SSL e.t.c. I’ll be using an account I own with FastComet. Any hosting company that gives you CPanel access will do. If you don’t have one, you can get a free web hosting service with CPanel access at Free Hosting.

Once you have logged into your account, and you already have domain name you can use. Perform, the following steps:

  1. Create a sub-domain e.g. gatsby.example.com. (In my case am using gatsby.wallesdevelopers.com)
  2. Create an FTP account that points to your subdomain directory

Create FTP Account - CPanel

Note: For an actual production website, use your main domain. We are only using a sub-domain for the purposes of this tutorial.

You’ll need to save your FTP credentials somewhere which we’ll use during the Buddy pipeline setup. Once you have completed the steps, move on to the next stage.

Gatsby Blog Setup

Assuming you already have Node.js installed on your system, create a new Gatsby blog project using the following commands:

$ npm install -g gatsby-cli
$ gatsby new buddy-gatsby-blog https://github.com/gatsbyjs/gatsby-starter-blog
$ cd buddy-gatsby-blog
$ npm install
$ npm start

The blog we’ve just created is based on a project template created and maintained by the founder, Mathew Kyle. To confirm that it’s working, just open a browser at localhost:8000. If you were to edit any of the markdown files, you’ll notice the changes are instant. Let’s now upload this project to our GitHub repo.

First, go to your GitHub account and create a completely blank repo: buddy-gatsby-blog. Make sure not to initialize any files during the repository creation process.

Create Blank GitHub Repo

Next, we need to clone this repo to our hard drive. Before we do that, there is something you should be aware of.

By default, at least in my case, ssh is the protocol I use to clone repos. In a later section, we’ll be working with GitHub Desktop. Unfortunately, this tool does not play nicely with ssh.There seems to be no easy way of making it work especially on Windows. To bypass this hassle, switch to https during the cloning process.

Upload buddy-gatsby-blog project to your GitHub repo using the following commands. Enter your GitHub username and password when prompted:

$ cd buddy-gatsby-blog
# replace {username} with your GitHub username
$ git remote add origin https://github.com/{username}/buddy-gatsby-blog.git
$ git push -u origin master

Deployment with Buddy

Now that we have our remote repo ready, it’s time to deploy our website. First, sign up for a free account at Buddy. I would recommend you sign up with your GitHub account. This will make it easy to select your project in the next step. We’ll use this platform to automate the process of deploying our static website.

Next, click on New Project. Select GitHub as your Git Hosting Provider then select or type buddy-gatsby-blog under the repository section. Give it a few seconds and you will be presented with an option of creating a new pipeline(React). Click the button and you will be presented with a form for defining your pipeline details. Just enter the following:

  • Name : Build & Deploy
  • Trigger Mode : On push
  • Branch : Single branch - master

Click the Add a new pipeline button. On the next page, we’ll setup 2 actions for this pipeline.

1. Build Action

Buddy is smart enough to detect that we are working with a Gatsby project. Select Gatsby CLI which is a specialized docker container built to run Gatsby CLI command. After you select it, specify the following commands in the bash section:

Buddy Build Action Settings

Click the Add this action command to confirm. You will be taken to the pipeline overview page.

2. Deploy Action

Right below the Execute:gatsby build action, click the plus sign to add a new action. This time select FTP and put in your FTP credentials that you saved earlier. Make sure to select the Source path and Remote path correctly.

Buddy FTP Action Settings

Do note that / in Remote path actually points to the subdomain folder specified during the FTP account creation. not the actual web server root. Click the Add this action button.

Run the Pipeline

The next page should display your primary actions. Click the Run Pipeline button, then hit the Run Now button on the next page. Give it a couple of minutes for the build and deploy process to complete. Once it’s done, open your browser and enter the URL you used to create your subdomain to confirm the deployment was successful:

Gatsby Blog Live Deploy

Now that we have automated the deployment process, let’s now talk about the content management workflow in the next section:

Content Management Workflow with GitHub

Content writers are often non-technical people that you will rarely see open a terminal to execute a command. Luckily, we have GUI tools that will make content management for them a breeze. In my opinion, this workflow is much better and easier to work with than WordPress’ WYSIWG content editors.

First, writers need to learn how write using markdown format. It’s really simple to learn and should not take more than 30 minutes to master it. After that, they’ll use this format for the rest of their life. Next, they’ll need to download and install typora.io, a beautifully crafted markdown editor.

Next, they need to create an account with GitHub. As a repo admin, you should give them access to the buddy-gatsby-blog repo. They should be able to clone the repo, create new branches, and submit pull requests. They should not however be allowed to update the master directly. Only editors should be allowed to merge new articles with the master branch.

Here is an interactive training site that teaches beginners about Git branching. Each writer needs to download and install GitHub Desktop. They’ll need to clone the remote repo onto their hard drive first before they can start writing articles.

An alternative is to install Visual Studio Code which provides markdown editing and GitHub repository management tools all-in-one interface. In the next section, I’ll show you how to create and submit new articles for editors to review.

Creating a New Article

To create a new article, the following steps should be followed:

  1. Using GitHub desktop, while master branch is active, create a new branch e.g. gatsby-post
  2. Open the buddy-gatsby-blog project in Typora. Create a new folder in blog called gasby-post.
  3. Inside this folder, create a new markdown file: index.md.
  4. Write some markdown content. You need to specify front matter section at the top. Here is a sample:

     ---
     title: "Gatsby Release 2.0
     date: "2019-07-25"
     ---
     <put content here>
    
  5. After saving the file, go to GitHub desktop and commit the new changes.
  6. Next click the Publish this Branch button.
  7. Next, click the Create Pull Request button. This is basically a formal request for the editor to review the draft and merge the new branch with master. A web page will open where the writer will confirm the pull request submission.

And that’s how a writer can author and submit a new article for the Gatsby blog. It’s now the editors turn to review the draft.

Reviewing a Draft and Publishing it

The responsibility for reviewing a draft should be an editor or another writer. It’s often hard for an author to critique their own work objectively. Hence, someone else needs to check their work. The review process goes as follows:

  1. The editor locates the submitted Pull Request on either GitHub desktop or GitHub website.
  2. The editor reviews the article and places inline comments using GitHub website review tools for the author to make changes. The author will get notified by email from GitHub to act on those review comments. Sometimes, the review process can be a back-and-forth process between the writer and the editor. The editor can decide to make the changes if they are minor.
  3. If everyone is happy with the article, the editor merges it with the master branch.
  4. This triggers Buddy to perform a build and deploy process. Within a couple of minutes, the new article will appear published on the live site.

Buddy Build and Deploy On Push

And that’s how the process of reviewing a draft and publishing takes place. In the next section, we’ll look at how we can update an article that has already been published.

Updating a Published Article

Updating an article that has already been published is as easy as pie. Do note that only users authorized to push to the master branch can do this:

  1. Switch to the master branch
  2. Locate and open the article in Typora or in your favorite markdown editor.
  3. Do the changes, save and make a commit
  4. Push the new commit to the remote repo

Buddy will pick up the new commit, rebuild the static site and deploy it automatically. Within a couple of minutes, you should see the published article update. Do note that due to browser caching, you may not see it right away. You can perform a hard refresh on Chrome to clear the page cache and see the new state of the article.

Summary

As you can see, setting up and running a static blog site is quite easy and has lots of advantages over a traditional CMS platform. If you want to add features such as contact forms, user logins e.t.c, you’ll need to implement either a local or a third-party service provider that can handle such dynamic interactions for you. For example, implementing a comment system is as simple as integrating with a platform such as Disqus. You do have to be aware that if the more third-party scripts you integrate, the more your static site gets heavier. You should always look for alternatives that will be a win-win for both your online business and your audience. For example, instead of displaying nagging ads on your posts, you can monetize your blog by promoting products and services through affiliate links. This way you give your audience a clean reading experience while still making a ton of money out of it.

While there are still certain limitations on the type and size of websites you can build today using static site generators, those limitations will eventually get solved. It won’t take long when static site generators become the dominant technology for building new sites.

  Tweet It

🕵 Search Results

🔎 Searching...

Sponsored by #native_company# — Learn More
#native_title# #native_desc#
#native_cta#