Static Web Page: Using Hugo, Gitlab, CloudFlare and Forestry.io
A static web page is often HTML files that are 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 domain) 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 for $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 concern (security & seo), great security(subjective) and a supportive community. The problem was still the same, try finding a 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.
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:
I’m a student, I’m an asian. I need free stuff.
Hosting a vps on ramnode was honestly affordable. I was able to use ghost comfortably until the update rolls 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, 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 is my domain name.
Who wants to visit a slow site?
There are many factors that affect a site’s speed. I’ll be eliminating them by shifting it to a static site. Previously, I had no problems with my website and I intend to keep it that way.
I’ve consistently maintained a relative fast site using Cloudflare, and until their free tier caching deteriorates, I will continue using it.
Good job Cloudflare.
All I’m doing is write stuff and get my thoughts out there. The traditional blogging platform is pretty straight forward, 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 free tier is superb.
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.
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.
Download the executable
Add path to executable in environment
Upon installing try calling help to see if it’s correctly installed.
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 login.
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:
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 it accordingly. I spent more time than I should 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 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
- Added Syntax Highlighting (thanks MunifTanjim)