Renegade Ranking Engine #3

Getting setup with Hugo, Github, and Cloudflare

Please note: This is the final and up to date version of this document.

Requirements

This tutorial required that you have basic knowledge of how to use the command line/terminal on Windows or Mac. It is not hard to learn, and there are lots of YouTube tutorials that will teach you the basics such as changing directories.

This is all that you need to get through this tutorial and it should take no more than ten minutes to get to grips with the basics.

Get Started

In this article, I am going to go through all of the steps needed to build The Renegade Ranking Engine and make your first post. In future articles, I will show you how to optimize it, set up a content management system, get the ultimate storage solution for free, manage affiliate links, etc. (and as always… For free, and in the cloud, and YOU control it). But first I am going to say this…

Do Not Panic

This might look like a technical pain in the ass but don’t worry, I will go through this step-by-step, and if you have a problem please let me know and I will attempt to solve that and post about it here.

That being said, this should work for most people if you go through it and have a reasonably updated computer with Windows 10+ or a recently updated version of OS-X. If you are on Linux then you will be good to go ;)

---

Required Accounts

You will need to signup to GitHub and create a CloudFlare account.

GitHub is where you will be storing your files in a repository (don’t worry, you don’t need to be a software developer)

Cloudflare is where you will be hosting your site for free.

GitHub
Cloudflare

Once you have created your account, move on to the Required Software section below, we will get to setting up GitHub and CloudFlare soon.

---

Required Software

You are going to need a couple of pieces of software to get all this going. All of which are free. You will be creating content and editing files in Visual Studio Code, using GIT to work with your repository, and Hugo to create your site.

Download Visual Studio Code
Download Visual Studio Code Git Extension
Download GIT
Download Hugo

Now depending on how much of a geek you are, you either clicked on the Download Hugo link above and went ok or if I am guessing right, it might have been more WTF?

I am going to show you step-by-step how to eat this frog and get Hugo installed.

On the Download Hugo page, you will see something like this…

Click on the Show all 23 assets option. Then choose either the 32 or 64-bit Windows download. If you don’t know which to choose then read this.

Create a folder called Hugo and put the download zip file in the folder, and extract the contents. You will see 3 files. Now create a folder called bin in the Hugo folder, and move the hugo.exe into it.

Now we are going to put Hugo in the PATH which basically means that you can run the command from anywhere.

The easiest way to do this is open the command line and type the following

set PATH=%PATH%;C:\Hugo\bin

(change to wherever you created your folder and what you called it)

In the command line, you should now be able to type

hugo version

and it should show you the version you have installed. If not, you will need to reboot your machine.

Once we have all the basics set up then you won’t need to touch the command line again as we will be managing everything inside Visual Studio.

Installing Hugo On A Mac

On the download hugo page you will need to download the latest Darwin version of Hugo. As of writing the article, it is:

hugo_0.111.3_darwin-universal.tar.gz

I am going to assume you have downloaded the archive and extracted it to a folder, now you need to open a terminal window and navigate to the Hugo folder you just extracted. If this was in your downloads folder you would type

cd ~/Downloads

Then into the folder that was created,

cd hugo_0.111.3_darwin-universal

you then need to copy the hugo file to your binaries directory.

cp hugo /usr/local/bin

and then to test it is working type the following

hugo version

It should display a version number. That’s it, you are good to go.

Setting Up CloudFlare

At this point, I am assuming you already own a domain that you plan to host your blog on. This guide will show you how to set up an existing domain on Cloudflare. If you are planning on buying a domain, then you can purchase one inside Cloudflare and all of these steps will automatically be done for you.

The domain I am going to use for this example is: