HUGOをGithubで自動デプロイ&レンタルサーバー公開
このサイトはHUGOという静的サイトジェネレーターを使っています。
静的サイトジェネレーターはデプロイすることでwebページの公開ができています。HUGOもhugoコマンドでデプロイできますがいちいち自分のローカルでデプロイしてそのフォルダをアップロードするというのは結構だるいです。
※デプロイ：HUGOではもととなるファイルからwebページ用のファイルを展開すること。マークダウンからhtmlを作ります。
デプロイ操作をミスする可能性もありますし、ローカル環境の変更が影響してしまうかもしれない。記事を書いたら毎回デプロイするというのは面倒です。また複数のPCで書きたい人ならより問題になります。
そのため多くの場合にデプロイを自動でしてもらいます。
方法としては
- 1 Github Actions
- 2 ホスティングサービス
のどっちかを使うことになると思います。
1 Github ActionsはGithubの機能でデプロイなどをymlファイルを作ることで自動化させることができます。ymlファイルの書き方や設定など調べる必要はあります。すこし時間はかかるかもしれませんがすごい難しいわけではありません。また調べていけばかなり自由に自分の作りたいものを作ることができます。
2 ホスティングサービスはNetlifyといったホスティングサービスで提供されているデプロイサービスを使うということです。HUGOは静的サイトジェネレーターとしては最大手なのでいくつかの会社が提供してくれています。基本的に管理画面で少しポチポチするだけなので簡単です。ただし当然ながらそのホスティングサービスでしか公開できません。
そのため自分の使っている別のレンタルサーバーを使いたいなどの場合には必然的に1 Github Actions を使うことになるでしょう。
Github Actionsでの自動デプロイ設定方法
リポジトリ作成
Github Actions では対象となるGitリポジトリが必要になるので適当にリポジトリ作りましょう。HUGOであればディレクトリをまるごとリポジトリに入れます。
https://www.sejuku.net/blog/70775
こういうサイトを参考にリポジトリをローカル、リモートに作ってください。
個人ブログであればそこまで問題ではないかもしれませんが内部でみられたらまずいファイル(未公開記事など)がある場合にはprivateリポジトリにしておいたほうがいいでしょう。迷ったらprivateが無難かと。
ymlファイル作成
リポジトリができたのでGithub Actionsを設定しましょう。ymlファイルによって行いたい動作を記述します。
ymlファイルはデータ構造を書くためのファイルみたいです。tomlファイルなどと同じ部類です。
書き方の注意としてタブが使えないというのがあります。
ymlファイルの内容としては
- HUGOのビルド
- レンタルサーバーへアップロード
の2つに分けられます。
yml:HUGOのビルド
name: hugo on LOLIPOP
on:
push:
branches:
- main # Set a branch to deploy
pull_request:
jobs:
deploy:
runs-on: ubuntu-22.04
concurrency:
group: ${{ github.workflow }}-${{ github.ref }}
steps:
- uses: actions/checkout@v4
with:
submodules: true
fetch-depth: 0
- name: Setup hugo
uses: peaceiris/actions-hugo@v2
with:
hugo-version: 'latest'
- name: Build
run: hugo
name: 適当にいい感じの名前をつけましょ。
on: いつActionを起こすのかを書きます。HUGOの使い方的に 記事を書く → githubにpush の繰り返しなのでリポジトリにpushされたときに動いてくれるようにします。
jobs: メインの実行部分です。偉大な先人がつくってくれたHUGO用のActionを使わせてもらいます。サイトはこちら 公式のをほとんどそのまま使って大丈夫だと思います。hugo-version: のところだけはいちいちバージョン更新考えるのめんどくせえ、ということで"latest"にして常に最新になるようにしました。まあ自分のローカルのHUGOのバージョンと合わせるのが正しいとは思うんですが。
yml:サーバーへアップロード
サーバーアップロードも偉大なる先人がFTPのActionを作ってくれているので使わせてもらいます。 サイトはこちら
- name: Sync files
uses: SamKirkland/FTP-Deploy-Action@v4.3.4
with:
server: ${{ secrets.FTP_SERVER }}
username: ${{ secrets.FTP_USERNAME }}
password: ${{ secrets.FTP_PASSWORD}}
local-dir: ./public/
server-dir: /blog/
こちらもほとんど公式そのままでいいと思います。
ただ、local-dir: は/piblic/にすること(一敗)。hugoはビルド済のファイルをpublicディレクトリにすべてまとめて入れるのでこれを送ります。
server-dir: に関しては各々のレンタルサーバー事情に合わせてください。
FTP-Deploy-Actionのバージョンは新しいほうがデータ送信が速いみたいなので最新がおすすめ。
FTPのためにホスト名、ユーザー名、パスワードが必要なので準備します。コード中にそのままはセキュリティ的にもかけないのでGithubのseacretキーなるものを使うんですね。参考サイト様
対象のリポジトリをGithubで開いたら setting > Secrets and variables > Actions に行きます。
画像だとすでに作られていますが New repository secret から新たに作ります。 NAMEは先程のコードの中と 同じ表記 で FTP_SERVER など。Value にパスワードとかをそのまま書きます。
Github Secretってこういう他人に知られちゃまずいけどGithub上では使いたい、みたいなときに使うやつなんですね。
yml アップロード
ここまできたら上２つをつなげて次のようなファイルを作ります。
name: hugo on LOLIPOP
on:
push:
branches:
- main # Set a branch to deploy
pull_request:
jobs:
deploy:
runs-on: ubuntu-22.04
concurrency:
group: ${{ github.workflow }}-${{ github.ref }}
steps:
- uses: actions/checkout@v4
with:
submodules: true
fetch-depth: 0
- name: Setup hugo
uses: peaceiris/actions-hugo@v2
with:
hugo-version: 'latest'
- name: Build
run: hugo
- name: Sync files
uses: SamKirkland/FTP-Deploy-Action@v4.3.4
with:
server: ${{ secrets.FTP_SERVER }}
username: ${{ secrets.FTP_USERNAME }}
password: ${{ secrets.FTP_PASSWORD}}
local-dir: ./public/
server-dir: /blog/
そしてhugoディレクトリの直下から .github/workflows/main.yml とおいておけば完了。
git push して Action を登録、実行。最初の数回はまるごとサーバーにアップロードするので結構時間かかりますがその後は変更箇所のみの更新になるので数秒〜数十秒ですみました。
雑記・感想
少し前まではNetlifyのHUGOデプロイサービスを使っていました。今回別サイトを立ち上げる関係でレンタルサーバーを借りることになり容量が余りまくって使いたくなったのとドメインを使いたかったのでロリポップに移行しました。
Github と Actionをすでにつくってくれている人々のおかげですごい楽にできるのでいいですね。
静的サイトジェネレーターはCMSが覇権を握っている?Webサイトの世界でもなんだかんだ一部の人々に支持され続けるような気がしますね。特にこのサイトみたいな管理人が1人または少数でサイト構造も単純であればCMSのメリットが薄れるので。
