みなさんこんにちは，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 なら右上，スマホならサイドメニューにあります
- その気になればドキュメントも作れる
- 「俺の取扱説明書」とか作れる(誰得)
セットアップ
一応アドカレなんで，少しでも有益になるよう軽くやり方を書いておきます．
-
Docusaurus をセットアップ
プロジェクト名はblogとかで良いですnpx create-docusaurus@latest プロジェクト名 classic
cd プロジェクト名 -
Docusaurus は本来，ドキュメントを書くためのものなので色んな機能があります．今回は Blog のみにするため，Blog Only モードにします1．
docusaurus.config.jsを編集
docusaurus.config.jsmodule.exports = {
// ...
presets: [
[
"@docusaurus/preset-classic",
{
docs: false, // 任意: ドキュメントを無効にする
blog: {
routeBasePath: "/", // ブログページをルートにします
/* other blog options */
},
},
],
],
};./src/pages/index.jsを削除する．
-
先に
npm run buildをしておく． -
console.firebase.google.comでプロジェクトを作成する．
-
firebase init hostingsを実行する．警告FirebaseCLI がインストールされている必要があります．npm 環境がある場合は以下でインストール．
npm install -g firebase-tools- 作成したプロジェクトを選ぶ．
- 対話型ウィザードを進める．
? 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! -
mainブランチに push すると自動的に Firebase Hostings へデプロイされます．
TODO
- GitHub で PR を受け付けるにあたって，そのフォーマットを決める
- 一部設定できていない箇所があるため，終わらせる
- 編集リンクを直す
- 色とか変えてみたい
- いらないものを消す