GitHub Pages

このチュートリアルでは、GitHub Actions を使用して GitHub Pages にデプロイします。これは、パブリックリポジトリとプライベートリポジトリの両方で機能します。ソースフォルダをGitHubにアップロードしたくない場合は、ワンコマンドデプロイセクションに進んでください。

  1. username.github.io という名前のリポジトリを作成します。username は GitHub でのあなたのユーザー名です。すでに別のリポジトリにアップロードしている場合は、代わりにリポジトリの名前を変更してください。
  2. Hexoフォルダのファイルをリポジトリのデフォルトブランチにプッシュします。デフォルトブランチは通常 main ですが、古いリポジトリでは master ブランチを使用している場合があります。

  • main ブランチを GitHub にプッシュするには

    $ git push -u origin main

  • public/ フォルダはデフォルトでアップロードされません（また、アップロードすべきではありません）。.gitignore ファイルに public/ 行が含まれていることを確認してください。フォルダ構造は、このリポジトリとほぼ同じである必要があります。

  1. ローカルマシンで使用している Node.js のバージョンを node --version で確認します。メジャーバージョン（例：v20.y.z）をメモしておいてください。
  2. GitHub リポジトリの設定で、設定 > Pages > ソース に移動します。ソースを GitHub Actions に変更して保存します。
  3. 次の内容で .github/workflows/pages.yml をリポジトリ内に作成します（前の手順でメモした Node.js のメジャーバージョンを 20 に置き換えてください）。
.github/workflows/pages.yml
name: Pages

on:
  push:
    branches:
      - main # default branch

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
        with:
          token: ${{ secrets.GITHUB_TOKEN }}
          # If your repository depends on submodule, please see: https://github.com/actions/checkout
          submodules: recursive
      - name: Use Node.js 20
        uses: actions/setup-node@v4
        with:
          # Examples: 20, 18.19, >=16.20.2, lts/Iron, lts/Hydrogen, *, latest, current, node
          # Ref: https://github.com/actions/setup-node#supported-version-syntax
          node-version: "20"
      - name: Cache NPM dependencies
        uses: actions/cache@v4
        with:
          path: node_modules
          key: ${{ runner.OS }}-npm-cache
          restore-keys: |
            ${{ runner.OS }}-npm-cache
      - name: Install Dependencies
        run: npm install
      - name: Build
        run: npm run build
      - name: Upload Pages artifact
        uses: actions/upload-pages-artifact@v3
        with:
          path: ./public
  deploy:
    needs: build
    permissions:
      pages: write
      id-token: write
    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}
    runs-on: ubuntu-latest
    steps:
      - name: Deploy to GitHub Pages
        id: deployment
        uses: actions/deploy-pages@v4
  1. デプロイが完了したら、username.github.io で Web ページを確認します。

注 - CNAME を使用してカスタムドメイン名を指定する場合は、source/ フォルダに CNAME ファイルを追加する必要があります。詳細情報。

プロジェクトページ

GitHub 上にプロジェクトページを作成したい場合は

  1. GitHub 上でリポジトリに移動します。設定タブに移動します。あなたのブログが username.github.io/repository で利用できるように、リポジトリ名を変更します。repository は、blog や hexo のように任意の名前にすることができます。
  2. _config.yml を編集し、url: の値を https://username.github.io/repository に変更します。
  3. GitHub リポジトリの設定で、設定 > Pages > ソース に移動します。ソースを GitHub Actions に変更して保存します。
  4. デフォルトブランチにコミットしてプッシュします。
  5. デプロイが完了したら、username.github.io/repository で Web ページを確認します。

ワンコマンドデプロイ

次の手順は、ワンコマンドデプロイページから引用したものです。

  1. hexo-deployer-git をインストールします。
  2. 次の設定を _config.yml に追加します（既存の行がある場合は削除します）。
deploy:
  type: git
  repo: https://github.com/<username>/<project>
  # example, https://github.com/hexojs/hexojs.github.io
  branch: gh-pages
  1. hexo clean && hexo deploy を実行します。
  2. username.github.io で Web ページを確認します。

役立つリンク