How to Create a Blog with Hugo

Hugo is a fast and flexible static site generator, ideal for creating blogs and personal websites. In this guide, you will learn how to set up and publish a blog using Hugo and GitHub Pages.

1. Installing Hugo

If you use Linux, you can install Hugo with the following command:

sudo apt install hugo

For other operating systems, check the official documentation.

2. Creating the Project

Choose a directory where you want to store your blog and run the following commands:

mkdir -p ~/dev/hugo
cd ~/dev/hugo
hugo new site blog
cd blog

3. Configuring Git and the Theme

Initialize the Git repository:

git init

Choose a theme from the theme gallery and install it as a Git submodule:

git submodule add https://github.com/rhazdon/hugo-theme-hello-friend-ng.git themes/hello-friend-ng

Set the theme in the hugo.toml file:

echo "theme = 'hello-friend-ng'" >> hugo.toml

4. Running the Local Server

To preview your blog locally, run:

hugo server -D

Access it in your browser: http://localhost:1313/.

5. Creating a Post

Add a new post:

hugo new content/en-us/posts/hello-world.md

Edit the generated file (content/en-us/posts/hello-world.md) to customize the content.

Edit the hugo.toml file and add the following lines to create the site’s menu:

defaultContentLanguage = 'en-us'

[languages]
  [languages.en-us]
    contentDir = 'content/en-us'
    disabled = false
    languageCode = 'en-US'
    weight = 1
    [languages.en-us.menus]
      [[languages.en-us.menus.main]]
        name = 'Posts'
        pageRef = '/posts'
        weight = 1

7. Publishing on GitHub Pages

Create a GitHub repository named <YOUR_USERNAME>.github.io and push the project:

git remote add origin https://github.com/<YOUR_USERNAME>/<YOUR_USERNAME>.github.io.git
git branch -M main
git add .
git commit -m "first commit"
git push -u origin main

On GitHub:

Go to Settings > Pages and set the Source to ‘GitHub Actions’.

Create the .github/workflows/hugo.yaml file to automate publishing. Check an example configuration here.

Then, publish the workflow:

git add .
git commit -m "create github workflow"
git push

On GitHub:

Go to Actions and run the workflow.
Access <YOUR_USERNAME>.github.io to view your blog online.

8. Publishing the Post

To make the post visible in production, edit the post file and change the draft parameter to false:

draft = false

9. Customization (Optional)

Edit hugo.toml to adjust settings like title and metadata.
Add a language switcher button.
Try different themes and layouts to personalize your blog.

Now you have a fully functional blog using Hugo! 🚀