今回は、本ブログのホスト先として利用している「さくらのレンタルサーバー」に、NetflyのようにHugoで生成したサイトを自動デプロイする仕組みを構築したので、その方法をメモしておきたいと思います。
便利なNetflyのHugo自動デプロイ機能
よくあるHugo+Netflyの組み合わせのいいところとして、簡単にHugoをビルドしてデプロイしてくれるという点があると思います。
Netlify自体がHugoをサポートしているということで、Netflyでホスト先になるアプリを作成したら、連携するGithubリポジトリを選択して、Hugoのversionなどを指定するだけで、ビルドパイプラインを組んで自動デプロイを構築することができます。
具体的な方法は割愛しますが、以下の記事が詳しいです。
Hugoで生成した静的ファイルをホスティングサーバにアップして公開作業をします。今回はGitHub連携もできるNetlifyにデプロイしました。
毎回設定するようなものではないですが、とても簡単にホストすることができるため、Hugoでブログを組み上げるハードルをがっつり下げてくれていると思います。
さくらレンタルサーバーに自動デプロイしたい
レンタルサーバーは比較的プリミティブなサービスなので、Netlifyのようなデプロイサービスが提供されていることはあまりない印象です。
しかし、私は個人的な理由から、さくらレンタルサーバーを使いたかったので、さくらレンタルサーバーでNetlifyのような運用UXを実現するために、自動デプロイの仕組みをGithub Actionを使って構築することにしました。
パイプラインで実行する必要があるタスクは以下の2つです。
Githubリポジトリで、masterの更新をトリガーにこれらを順次実行することで、自動で公開まで完了することができそうです。
Hugoのビルド
まず、Hugoのビルドですが、以下のActionを使います。
GitHub Actions for Hugo ⚡️ Setup Hugo quickly and build your site fast. Hugo extended, Hugo Modules, Linux (Ubuntu), macOS, and Windows are supported. - GitHub - peaceiris/actions-hugo: GitHub Acti...
公式のREADMEにある通り、自身のパイプラインに組み込んで、利用するHugoのversionを指定するだけです。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
jobs:
deploy:
runs-on: ubuntu-22.04
concurrency:
group: ${{ github.workflow }}-${{ github.ref }}
steps:
- uses: actions/checkout@v3
with:
submodules: true # Fetch Hugo themes (true OR recursive)
fetch-depth: 0 # Fetch all history for .GitInfo and .Lastmod
- name: Setup Hugo
uses: peaceiris/actions-hugo@v2
with:
hugo-version: '0.101.0'
- name: Build
run: hugo
|
さくらへのFTPアップロード
続いて、ビルドした結果をさくらレンタルサーバーへFTPアップロードします。FTPアップロードは以下の記事を参考にさせて頂きました。
さくらレンタルサーバーでも自動デプロイがしたい！【GitHubActions】
こちらで紹介されている、以下のActionを利用します。
Deploys a GitHub project to a FTP server using GitHub actions - GitHub - SamKirkland/FTP-Deploy-Action: Deploys a GitHub project to a FTP server using GitHub actions
上記ブログの紹介の通りですが、このActionにFTP serverのホスト、ユーザーネーム、パスワードを渡す必要があるため、GithubリポジトリのSettings > Secretsでこれらの変数をシークレットとして設定します。
設定ができたら、以下のようにシークレット変数を参照しつつ、パイプラインに組み込みます。
1
2
3
4
5
6
7
8
|
- name: Sync files
uses: SamKirkland/FTP-Deploy-Action@4.0.0
with:
server: ${{ secrets.FTP_SERVER }}
username: ${{ secrets.FTP_USERNAME }}
password: ${{ secrets.ftp_password }}
local-dir: ./public/
server-dir: /path/to/www/
|
Github Actionのパイプライン
以上で、Hugoの自動デプロイ用パイプラインが組めました。最終的な全体のGithub Action Workflowはこんな感じです。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
|
name: Blog Deploy
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@v3
with:
submodules: true # Fetch Hugo themes (true OR recursive)
fetch-depth: 0 # Fetch all history for .GitInfo and .Lastmod
- name: Setup Hugo
uses: peaceiris/actions-hugo@v2
with:
hugo-version: '0.101.0'
- name: Build
run: hugo
- name: Sync files
uses: SamKirkland/FTP-Deploy-Action@4.0.0
with:
server: ${{ secrets.FTP_SERVER }}
username: ${{ secrets.FTP_USERNAME }}
password: ${{ secrets.ftp_password }}
local-dir: ./public/
server-dir: /path/to/www/
|
まとめ
これで、Netlifyのような自動デプロイの仕組みを実現することができました！本ブログを公開してから2週間くらい利用していますが、まったくトラブルなく利用できています。
FTPのアップロードスピードは、レンタルサーバーに依存しますが、さくらレンタルサーバーライトを利用している自分の環境では、それほど遅いとは感じずに運用できています。
さくら以外でも、レンタルサーバーでHugoのサイト公開を検討している方は、同じ仕組みを利用できると思いますので、参考になれば幸いです。
また、以下の記事で、当ブログのHugoへの移行について紹介していますので、合わせてご覧ください。
これまで個人ブログをはてなブログで運用してきたのですが、本日をもって卒業し、Hugoによる静的サイトとしてさくらレンタルサーバーに引越しまし...
以下の記事でお知らせした通り、はてなブログで公開していたブログをHugoで作り直して、さくらのレンタルサーバーに移設しました。 はてなブログか...
