はじめに

みなさんこんにちは！
ということでですね、今回は6回も続いた連載の最終回となります。で、これからGitHub Actionsを利用してさくらのレンタルサーバにブログを自動アップロードできるようにします！

対象

• VSCode+Hugoでブログを作りたい方
• GitHubでブログを管理したい方
• さくらのレンタルサーバにブログを自動アップロードしたい方

前提

• Windowsな環境であること
• Hugoをインストールしてあること
• GitHubのアカウントを持っていること
• GitとVSCodeをインストールしていること
  • まだな方は、こちらの記事を参考にインストールしてください。
  • GitHubとの連携まで済ませておいてください。

GitHub上にブログ管理用のリポジトリを作る

GitHub Actionsを使うにはGitHubにブログ管理用のリポジトリが必要となるので作成します。
以下手順です。（かんたんです！）

1. VSCodeのサイドバーにある「ソースコードの管理」を開く
2. 「GitHubに公開」をクリック
3. リポジトリ名を決め、パブリックリポジトリかプライベートリポジトリか選択
4. これでGitHub上にリポジトリが作成できました

さくらのレンタルサーバで行う諸設定

サーバー情報の確認

ここまで出来たら、さくらのレンタルサーバを契約した際に発行された、

1. FTPサーバーのアドレス
2. FTPサーバーのユーザー名
3. FTPサーバーのパスワード の3つを確認してください。これから必要です。
   これらはさくらのレンタルサーバのコントロールパネル（確かトップ画面）から確認できます。

ドメインとディレクトリの設定

ご自身のニーズに合わせてブログ用のドメインとディレクトリを設定してください。この際ディレクトリ名は忘れないようにしてください。
私は癖でドメイン名のディレクトリを作成しています。

ディレクトリの場所を確認

さくらのレンタルサーバのひっかけポイントとして、ディレクトリはコントロールパネルからアクセスできるファイルマネージャーから見ることができる場所と、実際の場所が異なっている、ということがあります。面倒ですね。
仕方がないので、FTPサーバーにFTPクライアントソフトウェア等で接続し、実際の場所を確認してみましょう。Windows環境だとFFFTPが有名ですが、エクスプローラーの標準機能でも接続できます。
すると、作成したディレクトリは/home/ユーザー名/www/の下にあることがわかります。これをしっかりと覚えておいてください。

GitHub Actionsの設定

GitHub Actionsで実装したい機能

ここでGitHub Actionsで何を実装したいか確認します。今回実装したい機能は

1. Hugoでブログをデプロイする
2. デプロイした記事を自動でさくらのレンタルサーバにアップロードする この2つです。まずは諸設定を終わらせておきましょう。

パスワード

GitHub Actionsの設定はYAML形式で記述しますが、ここにFTPサーバーの情報を直接記述することは危険です。ということで、リポジトリのSettingsにあるSecrets and variablesにFTPサーバーの情報を記述して、不特定多数の人に凍情報が漏れないようにします。

1. リポジトリのSettingsを開く
2. Secrets and variablesのActionsを開く
3. New repository secretでシークレットを作成する
   • FTPサーバーのアドレスはシークレット名FTP_SERVERとして保存します
   • ユーザー名のシークレット名はFTP_USERNAMEとして保存します
   • パスワードのシークレット名はFTP_PASSWORDとして保存します
4. 以上で完了です

GitHub Actionsの設定を書く

ではここからGitHub Actionsの設定を書いていきます。

1. Actionsの項目を開きます
2. set up a workflow yourselfをクリックします
3. ファイル名がmain.ymlであることを確認します
4. 次のように記述します

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21

name: ftp upload
on:
  push:
    branches:
      - main
jobs:
  Build-and-Deploy-Action:
    name: Build-and-Deploy-Action
    runs-on: ubuntu-latest
    steps:
      - name: Get latest code
        uses: actions/checkout@v4

      - name: Sync files #ここでさくらのレンタルサーバにアップロード
        uses: SamKirkland/FTP-Deploy-Action@v4.3.5
        with:
          server: ${{ secrets.FTP_SERVER }}
          username: ${{ secrets.FTP_USERNAME }}
          password: ${{ secrets.FTP_PASSWORD }}
          local-dir: ./public/
          server-dir: #さきほど覚えたディレクトリの場所

5. これで完了です

【2025/04/22加筆】 以下は動作しなくなったため削除。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

      - name: Setup Hugo #ブログをデプロイするためにHugoをセットアップ
        uses: peaceiris/actions-hugo@v3
        with:
          hugo-version: 'latest'
          extended: true

     - name: Build #ここでデプロイ
        run: hugo --minify

      - name: List output files
        run: ls public/

おわりに

さて、これですでにActionsが動き始めていると思います。これが成功し、ブログにアクセスすることができればこれですべて完了となります。

ということで、6回続いたこの連載もここまでで終了としたいと思います。長い間ありがとうございました。
この連載も修正点等あれば今後も追記していきます。

それでは！

参考文献

忘れました…思い出したら追記します。