Build Your First Blog in Hugo

Hugo?

It’s a fast and static website generator written in the Go language. Websites built with Hugo can be hosted anywhere from GitHub Pages to Amazon S3 without any database or other language dependencies.

First I started to use Hugo is for my Malayalam write up a blog wizbi tales (Malayalam is a language spoken in Kerala, India), After the initial learning curves, I loved it for simplicity and performance. And when I started this blog itself I didn’t think twice.

Okay, Now let’s start. the below section shows how to install Hugo in Windows and develop a blog in it.

Create Your Directories

1. Open Windows explorer
2. Create a new folder C:\Hugo, you can create anywhere the same.
3. Create a subfolder in the Hugo folder C:\Hugo\bin

Install Hugo

1. Go to Hugo releases (https://github.com/gohugoio/hugo/releases/) and download the latest Hugo executable.
2. Extract all the contents to your ..\Hugo\bin folder which is created before.
3. After that you need to open the command prompt and add hugo.exe executable to your PATH variable, for that use the command setx PATH "%PATH%;C:\Hugo\bin". Remember to open the command prompt as an administrator.
4. Else you can go directly to the Environment Variables from the start menu and add the C:\Hugo\bin in your PATH variable.
5. To check the installation is a success you can type hugo help in your command prompt, you should see an output start like

Create a Hugo Site

1. Go to your directory (let’s assume its as HugoSites) where you want to create the hugo site and run the command hugo new site newblog.
2. In the HugoSite now you should have a directory ..\HugoSites\newblog

Pick a Theme

In Hugo, there is no default theme so you should select your own from Hugo Themes. Here I am going to use Beautiful Hugo, it’s my personal preference, you can choose whichever you want.

You can go to the GitHub and download the theme (https://github.com/halogenica/beautifulhugo/archive/master.zip), you may avoid the cloning from GitHub as you are sure you needed to tweak it later. So after downloading, unzip it into the theme folder .\HugoSites\newblog\themes

After that copy the page and post folder from path (..\themes\beautifulhugo\exampleSite\content) paste it to the content folder into \newblog\content.

Modify Configuration

In the exampleSite folder there is also a config file, copy the same and replace it with the existing config file in your root folder. There are a lot of parameters in the config file, but you don’t need to modify any of them now. If you need you can check in later.

Make sure that the extracted folder name as beautifulhugo which should be same as the parameter theme = "beautifulhugo".

Our Hugo blog is almost ready, to see the same in browser run hugo serve in command prompt.

Open the browser http://localhost:1313/ from the browser and see the site live.

Create a post

In the browser you can see a list of blog post which is you copied from the content folder in exampleSite in the themes. You can edit the markdown files from content folder ..\newblog\content\post or add a new one for yourself.

lets go to the first post and edit the contents, you can see the changes reflecting your browser.

After the save, Hugo will automatically update with the new content.

For creating a new post create a new markdown file with .md extension and input your posts. For modifying the title, subtiltle, date etc you need to edit the Front Matter. By this way you can add more posts in your blog and create more content.

If you want to modify your webiste looks modify the css files from static folder inside themes folder.

You can see the header details from head.html from partials folder. And also the templates for the webiste is built with is inside layout folder. Hugo using Go templates, you can check the detals from here as it is nicely explained.

Remember to change the structure you need to edit the files in layouts folder and to change the css,js or images you have to go to static folder.

Don’t bother about the looks now, make your content first, you can tweak the styles later.

Thank you

I hope this little tutorial give you some guidance in installing Hugo and creating a blog in it. After making some contents you can go the offical documentation of Hugo and learn more about the same.

Keep coding.