LoginSignup
3
1

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

Last updated at Posted at 2023-12-20

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

はじめに

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

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

FC2ホームページ側の設定

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

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

fc2_hp.png

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

また、その下にある

  • ホスト名(ホストアドレス)
  • ユーザー名
  • パスワード

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

fc2-ftp.png

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

GitHub側の設定

repository secretの設定

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

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

github-setting.png

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

new-repository-secret.png

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

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

のように入力します。

repository-secret.png

GitHub actionの設定

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

simple-workflow.png

すると以下のような画面が出るので、まず上のファイル名を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 }}

main-yml.png

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

以上です。

実際にデプロイする

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

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

write-index.png

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

deploying.png

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

site-result.png

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

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

おわりに

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

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

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

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

3
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
1