忘備録として動かしたいので、時間が経って使い方忘れないように書いておきます。
使ったもの(必要なもの)
- 雑に使えるサーバー
- sshとCLIとmdの知識
要らないもの
- フロントエンドの知識
- デザインの知識
使い方
サーバーがすでにある前提で行きます。 sshでhugoをインストールします。 私はUbuntuを使っているので、aptを使いたいところですがこれは孔明の罠です。
aptに上がっているのは古いバージョンで、結構使えない機能があるみたいです。
なので公式のgithubからwgetで直接落としてきてインストールします。
落とすのはextended版の方です。
ここから最新版を落とせます。 アーキテクチャに注意。 hugoのgitリポジトリ
現在は0.147.8が最新なので、以下のコマンドで落とせます。
wget https://github.com/gohugoio/hugo/releases/download/v0.147.8/hugo_extended_0.147.8_linux-amd64.deb
うちの環境はubuntuかつamd64なので、hugo_extended_0.147.8_linux-amd64.debを落としました。 落としたら解凍して、バイナリを/usr/local/binに移動します。
sudo dpkg -i hugo_extended_0.147.8_linux-amd64.deb
これでhugoの準備はオッケーです。 次に、ブログのディレクトリを作成します。 これは超簡単で、hugoのコマンドでディレクトリまで作成できます。
hugo new site myblog --format yaml
これでmyblogというディレクトリが作成されます。
--format yamlはオプションで、YAML形式の設定ファイルを使うためのものです。
hugoの最新バージョンはtomlが標準ですが、PaperModテーマは設定例が全てyamlなので、yaml形式を使います。
もしtoml形式を使いたい場合は、特に何も書かなければそのままtoml形式で作成されます。
次にテーマを選びます。 テーマはHugo Themesから選ぶことができます。 私はPaperModを使っています。
cd myblog
git clone https://github.com/adityatelange/hugo-PaperMod themes/PaperMod --depth=1
これでテーマがmyblog/themes/PaperModに追加されます。 PaperModのwikiより、テーマの更新をするときは
cd themes/PaperMod
git pull
で更新できます。 完成されたテーマなのであんま更新は来ないそうです。
記事を作成するときはコマンド一発でいけます。
hugo new posts/xxxxx.md
これでmyblog/content/posts/xxxxx.mdが作成されます。
設定とかはPaperModのDemoページのソースコードが参考になります。
このデモではMarkdownの書き方も指導されているのでお勧めです。
デプロイ
デプロイはApacheサーバーがもともと用意されているたので、そこにデプロイします。 hugoのコマンドで静的サイトを生成し、それをApacheのドキュメントルートにコピーします。 これをshellスクリプトで自動化しました。
以下のスクリプトをdeploy.shという名前で保存します。
このスクリプトは、hugoでサイトをビルドし、生成された静的ファイルをApacheの公開ディレクトリに転送します。
スクリプトを実行する前に、Apacheのドキュメントルートが/var/www/html/であることを確認してください。
スクリプトの内容は以下の通りです。
#!/bin/bash
# スクリプトが置いてあるディレクトリに移動する
cd "$(dirname "$0")"
echo "🚀 ビルドを開始します..."
# Hugoでサイトをビルドする
hugo
echo "🚚 ファイルを公開ディレクトリに転送します..."
# rsyncを使ってpublicディレクトリの中身をApacheの公開ディレクトリにコピーする
rsync -av --delete public/ /var/www/html/
echo "✅ 完了しました！"
以上です。