The current other project I am working at is a personal web portfolio which already includes a blog area. But I decided to create a more simple, separate site for my blog as I am planning to document the process while I progress with the 1st project. Blogging the steps will probably be a good idea since I will be expanding more my learning opportunities, more like hitting two birds with a stone.

I decided to go for Hugo. This was suggested to me by a friend so I gave it a try. After watching a few How-To videos for Hugo beginners in YouTube for around 30 minutes, I started building my own Hugo powered personal blog.

I had to set up my blog as fast as I could so I had to use a pre-built Hugo theme. My goal for this project anyway is mainly to set up a blog site. A very simple one, absent all the fancy features of a full blown website.

To set up, the steps are:

Install Hugo

Install Hugo depending on your OS, mine is MacOS. If you are using the same , you may need to install HomeBrew first.

  $ brew install hugo
  $ hugo version

Set Up GitHub Repository

It is probably a good idea to start using git early on as Hugo doesn’t have an interface or app to write the blog on like WordPress and WIX so other than the obvious reason of versioning the code properly, there should be a way for me to pull out the code, update and push in back from anywhere or any machine.

Create an empty repository in GitHub first then clone the repository to your local, the folder with the repository name will be created in the local directory

  $ git clone <git_repository>

Start Building the Hugo Site

From the created directory, create the new site

  $ hugo new site <site_name_same_as_my_repo_name>

A new folder with the <site_name_same_as_my_repo_name> will be created. I simply cut everything inside this directory and paste it outside the folder then delete the now empty directory.

Then push the initial version to GitHub repository

  $ git init
  $ git add -A
  $ git commit -m "Initial Version"
  $ git push --set-upstream <git_repository_url> master

Add Hugo Theme

Select the desired theme available from the Hugo site

  $ git submodule add <theme_git_repository_url>

Edit the config.toml file to add the selected theme

  $ echo 'theme = "<theme_name>" >> config.toml

Most themes once downloaded includes some example contents, you can copy the contents and resources and even the config.toml file to your main project’s directory.

Start the Hugo Server

  $ hugo server -D

Navigate to the new site at http://localhost:1313

Once done, you can now edit the project, I normally would start at the config.toml file and then followed by the contents file (*.md) to customize the site and posts.