このサイトは編集をいつでもどこでも簡単にできるようにWordPressで作成していますが、内容を固定したサイトの場合には、WordPressで作成すると定期的にアップデートが必要となるので結構管理が面倒です。（それでも、WordPressはセキュリティアップデートは勝手にやってくれるので、だいぶ楽ですが）
また、プラグインやテーマもちょっとマイナーなものを入れると、本体のアップデートについていけず、結構悩むことになります。
で、最近知ったのが静的サイトジェネレータというもので、マークダウン言語で書いた記事をHTMLとCSSに変換してくれるものだそうです。HTMLとCSSだけでデータベースなどはないのでセキュリティ上の心配も少なくて済むようです。で、変換したHTMLとCSSをまるごとサーバ上にアップロードすればOK（実際には同期するのかもしれませんが）ということらしいです。
今回はその静的サイトジェネレータの中からHugoというのを試してみることにしました。
１．Hugoの環境構築
今回は諸般の事情から、素のUbuntu18.04LTS環境に導入してみます。Hugoで検索すると、WindowsかMacOSのものが大部分で、Linux環境の場合にはどういうわけか（探し方が悪いのか）古いものしか見つかりません。どうせなら最新版をインストールしたいところです。そこで参考にしたのは一つ目はこちらの記事です。何はともあれ、参考にしながら最新版をgithubからダウンロードしてインストールしてみます。
下記手順で素のUbuntu18.04LTSに対してアップデートとVirtualBoxのGuest Addtionsのインストールを行った後、Hugoのバイナリパッケージをインストールします。
※今後の再テストを短時間で行うため、VirtualBoxのディスクイメージのスナップショットも採取しています。
|
1 2 3 4 5 6 7 8 |
$ sudo apt update $ sudo apt upgrade （一旦再起動） $ sudo apt install build-essential perl make gcc git （VirtualBoxのGuest Additionsをインストールして一旦シャットダウン、スナップショットを取って再起動） $ wget https://github.com/gohugoio/hugo/releases/download/v0.54.0/hugo_0.54.0_Linux-64bit.deb $ sudo apt install ./hugo_0.54.0_Linux-64bit.deb $ hugo version |
２．新しいサイトの作成
|
1 2 3 |
$ mkdir WebSite $ cd WebSite $ hugo new site hugo.example.com |
３．新しいページの作成
以下の方法で新しいページを作成します。
|
1 |
$ hugo new <SECTIONNAME>/<FILENAME>.<FORMAT> |
実際にやってみます。
|
1 2 3 |
$ cd hugo.example.com $ ls $ hugo new post/test-page.md |
として、contentディレクトリの下のpostディレクトリの下に記事を生成します。生成したら、自動生成されたファイルcontent/post/test-page.md を編集します。冒頭の draft: の行は削除します。（この行があると、記事が生成されません）
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
--- title: "Test Page" date: 2019-03-05T01:02:03Z --- # Hello World This is my first hugo site, wooo!! ``` hugo_install="success" if [[ $hugo_install == "success" ]]; then echo "Happy me" ``` bye! |
４．テーマをダウンロード
テーマをダウンロードします。ここでは試しに mainroad というのを使ってみます。
|
1 2 3 |
$ cd theme $ git clone https://github.com/vimux/mainroad $ cd .. |
mainroadというテーマを使うために、config.toml に
|
1 |
theme = "mainroad" |
を書き足します。
５．サイトを生成してみる
|
1 |
$ hugo |
で、publicというディレクトリが生成されて中にデータが生成されます。
|
1 |
$ hugo server |
で組み込みサーバーが起動するようです。http://localhost:1313/ でインデックスページにアクセスできますが、かなり質素です（mainroadというテーマはこんなに質素じゃないはずなので要調査）。Ctrl+C で停止できます。
このまま、
|
1 2 |
$ cd hugo.example.com $ hugo new post/sample.md |
として、もう１ページを作成、content/post/sample.md を編集します。冒頭の draft: の行は削除しつつ適当に内容を作成すると、自動的にブラウザで開いていた記事のリストが更新されます。
記事を一通り作成したら、publicディレクトリを丸ごとWebサーバにアップロードすることで、公開完了、ということみたいです。（実際には rsync などで同期を取る形で運用するのが楽なのだと思います）
６．参考になりそうなもの
- まくまくHugo/Goノート(https://maku77.github.io/hugo/)
Hugoの使い方を解説されています。これから頑張って試してみようかと。 - Hugo Themes（https://themes.gohugo.io/）
Hugoのテーマがたくさん並んでいます。
