# エンジニア個人ブログまとめ

## この記事について

エンジニアの方の個人サイト・個人ブログをまとめています。採用している技術やデザインで気になることをメモしています。

> [!NOTE]
> 見出しはサイト名です。個人名になっている場合は敬称を省略させていただきます。

## catnose

::link-card[https://catnose.me/]

配色が綺麗でアニメーションもさりげなくて良いです。[Timeline](https://catnose.me/timeline)のページも真似したいです。

リニューアル前のGatsbyで作られたサイトのデータはGitHubの[catnose99/CatKnows](https://github.com/catnose99/CatKnows)で見ることができます。

## stin's Blog

::link-card[https://blog.stin.ink/]

ソースコードがGitHubの[y-hiraoka/stin-blog](https://github.com/y-hiraoka/stin-blog)に公開されています。

Tocbotの実装方法やreact-markdownに関する記事もあるので個人ブログを始めるときの参考になります。

- [ブログの記事ページに Table of Contents を設置したので実装方法などを書く](https://blog.stin.ink/articles/implement-toc)
- [react-markdown をやめて remark から自力でレンダリングするようにした話](https://blog.stin.ink/articles/replace-react-markdown-with-remark)

## Gojabako Zone

::link-card[https://gojabako.zone/]

ソースコードがGitHubの[gjbkz/gojabako.zone](https://github.com/gjbkz/gojabako.zone)に公開されています。

Next.jsのApp Routerを使用して構築されています。ブログ記事はMDXで書かれています。

## JSer.info

::link-card[https://jser.info/]

ソースコードがGitHubの[jser/jser.github.io](https://github.com/jser/jser.github.io)に公開されています。

Jekyll + GitHub Actions + GitHub Pagesで動いています。記事の修正をGitHubで受け付けるための[Pull Requestガイド](https://github.com/jser/jser.info/blob/gh-pages/CONTRIBUTING.md)がしっかり作られています。

日本語と韓国語の多言語化もされています。

## Route360

::link-card[https://route360.dev/ja/]

ソースコードがGitHubの[mayumih387/route360](https://github.com/mayumih387/route360)に公開されています。

Gatsby + Markdown + Cloudflare Pagesで作られています。[Front Matter CMS](https://frontmatter.codes/)で記事管理をしており、Gatsby用のfrontmatter.jsonの設定を見ることができます。

日本語、フランス語、英語の多言語化もされています。

## kght6123.page

::link-card[https://kght6123.page/]

Astro製のブログサイトということが[ブログの投稿](https://kght6123.page/blog/20240724/)に書かれていました。

Next.js+Nextraについても試していたようで、GitHubの[kght6123/kght6123.page-v2](https://github.com/kght6123/kght6123.page-v2)でソースコードが公開されています。現在のAstro製のサイトのソースコードは公開されていないようです。

## MH4GF

::link-card[https://mh4gf.dev/]

Next.js+[Contentlayer](https://contentlayer.dev/)製です。GitHubの[MH4GF/mysite](https://github.com/MH4GF/mysite)でソースコードが公開されています。全体的なデザインがシンプルで良いです。

`command` + `k`で検索フォームが出てきます。[Pagefind](https://pagefind.app/)を使ってサイト内検索ができるようになっています。

## blog.ojisan.io

::link-card[https://blog.ojisan.io/]

Gatsby製です。GitHubの[sadnessOjisan/blog.ojisan.io](https://github.com/sadnessOjisan/blog.ojisan.io)でソースコードが公開されています。

[なぜ私はGatsbyでブログを作っているのか](https://blog.ojisan.io/why-i-will-use-gatsby/)という記事にGatsbyの良さがまとめられています。

## cakegaly.com

::link-card[https://cakegaly.com/]

Next.js 15 + MDXです。[cakegaly/cakegaly-web](https://github.com/cakegaly/cakegaly-web)でソースコードが公開されています。

[ミニマリズムを追求した Next.js 15 + MDX ブログテンプレート "next-minimal-blog" を作ってみた](https://cakegaly.com/blog/next-minimal-blog)でテンプレートについて説明があるので、同じようなサイトを簡単に作れそうです。

## blog.kyu08.com

::link-card[https://blog.kyu08.com/]

Hugo製です。[kyu08/blog](https://github.com/kyu08/blog)でソースコードが公開されています。

オレンジっぽい色を基調にしたデザインが良い。コメント機能が気になる。

## yaakai.to

::link-card[https://yaakai.to/]

Astro製です。[yaakaito/yaakaito](https://github.com/yaakaito/yaakaito) でソースコードが公開されています。

デザインがシンプルで良い。濃いオレンジのテーマカラーがかっこいい。ダークモード対応。AIコーディング関連の記事が充実している。

## azukiazusaのテックブログ2

::link-card[https://azukiazusa.dev/]

Vite製です。[azukiazusa1/sapper-blog-app](https://github.com/azukiazusa1/sapper-blog-app) でソースコードが公開されています。

About ページがかっこいい。ソースコードも綺麗な感じ。[記事のレビュー用の Claude コマンド](https://github.com/azukiazusa1/sapper-blog-app/blob/main/contents/.claude/commands/article-review.md)を真似しようと思う。

## ryoppippi.com

::link-card[https://ryoppippi.com/]

Vite + Svelte製です。[ryoppippi/ryoppippi.com](https://github.com/ryoppippi/ryoppippi.com) でソースコードが公開されています。

全体のデザイン・アニメーション・フォントがかっこいい。テーマ切り替えが特に。ブログ内容もテーマが様々で読み応えあり。