ブログを始めた

目次

    ブログを始めました。

    きっかけ

    今までは scrapbox に

    • 備忘録
    • 月報
    • 誰かに影響された記事としてだったり(スキルマップとか)
    • その他雑念

    を思い立ったときに書いていました。

    最初は技術とかマメにタグ付けで分けていたんですが、段々と誰も見ないだろ〜って思いになってきて雑に書き捨てる、みたいないわゆる「チラシの裏」として使い始めたことを「あれ、これまずいんじゃないか...」と思い始めたのが主なきっかけです。

    誰にも見られてないと思って適当に文章を書く癖がつくと、日常会話での発言も適当になっていつか墓穴を掘りそう。という一種の恐怖が最近になって出てきました。なのでこうしてブログを作って周りに見え(やすくな)るようにしようと対策に打って出ています。改善後に期待ですね。

    後付けにはなるんですが他にブログを作る動機として、書くことは技術だけに限りたくないのでナレッジ共有サービスは使わない、あとはツイッターに長文を流したくない、で行き着いた先がブログ形式だったみたいなのもあります。あと数年前にも一度ブログを作ったんですが、その頃はかなりお粗末な静的サイトになってしまい更新する意欲が失せたのでそのリベンジ。

    did0es とかいう自分ですらどう読むのかもわからないハンドルネームの人間が、何を考えているのかをインターネットに残したい。そんな思いが { appearance: none } には込められています。

    技術など

    これだけでもいろいろ書けそうなので、得た知見で使えそうなものは別記事に回したいと思います。

    以下ざっくり概観です。

    使ったもの

    • Next.js
    • Contentful
      • Notion API のベータテスト参加できればそっちにいくかもしれない
    • Netlify
      • Cloudflare Pages も試してみたい

    SSG が出来てブログ記事を CMS で管理できる、 Wordpress が付いてこないものであれば何でもいいな〜と思いながら自分の好きなものを選んだ感じです。

    ホスティングが Netlify なのはドメインの移行が面倒だったから、というだけなのでそのうち Cloudflare Pages に移行するかもしれないです。てっきり S3 とかに上げるみたいに CI 上からデプロイをやるのかと思っていたら、ちゃんと管理画面らしきものがついていたのでこれは期待。

    Next.js を選んだ理由については僕の好みです。はじめは Gatsby 久々に使って組むかーと思っていたんですが、 かれこれ1年ぐらい触っていない(最後に触ったのが業務でブログ組む時で、納期がやばくてあまり知識を深められなかった...)という言い訳で、同じ React で SSG が出来る Next.js にやってきたという感じです。 Next.js 自体は TypeScript サポートが来たぐらいから触っていました。どんどん進化するので楽しみです、Vercel 一体何者なんだ

    あとは Next.js の ISR も一部で試しました。

    ISR 自体の軽い説明なんですが、ユーザーからアクセスがあった場合あらかじめ生成したページを返し、指定した時間経過後はユーザーからアクセスがあった時に、キャッシュしていたページを返しつつデータ(このブログの場合だと記事)を取得。取得したデータだけ次回以降のアクセスでビルド&再レンダリングして返すといったようなものです。取得したデータだけをビルド&レンダリングするのがミソだと思います。

    詳しくは Next.js の docs や こちらの Qiita の記事 にわかりやすくまとまっていたのでご参考にどうぞ。

    これによってブログの記事を更新して publish したときに webhook でビルドする必要がなくなったので、 Netlify の上限を気にしてヒヤヒヤすることもなくなりました。やったね 結局 Netlify では ISR が想定どおりの挙動にならず、あまりやったねとはならないことがわかりました、こちらの記事にまとめています

    ただ、新しく記事を作った際に rss.xml が更新出来ない(デプロイ前にスクリプトで生成するため)課題が残っています。もういっそこのファイルだけ別のところに置いてしまおうかな...何か良い方法があれば教えて下さい。

    Contentful は初めて触りました。ブログ記事を溜め込むだけなので特に変わったことはしていません。ただのボヤキになるんですが、ブログ本文を Rich Text にしたら

    • strike-though や code block のパースはデフォルトでサポートされていない
    • Contentful のエディタが code block -> plane text の切り替えで日本語入力バグる

    ということで Long Text にしました。Long Text だと普通のマークダウンで書けるのでそこまで不自由はない、というよりも慣れたブログの執筆画面になったので良かったです。

    構成

    Contentful で記事を書いたら Netlify から配信するだけです。 前述したとおり ISR で記事の更新が反映されていくので、特に記事の内容周りの操作に関してはビルドの必要はありません。

    Markdown の React Component 化は react-markdown でやりました。ソースコードのハイライトは react-syntax-highlighter の Prism を使っています。一般的な Next.js でブログ組んだ！みたいな構成になんだかんだ落ち着いた印象です。長いものに巻かれていきます。

    その他について気になる方は こちら からご覧ください。

    おわりに

    結局書くことは技術の話題に偏りそうですが、以上よろしくお願いします。

    この記事を共有する