Skip to content

GitHub Actionsでデプロイを自動化する

カスタムドメインのサイトの更新を自動化した～～～い‼

ということで、GitHub Actionsを使って、サイトのデプロイを自動化する方法について説明します。
この辺のネタって死ぬほどこすられてるから、あまり需要はないかもしれませんが、いいんです。 自分で調べて、やってみたいから、やる。そういうものです。

Note

カスタムドメインを取得していなくても、GitHub Pagesを使ってサイトを公開することはできます。 その場合は接続先のドメインが<username>.github.ioのような形になります。

前提の環境

  • 独自ドメインを取得している
  • GitHubにリポジトリを作成している
  • MkDocsを使ってサイトを作成している
  • Material for MkDocsを使ってサイトを作成している

GitHub Actionsって何？

CI/CDのプラットフォームで、リポジトリに対して、ちょっとコードを管理、提供していくうえで便利な機能が集まってます！

自分のサイトの更新について

自分のサイトはMkDocsを使って作成しています。
概要自体はMkDocsを使ってサイトを作るに書いています。

ステップだけで言うと以下のような流れです。

  1. MkDocsで記事やPKMを作成
  2. 作成したMarkdownをmkdocs buildコマンドでビルド
  3. siteディレクトリに出力されたHTMLファイルをWinScpを使ってサーバーにアップロード

ここでめんどくさいのが、毎回手動でビルドして、アップロードすることです。(つまりは全部)
そして何より、Material for MkDocsにはGitHub Actionsのテンプレートが用意されている(!?)ので、これを使わない手はないです。

Note

生き恥をさらす場所を作るを執筆していた当時は上記の機能を知らなかったので、手動でビルドしていました。 ついで言うと今回でデプロイを自動化した際に、契約しているサーバーがいらないことに気づきました。 必要なのでドメインの取得だけなので、静的サイトを作るだけならサーバーは不要です。ドメインだけで十分です。 やらかしたなぁ...。でもこういう失敗も必要だと思ってます。あるものを使っていきたいのでサーバーは別の何かに使います。 WordPressとか、いれてインターネット黎明期のようなサイトを作るのも面白いかもしれません。

早速設定をしていきましょう。

GitHub Pagesの設定

まずはGitHub Pagesの設定を行います。
GitHub Pagesの設定は、ホストするたリポジトリのSettings->Pagesから行います。

Build and deployment

  1. SourceをDeploy from a branchに設定します。
  2. Branchをgh-pagesに設定します。

Custom domain

  1. Custom domainに自分のドメインを入力します。
  2. Saveボタンを押します。
  3. しばらく待ちます。
  4. Enforce HTTPSにチェックを入れます。

1751646994.png

最終的にはこのような感じ

DNSの設定

GitHub Pagesの設定が完了したら、次はDNSの設定を行います。

CNAMEファイルの確認

さっきの設定がうまくできていれば自分のリポジトリにCNAMEというファイルが作成されているはずです。

Note

なくてもOK,もしない場合は自分で作成してください。

CNAMEファイルにはさっき設定したドメインが記載されているはずです。 

notes.kuretanone.net
これをdocsディレクトリに配置しておきます。

DNSの設定

そのドメインを管理しているDNSの設定画面に移動します。
CNAMEレコードを追加します。

XServerを利用している場合は、以下のように設定します。

項目 入力内容
ホスト名 notes.kuretanone.net
種別 CNAME
内容 KuretaNone.github.io

1751646641.png

GitHub Actionsの設定

あとちょっとです‼
先述の通り、Material for MkDocsにはGitHub Actionsを利用して、GitHub Pagesにデプロイするための資料(Publishing your site)が用意されています。

まずはサイトの通り .github/workflows/ci.ymlというファイルを作成します。 サイトに記載している内容をそのままコピペすると、プラグインをインストールするステップが抜けているので、 以下のように修正します。

Note

ほかにも+マークがついてある部分で、補足が必要なことが書いてあります。(下記もその一つです。)

- - run: pip install mkdocs-material 
+ - run: pip install --upgrade pip
+ - run: pip install -r requirements.txt

事前に、requirements.txtというファイルが必要なのですが、これはサイトのbuildに必要なプラグインを記載すればいいです。 MkDocsを使ってサイトを作るを読んで？作業をしてる人はもうすでにあると思います。

さぁ、 以上の設定をすると、mainブランチにプッシュしたときに自動的にMkDocsのビルドが行われます。

ビルドに成功すると、gh-pagesブランチにビルドされたサイトがアップロードされます。

Note

手動でもmkdocs gh-deployコマンドを実行することで、gh-pagesブランチにビルドされたサイトをアップロードすることもできます。

1751647798.png

まとめ

これで、GitHub Actionsを使って、MkDocsで作成したサイトをGitHub Pagesを利用してカスタムドメインにデプロイすることができるようになりました。
これにより、サイトの更新が自動化され、手動でビルドやアップロードを行う必要がなくなります。
プッシュのタイミングによっては、更新途中の記事が公開されたりするデメリットもありますが、(今回の記事はまさにそれ)

自動化という素晴らしい響きがあるので今回は採用を選択しました。

裏話

上ではああしろだのこうしろだの言ってますが、実際にやってみるといろいろと問題が出てきます。 何もわからずAIにci.ymlを作成してもらいましたが、うまくいきませんでした。 以下はその格闘記録。

なに書けばいいかわからんからとりあえずAIに書かせる。

なに書かれたからやっぱりわかんないから、あとでちゃんと読む。

とりあえずやってみよう。プッシュだプッシュ

プッシュしました。( b1e663b3fb631e57302ef8b090a3855e15155638 )

Buildに失敗した

1751472553.png

どうやら失敗したみたいです。 失敗原因は、actions/upload-artifact@v2 という GitHub Actions のアクションが非推奨（サポート終了）になったことが理由です。GitHub公式のアナウンスにも記載されています。 ということで v3に更新。

1751473452.png また失敗だ！って思ったらこれは依存プラグインが足りないからだ。 なので、requirements.txtを更新しました。

+ mkdocs-material[imaging]

Note

ちゃんと公式サイトのドキュメントを読めばこうはなりません。

今度はDeployに失敗した

人生と同じで一個解決したら次の問題が出て来ます。 今度はDeploy to GitHub Pagesのステップで失敗しました。

最後

1752076409.png

最終的には上記のように何度もデプロイに失敗しました。 この辺で心が折れて公式ドキュメントをDeeplで翻訳しながらちゃんと読み進めたところ1時間くらいでサクッと解決。あぁ馬鹿らしい。

いつもこんな感じです。公式ドキュメントを読まないから余計時間がかかる。

他にも - DNSの設定がうまくいかない - ほかのサイトを見てもAレコードを設定しろといわれるが具体的な値がわからない 等の問題があり、Link to this pageを見てもらえればわかる通り、結構時間がかかりました。(日にちまたいでるのもあるけど)

最終的には、参考リンクを読んで解決したのでやはり信頼できるのは1次情報や、公式のドキュメントですね。
僕はドキュメントを読めない病気みたいなのにかかっていて、素人のテックブログを読んでしまうことが多いです。

猛省

参考リンク

Links to this page