3
1

More than 1 year has passed since last update.

MkDocsで作成した静的サイトをGitHub Actionsを使ってGitHub Pagesに自動でデプロイする

Last updated at Posted at 2022-11-28

やったこと

  • あらかじめリポジトリは GitHub にあげておく
  • MkDocs をローカルで使えるようにする
  • GitHub Actions が実行できる環境を作る
  • GitHub Actions の設定ファイルを追加する
  • GitHub Pages の設定を変更する

MkDocs をローカルで使えるようにする

  • MkDocs を pip でインストールして、Hello World する
    • 確認はhttp://127.0.0.1:8000/ にアクセスすればできる
pip install mkdocs
mkdocs new cleantted_action_test
mkdocs serve
  • 静的コンテンツの作成は以下でできる
mkdocs build

GitHub Actions が実行できる環境を作る

Python のライブラリをインストールできる準備をする

  • requirements.txt を用意する
requirements.txt
mkdocs
mkdocs-material

GitHub Actions で Pages のデプロイ用の SSH 鍵を用意する

  • デプロイ用の SSH 鍵を作成する
ssh-keygen -t ed25519 -C "$(git config user.email)" -f gh-pages -N ""
  • ユーザーの SSH keys に公開鍵を登録する

    • ユーザーの「Setting」→「SSH and GPG keys」→ 「New SSH key」
    • 公開鍵を登録する
  • リポジトリに SSH 秘密鍵を登録する

    • リポジトリの「Setting」→「Secrets」の「Actions」→「New repository secret」
    • 「Name」を ACTIONS_DEPLOY_KEY にして秘密鍵を登録する

GitHub Actions の設定ファイルを追加する

  • ./.github/workflows/ 配下に設定のymlファイルを追加する(名前は任意)
    • master に push されたらデプロイするように設定
name: Deploy MkDocs

on:
  push:
    branch:
      - master

jobs:
  deploy:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout the repository
        uses: actions/checkout@v3
     
      - name: Install MkDocs
        run: python3 -m pip install -r requirements.txt     
      - name: Deploy HTML files
        run: mkdocs build --verbose --clean --strict
     
      - name: mkdocs deploy
        uses: peaceiris/actions-gh-pages@v3
        with:
          deploy_key: ${{ secrets.ACTIONS_DEPLOY_KEY }}
          publish_dir: ./site

GitHub Pages の設定を変更する

  • リポジトリのから、Pages ターゲットブランチを gh-pages に変更する
    • 「設定」→「Pages」→「Build and deployment」→ 「gh-pages/(root)」を選択して「Save」
    • 補足: gh-pages のブランチは Actions を一度実行するとできる

Pasted image 20221125203943.png

参考文献

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