This is the first post from a series of three where I present an option to build a blog site. Hopefully, this series will give you some hints on what it takes to build a simple site/blog.

  • Although my goal is to code the blog site in GO, I want to give a try to this wonderfull tool, Hugo. If you don’t have time to code and need a full featured static site this is one of the best solution out there in the market. However in the next posts will dive more into code.

Build

What is Hugo?
Hugo is one of the most popular open-source static site generators. With its amazing speed and flexibility, Hugo makes building websites fun again. Hugo is written in Go with support for multiple platforms, but you don’t need to install Go to enjoy Hugo.

The best part is that you don’t have to know any programming languange to build your own blog site. All files are generated by Hugo and copied into public folder. Once done, the site is ready to be hosted on your local or cloud infrastructure.

Install Hugo

Hugo can run and be installed on multiple platforms. The install process is very well covered at: https://gohugo.io/getting-started/installing. I’m using Linux so I opted for a snap package. Extended option is needed for Sass/SCSS support but can be opted out by removing the flag.


$ snap install hugo --channel=extended

Create the site


$ hugo new site site_name

Add a theme. Plenty to choose from, but I’m sticking with Future Imperfect Slim, which is a modern and clean theme.


$ cd themes/
$ git clone https://github.com/pacollins/hugo-future-imperfect-slim.git
$ cd ..

Most themes comes with an exampleSite, where you can check out the structure and more important has a config.toml configuration file which can be copied and tweaked for your needs.


$ cp themes/hugo-future-imperfect-slim/exampleSite/config.toml .

To create the content is simple as well. The markdown files are created within content folder and can be edited with your favorite text editor. I would recommed something that understand markdown files. If you are not familiar with editing markdown, this Markdown Cheatsheet can help you get off the ground.


$ hugo new about/_index.md
$ hugo new blog/examples.md

The changes can be seen in real time, Hugo has a builtin http server. It will build the site and make it available at localhost:1313.


$ hugo server

Lastly, hugo command builds the site by generating the html files and copy all the static content, including images, css & js in the public folder.


$ hugo

Deploy

Host the site on Google Cloud Storage

Finding a hosting service it is trivial these days, I believe most of the Big Cloud providers offer several options to host a site. Definitely, I searched for free hosting alternatives to host my small project. I opted for Cloud Storage from Google Cloud Platform. As part of the GCP Free Tier, Cloud Storage provides resources that are free to use up to specific limits.
A valid GCP account is needed and the Web Console or Cloud SDK can be used to setup the environment. The configuration and instalation of Cloud SDK is out of the scope of this tutorial, however here are some thoroughly Quickstarts to start with.

Caution: Only non-secure HTTP sites can be hosted on Cloud Storage. However to serve custom domains over SSL, you can use Cloud Storage bucket as a load balancer backend, use a third party Content Delivery Network or serve the static website content from Firebase Hosting instead of Cloud Storage which I plan to explain in last section of this tutorial.

Prerequisites:

  • Verify the ownership of the domain in case you want to create a bucket that uses the domain name.
  • Create the CNAME record. A CNAME record is a type of DNS record. It directs traffic that requests a URL from your domain to the resources you want to serve, in this case objects in your Cloud Storage buckets. I’m using GoDaddy and I have added a Type: CNAME , Name: www, Value: c.storage.googleapis.com as a new dns record.

Below are the steps to set it up but I would recommend to read the Official Guide, which detail the steps.

Create the storage bucket where the site will be hosted.


$ gsutil mb gs://www.your_site_name.com

Upload site’s files, in this case, hugo generated public folder.


$ gsutil -m rsync -R public gs://www.your_site_name.com

As it is a public site and to allow everyone’s acces to site content the objects within the bucket have to be publicly readable.


$ gsutil iam ch allUsers:objectViewer gs://www.your_site_name.com

Define the site entry point and error page. Assign an index page suffix, which is controlled by the MainPageSuffix property and a custom error page, which is controlled by the NotFoundPage property. Assigning either is optional, but without an index page, nothing is served when users access your top-level site, for example, http://www.your_site_name.com.


$ gsutil web set -m index.html -e 404.html gs://www.your_site_name.com

Host the site on Firebase Hosting

Firebase is a comprehensive mobile and web development platform, it was acquired by Google and it is tighly integrate with Google Cloud PLatform. This platform provide many tools to developers build the app fast, without managing infrastructure. If you are familiar with IaaS, PaaS terminologies, Firbase is Backed-as-a-Service (BaaS) which provide an API and tools for different computer languages to integrate with the application backend.
I switched from GCP Storage to Firbase Hosting because it offers Free SSL Certificates for custom domains.

Log in to the firebase console and create a new project for hosting the static site created with Hugo. Follow this procedure to connect your project with a custom domain. It is similar with the one above where you are asked to validate the domain and create the DNS records, except that this time the A records will be pointed to Firebase Hosting.

Node.js has to be installed on the machine. Once installed use node package manager to install firebase-tools.


$ npm install -g firebase-tools

Login to firebase from cli and initialize the project. You have to be in your main hugo project folder. In the init process, select the Hosting option then select your newly created firebase project. It asks to select directory that contain the assests to be uploaded, the default option public is fine with us. Select Yes to configure as a single page app and No to overwrite the index.html file.


$ firebase login
$ firebase init

The site can be tested locally by running firebase serve command


$ firebase serve

and easily deployed to cloud using deploy command.


$ firebase deploy

Conclusion

It takes only a couple of hours to setup everything, starting from site creation to cloud deployment. It allows you to quickly be up and running and focus on blog content creation. Although you have to be comfortable with some cloud concepts and technical enough to be able to install the applications, you don’t have to know any programming languages. This is fine, but if you need a custom blog site check out Part 2 and Part 3 of this series.