Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/tresorama/test-next-blog-flat-file
A "Blog" boilerplate, with Markdown in flat-files, Next.js, Tailwind.
https://github.com/tresorama/test-next-blog-flat-file
Last synced: 4 days ago
JSON representation
A "Blog" boilerplate, with Markdown in flat-files, Next.js, Tailwind.
- Host: GitHub
- URL: https://github.com/tresorama/test-next-blog-flat-file
- Owner: tresorama
- Created: 2023-01-12T20:50:20.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2023-01-14T01:12:35.000Z (about 2 years ago)
- Last Synced: 2024-11-25T21:37:33.911Z (2 months ago)
- Language: TypeScript
- Homepage: https://test-next-blog-flat-file.vercel.app
- Size: 223 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
## Demo
[View Demo](https://test-next-blog-flat-file.vercel.app/)
## Overview
When you are initializing the project you:
- Define your blog post front-matter custom fields schema
- Code in React to customize appearance.
When you have a new blogpost to add:
- Create a new `.md` file inside a specific folder.
- Re-Deploy
## Stack
- Next.js
- Markdown in Git repo
- Tailwind CSS
## Usage - Dev
Install deps
```bash
yarn
# or
npm install
```
Start development server
```bash
yarn dev
# or
npm run dev
```
Open http://localhost:3000
Code
## Usage - Deploy
Install deps.
```bash
yarn
# or
npm install
```
Compile the app.
```bash
yarn build
# or
npm run build
```
Run the app.
```bash
yarn start
# or
npm run start
```
## Customize
All your blogposts are flat files in `src/blog-contents`.
Front-matter is enabled and some custom fields are there as starting point, but you are free make your changes.
### Customize BlogPost fields
Edit the zod schema.
Some required fields cannot be deleted or edited, check comments.
> NOTE: the zod schema is also used to validate every blogposts during build, to be sure you don't forget some fields when you are creating a new blog post.
```ts
// src/utils/blog/blog.schema.ts
const blogPostSchema = z.object({
/** These fields are required! Don't edit unless you know what you are doing */
slug: z.string(),
title: z.string(),
contentAsHTMLString: z.string(),
}).extend({
/* Add here your front-matter markdown custom fields */
excerpt: z.string(),
coverImage: z.string(),
date: z.string().datetime(),
author: z.object({
name: z.string(),
picture: z.string(),
}),
});
```
Now thanks to typescript, your React views receive blogposts that are typesafe.
## Resources
[Next.js](https://nextjs.org/)