This blog starter is based on Next.js, which provides static content generation based on files which are turned into pages. In this example we use Markdown files, which are transformed and extended by Unified.
Available frontmatter fields are defined in postApi.ts.
Those fields are extracted and provided when all posts are fetched (getAllPosts), or a single post is fetched (getPostBySlug).
| _ | Name | Usage |
|---|---|---|
| 1 | remark-parse | parse Markdown to mdast |
| 2 | remark-slug | enable IDs for headings |
| 3 | remark-gfm | enable Github Markdown flavour |
| 4 | remark-rehype | parse mdast to HTML |
| 5 | rehype-highlight | syntax highlighting with lowlight |
| 6 | rehype-react | parse HTML to JSX |
Index page (pages/index.tsx) contains the list of blog posts with a link to their dedicated site (build by pages/blog/[slug].tsx).
Individual blog post pages are build by pages/blog/[slug].tsx, which maps to the slug values of the posts. (see Next.js Dynamic Routing)
Blog post assets like images are located in the public/blog folder, where Next.js finds all statically available assets.
See Utteranc.es and components/PostComments.tsx
This is a Next.js project bootstrapped with create-next-app.
First, run the development server:
npm run dev
# or
yarn devOpen http://localhost:3000 with your browser to see the result.