Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/pavlovtech/NextBlog
Blog built with NextJs 13, Contentlayer, Giscus and NextAuth. It uses Github API for admin section that allows managing markdown files rendered with Codemirror.
https://github.com/pavlovtech/NextBlog
contentlayer markdown nextjs
Last synced: 9 days ago
JSON representation
Blog built with NextJs 13, Contentlayer, Giscus and NextAuth. It uses Github API for admin section that allows managing markdown files rendered with Codemirror.
- Host: GitHub
- URL: https://github.com/pavlovtech/NextBlog
- Owner: pavlovtech
- Created: 2023-05-11T01:17:33.000Z (over 1 year ago)
- Default Branch: master
- Last Pushed: 2024-01-08T16:53:54.000Z (10 months ago)
- Last Synced: 2024-08-01T16:55:39.481Z (3 months ago)
- Topics: contentlayer, markdown, nextjs
- Language: TypeScript
- Homepage: https://alexpavlov.dev
- Size: 17.3 MB
- Stars: 54
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# NextBlog
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
Demo: [alexpavlov.dev](https://alexpavlov.dev)
# Motivation
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:
1. Add an admin page with auth using NextAuth
2. Use Vercel hosting with github integration for CI/CD
3. Create an API using Github API for managing blog posts
4. When the change to blog post files is made, it is pushed to github.
5. Then Vercel automatically starts a new deployment
6. Web site displayes updated statically generated content
Currently, the best solution for managing markdown files is [Contentlayer](https://www.contentlayer.dev/), 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.
## Architecture
### Home page
## 📚 Tech Stack
| Name | Link |
| --------------- | --------------------------------------------------------- |
| Framework | [NextJS](https://nextjs.org/docs) |
| Markdown | [Contentlayer](https://www.contentlayer.dev/) |
| Authentication | [NextAuth](https://next-auth.js.org/) |
| Deployment | [Vercel](https://vercel.com) |
| Styling | [Tailwindcss](https://tailwindcss.com/) |
| Comments | [Giscus](https://github.com/giscus/giscus) |
| Data access | GitHub API |
| Markdown editor | [Codemirror](https://codemirror.net/) |
## 🪜 Project structure
```bash
📦 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
```
## Google Lighthouse performance statistics
## Admin page
## Admin page - editing
## Environment Variables
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.
```yaml
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
```
## Features
- 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
## Quick Start Guide
`npm i`
`npm run dev`
## TODO
1. Image upload
2. Draft support