こんにちは、hppです。もしくはhppです。今回は自分用のブログを作ったので、それについて書いてみます。特にどういう気持ちでブログの各所を作っていったかを中心に書いていこうと思います。
使用技術
なんだか見出しを付けてみましたが、このブログを作るのに使った技術はタイトルの通りなので、以下にそれぞれについて書いてみます。
全ての技術選択に、"めんどくささを避ける"という気持ちがあるので、それを意識していただくと読みやすいのではないかなと思います。
Gatsby.js
Gatsby.jsはReact製の静的サイトジェネレータ(Static Site Generator: SSG)です。適当にビルドを走らせるといい感じのHTML/CSS/JSがあらかじめ吐き出されようなフレームワークになっています。Server Side Renderingがリクエストごとにレンダリングを行うのとは違って、そういった作業をビルド時に済ませてくれるので早い、というのがGatsbyのよいところです。
最近はNext.jsもSSGをいい感じにやってくれるので、存在感が強くなっている気がしますね。
今回自分のブログにGatsby.jsを用いた理由は、ブログに関連する様々な面倒ごとをごっそり捌いてくれるところに惹かれたからです。Gatsbyはエコシステムとしてプラグインを差し込んでGatsbyの挙動をカスタマイズする方針を取っており、有志によって様々な便利プラグインが開発されています。
特にブログに関連するプラグインはNext.jsのそれと比べてかなり充実している気がしていて、いろんなことを手間をかけずに実現できます。
例えばサイトマップやRSS、robots.txtの生成もよしなにやってくれるので、ブログを運営する上で自分が面倒をみなければいけない範囲が非常に小さくなります(もちろん謎にプラグインがぶっ壊れたりするリスクは抱えますが)。
シンタックスハイライトの設定も簡単で、コードブロックはこんな感じです。
const Test: React.FC = () => (
<main>
yay!
</main>
)プラグインの中でも画像に関するものは非常に便利で、レイアウトシフトを防ぐためのプレースホルダを自動で設定しつつ、WebP対応と、画像のblur up(最初に解像度の小さいもやっとした画像を表示しておき、ロードが完了したら綺麗な画像を出す)みたいなことも設定を特にせず利用できます。画像サイズも勝手にいい感じにしてくれるので、ブログ記事に雑に画像を貼ってロード時間が壊れる、みたいなことになりにくいです。
Gatsbyなら(SSGなら当たり前みたいな感じですが)markdownから記事を生成するのも非常に簡単です。多分こんな感じでやっておくと、もし今後Gatsby以外にブログを載せたいと思ったときに、移行が楽かなと思っています。
自分が今までGatsbyを少し触っていたこともあって(特にブログっぽいものを半年ほど前に作っていたので)、一から作ったにしてはいいスピード感で仕上げることができた気がしています。Gatsbyに内蔵されているGraphQLのインタフェースは、値を取得するだけならそんなに難しくなく、割と直感的にかけるので、そこらへんの見通しの立てやすさもいい感じに寄与してくれていそうです。
TypeScript
あんまり書くことがないですが、gatsby-plugin-ts-configというプラグインを入れるとgatsby-node.tsなどという名前で、Gatsby特有のファイルをTypeScriptで書くことができます。
今後長い間運用していくことを考えると、絶対に型のある言語で書きたかったという気持ちがあります。読めなくなりそうなので...😇
tailwindcss
最近注目度が上がっている(と思っている)tailwindさんです。インラインCSSみたいな気持ちでclassを適当に当てていくといい感じのスタイルが当たります。
Reactでスタイリングをする場合、今だとtailwindのほかにstyled componentsやemotionが考えられると思いますが、今回は将来的に脱Reactする可能性を考えてtailwindにしておきました。
他のフレームワークを併用する場合など、スタイリングがReact依存だともしかしたら大変かもな〜みたいな気持ちです(そんなに深く考えてない)。純粋にtailwindがささっとスタイリング出来て楽だから、っていうのもあります(特にレスポンシブ対応が楽な気がします)。
CSSがそんなに苦手じゃない人は、適当にcheat sheet(これとか)を見ながらプリプリ書いていけるんじゃないかなと思います。
ブログ全般について
直接的な使用技術以外にも、たくさん使用したものがあるのでそれについて述べていこうと思います。
デプロイ
GitHub pagesに全部任せています。pushをhookしてGitHub actionsが走り、gh-pagesブランチに勝手にgatsby buildしてデプロイしてくれるようになっています。ここら辺はなんもやってないですね(適当にymlをコピペさせてもらっただけ)。
デザイン
自己紹介ページとして割とシンプルな雰囲気のサイトを以前作りました(hpprc.dev)。これもtailwindでスタイリングしています。今回も同様にtailwindでスタイリングしているので、全体のカラースキームやデザインはこのサイトに合わせています。
ブログ全体のテーマとして保守性とか移行の楽さみたいなシンプルさを念頭に置い ていたので、デザインもいい感じにシンプルなものにしています。良き感じになっていると嬉しい。
サイトのデフォルトのOGP画像は unsplash から拾ったものを使用させていただいています(Photo by Lucas Benjamin on Unsplash, thanks!!)。
画面構成や必要な機能などのデザインは、次節で掲載させていただくブログも非常に参考にさせていただいています。
参考
特に画面構成や広告枠(PC: 画面左、SP: ページ下部)、GitHubでの閲覧ボタンなどのアイデアに強く影響を受けています(広告枠めちゃくちゃかわいい...)。ありがとうございます！ 技術構成が似ている(Gatsby + TypeScriptの部分)こともあり、こちらの記事も非常に参考にさせていただきました。 uhyo/blog: 個人ブログを作った
ブログをちゃんと書いてる人といったらこの人みたいなイメージがあって、かなり中身を見させていただきました(インスペクタで色とかfont-sizeとかペロペロしました)。ぷらすくんのブログは内容がとてもいいので、読みやすいブログってなんだろうな〜ということを考えるのに非常に参考にさせていただいています。
うじまるくんくんはブログを参考にさせてもらった(Next.jsにしました！)だけでなく、ラバーダッキングのラバー部分にもなってもらいました(深夜作業会とかしてました)。実装方針で悩んだときに、僕が知らないことを色々教えてくれて感謝しています。
他にも多くの方のブログを参考にさせていただいています。
特に現在は見れなくなってしまっていますが、takumonさんのブログからは、Gatsby製のブログを作る上 で多くのことを学ばせていただきました。この場を借りて感謝申し上げます。
Dan AbramovさんのOverreactedに影響されてダークモード対応とかi18nとかやろうとした形跡が過去にあるんですが、かなり複雑になりそうな予感がするので今後の課題と言うことにします...
ブログの今後について
いまは自分が研究主体の生活にしたい(名古屋大学でNLPの研究をしています)というのもあり、出来るだけメンテナンスコストが低くなるような方向でブログを作ってみました。今後もその方針は変わらないと思うので、自分が勉強した内容だったり、ちょっとopinionatedな記事を書いたり(めっちゃこわい)、お気持ち表明をしたりして過ごそうと思います。
逆にspecificな技術に関する記事(エラー解決ログとか)はzenn.devなりに書いていけるといいんじゃないかなと考えています。
このブログもシンプル指向ではありますが、割と色々やっているので、機会があればそこらへんも書いていきたいですね。
広告枠の利用方針も悩んでいて、現状のちょこんとしてる感じが可愛いので一生このままでいいかなという 気もしています。気が向いたらVのYouTubeチャンネルへのリンクを貼るなど、プロパガンダ広報に利用するかもしれません。古のインターネット時代を思い出して、他の人のブログ記事へのリンクとか貼っても面白そうです。
もし修正の提案などあれば、記事の下にGitHub上のこの記事の元となったmarkdownファイルへの直リンク(uhyoさんがやっているのを見て真似をしています)から飛んでいただけると幸いです。
以上、読んでいただきありがとうございました。今後ともよろしくお願いいたします！