How to Create Personal Blog Using Hugo within a day

Why I choose Hugo?

Why Hugo instead of Jekyll?

FYI, Jekyll is another popular static site generators as well and it is equally good with Hugo. Hugo is using Go Language while Jekyll is using Ruby language.

I choose Hugo simply because since I don't know both Ruby and Go. So it might be doesn’t matter for me.

But if you really need a strong justification before you start. This article provides you a very good comparison between both.

Final Product

Before we get started, let me show you the final product of my blog so you would know what to expect. There are mainly 2 sections for my blog. There is About Me and Posts that I wrote.

Prerequisite

There are 2 prerequisites before we can start creating the blog using Hugo.

1.) Hugo installation is required. You can install it easily by following the quickstart guide.

2.) Pick a Hugo theme for your website. I chose Personal Web theme for my own blog. You can select yours via Hugo Theme.

Step by Step Guide

Init Phase

1.) Create a base hugo project directory by running the command below.

hugo new site personal-blog

2.) Init personal-blog as a git repository.

cd personal-blog git init

3.) Change directory to personal-blog/themes.

cd themes

4.) Add the theme that you favor

You can either use git submodule

git submodule add https://github.com/bjacquemet/personal-web.git

or git clone

git clone https://github.com/bjacquemet/personal-web

Step 5 and 6 is optional if you are familiar with toml format. But I highly recommend you to follow the step so you can easily follow the guide.

5.) FYI, I am not familiar with toml file syntax. Luckily, Hugo did support json fomat too which I am more familiar with. Thus, I rename the config.toml to config.json.

# Change directory to personal-blog foler 
cd .. 
# Rename the config.toml to config.json 
mv config.toml config.json

6.) Change the content in config.json to json format. Replace all with the following

{ 
"baseURL": "http://example.org/", 
"languageCode": "en-us", 
"title": "My New Hugo Site" 
}

7.) Now, in order for you to able to use the theme, you’ll have to do some update on your config.json. Add the theme name into the "theme" key.

{ "baseURL": 
"http://example.org/", 
"languageCode": "en-us", 
"title": "My New Hugo Site", 
"theme": "personal-web" 
}

8.) Now that you’ll have your basic website. You can run your website locally and

hugo server

9.) Now you visit your website at localhost:1313. Your website should have a default look like the picture below.

Update Phase

In the previous Init Phase, we have successfully set up our personal blog site using the theme. However, this is just a default website templates. We have customized the value so that this website belongs to your own. In this phase, I will show you how to change the profile picture, name and etc.

This might be a bit unbelievable, you only have to do changes in config.json and the website will update according to the value you defined. Let's continue to read the article to see this.

Change Profile Picture

We will put all of the pictures under personal-blog/static/images directory.

1.) Let’s create an empty directory named images inside static folder.

cd static/ mkdir images

2.) Copy your profile picture into the images directory. I named my profile picture as profile.jpg

3.) Update the config.json like below and refresh your browser. You shall see the profile picture is updated.

{ 
 "baseURL": "http://example.org/", 
 "languageCode": "en-us", 
 "title": "My New Hugo Site", 
 "theme": "personal-web", 
 "params": { 
  "sidebar": { 
   "logo": "/images/profile.jpg" 
  } 
 } 
}

WAIT !!! Hold the horses. You must be thinking about how I actually know what key/value to update in the config.json.

Firstly, let’s use inspect in Chrome to found out the html element.

Now we know the img element is actually a child of a div with class named logo-container. Let’s search logo-container in your code editor.

You shall see sidebar.html and the image src is actually value is actually

{{ .Site.Params.sidebar.logo | default "images/edna-west" | absURL}}

It means that it will use the default image in the templates until you defined a path to your images in the variable .Site.Params.sidebar.logo. This is how we found the variable key and update their value according to our preferences.

Change Introduction Text

Now, let’s proceed changing some introduction too. Let’s try changing the introduction text.

• Welcome, I a'm John Doe to Hi, I'm Tek Loon
• This is my personal website to This is where I share my experiences & work

Try it out and see whether you could identify the key/value to update in config.json.

Your config.json should look like this.

{ 
 "baseURL": "http://example.org/", 
 "languageCode": "en-us", 
 "title": "My New Hugo Site", 
 "theme": "personal-web", 
 "params": { 
  "sidebar": { 
  "logo": "/images/profile.jpg" 
  }, 
  "intro": { 
   "main": "Hi, I'm Tek Loon", 
   "sub": "This is where I share my experiences & work" 
  } 
 } 
}

Conclusion

Overall, I am quite satisfied with Hugo as it enables bring up my personal blog within a day. All this while I am procrastinating as I am thinking it is a lot of hassle.

There are much more articles which I will write soon related to my personal blog.

• How to deploy & host my personal blog created by using Hugo FREE!!
• How to easily write your articles and update to the personal blog seamlessly.

I hope you enjoy reading this article and learning something from it.

Thanks.

Originally published at https://tekloon.netlify.com on May 26, 2019.