ブログが更新できなくなっていた 以前は Gatsby だったり Next.js で作っていたけれど、ある時から npm のアップグレードが失敗するようになってしまいビルドができない状況が続いていた。 それと同時に書くモチベーションも薄れ、もう2年以上更新が止まっていた。 選定 Hugo にしたけど、特にこだわりはなく brew でインストールできて、Netlify などで標準でサポートされているところくらいで選んだ。 それ以外は基本的に以前の URL のまま、 markdown の資産も活かせているので以降自体はとても楽だった。 ChatGPT などのサポートのおかげも多々ありそう。
課題感 1年以上前にGatsby + Netlify の新しいブログを作ったけれど、 Gatsby を理解していないせいでカスタマイズが難しいなどの問題があって課題を途中から感じていた。 その中で @wapa5powさんのブログをNext.jsへ移行しましたをみて、課題感もかなり似ていたので、いつか移行したいなと思っていて、年末ということもあり移行することにした。 概要 テンプレート blog-starter-typescriptのテンプレートを使ってブログを作成した。 これで Markdown をベースに SSG で静的なブログが作れる。 Deploy Deploy とホスティングはVercelを使っている。 体感だが以前より表示が速くなった気がする。 OGP OGPもnode-canvasを使っていて、 yarn build 時に自動生成されるようにした。 Canvas は最新バージョンだとVercelのnodeのバージョンが対応しておらずビルドできなかったので以下を参考にした。 【Next.js × Vercel】OGP画像を動的生成してみた Next.js + Vercel で OGP の画像を動的に生成する 【動的OGP】Next.js + TypeScript + Vercelデプロイで動的OGPを実現する 動的と言っても静的ビルド時にMarkdownからタイトルを持ってきてpngとして書き出しているだけなので、リクエスト毎に生成されるわけでは無いので優しい。 CSS Tailwind CSSというのがバンドルされていたのでそれを使っている。 適当に検索して書くと良い感じのpaddingやmargin、リサイズしてくれるので便利。 正直雰囲気で書いている感は否めない。
ツールの変更 2020年9月末くらいから、ノートやタスク管理系のツールをガッと一気に変更した。 定期的にツールを変えたくなる時は訪れる（良くない癖）けど、ここまで一気に変更するのは初めてかもしれない。 今までの課題感・変更する動機などを簡単にまとめる。 新しいツールを3ヶ月弱使ってみた上での紹介などは長くなるので別の記事などで書きたいと思う。 今までのツールと課題感 今まではノートを取るのは iOS/Mac 純正メモアプリ、タスク管理(主にGTD)は Things を使って行っていた。 変遷でいうとノートはその前は全盛期（今では見る影もない）の Evernote を長く使っていた。 タスク管理は以前は Todoist や iOS/Mac 純正リマインダーも使っていた。 その中で大きな不便などはもちろん無いけれど、漠然とした課題感は大きく以下のようにあった。 消費したコンテンツの内容を体系化して保存できておらず、忘れてしまう 書いたノートを見返す事もほぼ無く、書き捨てを前提にしている 記憶力も良くないので、知識が蓄積されている感じがしない タスク管理とノートは相互でつながっていることが多く、ツールを跨いで移したりなどが面倒 kiriminさんの様々なTODOアプリやタスク管理方法を試行した結果最終的にプレーンテキストに行き着いた話にとても共感する タスク管理をしていても、中・長期的(Weekly, Monthly, Quarterly, Yearly)な目標管理ができていない 上から順に解決したい課題だった。 動機 上記のような課題がある一方で、同時に移行コストも高いので日々良さそうなツールを試したりしながら見送っていた。 そんな中良いタイミングで良いツールや紹介記事と出会い、また個人的にも転職もあり、良いリフレッシュの機会が提供されて移行できた。 あと Rebuild.fm #287 でも話されていて、自分のきっかけなどを書きたくなった。 以降に際しての方針は課題に対して大まかに以下だった。 ノートやタスク管理などを個々で1ツールで扱うのではなく、なるべく一元化して一つの場所で管理したい そのための UI や体験は一定犠牲になっても良い 体系的にノートを管理する上で、必要以上の労力をかけたくない 過去にも Evernote などで頑張って tagging や構造化を試したりしたが、上手くいかなかった メンテナンスコストが非常に高いのと、ノートを作成する心理的消費も同時に高くなる（面倒くさくなる） Mobile アプリは充実していなくても良い これは時節柄、最近はあまり外出しないのと、Mobile デバイスで長いテキストを書くことがほぼ無いから 移行先ツール 移行先のツールに関してはタイトルにもある通り Roam Research を使うことにした。 早速方針の なるべく一元化して一つの場所で管理したい と矛盾するが、その他の補助ツールもいくつかある。 それらの紹介については簡単にしておいて次回以降、以下のようなワークフロー別に書こうと思う。 未読管理 (bookmark, highlight保存など) GTD、タスク管理 目標管理 Roam Research の良かったところは主に以下である。 構造化が不必要なグラフ型のノート管理 [[]] でリンクを作ることで一瞬でノートが作成できる 双方向リンクが簡単に作れる、かつ修正が容易 各アウトラインがノートの単位になっている コミュニティの熱量がとても高い #roamcult 各種サービスとの連携が比較的できる 詳細は長くなってしまうので、これまた別で書こうと思う。 ...
やったこと prefers-color-scheme を使ってスタイルの切り替えを実装した（ダークモード対応） それに伴って全体的にデザインを変更、普段使ってる Mac/iOS Note.app ぽい黄色にした シンタックスハイライトのデザイン変更した コードブロックの上にファイル名やタイトルを付け加えられるようにした 内部の Markdown へのリンク遷移時に、リロードされないようにした gatsby-plugin-catch-links を使った 直リンクだと、デプロイ前のプレビューで遷移確認できないのと、せっかくSPAぽく動いてるので無駄なリロードは避けたかったので 対応した PR はこれ しなかったこと シンタックスハイライトのダークモード対応 面倒そうだったのと、 prism-tomorrow でどちらの場合も事足りそうな雰囲気だったので見送り トグルやチェックボックスを置いて、ユーザがスタイルを切り替えるようにする React Component をシュッと作れそうに無かったのと、そんなに使われなさそう CSS Media Query ユーザの端末や設定などに CSS からアクセスするための仕組み 今回のダークモードについても prefers-color-scheme というキー名に対して以下の様にクエリを投げ、 その返り値が light か dark によってスタイルの出し分けを行っている @media (prefers-color-scheme: light) { body {} } @media (prefers-color-scheme: dark) { body {} } 手元の Safari や Chrome では動くぽいので、既に一定標準なのかもしれない 参考 prefers-color-scheme を用いた Dark Mode 対応と User Preference Media Features Gatsbyでブログを作りました Gatsbyにシンタックスハイライトを入れてコードをきれいに表示する GatsbyJSで作っているブログでコードブロックにタイトルをつけられるようにした Relative page links in markdown files within gatsby Gatsby.js: Preprocessing Relative Path Links in Markdown
動機 最近 blog 書く頻度また減ってきた。 それと同時にもう少しカジュアルに書きたい・書けるようにしたいというモチベーションが出てきて これを機会に blog の移設をしようと思った。 今までははてなブログで書いていたけれど、以下のような点で億劫になってきていた。 Markdown で書けるには書けるが、画像のアップロードなどでなんやかんや結構 CMS というか Web UI を触らなければならない ローカルのエディタで編集は完結していて、あとは push したらシュッと色々やられてデプロイされるのが望ましい はてなブログ Pro の値段が高い / その価格に対して恩恵を得られていない（ブログを書いていないのが大きいのかもしれない…） 界隈のコミュニティ 今までの記事全てを export するのも面倒だなと思ったので、2020 年に書いた 3 つの記事だけ手作業で移した。 Gatsby Gatsby を選んだ動機は ishkawa さんの記事 ブログをGatsbyで再構築した | ishkawa を見て良さそうと思ったから。 CSS など特に参考にさせてもらった。 Jekyll の延長線くらいの理解で、ちゃんと理解しないまま Gatsby を使い始めたけど、 Reactベース静的サイトジェネレータGatsbyの真の力をお見せします を読んで結構違うよう。 GraphQL を使って、ビルド時にあれこれできるのは面白いなと思った。 Netlify デプロイ + ホスティングには GitHub Actions + Pages は使っていなくて、 Netlify で完結している。 ポチポチやるだけで GitHub とのインテグレーションが完結して、なんなら Pull Request を作成するたびに gatsby build が走ってデプロイ予定の Preview のビルドまでしてくれる。 ...