Setup This Website with Hugo

March 29, 2019 One minute read

After 2 years with my previous dummy personal website, I was urged to create a better one. After some googling, I made this tiny website using Hugo. Here are some notes for a n00b in front-end like me.

Make sure you download the extended version of Hugo. Otherwise you won’t have support for SASS and SCSS (I have no idea what these are). Just scroll down in the release page and you will find it.
Create a new post with hugo new posts/awesome-post.md.
After you created some post, make sure to modify the draft field to false. Otherwise you will get a 404 in blog and spend half an hour wondering why.
You can use icon from Font Awesome by <i class="fab fa-github"></i>. And always remember that you can embed HTML directly in the markdown. This is a nice workaround if you can not get what you want from markdown.
Use hugo server to start the server. It will automatically detect any changes in the folder and rerender the website.
This tutorial shows how to user Hugo with GitHub pages. Basically they are using git submodule.

I hope this is useful someday.