ry_Tom's Blog

This is repository of ry_Tom's Blog based on blog-starter.

This blog is hosted on Github Pages using Next.js's Static Generation feature and Markdown files as the data source.

To create the blog posts we use remark, rehype, and some plugins to convert the Markdown files into an HTML string, and then send it down as a prop to the page.

Notes

blog-starter uses Tailwind CSS (v3.0).

To-Dos

• Change markdown parser [2023-09-22]
• Add table of contents [2023-09-29]
• Automate adding post date & update date, & erase metadata & change file name of images used by posts [2023-10-03]
• Add previous & next article links [2023-10-12]
• Separate list of post by 20 posts [2023-10-05]
• Add support for Google Analytics and make it searchable from Google (generate sitemap.xml) [2024-01-16]
• Add tags to posts using front matter; click a tag to show posts containing the tag (ex: ~/tag/[tag], ~/tag/[tag]/page/2)

  tags: ['foo', 'bar', 'hoge']

• Adapt to Next.js 13
• Generate OG image using @vercel/og [2024-04-26]
  • Instead of using @vercel/og, generate thumbnail using puppeteer manually.

References

• やじはむ. Next.jsを使った個人ブログ作成のまとめ, 2023.
• Kairi Watanabe. Next.jsでテックブログを作った話, 2022.
• Vercel, Inc. Next.js Documentation, 2023.
• Tailwind Labs Inc. Tailwind CSS Documentation, 2023.
• Gen Tamura. Next.js with Tailwind CSS に Google Fonts を読み込む, 2023.
• Reffect. Next.jsを利用した初めての本格的Markdownブログサイトの構築, 2023.
• tai2. Puppeteerで記事タイトルからog:imageを生成する, 2017.