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.
blog-starter
uses Tailwind CSS (v3.0).
-
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)[2024-10-23]tags: ['foo', 'bar', 'hoge']
- Adapt to Next.js 13
-
Generate OG image using[2024-04-26]@vercel/og
- Instead of using
@vercel/og
, generate thumbnail usingpuppeteer
manually.
- Instead of using
- やじはむ. 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.