How I Built This Blog#

Introduction#

I wanted to build a website to document all the projects I work on and all the new things that I am learning. Something like a personal documentation website that I can refer back to. Written for me by me.

Sounds like I should just use a Note taking app like Obsidian? Yes, but I’d like it to be publicly accessible both so I can share what I do with future employers and for the small chance that something that I write here could be helpful to someone doing a similar issue.

We’ve all had the experience of trying to do a new project, or following a tutorial and running into road blocks that no one else has documented. I’d like to be able to share the (many, usually self inflicted) roadblocks I run into and how I got around them to hopefully make it easier for others to complete their own projects.

Project Overview#

For this project, I wanted a cheap and simple website that I could use as a blog. The main constraints were the webhosting needed to be free or extremely cheap and the process of adding content to the website needed to be easy and fast. I like iterating often, so being able to make a change to the content quickly is essential.

After a lot of Googling I decided on using the following solutions:

  • Domain Name: Name Cheap

    • It was the cheapest option and I had prior experience

  • Content Management System: Hugo

    • Easy to use, lightweight, extensive tutorials, and works well with most web hosting services.

  • Web Host: Cloudflare

    • Completely free for statically hosted websites, lots of documentation, works well with Hugo

  • Code Repository: GitHub

    • The standard

At the end of this project, we will have a website with a custom domain name, hosted for free on Cloudflare, using Hugo to handle the styling and content, and the code will be stored in GitHub.

Prerequisites:#

You may want to go ahead and create accounts for the following sites. You could wait until we reach them in the guide, but doing it first may make the process easier for you.

  • A Cloudflare account

  • A Github account

  • A Name Cheap account

Step 1: Registering the Domain Name#

The first step of this journey was registering the domain name that I was going to use for this website. I decided that I’d just like to use my name as the domain as an easy way to be able to share it. Unfortunately, I have one of the most common first and last names being James Baker. So I wasn’t able to get JamesBaker.com. But, James-baker.net isn’t a bad URL at all.

I decided to go with NameCheap.com for the domain name since it was the cheapest, and I have experience using the site from one of my college projects.

For anyone that needs help with registering a domain name using Name Cheap, here are the basic steps:

  1. Go to NameCheap.com

  2. In the search bar in the center of the screen, type in what you want your URL to be and hit “Search”

    image.png

  3. Most likely your first choice will be taken, so either go with an alternate domain suffix (.com, .net, .org) or brainstorm a new URL.

  4. Once you find one you like, add it to your cart and go to check out.

  5. On the checkout page, there are going to be a bunch of other options to choose from. Unless you know you need them, I recommend just getting the domain name. You don’t need to purchase web hosting through Name Cheap as we will be using a free hosting service later in the guide.

    image.png

  6. When you purchase the domain, you’ll need to set up or log into your account.

  7. Once you’re registered and checked out, congrats! you now have a domain name that you can use to point towards your website!

Step 2: Installing Hugo and Hosting on Cloudflare#

Here I mainly followed the instructions in the Hugo Quick Start Guide and the Host on Cloudflare Guide.

I highly recommend following the Hugo quick start documentation for this. Their documentation is detailed, easy to follow, and provides explanations of the commands you need to run. Rewriting it here would provide nothing more.

The only notes I will make is that when you reach the theme and customization section, you can search for your own themes here: https://themes.gohugo.io/

The theme that I chose for my website is Terminal by panr since it is simple, sleek, and easy to customize.

After following the Hugo quick start guide, open the Host of Cloudflare Guide above and begin to follow those steps. Again, these guides are very good. The only issue I had when creating my site was getting the custom theme I chose to build correctly. This was just an issue with some of the configuration files.

I did do one customization of the Terminal theme. I created an outline box for each post to make them easier to differentiate.

I did this by adding

<div class="posts framed">

where the content is loaded in the file \Project_Root\themes\terminal\layouts\_default\index.html and adding

.framed {
  border: 5px solid var(--accent);
  padding: 20px;
}

.framed *:first-child {
  margin-top: 0;
}

.framed *:last-child {
  margin-bottom: 0;
}

to the file in \Project_Root\themes\terminal\assets\css\post.css

Conclusion#

Overall, I am very happy with the site and I am excited to start using it to post about the various projects I want to work on.

I wish I would have written this guide along the process of creating the website to better document the process I went through, but that is something I will improve on in future posts.