$$ \newcommand\Tr{\mathrm{Tr}} \newcommand{\braket}[2]{\langle #1 \mid #2 \rangle} \newcommand\I{\mathbb{I}} \newcommand{\avg}[1]{\left< #1 \right>} \newcommand{\RD}{D} \newcommand{\ri}{\mathrm{i}} \DeclareMathOperator{\sign}{sign} \DeclareMathOperator{\Sign}{Sign} \newcommand{\ii}{\mathrm i} \newcommand{\vv}{\mathrm v} \newcommand{\ff}{\mathrm f} \newcommand{\mm}{\mathrm m} \newcommand{\ee}{\mathrm e} \newcommand{\xx}{\mathrm x} \newcommand{\RR}{\mathrm R} \newcommand{\dd}{\mathrm d} \newcommand{\FF}{\mathrm F} \newcommand{\BB}{\mathrm B} \newcommand{\vph}{v_{\mathrm{ph}}} $$

How to Create Hugo Site

This tutorial will show you how to create a static website based on Hugo.

Introduction

Hugo is a static site generator (SSG) that is developed in Go programming language. It is considered as the fastest framework for building websites.

1. Requirements

This tutorial requires below dependency to be installed:

Please ensure Hugo environment variable is set so you can create website outside Hugo Sites installation folder.

hugo version

2. Create a New Site

The website will be named my-hugo-site

hugo new site my-hugo-site

3. Add a Theme

When building website using SSG, we typically use existing theme then overwrite it. Otherwise, we have to understand most of Hugo concept first which is more difficult. In this tutorial, we will use ghostwriter theme.

cd my-hugo-site
git init
git submodule add https://github.com/jbub/ghostwriter.git themes/ghostwriter

4. Run Server

hugo serve -D

Running server with -D option above means that the website will also serve draft contents. Hugo development webserver will be accessible by default at http://localhost:1313.

However, if you open at the browser, the page will still be empty.

5. Set Configuration

Hugo set site configuration details at a file named config.toml, config.yml, or config.json that resides at website root folder. At this time, for simplicity we will display existing theme website. Therefore, you should copy config file of existing theme from themes/ghostwriter/exampleSite/config.yml then overwrite it to root folder.

If your server is still running, Hugo will hot reload the changes after you save the file. Then, the website will display ghostwriter website without any blog post. ghostwriter-website

6. Add a Blog Post

Add your first blog post using the hugo new command.

hugo new post/my-first-post.md

Then modify my-first-post.md.

    ---
    title: "My First Post"
    date: 2021-01-09T13:49:57+07:00
    draft: true
    ---

    ## Introduction

    This is my first time creating website using Hugo.

    ```csharp
    class Program  
    {  
        public static void withoutObj()  
        {  
            Console.WriteLine("Hello");  
        }  
        static void Main()  
        {  
            Program. withoutObj();  
            Console.ReadKey();  
        }  
    }
    ```

Result.

first-blog

There are already some samples inside themes\ghostwriter\exampleSite\content directory. If you copy all the posts inside post folder to the root’s content\post folder then you will see a lot of posts.

ghostwriter-posts

Conclusion

Congratulations! You are now able to create a website and blog content using Hugo.