Build a Blog with Next, MDX, and Tailwind (series)
When I set out to rebuild this site, I had some specific capabilities in mind. First and foremost, I wanted a blog and digital garden that would be easy for me to maintain. I also wanted to capability to create and publish interactive content. Another key item for me was incredibly easy hosting and deployments. One last aspect that was pretty critical, was the ability to add more advanced functionality in the future if the need should arise. There are a lot of ways to accomplish all of these goals, but I chose to build using Next, MDX, and TailwindCSS. This combination allows me to write my content in markdown, add interactive elements with React, keep the amount of raw CSS I need to write and manage to a minimum, and with GitHub and Vercel, the hosting and updates are a breeze.
I thought the approach I took and the lessons I learned along the way could be beneficial for others, so I decided to take notes as I went, and to write it all up in a series of articles.
Each piece of this series will be linked from here as it’s published, and I will link between articles as well.
- Bootstrap a Next.js Blog
- Configure Tailwind CSS for a Next.js App
- Apply a Common Layout to a Next.js App
- Render Posts with MDX
- Include React Components in MDX Content
- Improve Blog Listing with Post Excerpts
- Support Syntax Highlighting and Heading Links with MDX & Rehype
- Add a Skip Link Utility as a Tailwind Plugin
- Add Page Titles and the lang Attribute in a Next.js App
- Integrate the Next Link Component with Your MDX Content
- Optimize Images in Your MDX Posts with the Next Image Component