この記事について
エンジニアの方の個人サイト・個人ブログをまとめています。採用している技術やデザインで気になることをメモしています。
Note
見出しはサイト名です。個人名になっている場合は敬称を省略させていただきます。
catnose
配色が綺麗でアニメーションもさりげなくて良いです。Timelineのページも真似したいです。
リニューアル前のGatsbyで作られたサイトのデータはGitHubのcatnose99/CatKnowsで見ることができます。
stin's Blog
ソースコードがGitHubのy-hiraoka/stin-blogに公開されています。
Tocbotの実装方法やreact-markdownに関する記事もあるので個人ブログを始めるときの参考になります。
Gojabako Zone
ソースコードがGitHubのgjbkz/gojabako.zoneに公開されています。
Next.jsのApp Routerを使用して構築されています。ブログ記事はMDXで書かれています。
JSer.info
ソースコードがGitHubのjser/jser.github.ioに公開されています。
Jekyll + GitHub Actions + GitHub Pagesで動いています。記事の修正をGitHubで受け付けるためのPull Requestガイドがしっかり作られています。
日本語と韓国語の多言語化もされています。
Route360
ソースコードがGitHubのmayumih387/route360に公開されています。
Gatsby + Markdown + Cloudflare Pagesで作られています。Front Matter CMSで記事管理をしており、Gatsby用のfrontmatter.jsonの設定を見ることができます。
日本語、フランス語、英語の多言語化もされています。
kght6123.page
Astro製のブログサイトということがブログの投稿に書かれていました。
Next.js+Nextraについても試していたようで、GitHubのkght6123/kght6123.page-v2でソースコードが公開されています。現在のAstro製のサイトのソースコードは公開されていないようです。
MH4GF
Next.js+Contentlayer製です。GitHubのMH4GF/mysiteでソースコードが公開されています。全体的なデザインがシンプルで良いです。
command + kで検索フォームが出てきます。Pagefindを使ってサイト内検索ができるようになっています。
blog.ojisan.io
Gatsby製です。GitHubのsadnessOjisan/blog.ojisan.ioでソースコードが公開されています。
なぜ私はGatsbyでブログを作っているのかという記事にGatsbyの良さがまとめられています。
cakegaly.com
Next.js 15 + MDXです。cakegaly/cakegaly-webでソースコードが公開されています。
ミニマリズムを追求した Next.js 15 + MDX ブログテンプレート "next-minimal-blog" を作ってみたでテンプレートについて説明があるので、同じようなサイトを簡単に作れそうです。
blog.kyu08.com
Hugo製です。kyu08/blogでソースコードが公開されています。
オレンジっぽい色を基調にしたデザインが良い。コメント機能が気になる。
yaakai.to
Astro製です。yaakaito/yaakaito でソースコードが公開されています。
デザインがシンプルで良い。濃いオレンジのテーマカラーがかっこいい。ダークモード対応。AIコーディング関連の記事が充実している。
azukiazusaのテックブログ2
Vite製です。azukiazusa1/sapper-blog-app でソースコードが公開されています。
About ページがかっこいい。ソースコードも綺麗な感じ。記事のレビュー用の Claude コマンドを真似しようと思う。
ryoppippi.com
Vite + Svelte製です。ryoppippi/ryoppippi.com でソースコードが公開されています。
全体のデザイン・アニメーション・フォントがかっこいい。テーマ切り替えが特に。ブログ内容もテーマが様々で読み応えあり。
