Golang製の静的サイトジェネレーター「HUGO」を試してみた
久しぶりに会った先輩が、静的サイトジェネレーターでブログをやっていました。
「静的サイトジェネレーターでブログ書くのも結構いいよ」とおすすめしてもらったので、以前から気になっていたGolang製のHUGOを触ってみました。
目次
公式ドキュメント
環境
ubuntu 16.04
インストール
公式ドキュメントに沿って進めます。
$ wget https://github.com/gohugoio/hugo/releases/download/v0.61.0/hugo_0.61.0_Linux-64bit.deb $ sudo dpkg -i hugo_0.61.0_Linux-64bit.deb $ hugo version Hugo Static Site Generator v0.61.0-9B445B9D linux/amd64 BuildDate: 2019-12-11T08:27:34Z
プロジェクトを作成
$ hugo new site quickstart Congratulations! Your new Hugo site is created in /XXX/quickstart. Just a few more steps and you're ready to go: 1. Download a theme into the same-named folder. Choose a theme from https://themes.gohugo.io/ or create your own with the "hugo new theme <THEMENAME>" command. 2. Perhaps you want to add some content. You can add single files with "hugo new <SECTIONNAME>/<FILENAME>.<FORMAT>". 3. Start the built-in live server via "hugo server". Visit https://gohugo.io/ for quickstart guide and full documentation.
テーマを追加
$ cd quickstart/ $ git init $ git submodule add https://github.com/budparr/gohugo-theme-ananke.git themes/ananke $ echo 'theme = "ananke"' >> config.toml
この時点で、ディレクトリ構成はこのようになっていました。
$ tree -L 3
.
├── archetypes
│ └── default.md
├── config.toml
├── content
├── data
├── layouts
├── static
└── themes
└── ananke
├── archetypes
├── CHANGELOG.md
├── data
├── exampleSite
├── i18n
├── images
├── layouts
├── LICENSE.md
├── package.json
├── package-lock.json
├── README.md
├── src
├── stackbit.yaml
├── static
└── theme.toml
記事を作成
$ hugo new posts/my-first-post.md
$ cat content/posts/my-first-post.md
---
title: "My First Post"
date: 2019-12-19T19:51:49+09:00
draft: true
---
# test title
* test
* test
## test
¥```shell
$ echo "hello hugo!"
¥```
ブログをMarkdownで書いている都合上、「¥」を挿入しています。
HUGOサーバ起動
$ hugo server -D
| EN
+------------------+----+
Pages | 10
Paginator pages | 0
Non-page files | 0
Static files | 3
Processed images | 0
Aliases | 1
Sitemaps | 1
Cleaned | 0
Built in 24 ms
Watching for changes in /XXX/quickstart/{archetypes,content,data,layouts,static,themes}
Watching for config changes in /XXX/quickstart/config.toml
Environment: "development"
Serving pages from memory
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/ にアクセスします。
記事が表示されました。
Configファイル編集
config.tomlを編集します。
$ cat config.toml languageCode = "ja" title = "HUGOテスト" theme = "ananke"
『baseURL = "https://example.org/"』の行は削除しています。
Replace the title above with something more personal. Also, if you already have a domain ready, set the baseURL. Note that this value is not needed when running the local development server.
languageCodeの部分は、jaにしてみました。
日本語でメニューなどを表示させるには、この部分の変更だけではダメで、別途設定が必要のようです。
後述するこちら↓のテーマで、多言語設定を扱っているので、参考にできそうです。
静的ページをビルドする
静的ページをビルドします。
$ hugo -D
| EN
+------------------+----+
Pages | 10
Paginator pages | 0
Non-page files | 0
Static files | 3
Processed images | 0
Aliases | 1
Sitemaps | 1
Cleaned | 0
Total in 95 ms
出力先はこのようになりました。
$ tree -L 3 ./public/
./public/
├── 404.html
├── categories
│ ├── index.html
│ └── index.xml
├── dist
│ ├── css
│ │ └── app.d98f2eb6bcd1eaedb7edf166bd16af26.css
│ └── js
│ └── app.3fc0f988d21662902933.js
├── images
│ └── gohugo-default-sample-hero-image.jpg
├── index.html
├── index.xml
├── posts
│ ├── index.html
│ ├── index.xml
│ ├── my-first-post
│ │ └── index.html
│ └── page
│ └── 1
├── sitemap.xml
└── tags
├── index.html
└── index.xml
10 directories, 14 files
静的ファイルの表示を試してみます。
今回はPHPのビルトインWebサーバを使います。
$ cd public/ $ php -S localhost:8000 PHP 7.0.33-0ubuntu0.16.04.7 Development Server started at Thu Dec 19 20:09:03 2019 Listening on http://localhost:8000
http://localhost:8000/ を確認します。 静的ページが表示されました。
他のテーマも試す
HUGOにはたくさんのテーマがあるので、他のテーマも試してみようと思います。
今回はブログに適していそうな、こちらのテーマを試してみます。 こちらも、ドキュメントの手順に沿って進めます。
テーマ追加
$ git submodule add https://github.com/zzossig/hugo-theme-zzo.git themes/zzo
更新
$ git submodule update --remote --merge
ディレクトリ作成
$ mkdir config $ mkdir config/_default
ディレクトリ以下に、設定ファイルを作成します。
HUGOサーバを起動
エラーがでます。
$ hugo server -D Building sites ... ERROR 2019/12/19 20:53:10 Transformation failed: TOCSS: failed to transform "main_parsed.scss" (text/x-scss): this feature is not available in your current Hugo version, see https://goo.gl/YMrWcn for more information WARN 2019/12/19 20:53:10 found no layout file for "webmanifest" for "home": You should create a template file which matches Hugo Layouts Lookup Rules for this combination. Built in 85 ms Error: Error building site: logged 1 error(s)
エラーに書かれているこちらのリンクを確認したところ、「"SCSS or SASS to CSS" をしている場合はextendedがついてるバージョンのHUGOを使う必要がある」ようです。
「extend」がついているHUGOをダウンロードしてインストールします。
$ wget https://github.com/gohugoio/hugo/releases/download/v0.61.0/hugo_extended_0.61.0_Linux-64bit.deb $ sudo dpkg -i hugo_extended_0.61.0_Linux-64bit.deb $ hugo version Hugo Static Site Generator v0.61.0-9B445B9D/extended linux/amd64 BuildDate: 2019-12-11T08:33:29Z
もう一度起動します。
$ hugo server -D
無事に動きました。
Archiveなど、いくつかのページは別途作成してあげる必要があるようです。
Archiveページを作ってみます。
$ mkdir content/archive $ hugo new archive/archive-test.md
$ cat content/archive/archive-test.md --- title: "Archive Test" date: 2019-12-19T21:05:29+09:00 description: type: archive tags: - test - test2 series: - categories: - testcategory - test2category --- # archive [toc] * this is a archive page. ## menu1 * aaa ### menu2 * bbb
Archivesページが表示されました。
想定した表示内容と違いますね。もう一度設定を見直す必要がありそうです。
画面の右側に目次機能があります。
Tagsのページもできていました。
さいごに
HUGOを使ってみました。
ざざっと試したので、使い方が間違っている箇所があるかと思います。
少し触っただけですが、テーマによって色々な機能があり、作り込みがいがありそうですね。
Python製のPelicanも気になっているので、次はPelicanを試してみようと思います。
