jtmthf Goto Github PK

followers: 22.0 following: 7.0 repos: 159.0 gists: 48.0

Name: Jack Moore

Type: User

Company: Asurion

Bio: Software Engineer with Asurion

Twitter: jtmthf

Location: Nashville

Blog: https://www.jtmthf.com

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

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).

Jack Moore's Projects

anonymous-session

Demonstration of creating an anonymous session using next-auth, server components, and server actions

api-gateway-proxy-event-http

Mapping of a an AWS API Gateway Proxy Event to Node http messages

apollo-client

:rocket: A simple caching client for any GraphQL server and UI framework

apollo-codegen

:pencil2: Generate API code based on a GraphQL schema and query documents

apollo-react-typescript-example

A full stack example application utilizing Apollo, Redux, Webpack, TypeScript, and React

apollo-smart-list

It's a list that's smart

atomic-values

Utility to simply the use of Atomics and primitive values

awesome-typescript-loader

Awesome TypeScript loader for webpack

aws-cdk

The AWS Cloud Development Kit is a framework for defining cloud infrastructure in code

babel-plugin-graphql-tag

Babel plugin that compile GraphQL tagged template strings using apollographql/graphql-tag

backend-examples

beach-body

zero-dependency util to read and validate the body of a readable stream

c2500-proj1

Project 1 for CS2500. Compares the runtime efficiency of merge sort and heapsort in a variety of tests.

class-transformer

Proper decorator-based transformation / serialization / deserialization of plain javascript objects to class constructors

commerce

Next.js Commerce

common-interfaces

Core interfaces and utilities for JavaScript

contentfool

Reimagined JavaScript client for contentful

contentful-next

cosmos

DX tool for designing truly encapsulated React components.

cql-execution

A coffeescript (compiles-to-javascript) framework for executing CQL

create-react-app

Set up a modern web app by running one command.

crud

NestJs CRUD for RESTful APIs

cs1510

Homework assignments for Computer Science 1510 (Data Structures) at Missouri S&T