メインコンテンツまでスキップ

DocusaurusとGitHub PagesとGitHub Actionでお手軽ブログを始める方法

· 約4分
moritalous

DocusaurusはOSSで公開されている静的サイトジェネレーターです。開発元はMetaです。 GitHub Pages、GitHub Actionsと組み合わせることで、ほんとに簡単にサイトが構築できましたので手順をご紹介します。

概要
  • Docusaurusを使うことで簡単にサイト構築を始めることが可能
  • GitHub Pagesにデプロイすることが可能
  • GitHub Actionsと組み合わせることで、Markdownを更新するだけでサイト更新が可能

プロジェクトの作成

  1. GitHubにリポジトリを作成

    まずはGitHubにリポジトリを作成します。my-docusaurus-v2という名前で作成しました。

  2. Docusaurusプロジェクトを作成

    my-docusaurusがプロジェクト名、classicがテーマです。

    npx -y create-docusaurus@latest my-docusaurus classic

    my-docusaurusディレクトリが作成され、その中にファイルがプロジェクトが生成されます。

    tree -L 1 my-docusaurus
    my-docusaurus
    ├── babel.config.js
    ├── blog
    ├── docs
    ├── docusaurus.config.js
    ├── node_modules
    ├── package.json
    ├── package-lock.json
    ├── README.md
    ├── sidebars.js
    ├── src
    └── static

    5 directories, 6 files
  3. GitHubにコミット&プッシュ

    この状態でコミットとプッシュを行います。

    cd my-docusaurus
    git init
    git add .
    git commit -m "Initial commit"
    git branch -m master main

    git remote add origin https://github.com/moritalous/my-docusaurus-v2.git
    git push --set-upstream origin main
    ヒント

    GitHubにプッシュできました。

    image.png

GitHub Actionの設定

GitHub側の設定

GitHub Pagesの設定を変更し、GitHub Actionsをソースとして設定します。

  1. GitHubの設定

Settings画面のCode and automation欄にあるPagesをクリックします。

image.png

SourceGitHub Actionsに変更します。

image.png

GitHub Actionsの設定ファイルを作成

  1. .github/workflows/deploy.ymlとして以下のファイルを作成します。

    name: Deploy to GitHub Pages

    on:
    push:
    branches:
    - main

    jobs:
    build:
    name: Build
    runs-on: ubuntu-latest
    steps:
    - uses: actions/checkout@v2
    - uses: actions/setup-node@v3
    with:
    node-version: 18
    cache: npm

    - name: Install dependencies
    run: npm ci
    - name: Build website
    run: npm run build

    - uses: actions/upload-pages-artifact@v1
    with:
    path: build

    deploy:
    name: Deploy to GitHub Pages
    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@v1
  2. 作成できたらコミットとプッシュを行います。

    git commit -a -m "Add GitHub Actions"
    git push
  3. GitHub Actions実行

    自動でGitHub Actionsが実行されます。

    image.png

うまくいくとGitHub Pagesにデプロイされます。ただし、Docusaurusの設定が不十分なため見た目が崩れています。

image.png

注記

GitHub PagesのURLはPages設定画面で確認できます。

image.png

Docusaurusの設定

Docusaurusの設定が不十分なため、おかしな見た目となってますので、修正します。

docusaurus.config.jsを変更します。

設定項目設定内容設定値
organizationNameGitHubユーザー名moritalous
projectNameGitHubプロジェクト名my-docusaurus-v2
urlGitHub Pages URL(ドメインまで)https://moritalous.github.io/
baseUrlURLの.github.io以降/my-docusaurus-v2/
trailingSlash末尾の/を自動で付与するかどうか(?)false

更新したらコミットしてプッシュします。

ヒント

GitHub Actionsが自動で始まり、GitHub Pagesが更新されます。便利!

正しく表示されました。

images.png

ヒント

blogディレクトリ内にMarkdown形式でファイルを作成すれば、簡単にブログが構築できます。

参考サイト

https://docusaurus.io/docs/deployment#deploying-to-github-pages https://zenn.dev/zozotech/articles/f2509a21b768ed