- Next.js with Typescript
- Contentlayer to manage content logic
- Easy styling customization with Tailwind 3.0 and primary color attribute
- MDX - write JSX in markdown documents!
- Near perfect lighthouse score - Lighthouse report
- Lightweight, 85kB first load JS
- Mobile-friendly view
- Light and dark theme
- Font optimization with next/font
- Integration with pliny that provides:
- Multiple analytics options including Umami, Plausible, Simple Analytics, Posthog and Google Analytics
- Comments via Giscus, Utterances or Disqus
- Newsletter API and component with support for Mailchimp, Buttondown, Convertkit, Klaviyo, Revue, Emailoctopus and Beehiiv
- Command palette search with Kbar or Algolia
- Server-side syntax highlighting with line numbers and line highlighting via rehype-prism-plus
- Math display supported via KaTeX
- Citation and bibliography support via rehype-citation
- Github alerts via remark-github-blockquote-alert
- Automatic image optimization via next/image
- Support for tags - each unique tag will be its own page
- Support for multiple authors
- 3 different blog layouts
- 2 different blog listing layouts
- Support for nested routing of blog posts
- Projects page
- Preconfigured security headers
- SEO friendly with RSS feed, sitemaps and more!
Content is modelled using Contentlayer, define content schema and use it to generate typed content objects. See Contentlayer documentation for more information.
Frontmatter follows Hugo's standards.
Showcase for projects - hero image specs: (16 x 9 - 1920 x 1080)
Please refer to contentlayer.config.ts for an up to date list of supported fields. The following fields are supported:
title (required)
date (required)
tags (optional)
lastmod (optional)
draft (optional)
summary (optional)
images (optional)
authors (optional list which should correspond to the file names in `data/authors`. Uses `default` if none is specified)
layout (optional list which should correspond to the file names in `data/layouts`)
canonicalUrl (optional, canonical url for the post for SEO)
Here's an example of a post's frontmatter:
---
title: 'Starter Blog'
date: '2025-01-20'
lastmod: '2021-01-18'
tags: ['next-js', 'tailwind', 'guide']
draft: false
summary: 'A performant Stsarter Blog.'
images: ['/static/images/blog-pic.jpg', '/static/images/blog-pic-2.jpg']
authors: ['default', 'sparrowhawk']
layout: PostLayout
canonicalUrl: https://frankcarv.com/blog/
---
- A markdown guide
- Learn more about images in Next.js
- A tour of math typesetting
- Simple MDX image grid
- Example of long prose
- Example of Nested Route Post
- Personalized
siteMetadata.js(site related information) - Modify the content security policy in
next.config.jsto use other analytics provider or a commenting solution other than giscus. - Personalized
authors/default.md(main author) - Modified
projectsData.ts - Modified
headerNavLinks.tsto customize navigation links - Added a blog post
- Deployed on Vercel
devcontainer runs and opens http://localhost:3000
Edit the layout in app or content in data. With live reloading, the pages auto-updates as you edit them.
data/siteMetadata.js - contains most of the site related information which should be modified for a user's need.
data/authors/default.md - default author information (required). Additional authors can be added as files in data/authors.
data/projectsData.js - data used to generate styled card on the projects page.
data/headerNavLinks.js - navigation links.
data/logo.svg - logo.
data/blog - blog posts.
public/static - store assets such as images and favicons.
tailwind.config.js and css/tailwind.css - tailwind configuration and stylesheet which can be modified to change the overall look and feel of the site.
css/prism.css - controls the styles associated with the code blocks. Customizeable to preferred prismjs theme e.g. prism themes.
contentlayer.config.ts - configuration for Contentlayer, including definition of content sources and MDX plugins used. See Contentlayer documentation for more information.
components/MDXComponents.js - pass your own JSX code or React component by specifying it over here. You can then use them directly in the .mdx or .md file. By default, a custom link, next/image component, table of contents component and Newsletter form are passed down. Note that the components should be default exported to avoid existing issues with Next.js.
layouts - main used in pages:
- There are currently 3 post layouts available:
PostLayout,PostSimpleandPostBanner.PostLayoutis the default 2 column layout with meta and author information.PostSimpleis a simplified version ofPostLayout, whilePostBannerfeatures a banner image. - There are 2 blog listing layouts:
ListLayout, the layout used in version 1 of the template with a search bar andListLayoutWithTags, currently used in version 2, which omits the search bar but includes a sidebar with information on the tags.
app - pages to route to. Read the Next.js documentation for more information.
next.config.js - configuration related to Next.js. You need to adapt the Content Security Policy if you want to load scripts, images etc. from other domains.
The easiest way to deploy is on Vercel. The Next.js deployment documentation for more details.