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

ブログをソース管理しよう！【Docusaurus編】

· 約6分
Bony_Chops

みなさんこんにちは，Bony_Chops です．この度，ブログを始めてみました．どうぞよろしくおねがいします．
また，この記事は長野高専 Advent Calender 2022 11 日目の記事でもあります．急遽アドカレ仕様に書き直しました w

注意

急いで書いているため，日本語がおかしい箇所があるかもしれません．Issue，PR はこちらから

既視感の正体​

「あれ？お前昔からブログやってなかったっけ？」という方，鋭いです．というのも，そもそもブログはほねつき備忘録でやってます．つまり正確に言えば，ブログ環境の移行ですね．

なぜ移行したの？​

今回ブログを移行させるにあたって，そのモチベーションは次になります．

  • オレオレブログがしたかった
    • とあるサービスに依存したブログから移行したかった
  • 自分のドメインでホストしたかった
    • 従来使っていたはてなブログは無料だと独自ドメインが使えない
  • Docusaurus のブログ機能をめちゃめちゃ使ってみたかった
    • 正直ここの要因がでかい

運用​

このブログは GitHub のBonyChops/blogで管理しています．ソースコードを手元で管理しているので，いままではブログ会社が閉じればおしまいでしたが，今はソースさえあれば無敵です．Yahoo!ブログ終了の悲劇とかを回避できますね．

あとは，GitHub Actions を用いてFirebase Hostingsに自動デプロイを組みます．mainブランチで blog.b7s.dev，プルリクを投げるとそれに準じたプレビューチャンネルとして適当な URL にデプロイされるようになってます

GitHub Actionsのワークフロー

firebase init hostingsで自動生成されたワークフローですが，参考程度にどうぞ．

# This file was auto-generated by the Firebase CLI
# https://github.com/firebase/firebase-tools

name: Deploy to Firebase Hosting on merge
"on":
  push:
    branches:
      - main
jobs:
  build_and_deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - run: npm ci && npm run build
      - uses: FirebaseExtended/action-hosting-deploy@v0
        with:
          repoToken: "${{ secrets.GITHUB_TOKEN }}"
          firebaseServiceAccount: "${{ secrets.FIREBASE_SERVICE_ACCOUNT_BLOG_B2D8F }}"
          channelId: live
          projectId: blog-b2d8f
# This file was auto-generated by the Firebase CLI
# https://github.com/firebase/firebase-tools

name: Deploy to Firebase Hosting on PR
"on": pull_request
jobs:
  build_and_preview:
    if: "${{ github.event.pull_request.head.repo.full_name == github.repository }}"
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - run: npm ci && npm run build
      - uses: FirebaseExtended/action-hosting-deploy@v0
        with:
          repoToken: "${{ secrets.GITHUB_TOKEN }}"
          firebaseServiceAccount: "${{ secrets.FIREBASE_SERVICE_ACCOUNT_BLOG_B2D8F }}"
          projectId: blog-b2d8f

Docusaurus のすごいところ​

Docusaurus は他にもこんな優れた機能があります

  • i18n 対応
  • ライトテーマ/ダークテーマ切り替え
    • PC なら右上，スマホならサイドメニューにあります
  • その気になればドキュメントも作れる
    • 「俺の取扱説明書」とか作れる(誰得)

セットアップ​

一応アドカレなんで，少しでも有益になるよう軽くやり方を書いておきます．

  1. Docusaurus をセットアップ
    プロジェクト名はblogとかで良いです

    npx create-docusaurus@latest プロジェクト名 classic
    cd プロジェクト名

  2. Docusaurus は本来，ドキュメントを書くためのものなので色んな機能があります．今回は Blog のみにするため，Blog Only モードにします1．

    1. docusaurus.config.jsを編集
    docusaurus.config.js
    module.exports = {
      // ...
      presets: [
        [
          "@docusaurus/preset-classic",
          {
            docs: false, // 任意: ドキュメントを無効にする
            blog: {
              routeBasePath: "/", // ブログページをルートにします
              /* other blog options */
            },
          },
        ],
      ],
    };
    1. ./src/pages/index.jsを削除する．

  3. 先にnpm run buildをしておく．

  4. console.firebase.google.comでプロジェクトを作成する．

  5. firebase init hostingsを実行する．

    警告

    FirebaseCLI がインストールされている必要があります．npm 環境がある場合は以下でインストール．

    npm install -g firebase-tools
    1. 作成したプロジェクトを選ぶ．
    2. 対話型ウィザードを進める．
    ? What do you want to use as your public directory? build
    ? Configure as a single-page app (rewrite all urls to /index.html)? No
    ? Set up automatic builds and deploys with GitHub? Yes
    ? File build/404.html already exists. Overwrite? No
    i  Skipping write of build/404.html
    ? File build/index.html already exists. Overwrite? No
    i  Skipping write of build/index.html

    (中略)

    ✔  Success! Logged into GitHub as BonyChops

    ? For which GitHub repository would you like to set up a GitHub workflow? (format: user/repository) BonyChops/blog

    (中略)

    ? Set up the workflow to run a build script before every deploy? Yes
    ? What script should be run before every deploy? npm ci && npm run build
    ? Set up automatic deployment to your site's live channel when a PR is merged? Yes
    ? What is the name of the GitHub branch associated with your site's live channel? main

    (中略)

    ✔  Firebase initialization complete!

  6. mainブランチに push すると自動的に Firebase Hostings へデプロイされます．

TODO​

  • GitHub で PR を受け付けるにあたって，そのフォーマットを決める
  • 一部設定できていない箇所があるため，終わらせる
    • 編集リンクを直す
    • 色とか変えてみたい
    • いらないものを消す

Footnotes​

  1. Blog-only mode | Docusaurus ↩