Preface

Earlier this week I decided to start a blog. I was wondering how I would actually go about building a blog since there are so many options out there. When choosing a framework, the properties I was looking for were portability, usability, and data ownership.

There are lots of blog creation tools on the scene and being an avid go user I had heard a lot about hugo. Hugo is a static site generator written in go that can convert markdown into static sites both locally and live at blazing fast speeds. This means I can write my blogs in a minimal text format that Hugo can then convert into a rich media format. Since I’m writing my posts in text files, I can also version and track the files that build the site easily using git. I can also store and access these files from anywhere in a remote git repository such as Gitlab.

When I began to think about hosting my blog, I wanted to use Amazon Web Services. In going with AWS, you get a well supported cloud based hosting platform that allows you to host your own domain for not a lot of money per month. Not to mention you can use AWS Amplify to automate the build and deployment of your site when changes to your blog are uploaded to you git repository. I’m not a big time blogger just yet, I decided to go with something free instead.

While I was setting up the Gitlab repository for this blog, I stumbled upon the free hosting I needed with Gitlab Pages. Gitlab can build and deploy a Hugo blog automatically if you’re willing to accept that your blog url will be <my-cool-username>.gitlab.io. For now the benefits outweigh the costs, so without further preface let’s figure out how to set up a Hugo blog with Gitlab Pages.

Tutorial

I am basing this tutorial mostly off of the instructions provided in the Gitlab Pages Hugo template README. The steps outlined here just include more detail for anyone might be new to Gitlab. Throughout this tutorial I will be using my-cool-username in place of a username but you definitely should use your own. This tutorial also assumes that you aren’t familiar with using git, so for git experts just bear with me.

  1. Gitlab sign up
  2. Go to https://gitlab.com/projects/new#create_from_template to create a new project from a Hugo template
  3. Pick the hugo template hugo image template
  4. Name your project my-cool-username.gitlab.io and click Create project create project
  5. Go to https://gitlab.com/my-cool-username/my-cool-username.gitlab.io/-/edit/master/config.toml and change
    "https://pages.gitlab.io/hugo/" config.toml before to "https://my-cool-username.gitlab.io" config.toml after
  6. Scroll to the bottom of the page, write a commit message if you want, and then click Commit changes commit chagnes
  7. Go to https://gitlab.com/my-cool-username/my-cool-username.gitlab.io/-/pipelines to view the progress of your blog building automatically. building site
  8. Go to my-cool-username.gitlab.io to view your new blog!

Creating a First Post

  1. Make sure you have git installed https://git-scm.com/book/en/v2/Getting-Started-Installing-Git
  2. Make sure you have Hugo installed https://gohugo.io/getting-started/installing/
  3. Open up a terminal and cd “change directory” to a place you want to keep your blog files locally such as in your Documents directory or something. If you haven’t used a terminal before I would recommend learning some basics.
  4. Pull down your blog files with git clone https://gitlab.com/my-cool-username/my-cool-username.gitlab.io.git
  5. cd into the root of you blog files directory with cd my-cool-username.gitlab.io
  6. Run hugo server and open your web browser to localhost:1313 to view your blog running locally
  7. Open a new file in your blog folder called content/post/2021-05-22-my-first-post.md
  8. Give it a date and a title (required to index the post with hugo):
---
title: Post the First
date: 2021-05-22
---
  1. Start writing! Each time you save the hugo server will update your local blog.
  2. Once you feel satisfied with your blog you can post it. First add and commit your changes with git commit -am "just finished up my first post". This is the equivalent of saving all the latest changes to your blog files with a message.
  3. Then you can push your changes up to the git repository for the blog to automatically be built and hosted with the command git push orgin master
  4. Go to my-cool-username.gitlab.io to view your latest post!

This should be all you need to get your blog up and running. If you want to know more about all different things that can be configured and changed with Hugo sites here are some links to check out. Happy blogging!