Project Requirements
I wanted to create a simple content management system for myself to share information about different projects that I've completed. I've had some content on my website before that showcases more of my work as a front-end developer making some shiny baubles with React, TailwindCSS, and TypeScript. That's all fine and dandy for a few projects, but now I'm looking to scale up the amount of content on my website, so I needed something a bit more algorithmic.
Because I'm pretty familiar with using markdown syntax for note-taking, I wanted to implement a markdown parser with the built-in Next.js templating format to get a simple, clean content machine going.
The CMS basically just needed to include the following:
- Markdown processing
- Categorical indexing
- Easy navigation
Markdown Processing
I needed markdown processing that also supports front matter, so that I can template certain aspects of each post and display them consistently across my site.
For these features, I chose to utilize a few Node.js libraries, and some built-in Node.js and Next.js utilities:
gray-matterfor parsing front matterremarkfor processing markdownfsfor opening, reading, and writing content files- Dynamic routes, so I only ever have to worry about writing content.
Categorical Indexing
To include this feature, I used a feature built into Next.js: dynamic routing. I made a folder called [category] with an index.tsx file to handle the category page, and a [slug].tsx file to format the actual posts. In the index.tsx file, I utilized the frontmatter processor to help search for the content files and format the index pages with the appropriate category and posts.
Easy Navigation
At time of writing, I'm still working on this – but I have a few ideas for it. I'm thinking of including a sidebar on the index pages with other categories, and maybe some dynamic "Next/Previous Post" links on single posts that will guide users to whichever post is next.