このブログがどのような技術を使ってデプロイさているのかを書いておきます。
フォーク元のページ
このサイトの作成にあたって、DIFF001A さんの作成された https://diff001a.netlify.app/ というサイトのコードを流用しました。 Gatsby でのAPIを使わない簡単なサイト内検索の実装方法を探していたところ、上記のサイトを見つけました。 非常に実装のしっかりした Gatsby サイトであり、MITライセンスで公開されていたので、全体を流用させていただきました。デザインセンスが半端ないですね。 神 of 神です。自分の方で細かい部分を少し修正したり、機能を削ったり、OGPの自動生成を加えたりしてあります。
Markdown: 本文の記述
ブログ本文は、Markdown によって記述され、GitHub 上で管理されています。 コンテンツの中身とサイト構築データを分離しておき、記述の手間を減らし、また何らかの移行時に持ち運びを容易にすることが大切だと思います。
例えばこのページはこんな感じのコードで書かれています。
Gyazo: 画像サーバー
理想的には、画像もMarkdownと同じレポジトリで管理するべきです。しかし、これはあまりに煩雑です。 何か変更をするたびにいちいちGitHub上に画像をアップロードして、適切な名前を付けて…というのは実際にやってみるとあまりに面倒です。 そのため、画像に関しては、Gyazo にアップロードを行って URL を埋め込むことで対応しています。 有料プランにすると簡単な画像編集機能が使えるようになります。これは価値があると思います。
もし、Gyazo がサービスを終了した場合は、画像を別の場所に保存し全てのURLを書き換えるという面倒な作業が発生しますがここは受け入れるしかありません。
ちなみに、あまり真剣に使ったことはないですが、Monosnap も良さそうですよね。
Gatsby: 静的サイトジェネレータ
Markdownから静的サイトを生成するのには、Gatsbyを使っています。 半年前に、静的サイトジェネレータを色々と調べた結果、Gatsby が一番良かったです。理由はすっかり忘れました。 （このサイトのコードをセットアップしたのは半年前ですが当時は没にしました。なので細かいことは忘れています。）
GitHub: データ保管場所
GitHub のプライベートブランチを使っています。 Public にしたいのですが、古いデータでまずいものが残っているかもしれないので念の為プライベートブランチにしています。
Netlify: ホスティングサイト
GitHub のブランチに Push をすると自動でビルドしてデプロイしてくれます。 Netlify は、SSG で静的サイトのホスティングをするなら Netlify が第一選択肢ではないでしょうか。
Catchy-Image: OGP画像自動生成
各ページの記事の題名から以下のような画像を自動で生成しています。（こんなの手動ではとてもやってられません。） Twitter などにリンクを貼った際にもこの画像が自動で読み込まれます。
Kentaro Matsushita さんが開発された Catchy-Image というライブラリで OGP 画像を生成しています。ビルド時に自動で実行されサムネイルが生成されます。このパッケージはほんとすごいです。神です。
こちらの方も使い方をわかりやすく解説してくださっています。
現在使用している吹き出しのデザインは、フキダシデザインさんから。このサイトはほんとすごいです。神です。
フキダシデザインさんは、こんな風に吹き出しを自動で生成する機能を提供されております。
