この記事について
エンジニアの方の個人サイト・個人ブログをまとめています。採用している技術やデザインで気になることをメモしています。
Note
見出しはサイト名です。個人名になっている場合は敬称を省略させていただきます。
catnose
![catnose](/_next/image?url=https%3A%2F%2Fpublic-content.hackersheet.com%2Fwebsite-og-images%2Fdc16e7f0-1233-4fcb-9d90-c073e0961044.png&w=1920&q=75)
配色が綺麗でアニメーションもさりげなくて良いです。Timelineのページも真似したいです。
リニューアル前のGatsbyで作られたサイトのデータはGitHubのcatnose99/CatKnowsで見ることができます。
stin's Blog
![Home | stin's Blog](/_next/image?url=https%3A%2F%2Fpublic-content.hackersheet.com%2Fwebsite-og-images%2F427234e6-d1a6-4bac-ba2a-42b4b06f7adf.png&w=3840&q=75)
ソースコードがGitHubのy-hiraoka/stin-blogに公開されています。
Tocbotの実装方法やreact-markdownに関する記事もあるので個人ブログを始めるときの参考になります。
Gojabako Zone
ソースコードがGitHubのgjbkz/gojabako.zoneに公開されています。
Next.jsのApp Routerを使用して構築されています。ブログ記事はMDXで書かれています。
JSer.info
![JSer.info](/_next/image?url=https%3A%2F%2Fpublic-content.hackersheet.com%2Fwebsite-og-images%2F5cd23e26-a06e-42e4-99b6-77f17e864854.png&w=3840&q=75)
ソースコードがGitHubのjser/jser.github.ioに公開されています。
Jekyll + GitHub Actions + GitHub Pagesで動いています。記事の修正をGitHubで受け付けるためのPull Requestガイドがしっかり作られています。
日本語と韓国語の多言語化もされています。
Route360
![Route360 - フロントエンドの開発記録](/_next/image?url=https%3A%2F%2Fpublic-content.hackersheet.com%2Fwebsite-og-images%2Ffcffe4db-21ab-4c29-83e2-27ca5324ffe9.png&w=1080&q=75)
ソースコードが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を使ってサイト内検索ができるようになっています。