Static Web Page: Using Hugo, Gitlab, CloudFlare and Forestry.io

A static web page is often HTML file that is served as it. It means that whatever is uploaded is displayed. No logic or any other server-side codes.

Those who have been following me know that I changed my blogging platform a couple of times. I’ve used Tumblr, Ghost, and just before migrating, WordPress. I’m someone who hates change but ironically every time I changed or moved to a new platform something was missing.

Tumblr was free(and had support for custom domains) but had tons of additional analytic scripts which makes your site clunky.

Ghost was great, lightweight, had an excellent editor, and great in-built seo, however, the hosting was expensive at $19/month, and as a student that wasn’t feasible. I self-hosted ghost using this script but whenever there is a new update, I’ll have to go through the process of backing up my blog, wiping my VPS, and reinstalling the platform using the script.

WordPress is still considered to be the best blogging platform for those who are starting out. It has an amazing plugin system that takes care of most of a blogger’s concerns (security & SEO), great security(subjective), and a supportive community. The problem was still the same, try finding cheap hosting for WordPress. Even shared hosting isn’t sustainable since this blog isn’t monetized (and I’m still a student).

I’ve literally run out of a good blogging platform that caters to my need.

Considerations

Before this migration, I had performed some serious research and decided that the current setup was best for me.

Here are some of the considerations:

  • Cost
  • Speed
  • Workflow
  • Future-proof

Cost

I’m a student, I’m an Asian. I need free stuff.

Hosting a VPS on a ram node was honestly affordable. I was able to use ghost comfortably until the update rolled in (they are currently working on a CLI update feature).

Hosting WordPress is a HARDCORE business. I mean seriously. Google “WordPress hosting” and you will be flooded with options with different reviews. My previous host was Siteground and I have no complaints with their service. This blog hosted on it was fast, the user interface was simple and navigable, and overall a great host. The cheapest/smallest plan cost $3.95/month(annual subscription) for the initial purchase; on renewal, it jumps to $9.95. That’s a 2.5x multiplier! It’s only worth it if you manage to monetize your site within that one year.

At this point, the only thing that I want to be paying for is my domain name.

Speed

Who wants to visit a slow site?

There are many factors that affect a site’s speed. I’ll be eliminating them by shifting them to a static site. Previously, I had no problems with my website and I intend to keep it that way.

I made a review on Cloudflare a while back and it still stands true that they still provide amazing services for free. Yes, you heard it. HTTPS/2, CDN caching, asynchronous javascript, and stunning analytics all for free(this is not an ad).

I’ve consistently maintained a relatively fast site using Cloudflare, and until their free tier caching deteriorates, I will continue using it.

Good job Cloudflare.

Workflow

All I’m doing is writing stuff and getting my thoughts out there. The traditional blogging platform is pretty straightforward, create a new post using the GUI and click on publish to get your words out.

However, I’m using a Hugo, a static site generator, the usual workflow using a static site generator would involve using the terminal and a plain boring text editor. Yuck.

I’ve decided to use Gitlab pages with Hugo, and Forestry.io for editing.

Gitlab pages is similar to GitHub pages, the former is my choice as they offer unlimited private repository.

As for editing, Forestry.io is compatible with both Gitlab and Github In addition, they recently received some funding (suggesting further development). And most importantly, their support even for the free tier is superb.

Future-proofing

I’ve done two major migrating, Tumblr → Ghost, Ghost → WordPress. It was time-consuming and outright unproductive. In the future I might go back to Ghost, hence the future-proofing. I need to be working with a platform that supports markdown.

My setup is independent of each other and I’m able to swap them out anytime without affecting the setup.

Hosting DNS CDN Platform
Gitlab Cloudflare Cloudflare Hugo

Migrating to Hugo

The migration to Hugo was a pleasant one, using this free WordPress plugin that does a decent job.

We first have to install Hugo, and I must say they have amazing documentation on how to get it done. My Hugo setup was working in literally minutes.

It’s similar to installing Python on windows.

  1. Download the executable
  2. Add a path to the executable in the environment

Upon installing try calling help to see if it’s correctly installed.

hugo help

Once Gitlab is correctly installed you can create a new site using:

hugo new site blog

I used this video as a quick start-up. A word of advice, when using a static site generator remember that it is a generator and you are passing the configuration to Hugo(in this case) to generate the site to your liking.

Uploading to Gitlab

Create a new repository by heading over to https://gitlab.com and logging in.

Click on the + sign and click “New Project”

Set the global variables of git

git config --global user.name "Edric"
git config --global user.email "[redacted]"

Clone the blog repository that we just created locally

git clone https://gitlab.com/[user]/blogexample.git

Play around with Hugo and make sure that the generated site is what you expect because when we upload these files and config to Gitlab, they will be the ones building your static site.

Serve the static site locally using:

hugo server

Now, push the project back to Gitlab

git add --all
git commit -m "initial upload"
git push origin master

Almost immediately after you push the files, Gitlab’s pipeline will start building your site. Pay attention to the errors and fix them accordingly. I spent more time than I should have here simply because I was going after the spray and pray methodology instead of reading the error.

Set up Cloudflare

Gitlab made a very detailed article on doing so https://about.gitlab.com/2017/02/07/setting-up-gitlab-pages-with-cloudflare-certificates/. Pay special attention to Step 4 in the guide.

Forestry.io

Forestry.io is incredibly easy to use. Just head over to https://forestry.io/docs/getting-started for a tour, and if you require any additional help (I doubt so), chat with them using the chat feature.

Minor touch up



Feedback?