Hugo を Ananke テーマで使ってみる

Last updated at 2025-04-20Posted at 2025-04-19

静的サイト構築をやってみます。

「Bootstrap + GitHub Pages でサイトを作る」
https://qiita.com/nanbuwks/items/6269418f905884cf467e

では Bootstrap を使いました。これはうまくいきましたが、markdown からページを生成する仕組みに進みたく、その場合に手作業が多すぎてどうかなあという感じでした。

そのようなことを踏まえて、別のフレームワークを考えています。まずは Jykill で調べてみましたが、GitHub Pages で行うときの制限がどうもわかりずらくて、Strategy を立案する以前のところでくじけてしまいました。

Hugo

ふと Hugo を見ると簡単そうだったのでやってみました。

作戦：

GitHub でホスト、GitHub の CD/CI でコンパイル
ローカルのCD/CIでコンパイル、GitHub Pages でotJibでホスト
Netlyでホスト、コンパイルは?

今回は、ローカルのCD/CIでコンパイル、GitHub Pages で表示するやりかたを前提とします。

環境

Ubuntu24.04

Quickstart を元に

まずは https://gohugo.io/getting-started/quick-start/ を見て進めていきます。

Hugo インストール

Ubuntu のディストリビューションパッケージだとバージョンが以下のように古く、

$ hugo version
hugo v0.123.7+extended linux/amd64 BuildDate=2024-11-06T01:07:23Z VendorInfo=ubuntu:0.123.7-1ubuntu0.2

以下からビルド済みバイナリをダウンロードしました。
https://github.com/gohugoio/hugo/releases/tag/v0.146.5

ダウンロードしたのは hugo_extended_0.146.5_linux-amd64.deb です。

$ sudo dpkg -i hugo_extended_0.146.5_linux-amd64.deb

サイト作成

$ hugo new site oshwc-hugo
Congratulations! Your new Hugo site was created in /home/owner/Downloads/oshwc-hugo.

Just a few more steps...

1. Change the current directory to /home/owner/Downloads/oshwc-hugo.
2. Create or install a theme:
   - Create a new theme with the command "hugo new theme <THEMENAME>"
   - Or, install a theme from https://themes.gohugo.io/
3. Edit hugo.toml, setting the "theme" property to the theme name.
4. Create new content with the command "hugo new content <SECTIONNAME>/<FILENAME>.<FORMAT>".
5. Start the embedded web server with the command "hugo server --buildDrafts".

See documentation at https://gohugo.io/.

$ cd oshwc-hugo

先に 5. Start the embedded web server with the command "hugo server --buildDrafts".をやってみました。

$ hugo server --buildDrafts
Watching for changes in /home/owner/Downloads/oshwc-hugo/{archetypes,assets,content,data,i18n,layouts,static}
Watching for config changes in /home/owner/Downloads/oshwc-hugo/hugo.toml
Start building sites … 
hugo v0.146.5-61328976e11cbb9d906b4a790b8a7cd25b2a914f+extended linux/amd64 BuildDate=2025-04-15T17:54:38Z VendorInfo=gohugoio

WARN  found no layout file for "html" for kind "home": You should create a template file which matches Hugo Layouts Lookup Rules for this combination.
WARN  found no layout file for "html" for kind "taxonomy": You should create a template file which matches Hugo Layouts Lookup Rules for this combination.

                   | EN  
-------------------+-----
  Pages            |  4  
  Paginator pages  |  0  
  Non-page files   |  0  
  Static files     |  0  
  Processed images |  0  
  Aliases          |  0  
  Cleaned          |  0  

Built in 4 ms
Environment: "development"
Serving pages from disk
Running in Fast Render Mode. For full rebuilds on change: hugo server --disableFastRender
Web Server is available at http://localhost:1313/ (bind address 127.0.0.1) 
Press Ctrl+C to stop

http://localhost:1313 にアクセスすると

Webサーバー自体は動いているようです。

テーマをインストール

2. Create or install a theme:

を行っていきます。

Quickstart では Ananke をテーマとして使っています。ほかのテーマも多々ありますが、こちらのサイトを見ると Ananke が良さそうなのでそのまま使うことにします。
https://girigiribauer.com/tech/20200128/

Anankeの公式サイトはこちら。
https://github.com/theNewDynamic/gohugo-theme-ananke

Ananke 公式のインストール方法を確認すると

Installation
Dive into our documentation on installing the theme as GoHugo Module or Git Submodule. The official setup guide of GoHugo covers the installation of the theme as Git Submodule.

ということなので、Quickstart で示しているやり方の通り以下のようにしました。

$ git init
$ git submodule add https://github.com/theNewDynamic/gohugo-theme-ananke.git themes/ananke

3. Edit hugo.toml, setting the "theme" property to the theme name.
を行っています。

$ echo "theme = 'ananke'" >> hugo.toml

改めて

$ hugo server --buildDrafts

とすると以下のようになりました。

コンテンツを追加する

$ hugo new content content/posts/1st-test-post.md

$ vim content/posts/1st-test-post.md

中身は以下のようになっていました

+++
date = '2025-04-16T22:55:10+09:00'
draft = true
title = '1st Test Post'
+++

これを以下のように直すと

+++
date = '2025-04-16T22:55:10+09:00'
draft = true
title = '1st Test Post'
+++
## Test Post

Hello!

Webブラウザ上で自動で反映されました。

ページタイトルを変更する

hugo.toml の内容が以下のようになっていました。

baseURL = 'https://example.org/'
languageCode = 'en-us'
title = 'Mymy New Hugo Site'
theme = 'ananke'

これを以下のように変更。

baseURL = 'https://example.org/'
languageCode = 'ja'
title = 'OSHWC:OpenHardWareConference'
theme = 'ananke'

ついでに記事 Aboutusを追加しています。

メニューを追加する

hugo.tomlに以下の内容を追加します。

[[menu.main]]
  identifier = "whatisOSHWC"
  name = "OSHWCとは"
  url = "/posts/whatisOSHWC/"
  weight = 10
[[menu.main]]
  identifier = "emtry"
  name = "出展・登壇申込"
  url = "/posts/entry/"
  weight = 20
[[menu.main]]
  identifier = "aboutus"
  name = "Aboutus"
  url = "/posts/aboutus/"
  weight = 30

対応する記事を適当に増やしておきます。

記事の書き方

画像を貼る

スタンダードな markdown で以下のようにしても、0x0pixelとなり表示できなかった。Ananke の設定かな?

![]("/images/OSHWClogo20140105-400px.png")

Hugo オリジナルのショートコードだと表示できました。

{{< figure src="/images/OSHWClogo20140105-400px.png">}}

デモサイトを参考にする

Ananke のデモはこれかな。
https://ananke-theme.netlify.app/
そのソース。
https://github.com/theNewDynamic/gohugo-theme-ananke/tree/master/exampleSite

それを基にして content/_index.md を以下のように作成してみる。

---
title: "OSHWC:オープンハードカンファレンス"

description: "2025年5月、埼玉県入間市にて再始動!"
# 1. To ensure Netlify triggers a build on our exampleSite instance, we need to change a file in the exampleSite directory.
theme_version: '2.8.2'
cascade:
  featured_image: '/images/IMG_20180909_125455.jpg'
---
ものづくりをオープンに交流、活用、楽しもう!

発表、展示、自慢をしてみよう!

static/images/ に /images/IMG_20180909_125455.jpg を置くと以下のようになる。

cascade:
  featured_image: '/images/IMG_20180909_125455.jpg'

を指定しているとすべてのページがヘッダーが大きく表示されるようになってしまったので cascade: フィールドを消して featured_image: のみにしました。

GitHub に登録

GitHub にレポジトリを作り、push します。

cf.,https://qiita.com/nanbuwks/items/4f6a685f0bb4953e75c8
「GitHub でよくあるトラブル対応の備忘録」→「ローカルで作ったソースコードを github に登録する」

GitHub Page 対応しようとしたけれども・・・

GitHub Page はユーザ名 nanbuwks , レポジトリ名 oshwc_hugo とすると、

と

の2つの公開方法がある。今回はレポジトリ名を含んだ下の方。

それに対応するために、hugo.toml ファイルに以下を追加

canonifyURLs  = true

更に、baseURL を変更します。

baseURL = 'https://nanbuwks.github.io/oshwc_hugo/'

一応これで github pages のレポジトリ名付きURLに対応したのですが、プレビュー時にテーマがうまく適用できなくなってしまいました。また、github pages で表示しても image ファイルのURLがうまいう設定できていませんでした。これは Ananke の問題なのかな?

以下によると

canonifyURLs
relativeURLs

は警告マーク付になっていて、あまり良い解決方法ではない感じです。

また、静的ページをレポジトリのいずこに置くかは以下の選択肢があります。

ブランチのルートをドキュメントルートディレクトリとして公開
ブランチのdocsディレクトリをドキュメントルートとして公開
GitHub Actionで任意のディレクトリをGitHubPageで公開

今回は、「ブランチのdocsディレクトリをドキュメントルートとして公開」とします。
それに対応するために、hugo.tomlファイルに以下を追加

publishDir = "docs"

この状態で静的ページを生成する

$ hugo

これで docs ディレクトリに静的ページが生成される。

その上で github 上のレポジトリに変更を反映。

「Bootstrap + GitHub Pages でサイトを作る」
https://qiita.com/nanbuwks/items/6269418f905884cf467e
の「GitHub Pages を使ってみる」を参照し同様に設定、

build元のフォルダ設定の箇所のみ、/docs に変更しておきます。

一応、上記のように設定してみましたが今回の条件では色々問題があり実用にはなりそうにありません。

hugo.tomlをもとに戻して別の方法をもちいることにしまし

Netify 対応

静的サイトをホスティングするサービスとして、 Netify が便利らしいです。
git サービスとの連携が簡単、Hugo サポート、無料で利用することもできるということで、 github に登録したコンテンツを github pages ではなくこちらで公開してみます。

https://www.netlify.com/ に Sign up

GitHub 上のレポジトリを選択します。

site name を希望のものに変更します。

command や publish directory は自動で設定されていました。

Environment variables を1つだけ追加する必要があります。最新のHUGOのバージョンをここに入れておきます。

下記はEnvirinment variables を入力し忘れた時。デプロイ時にエラーが出ています。

無事デプロイすると以下のように公開されます。

ドメインネームを Netlify ページに適用する

すでに oshwc.org ドメインを「お名前.com」で取得しています。そのドメインでアクセスできるようにします。
いくつかやりかたはありますが、 Netlify の DNS を使うやり方を試してみました。

「Domains」-Add or register domain の Add a domain you already own を選びます。

oshwc.org を入れて「Verify」-「Add domain」

DNS settings の Name Servers に Netlify の DNS が表示されています。

お名前.com のネームサーバ設定で、上記の DNS を入力します。

しばらくすると使えるようになります。ブラウザのキャッシュの問題があったため、プライベートブラウジングしたら表示されました。

ドメインを追加した直後は証明書が適用されていませんが、しばらくすると自動プロビジョニングでLet'sEncryptの証明書が追加され、 https:// でアクセスできるようになります。

Tips

レポジトリをクローンしたもののページを更新しようとしたら、以下のような表示が出て反映しないことがある。

hugo: found no layout file for "HTML" for kind.

以下で解決

$ git submodule update --init

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up