Hugoでrsyncを使った記事公開方法の例（エックスサーバー利用）

Hugoを使って記事を公開するのに、アップロード先によってやり方が違います。

このサイトは、エックスサーバーに借りている場所にHugoで作った静的ページ（HTML）をアップロードして公開しています。そのため、FTPで上げることが一番簡単な方法です。
ただ、そうなるとこのサイト程度の記事数でも、かなりの時間がかかってしまいます。

そこで、ネット検索で調べると、rsyncでアップ出来る手法が見つかりました。これなら差分ファイルだけなので速いですよね。

Hugoだとちょっと特殊(?)な一般的なホスティングサーバーをアップロード先としたケースにはなりますが、ザッと備忘録として残しておきます。

環境も特殊か
1. コマンドからSSH接続する準備
2. configファイルを作成する
デプロイ用のシェルスクリプトの作成

環境も特殊か

この記事では次の環境で実現しています。
見事にすべて当て嵌まれば、そのまま使えますが、そうでなくても一部のやり方は真似できるでしょう。

ホスティングサーバはエックスサーバー
SSH接続
rsyncで同期更新
hugoの実行環境はMac

最終的にこれらを1つのスクリプトファイルで実行すれば終わりです。

コマンドからSSH接続する準備

SSH接続するため、ホスティングサーバへは秘密鍵と公開鍵の設定を施します。

Hugoの公式ページにあるやり方でも問題ないのですが、エックスサーバーは、キーを作成した段階で公開鍵はサーバにコピーしなくても良くなっています。
つまり、自分のローカル側（今回はMac）でキーを作成せず、エックスサーバー起点でキーを作成する形になります。
そのため、hugoの解説の中でコピーに関して2箇所ほど飛ばすことができました。

基本的にエックスサーバー側の管理画面でパスワードを決めてキーを生成するだけです。別にあるSSHの接続をON(有効)にすることを忘れずに。

ダウンロードされた.keyファイルの名前は、サーバーIDになっています。サーバーIDはユーザーIDにもなっています。ここが少しややこしい

表にするとこんな感じ。

	設定項目
サーバー名(ホスト名)	サーバーID.xsrv.jp（初期ドメイン）
	または、sv***.xserver.jp
ユーザー名	サーバーID
接続ポート	10022

ダウンロードしたサーバーID.keyをホーム直下にある.ssh/に保存します。
~/.ssh/ディレクトが無い場合は新たに作ります。

ダウンロードしたキーファイルは、パーミションを変更しておかないと怒られる。

chmod 600 サーバID.key

ここで接続テストをするなら

ssh -l サーバID -p 10022 -i ~/.ssh/サーバID.key sv*****.xserver.jp

SSH接続だけならこのままでも良いのですが、この設定を保存しておけば、接続させるコマンドが長くならないようにできます。
最終的に「サーバID＠ホスト名」で接続できるように設定します。

configファイルを作成する

nano ~/.ssh/config

中身は次のような情報で記述する。

host xserver
Hostname sv*****.xserver.jp
Port 10022
User サーバID
IdentityFile ~/.ssh/サーバID.key
ServerAliveInterval 60

これで接続する際のコマンドは次のようになります。

ssh サーバID＠host名

.keyを作成時に設定したパスワードを聞かれれば成功です。

Enter passphrase for key '/Users/ユーザー名/.ssh/サーバID.key':　にkeyのパスワードを入力して接続する。

ここまでを踏まえて、hugoをデプロイするためのシェルスクリプトを作成していきます。

デプロイ用のシェルスクリプトの作成

デプロイするコマンドは、Hugoが生成するpublicフォルダを削除してからHugoコマンドで生成させています。2つのコマンドを実行させているわけです。

これに加えて、SSHで接続してrsyncで同期させるやり方を加えています。

rsync（同期更新）で気を付けなければならないのは、rsyncのコマンドで、ディレクトリの指定方法を間違えてしまうととんでもないことになります。（ローカル側が消えてしまうとか！）

deployコマンドの作成場所は、私はHugoのホームにしています。そもそもHugoのホームでなければHugoコマンドできませんから都合がよろしい。

——Hugoコマンドは、Mac側の.bashrcのaliasで指定すると、どのディレクトに居ても実行できますが、分かりやすいように、ここではhugoホームで実行する形です。
冒頭で説明したように、hugoホーム以下に複数のWebサイトを管理している関係で、~/hugo/webサイト名に作成しました。

今回作成したスクリプトファイルdeplyを、webサイトの分だけ作成すれば、それぞれのホームフォルダで実行して別々に更新させることができます。
もしも1つだけなら、~/hugo直下でもいいでしょう。

スクリプトの中身

コマンドは、主に3つ繋げています。

パブリックディレクトリ自体を削除

rm -Rf public

不要なファイルを削除

hugo --gc --cleanDestinationDir

rsyncコマンドの実行

rsync -avz --delete public/ ${USER}@${HOST}:~/${DIR}

3番目のrsyncコマンドはオプションに-avz、–deleteも加え、サーバ側のフォルダも削除できるようにしています。この辺は怖い部分もありますから、サーバ側を消さない前提なら–deleteオプションは外してください。

rsyncで変数になっている部分は、スクリプト前段で設定しています。

USER
HOST
DIR

アップロードや削除をしない除外設定

但し、このままだと、Mac特有の隠しファイル「.DS_Store」までアップロードされてしまいます。悪さはしないとしても、あまり気持ちの良いものではありません。

こういった例外をアップロードしないのは、rsyncのオプションにあります。
1つのファイルくらいなら直に書いてしまってもいい。（–excludeオプション）

--exclude='.DS_Store'

　
オプションは--excludeや--exclude-from=FILEで指定できます。
しかし、今回は複数あったのと、長いコマンドだと後から分かりにくい面もあり、別ファイルとして列挙し指定しました。
ファイルにまとめたので後者で指定しています。

--exclude-from='ignore_list'

　
ignore_listは単純にリスト形式で記述しただけです。1行に1つ。同じディレクトに配置しておきます。

- .DS_Store
- .htaccess
- robots.txt

公開させるスクリプトファイル

最終的にはこんな感じ。

#!/bin/sh
USER=ホスティングサーバへSSHログインするユーザー名
HOST=xserver
DIR=settrigger.jp/public_html/

rm -Rf public && hugo --gc --cleanDestinationDir && rsync -avz --delete --exclude-from='ignore_list' public/ ${USER}@${HOST}:~/${DIR}

exit 0

忘れずに実行権限を与えてあげれば準備OKです。