Starting a Blog with Hugo

I want to start a blog site where I can post ads for free.

Hugo
Translations: JA
Page content

This is the result of my research on how to start a free (or low-cost) blog where people who are somewhat PC-savvy can post ads.

I want to start a blog site where I can post ads for free.

After thinking about it, I decided that Hugo + GitHubPages (+ my own domain) was the best option for me.

  • Hugo is a tool that allows you to write articles in Markdown and convert them into static HTML and resources for various uses.
  • GitHub Pages is a free static web content distribution service provided by GitHub(for me).
    • It requires a GitHub account (you can create one for free).
    • You will be able to access it at the domain https://<username>.github.io/ (<username> will be the name of the account you got).

In short, it is relatively easy to create such a website with just these two items.

Why I didn’t use a blogging service?

It’s the easiest way to get started, but from the perspective of whether it will still be around in 10-20 years, it’s unclear, and extracting the content you’ve written will be a hassle. I don’t like it when I think about the fact that major posting services have been shut down several times in the past.

Why I chose my own domain name?

Basically, the domain name https://<username>.github.io/ is fine. However, if GitHub Pages is shut down, you may not be able to attract customers to that domain. Also, you can maintain your own domain name for about 10 to 20 dollers per year, so it would be no problem. Think of it as going to the movie theater once.

How to publish content to GitHub Pages with Hugo

Since many Japanese are not good at English, I will introduce the Japanese explanation article. For those of you who can read English, the best place to start is the official Hugo documentation, Host On GitHub.

Set up your own domain name

Get your domain name

Since I am Japanese, I got this domain name from ONAMAE.com, a famous domain name service in Japan. This is a good place to search the web and find a service that looks good. One thing to keep in mind is that the price of each domain (.com or .info) is different, so you should check the price list carefully. The .info domain I got is currently priced at 280 yen/year for the first year and 1628 yen/year for the second and subsequent years.

Choose a name and add a DNS record

GitHub Pages strongly recommended to use www.my-first-step.info or blog.my-first-step.info instead of my-first-step.info, so I decided to follow it. You need to decide the name of the **** part of ****.my-first-step.info, and since it is a Blog site, I chose blog.

In the DNS settings, set the name blog.my-first-step.info to mokemokechicken.github.io as CNAME. The way to set this up depends on what service you used to get your domain name, so do your own research and set it up.

Enable HTTPS

Next, go to the GitHub page, go to (1) Settings → (2) Pages, and put blog.my-first-step.info in (3) Custom Domain and press “Save”. The DNS information may be cached strangely, and it may not be OK right away (as it was for me), but This will be fixed in the next day or so, so be patient. If you can confirm it, you will be able to click Enforce HTTPS (4), so click it. Now you will be able to access the site with https.

Enable HTTPS

If you are using GitHub Actions to deploy

It seems that you need to write blog.my-first-step.info in a file named CNAME in the TOP directory of the GitHub Pages repository. If you don’t have this, the Custom Domain setting you just made will be lost.

Without the CNAME file, the configuration will be lost.

For example, if you are deploying with GitHub Actions, the following cname: blog.my-first-step.info will automatically create the file (or delete it if it is not there).

# ... abbreviation
      - name: Build
        run: hugo --minify

      - name: Deploy
        uses: peaceiris/actions-gh-pages@v3
        if: github.ref == 'refs/heads/main'
        with:
          deploy_key: ${{ secrets.SSH_KEY }}
          external_repository: mokemokechicken/blog
          publish_dir: ./public
          cname: blog.my-first-step.info

Make it multilingual.

I started this blog with the evil motive of putting advertisements on it, so I would like English-speaking people all over the world to have access to it. These days, there are excellent translation services such as DeepL, and it is not impossible to create content that is somewhat readable even if you are not good at English (if you can read this right now, that is).

Hugo can be easily multilingualized. Details can be found at Multilingual Mode, but I’ll leave you with an overview.

Add the supported languages to config.toml

I don’t understand anything other than Japanese and English, I will support those two languages. I thought about what I should set the default language (defaultContentLanguage) to, but I’m not strong enough to set it to English, so I’ll set it to Japanese. In that case, for example, you can write the following

defaultContentLanguage = "ja"
defaultContentLanguageInSubdir = true

[languages]
    [languages.ja]
    title = 'My First Step'
    languageName = "Japanese"
    weight = 10

    [languages.en]
    title = 'My First Step'
    languageName = "English"
    weight = 20

defaultContentLanguageInSubdir means that the URL of the top page will be

The weight seems to be some sort of priority.

Create content for each language by changing the file name slightly

The rest is

  • For Japanese: index.ja.md
  • For English: index.en.md

If you put the language code in the file name, you will be able to see each of them.

For the mainroad Theme, add translations to the following part, the link will be displayed as follows.

Note that if you have index.ja.md and not index.en.md, the link will not be displayed (and vice versa). Cool.

[Params]
post_meta = ["date", "categories", "translations"] # Order of post meta information

Display translations link