本記事は本郷学園マイコン部 Advent Calendar 2023の21日目の記事です。

はじめに

こんにちは、2023年度の高校マイコン部の（元）部長です。

中二の頃に作成したFC2ホームページで公開しているサイトを編集しようとしたところ、FC2ホームページのホームページビルダーが使いにくかったのでGitHubからアップロードしたいと思い立ちました。

FC2ホームページ側の設定

FC2はFTPによるファイルの操作を受け付けているので今回はそれを利用します。

まずはFC2ホームページにアクセスし、FTP設定を開きます。

次に「FTP接続ロックをしない」を選び、「設定変更する」を押してください。

また、その下にある

ホスト名（ホストアドレス）
ユーザー名
パスワード

の3つをメモしておいてください。

以上でFC2ホームページ側の設定は終わりです。

GitHub側の設定

repository secretの設定

まず新規のリポジトリを作成し、Settingsタブに移動します。

そこからSecrets and variablesからActionsを選んでください。

そこからNew repository Secretボタンを押します。

そうすると以下のような画面が出るので、先ほどメモしておいた情報を入力します。

Name	Secret
SERVER_NAME	ホスト名（ホストアドレス）
USER_NAME	ユーザー名
PASSWORD	パスワード

のように入力します。

GitHub actionの設定

次にActionsタブを開き、Simple workflowの項目のConfigureボタンを押します。

すると以下のような画面が出るので、まず上のファイル名をmain.ymlに書き換え、その下のテキストボックスを書き換えます。書き換えが終わったらCommit changes...でコミットして変更を保存します。

main.yml

# This is a basic workflow to help you get started with Actions

# 名前は任意
name: fc2web-ftp-deploy

# Controls when the workflow will run
on:
  # Triggers the workflow on push or pull request events but only for the "main" branch
  push:
    branches: [ "main" ]

  # Allows you to run this workflow manually from the Actions tab
  workflow_dispatch:

# A workflow run is made up of one or more jobs that can run sequentially or in parallel
jobs:
  #ここの名前も自由に設定
  ftp-deploy:
    # The type of runner that the job will run on
    runs-on: ubuntu-latest

    # Steps represent a sequence of tasks that will be executed as part of the job
    steps:
      # Checks-out your repository under $GITHUB_WORKSPACE, so your job can access it
      - uses: actions/checkout@v3

      - name: Sync files
        # バージョンは現在(2023/12/16)時点で最新のv4.3.4
        uses: SamKirkland/FTP-Deploy-Action@v4.3.4
        with:
          server: ${{ secrets.SERVER_NAME }}
          username: ${{ secrets.USER_NAME }}
          password: ${{ secrets.PASSWORD }}
          # 必要に応じてデプロイ先のディレクトリを指定
          server-dir: ${{ secrets.SERVER_DIR }}

コミットが完了するとデプロイが開始します。しかし.githubディレクトリ(main.ymlが入っているディレクトリ)は同期されないようになっています。

以上です。

実際にデプロイする

デプロイ方法は簡単です。

まずは適当にローカルにリポジトリをクローンしてファイルを作成して内容を記述します。

これをmainブランチにプッシュするとFC2ホームページへのデプロイが始まります。

実際にサイトを確認してみると、

このようになり、実際にデプロイできていることがわかりますね。

ファイルを編集したり、削除したときも変更されるようになっています。

おわりに

これによって今までD&DでいちいちファイルをアップロードしていたのがGitHubにPushするだけでできるようになりましたね。

~~じゃあそれGitHub pagesでよくない？~~

それとマイコン部もWordPressでサイトを公開しているので覗いていってください。

明日は ■■■■ さんの ×××× です。