FC2ホームページにGitHubからファイルをアップロードする

本記事は[本郷学園マイコン部 Advent Calendar 2023](https://qiita.com/advent-calendar/2023/hongomcc)の21日目の記事です。

https://qiita.com/advent-calendar/2023/hongomcc

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

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

# FC2ホームページ側の設定
FC2はFTPによるファイルの操作を受け付けているので今回はそれを利用します。

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

![fc2_hp.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2580976/36a8cb51-d951-bf0c-1bcf-3ab908a61ad9.png)

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

また、その下にある

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

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

![fc2-ftp.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2580976/57212a7a-158d-08c6-673b-2c71c18a3e9d.png)

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

# GitHub側の設定

## repository secretの設定

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

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

![github-setting.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2580976/77cbfd92-ae81-fea5-99d6-70b4dec4dc7f.png)

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

![new-repository-secret.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2580976/2fbfaa8f-5dc6-b422-1f1d-79c1cd88742d.png)

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

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

のように入力します。

![repository-secret.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2580976/763cd658-b5c5-b541-6578-d00d06c9e9b3.png)

## GitHub actionの設定
次に`Actions`タブを開き、`Simple workflow`の項目の`Configure`ボタンを押します。

![simple-workflow.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2580976/8f0feb24-94f2-1a32-4df3-7f5b348b7a55.png)

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

```yml: 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 }}

```

![main-yml.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2580976/4a751b0b-9986-80e2-7c62-7dc291ae7cc4.png)

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

以上です。

# 実際にデプロイする

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

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

![write-index.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2580976/92f7daad-ef1c-8467-3f23-e97eab675716.png)

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

![deploying.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2580976/40098a7e-4ab1-4527-10e8-440cdf9536e5.png)

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

![site-result.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2580976/031d7615-7669-0d09-aa9d-7dafd90f528f.png)

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

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

# おわりに

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

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

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

http://hongomcc.net

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