使える軽量なブログを土日で作る

先週末にブログを作りました。

元々あったブログが、環境構築が重かったり依存関係直すのがしんどくなっていたので、もっと小さいブログを作ろうと思い立ちました。

自分は普段フロントエンド書かないので、日曜大工という感じで不慣れながら作ってみて面白かったので今回作ったブログを紹介します。

ブログ：https://ahus.uk/blog

これはfaviconに設定してある雅な椀に乗ってるお饅頭のドット絵です

欲しい機能

自分が考えていた最低限欲しい機能を考えていました。

markdownで記事を書ける

元々markdownでブログを書いていたので、移行を楽にするためにもmarkdownで記事を書けるようにしたいです。

ブログ更新するときはmarkdown以外触りたくない

markdownだけ書けば記事が更新できるようにしたいですね。

静的なサイトにしたい

静的なサイトにした方が速度やコストやセキュリティ的に有利なので、簡単に作るなら静的なサイトにしたかったです。
CI/CDがちゃんとしていれば、ブログ更新も手間にならないだろうと信じてます。

変更をpushするだけで反映されてほしい

これはまぁ、よくあるCI/CDの話ですが、記事を書いてgit pushするだけで記事をアップロードできると嬉しいですよね。

ブログとして簡単なものを目指していました

使用技術

• Sveltekit
  • vite
  • typescript
• Cloudflare pages

大雑把に書くとこれだけです。
その他核となるJSライブラリとして、markdownからhtmlへレンダリングする部分を担うmarkedがあります。

仕組み

ブログでは２つのrouteを使っています。

１つ目が記事一覧ページで、２つ目が記事詳細ページです。

記事一覧ページ

記事一覧のページでは、記事のマークダウンを置いてあるフォルダから、マークダウンの一覧を取得して、リンクにして表示します。

ローカルにあるファイル一覧の取得にはimport.meta.globを使いました。

import.meta.glob('path/to/blog/*.md', { query: '?raw', ...})

js/typescript に慣れていないため、ローカルのファイルをどう読んでいいのかわからず時間を食ったので書いておきます。

これ以外には特に変なことはしていませんが、frontmatterにある記事にメタデータを読んで、投稿時間やタイトルを取得しています。

ページネーションみたいなことも特にしてないので、シンプルです。

記事詳細ページ

urlのパスパラメータからmarkdownを特定し、記事をレンダリングしています。

ここでmarkedを使っています。

自分は全然知らなかったんですが、markedってめちゃくちゃメジャーというかポピュラーなパッケージなんですね。

markdown to htmlをするライブラリ、あるだろうなとは思っていたんですが、ここまでポピュラーなものがあるとは考えたことなかったです。

確かに、GitHubとかZennも言われてみればmarkdownで記述できたりするので、広く使われていそうですね。

ここも、シンプルなので特にこれ以上記述することがないです。

デプロイ

これでとてもシンプルなブログシステムができました。

あとはここからhtmlを生成して、デプロイするだけです。

デプロイにはcloudflare pagesを使いました。

cloudflare pages では sveltekit をサポートしていて、@sveltejs/adapter-cloudflareや@sveltejs/adapter-staticをアダプターに指定すればcloudflareからポチポチするだけで簡単にデプロイできます。

今回は静的なサイトなので、adapter-staticで十分です。

そしたらGitHubにpushしてcloudflareからポチポチすると、CDのパイプラインも自動的に用意してくれて、pushすれば勝手にデプロイしてくれるようになります。

デザイン

デザインについては、どういう感じにするかも含めて考え始めると一生終わらないので、今回は最小限のミニマムな形にしました。

といいつつ、フォントにちょっとだけ凝ってみて、英数字には Hack というフォントを利用しています。

感想

楽しい！大変充実した土日を過ごせました。

ずっと集中して、夜も寝たくないくらい集中して何かしてる時が一番楽しいですね。

ページネーションや関連記事の構想もあるので、気が向いたらやってみようと思います。