Featured image of post How I Made Hugo Blog

How I Made Hugo Blog

Intro

Hey guys, i’ll teach you how to made blog with hugo. First i’ll explain a bit about hugo, Hugo is a fast and modern static site generator written in Go language, so basically you don’t need some back-end code. You just install it, made a content, then generate your html code. Simple enought right. So let’s jump to tutorial.

Specification and requirements

First, i use Arch Linux Distros, the installation maybe a bit differ, but others absolutelly same. Make sure your repository always up to date.

1
sudo pacman -Syu hugo

If you use other distros, you can check a link here Hugo Installation Guide

Tutorial

Okay.. i assume you’re already install Hugo, once Hugo installed, you can create a Hugo sites by running.

1
2
3
hugo new site blog

#replace blog with the name you want

Then go to your site directory.

1
cd blog

So… Next we need template. Find one at Official Hugo Website Here. There are many choices, choose the one you like. For example i choose Hugo.386. Download theme using git.

1
git submodule add https://gitlab.com/maxlefou/hugo.386 themes/hugo.386

If you facing error like this.

1
fatal: not a git repository (or any of the parent directories): .git

Try git init to your main folder. Then run command git submodule again.

Then go to themes/hugo.386/exampleSite. There are examples that you can use.

ExampleSite Folder

Copy all (except README.md). To your main directory. Like this.

Copy all on root folder

Open config.toml. Edit everything you need, if there is anything you don’t need, just mark it with #. The following example.

1
2
3
4
5
6
7
baseurl = "/"
title = "ledleledle's Blog"
#languageCode = "en"
#DefaultContentLanguage = "en"
preserveTaxonomyNames = true
theme = "hugo.386"
...

You can freely customize the information in config.toml files. If you done, lets test the site by running this command.

1
hugo serve

Open http://localhost:1313 in your browser.

Tadaa…!!!

To add new content in your blog, simply running this command.

1
hugo new post/new_article.md

Fill the content as you like, see an example of the writing on content folder that you copied before. Next. I’ll post tutorial to host it on Github Page.

Outro

Well thats it… If you’re facing a problem comments down bellow. See you in next tutorial.

comments powered by Disqus
Writen with ❤️ by Leon
Built with Hugo
Theme Stack designed by Jimmy