How to create a blog using Hugo in 5 steps

I’ve always had the desire of owning a personal website, where I could publish articles that never see the light of day. My gripe with web development had always been with how complicated managing the website becomes. There is also the disadvantage of publishing posts, which had to be done via blogging platforms like Wordpress. What I wanted was a clean mechanism to render my files on the web.

A few months back while reading Paul Stamatiou’s blog, I came across static site generators. There are tons on SSG out there, but I finally settled with Hugo. Unlike traditional websites there is no server-side rendering, no complicated plugin process, no need of databases and no security management. Hugo simply picks your blog files, applies the templates you’ve specified and generates an HTML document. This simplicity allows Hugo websites to load in an instant. All this makes Hugo a great framework for blogging. On top of that Hugo also supports Markdown, which many bloggers prefer to use.

Without further ado, lets get started with building your website:

Step 1: Installing Hugo and all dependencies on your computer

Installing Hugo is very easy. Open your Terminal on macOS. If you don’t have a package manager like Homebrew on your computer(or don’t know what a package manager is), run the following command first.

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)"

Once the package manager is ready, install Hugo:

brew install hugo
hugo version

That’s it, Hugo is now installed on your computer.

Step 2: Create your blog on your local computer

Once you have installed Hugo, the next step is to create a website. Navigate to the folder (using cd command) where you want the website to be located and then run the following command:

cd FOLDER_WHERE_YOU_WANT_WEBSITE
hugo new site WEBSITE_NAME

Step 3: Installing your favorite theme

Thankfully Hugo has tons of free to use themes available here. Ananke is a good choice for beginners:

cd WEBSITE_NAME
git init 
git submodule add https://github.com/budparr/gohugo-theme-ananke.git themes/ananke

Once this theme is installed; this is what your website folder should look like:

.
├── archetypes
│   └── default.md
├── config.toml
├── content
├── data
├── layouts
├── static
└── themes
    └── ananke
7 directories, 2 files

The content folder is where all your articles should be stored. The next step is to tell Hugo to use that theme. Technically, you can install as many themes as you want and then tell Hugo which one to use. echo 'theme = "ananke"' >> config.toml “config.toml” is a very important file, where you can specify the name of your website, website URL and other website configurations.

Step 4: Run website on your local machine and deploy on Github

To make sure the website has been setup properly, run it on your local machine:

hugo server -D

The output of the above command will give your website URL. It should look something like this: “http://localhost:1313/“. Paste this in your web browser, you should be able to see your brand new website.

Now, it’s time to deploy your website on the internet. There are various platforms where you can deploy, but the easiest one is GitHub. Create a new account on GitHub and then create a new Repository with your Github username. So, if your username is anura17, your GitHub repository should be “anuraj17.github.io”

Now, open Terminal on macOS, navigate to your website folder and run the following commands:

hugo
cd public
git add . 
git remote add origin https://github.com/USERNAME.github.io.git
git commit -m "First Commit"
git push -u origin master

Open your web browser again, and you should be able to view your website. Simply paste “https://USERNAME.github.io/”.

Step 5: Adding blog posts to your website

This is the last step, and probably the easiest. Once you have complete steps 1 to 5, you can keep repeat step 6 to publish new blog posts. First, create a new blog post using the following command:

hugo new posts/YOUR_BLOG_1.md

Now, there is no need to use the Terminal to create a new blog post. You can simply head over to the “content/posts” folder and create a new post. Make sure to specify the title, date if you do that.

Once you have created your blog post, you can view the blog post on your local machine first before pushing it to the website:

hugo server -D

You can now publish it to the web:

hugo
cd public
git add .
git commit -m "MESSAGE"
git push -u origin master

You can add as many articles as you want, simply repeat step 6. If you wish to delete any article, simply delete the file from the “content/posts” folder and follow step 6.

That’s it, you’ve just made a website for free. Congratulations! You can explore newer themes, and add more details to your website. There are great articles like this one by Chuxin Huang where you can explore more. Share your work in the comments, I would love to check it out 😃.