My personal blog built with NextJs 13, Contentlayer, Giscus and NextAuth. It uses Github API for admin section that allows managing markdown files rendered with Codemirror.
Design is based on https://github.com/pycoder2000/blog
Demo: alexpavlov.dev
I wanted to build a blog based on markdown files with latest NextJS 13 with server components and host it on Vercel. Additionally, I needed a CMS functionality (CRUD for markdown files), but how do you create a CMS for statically generated web site when content stored only as static files inside the Github repository?
The idea is simple:
- Add an admin page with auth using NextAuth
- Use Vercel hosting with github integration for CI/CD
- Create an API using Github API for managing blog posts
- When the change to blog post files is made, it is pushed to github.
- Then Vercel automatically starts a new deployment
- Web site displayes updated statically generated content
Currently, the best solution for managing markdown files is Contentlayer, so I wanted to use it as well.
For the lack of existing blog starters that with the mentioned functionality I desided to create it myself.
Name | Link |
---|---|
Framework | NextJS |
Markdown | Contentlayer |
Authentication | NextAuth |
Deployment | Vercel |
Styling | Tailwindcss |
Comments | Giscus |
Data access | GitHub API |
Markdown editor | Codemirror |
๐ฆ root
โโโ ๐๏ธ app # NextJs 13 app router directory
โ โโโ ๐๏ธ admin # Admin functionality for creating and editing blog posts
โ โโโ ๐๏ธ api # CRUD api blog posts (Github API is used)
โ โโโ ๐๏ธ blog # Blog functionality
โ โโโ ๐๏ธ components # Blog UI components
โโโ ๐๏ธ configs # Configs
โโโ ๐๏ธ lib # Utilities
โโโ ๐๏ธ posts # Blog posts in markdown
โโโ ๐๏ธ public # Static files for images
โโโ ๐๏ธ styles # CSS
โโโ ๐ contentlayer.config.ts # Contentlayer config
โโโ ๐ next.config.js # configuration related to Next.js
To run this project, you will need to add the following environment variables to your .env file. They are needed for admin panel for editing your markdown files.
GITHUB_TOKEN = token with access to the content of your blog's repository
NEXTAUTH_SECRET = any secret
NEXTAUTH_URL= your site's url
ADMIN_EMAIL = your email
ADMIN_PASSWORD= your password
- Static content generation based on markdown files (./posts folder)
- Comments with Giscus
- Code hightlighting
- Automatic table of content generation
- Admin panel that works via Github API
- Mobile-friendly view
- Projects page
- Frontmatter support
npm i
npm run dev
- Image upload
- Draft support