このサイトは編集をいつでもどこでも簡単にできるようにWordPressで作成していますが、内容を固定したサイトの場合には、WordPressで作成すると定期的にアップデートが必要となるので結構管理が面倒です。(それでも、WordPressはセキュリティアップデートは勝手にやってくれるので、だいぶ楽ですが)
また、プラグインやテーマもちょっとマイナーなものを入れると、本体のアップデートについていけず、結構悩むことになります。
で、最近知ったのが静的サイトジェネレータというもので、マークダウン言語で書いた記事をHTMLとCSSに変換してくれるものだそうです。HTMLとCSSだけでデータベースなどはないのでセキュリティ上の心配も少なくて済むようです。で、変換したHTMLとCSSをまるごとサーバ上にアップロードすればOK(実際には同期するのかもしれませんが)ということらしいです。
今回はその静的サイトジェネレータの中からHugoというのを試してみることにしました。
1.Hugoの環境構築
今回は諸般の事情から、素のUbuntu18.04LTS環境に導入してみます。Hugoで検索すると、WindowsかMacOSのものが大部分で、Linux環境の場合にはどういうわけか(探し方が悪いのか)古いものしか見つかりません。どうせなら最新版をインストールしたいところです。そこで参考にしたのは一つ目はこちらの記事です。何はともあれ、参考にしながら最新版をgithubからダウンロードしてインストールしてみます。
下記手順で素のUbuntu18.04LTSに対してアップデートとVirtualBoxのGuest Addtionsのインストールを行った後、Hugoのバイナリパッケージをインストールします。
※今後の再テストを短時間で行うため、VirtualBoxのディスクイメージのスナップショットも採取しています。
$ 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
2.新しいサイトの作成
$ mkdir WebSite $ cd WebSite $ hugo new site hugo.example.com
3.新しいページの作成
以下の方法で新しいページを作成します。
$ hugo new <SECTIONNAME>/<FILENAME>.<FORMAT>
実際にやってみます。
$ cd hugo.example.com $ ls $ hugo new post/test-page.md
として、contentディレクトリの下のpostディレクトリの下に記事を生成します。生成したら、自動生成されたファイルcontent/post/test-page.md を編集します。冒頭の draft: の行は削除します。(この行があると、記事が生成されません)
--- 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!
4.テーマをダウンロード
テーマをダウンロードします。ここでは試しに mainroad というのを使ってみます。
$ cd theme $ git clone https://github.com/vimux/mainroad $ cd ..
mainroadというテーマを使うために、config.toml に
theme = "mainroad"
を書き足します。
5.サイトを生成してみる
$ hugo
で、publicというディレクトリが生成されて中にデータが生成されます。
$ hugo server
で組み込みサーバーが起動するようです。http://localhost:1313/ でインデックスページにアクセスできますが、かなり質素です(mainroadというテーマはこんなに質素じゃないはずなので要調査)。Ctrl+C で停止できます。
このまま、
$ cd hugo.example.com $ hugo new post/sample.md
として、もう1ページを作成、content/post/sample.md を編集します。冒頭の draft: の行は削除しつつ適当に内容を作成すると、自動的にブラウザで開いていた記事のリストが更新されます。
記事を一通り作成したら、publicディレクトリを丸ごとWebサーバにアップロードすることで、公開完了、ということみたいです。(実際には rsync などで同期を取る形で運用するのが楽なのだと思います)
6.参考になりそうなもの
- まくまくHugo/Goノート(https://maku77.github.io/hugo/)
Hugoの使い方を解説されています。これから頑張って試してみようかと。 - Hugo Themes(https://themes.gohugo.io/)
Hugoのテーマがたくさん並んでいます。