Building a Blog with Next.js
TL;DR
WordPress was extremely slow and had way more features than I needed, so I decided to build a blog from scratch. Also, I wanted to write articles in VSCode, so I wanted to just push markdown files and be done. No copy-pasting. I couldn't customize WordPress because I didn't know PHP. Too many black boxes.
Here's what the WordPress top page looked like -- I wanted to do better than this. Also, WordPress doesn't fully support AMP (e.g., mathematical formulas), so I wanted to tackle that too.
The current blog code is here:
Before
After 2020/09/30
Requirements
So the requirements are as follows. That said, if I waited until everything was done before publishing, it would never end, so I'll build things incrementally.
Blog Features
- Hosting on Vercel
- Custom domain
- Write articles in markdown/MDX and push to GitHub for automatic updates
- Table of contents
- Qiita-style sidebar
- Article listing by category
- Article search functionality
- Tag functionality
- Git-integrated history feature
- Series feature (articles with a series tag can be paginated in order -- I tend to write long articles)
Styling
- material-ui
- Code syntax highlighting with Prism.js
- Mathematical formulas with amp-mathml
- GitHub markdown CSS
Google-Related
- SEO
- Google Analytics
- AMP support
- PWA support
- Google AdSense
Other Wishes
- Build it with a reasonable level of understanding
Framework
Since I frequently work with React, I wanted to choose from React frameworks. The ones that come up most often are:
- Gatsby
- Next.js
For just building a blog, Gatsby seems like the stronger candidate, but I chose Next.js for the following reasons:
- AMP support seems easier
- More applicable to future projects
- I like the simple architecture
- Using Gatsby would likely result in black boxes due to plugin dependencies
So let's build the blog. Since I'm at it, I want to document my struggles along the way.