目次

ソースコードとデプロイされているファイル群は全てGitHubで公開している。 https://github.com/waonpad/blog

使用ライブラリの一覧等はそこで見てもらえれば良いので、ここでは自分が書きたい事を書く。

記事の管理

記事はGitHubのIssueで管理している。

ビルド時にAPIから取得して、Markdownにしている。これをブランチにpushしているので、過去の状態も容易に復元できる。 当然、APIを叩くかブランチをpullする事でローカルでも開発時の確認に使用可能。

IssueをCMSに使用するアイデアは昔からあり、調べると沢山出てくる。このブログを作ったきっかけもその手法に面白さを感じて実践してみたかったからだ。

ビルドは保存したMarkdown形式の記事ファイルをunifiedであれこれして、Next.jsでStatic Exportsしている。 unified関連は出来る事が多く、Markdownを弄り倒せて面白い。

Issueでの記事管理の良いところ

• 見慣れたUIで高機能なエディタ
  • スマホアプリでも
• ラベル機能
• その他Issue関連の機能を組み込み可能

まぁ充分すぎる機能を持っている。

Issueでの記事管理に注意が必要なところ

• Issueは誰でも閲覧・編集できる
  • リポジトリの設定で、6ヶ月先まで規制可能
    • 閲覧はできるので下書きを置けない
• リンクが他リポジトリのIssue等に自動リンクされる
  • 自動リンクされない形式にリンクを書き換えるか、プライベートリポジトリにする必要
• VS Code等エディタの持つ機能は使えない
  • Markdownを書くくらいなら大丈夫
  • mdxは(自分は)必要無い
• Recent ActivityやIssue一覧の汚染
  • IssueはClosedな状態で管理する(下書きだけOpen等)

このブログは上2つの問題に対処するため、記事の管理をプライベートリポジトリで行っている。

プライベートにする事で生じる問題もある。

• 添付ファイルは自分以外から見れなくなる
  • 適当なリポジトリでURLだけ取得してそれを添付する
• 閲覧者との相互コミュニケーションが難しくなる
  • 対処法はあるが面倒
  • パブリックな場合でも検閲は必要(性善説を信じる？)

メリデメとユースケースを考えて、リポジトリの扱いは適切に行う必要がある。

ホスティング

ホスティングはGitHub Pagesを使用している。

全てをGitHubに集約させた方が考える事が少なくて良いし、小さなブログサイトであればプレビューデプロイやNode.jsのサーバー等も必要無い。

唯一面倒な点があるとすればルートがサブディレクトリからになるために少し設定が必要な事くらい。

デプロイ

GitHub Actionsを手動実行して行なっている。

最初はIssueやmainブランチの更新をトリガーにしていたが、不要なワークフローの実行が多すぎたので手動実行にした。 数回クリックするだけなので特に面倒でもない。

工夫したところ

• Google Search Consoleの利用
  • サイトマップを登録してみた
    • Next.jsでのサイトマップの作成処理も初めて書いた
      • ちょっと面倒
    • 記事の追加・削除時にアップロードしているのに上手く見てくれない・・・
• Google Analyticsの利用
  • グラフで見れたりしたら面白そうだったのでやってみた
  • 登録は案外簡単だった
  • アクセスほとんど無い(そりゃそう)
• OpenGraph Imageの作成 (next/og)
  • これやるだけでマトモなサイト感出ると思う
  • システムフォントが権利的に使えないので、別のフォントをダウンロードした
• divに甘えない
  • 割とHTML構造とか意識した