Skip to content
View jtmthf's full-sized avatar

Block or report jtmthf

Block user

Prevent this user from interacting with your repositories and sending you notifications. Learn more about blocking users.

You must be logged in to block users.

Please don't include any personal information such as legal names or email addresses. Maximum 100 characters, markdown supported. This note will be visible to only you.
Report abuse

Contact GitHub support about this user’s behavior. Learn more about reporting abuse.

Report abuse
jtmthf/README.md

A statically generated blog example using Next.js, Markdown, and TypeScript

This is the existing blog-starter plus TypeScript.

This example showcases Next.js's Static Generation feature using Markdown files as the data source.

The blog posts are stored in /_posts as Markdown files with front matter support. Adding a new Markdown file in there will create a new blog post.

To create the blog posts we use remark and remark-html to convert the Markdown files into an HTML string, and then send it down as a prop to the page. The metadata of every post is handled by gray-matter and also sent in props to the page.

Demo

https://next-blog-starter.vercel.app/

Deploy your own

Deploy the example using Vercel or preview live with StackBlitz

Deploy with Vercel

Related examples

How to use

Execute create-next-app with npm, Yarn, or pnpm to bootstrap the example:

npx create-next-app --example blog-starter blog-starter-app
yarn create next-app --example blog-starter blog-starter-app
pnpm create next-app --example blog-starter blog-starter-app

Your blog should be up and running on http://localhost:3000! If it doesn't work, post on GitHub discussions.

Deploy it to the cloud with Vercel (Documentation).

Notes

blog-starter uses Tailwind CSS (v3.0).

Pinned Loading

  1. nestjs-pino-logger nestjs-pino-logger Public

    A NestJS logger utilizing pino

    TypeScript 7 2

  2. tailwind-js tailwind-js Public

    TypeScript 4

  3. react-document-attributes react-document-attributes Public

    Hooks for setting attributes on <html /> and <body />

    TypeScript

  4. normalize-in-js normalize-in-js Public

    Various CSS resets for various CSS-in-JS frameworks

    TypeScript 4