251 lines
15 KiB
Markdown
251 lines
15 KiB
Markdown
|
|
||
|
|
|
||
|
|
# Tailwind Nextjs Starter Blog
|
||
|
|
|
||
|
|
[](https://GitHub.com/timlrx/tailwind-nextjs-starter-blog/stargazers/)
|
||
|
|
[](https://GitHub.com/timlrx/tailwind-nextjs-starter-blog/network/)
|
||
|
|
[](https://twitter.com/timlrxx)
|
||
|
|
[](https://github.com/sponsors/timlrx)
|
||
|
|
|
||
|
|
[](https://vercel.com/new/git/external?repository-url=https://github.com/timlrx/tailwind-nextjs-starter-blog)
|
||
|
|
|
||
|
|
This is a [Next.js](https://nextjs.org/), [Tailwind CSS](https://tailwindcss.com/) blogging starter template. Probably the most feature-rich Next.js markdown blogging template out there. Comes out of the box configured with the latest technologies to make technical writing a breeze. Easily configurable and customizable. Perfect as a replacement to existing Jekyll and Hugo individual blogs.
|
||
|
|
|
||
|
|
Check out the documentation below to get started.
|
||
|
|
|
||
|
|
Facing issues? Check the [FAQ page](https://github.com/timlrx/tailwind-nextjs-starter-blog/wiki) and do a search on past issues. Feel free to open a new issue if none has been posted previously.
|
||
|
|
|
||
|
|
Feature request? Check the past discussions to see if it has been brought up previously. Otherwise, feel free to start a new discussion thread. All ideas are welcomed!
|
||
|
|
|
||
|
|
## Examples
|
||
|
|
|
||
|
|
- [Demo Blog](https://tailwind-nextjs-starter-blog.vercel.app/) - this repo
|
||
|
|
- [My personal blog](https://www.timlrx.com) - modified to auto-generate blog posts with dates
|
||
|
|
- [Aloisdg's cookbook](https://tambouille.vercel.app/) - with pictures and recipes!
|
||
|
|
- [GautierArcin's demo with next translate](https://tailwind-nextjs-starter-blog-seven.vercel.app/) - includes translation of mdx posts, [source code](https://github.com/GautierArcin/tailwind-nextjs-starter-blog/tree/demo/next-translate)
|
||
|
|
- [David Levai's digital garden](https://davidlevai.com/) - customized design and added email subscriptions
|
||
|
|
- [Thinh's Corner](https://thinhcorner.com/) - [customized layout](https://github.com/Th1nhNg0/th1nhng0.vercel.app/blob/5e73a420828d82f01e7147512a2c3273c4ec19f8/layouts/PostLayout.js) with sticky side table of contents
|
||
|
|
- [Leo's Blog](https://leohuynh.dev) - Tuan Anh Huynh's personal site. Add Snippets Page, Author Profile Card, Image Lightbox, ...
|
||
|
|
- [thvu.dev](https://thvu.dev) - Added `mdx-embed`, view count, reading minutes and more.
|
||
|
|
- [fiqrychoerudin.dev](https://www.fiqrychoerudin.dev/) - simple portfolio.
|
||
|
|
- [irvin.dev](https://www.irvin.dev/) - Irvin Lin's personal site. Added YouTube embedding.
|
||
|
|
- [the all JavaScript Blog](https://the-all-javascript-blog.vercel.app/) - a JavaScript enlightenment blog uses this
|
||
|
|
- [KirillSo.com](https://www.kirillso.com/) - Personal blog & website.
|
||
|
|
- [ghali.dev](https://ghali.dev) - Cyril's Blog
|
||
|
|
- [DevBoy Blog](https://devboy.vercel.app/) - M.Reza's personal blog
|
||
|
|
- [slightlysharpe.com](https://slightlysharpe.com) - [Tincre's](https://tincre.com) main company blog
|
||
|
|
- [blog.b00st.com](https://blog.b00st.com) - [b00st.com's](https://b00st.com) main music promotion blog
|
||
|
|
- [astrosaurus.me](https://astrosaurus.me/) - Ephraim Atta-Duncan's Personal Blog
|
||
|
|
- [dhanrajsp.me](https://dhanrajsp.me/) - Dhanraj's personal site and blog.
|
||
|
|
- [blog.r00ks.io](https://blog.r00ks.io/) - Austin Rooks's personal blog ([source code](https://github.com/Austionian/blog.r00ks)).
|
||
|
|
- [honghong.me](https://honghong.me) - Tszhong's personal website ([source code](https://github.com/tszhong0411/home))
|
||
|
|
- [alfoncode.com](https://alfoncode.com) - Alfonso García's personar website. Customized design ([source code](https://github.com/alfoncode/personal-web))
|
||
|
|
- [marceloformentao.dev](https://marceloformentao.dev) - Marcelo Formentão personal website ([source code](https://github.com/marceloavf/marceloformentao.dev)).
|
||
|
|
- [abiraja.com](https://www.abiraja.com/) - with a [runnable JS code snippet component!](https://www.abiraja.com/blog/querying-solana-blockchain)
|
||
|
|
- [einargudni.com](https://www.einargudni.com) - with a customized theme, command pallette and more ([source code](https://github.com/einargudnig/einargudni.com))
|
||
|
|
- [bpiggin.com](https://www.bpiggin.com) - Ben Piggin's personal blog
|
||
|
|
- [maqib.cn](https://maqib.cn) - A blog of Chinese front-end developers 狂奔小马的博客 ([源码](https://github.com/maqi1520/nextjs-tailwind-blog))
|
||
|
|
- [ambilena.com](https://ambilena.com/) - Electronic Music Blog & imprint for upcoming musicians.
|
||
|
|
- [kittan.ru](https://www.kittan.ru/) - Kittanb's personal blog about linux ([source code](https://github.com/kittanb/blog))
|
||
|
|
- [nchristopher.me](https://nchristopher.me) - Nicholas Christopher's personal website and blog ([source code](https://github.com/nchristopher/blog))
|
||
|
|
- [dalelarroder.com](https://dalelarroder.com) - Dale Larroder's personal website and blog ([source code](https://github.com/dlarroder/dalelarroder))
|
||
|
|
- [devahoy.com](https://devahoy.com) - Chai's personal blog (Thai language)
|
||
|
|
- [0xchai.io](https://0xchai.io) - Chai's personal blog
|
||
|
|
- [techipedia](https://techipedia.vercel.app) - Simple blogging progressive web app with custom installation button and top progress bar
|
||
|
|
- [reubence.com](https://reubence.com) - Reuben Rapose's Digital Garden
|
||
|
|
- [axolo.co/blog](https://axolo.co/blog) - Engineering management news & axolo.co updates (with image preview for article in the home page)
|
||
|
|
- [musing.vercel.app](https://musing.vercel.app/) - Parth Desai's personal blog ([source code](https://github.com/pycoder2000/blog))
|
||
|
|
- [onyourmental.com](https://www.onyourmental.com/) - [Curtis Warcup's](https://github.com/Cwarcup) website for the On Your Mental Podcast ([source code](https://github.com/Cwarcup/on-your-mental))
|
||
|
|
- [cwarcup.com](https://www.cwarcup.com/) - Curtis Warcup's personal website and blog ([source code](https://github.com/Cwarcup/personal-blog).
|
||
|
|
|
||
|
|
Using the template? Feel free to create a PR and add your blog to this list.
|
||
|
|
|
||
|
|
## Motivation
|
||
|
|
|
||
|
|
I wanted to port my existing blog to Nextjs and Tailwind CSS but there was no easy out of the box template to use so I decided to create one. Design is adapted from [Tailwindlabs blog](https://github.com/tailwindlabs/blog.tailwindcss.com).
|
||
|
|
|
||
|
|
I wanted it to be nearly as feature-rich as popular blogging templates like [beautiful-jekyll](https://github.com/daattali/beautiful-jekyll) and [Hugo Academic](https://github.com/wowchemy/wowchemy-hugo-modules) but with the best of React's ecosystem and current web development's best practices.
|
||
|
|
|
||
|
|
## Features
|
||
|
|
|
||
|
|
- Easy styling customization with [Tailwind 3.0](https://tailwindcss.com/blog/tailwindcss-v3) and primary color attribute
|
||
|
|
- Near perfect lighthouse score - [Lighthouse report](https://www.webpagetest.org/result/210111_DiC1_08f3670c3430bf4a9b76fc3b927716c5/)
|
||
|
|
- Lightweight, 45kB first load JS, uses Preact in production build
|
||
|
|
- Mobile-friendly view
|
||
|
|
- Light and dark theme
|
||
|
|
- Self-hosted font with [Fontsource](https://fontsource.org/)
|
||
|
|
- Supports [plausible](https://plausible.io/), [simple analytics](https://simpleanalytics.com/) and google analytics
|
||
|
|
- [MDX - write JSX in markdown documents!](https://mdxjs.com/)
|
||
|
|
- Server-side syntax highlighting with line numbers and line highlighting via [rehype-prism-plus](https://github.com/timlrx/rehype-prism-plus)
|
||
|
|
- Math display supported via [KaTeX](https://katex.org/)
|
||
|
|
- Citation and bibliography support via [rehype-citation](https://github.com/timlrx/rehype-citation)
|
||
|
|
- Automatic image optimization via [next/image](https://nextjs.org/docs/basic-features/image-optimization)
|
||
|
|
- Flexible data retrieval with [mdx-bundler](https://github.com/kentcdodds/mdx-bundler)
|
||
|
|
- Support for tags - each unique tag will be its own page
|
||
|
|
- Support for multiple authors
|
||
|
|
- Blog templates
|
||
|
|
- TOC component
|
||
|
|
- Support for nested routing of blog posts
|
||
|
|
- Newsletter component with support for mailchimp, buttondown, convertkit, klaviyo, revue, and emailoctopus
|
||
|
|
- Supports [giscus](https://github.com/laymonage/giscus), [utterances](https://github.com/utterance/utterances) or disqus
|
||
|
|
- Projects page
|
||
|
|
- Preconfigured security headers
|
||
|
|
- SEO friendly with RSS feed, sitemaps and more!
|
||
|
|
|
||
|
|
## Sample posts
|
||
|
|
|
||
|
|
- [A markdown guide](https://tailwind-nextjs-starter-blog.vercel.app/blog/github-markdown-guide)
|
||
|
|
- [Learn more about images in Next.js](https://tailwind-nextjs-starter-blog.vercel.app/blog/guide-to-using-images-in-nextjs)
|
||
|
|
- [A tour of math typesetting](https://tailwind-nextjs-starter-blog.vercel.app/blog/deriving-ols-estimator)
|
||
|
|
- [Simple MDX image grid](https://tailwind-nextjs-starter-blog.vercel.app/blog/pictures-of-canada)
|
||
|
|
- [Example of long prose](https://tailwind-nextjs-starter-blog.vercel.app/blog/the-time-machine)
|
||
|
|
- [Example of Nested Route Post](https://tailwind-nextjs-starter-blog.vercel.app/blog/nested-route/introducing-multi-part-posts-with-nested-routing)
|
||
|
|
|
||
|
|
## Quick Start Guide
|
||
|
|
|
||
|
|
1. Try installing the starter using the new [Pliny project CLI](https://github.com/timlrx/pliny):
|
||
|
|
|
||
|
|
```bash
|
||
|
|
npm i -g @pliny/cli
|
||
|
|
pliny new --template=starter-blog my-blog
|
||
|
|
```
|
||
|
|
|
||
|
|
It supports the updated version of the blog with Contentlayer, optional choice of TS/JS and different package managers as well as more modularized components which will be the basis of the template going forward.
|
||
|
|
|
||
|
|
Alternatively to stick with the current version, TypeScript and Contentlayer:
|
||
|
|
|
||
|
|
```bash
|
||
|
|
npx degit 'timlrx/tailwind-nextjs-starter-blog#contentlayer'
|
||
|
|
```
|
||
|
|
|
||
|
|
or JS (official support)
|
||
|
|
|
||
|
|
```bash
|
||
|
|
npx degit https://github.com/timlrx/tailwind-nextjs-starter-blog.git
|
||
|
|
```
|
||
|
|
|
||
|
|
2. Personalize `siteMetadata.js` (site related information)
|
||
|
|
3. Modify the content security policy in `next.config.js` if you want to use
|
||
|
|
any analytics provider or a commenting solution other than giscus.
|
||
|
|
4. Personalize `authors/default.md` (main author)
|
||
|
|
5. Modify `projectsData.js`
|
||
|
|
6. Modify `headerNavLinks.js` to customize navigation links
|
||
|
|
7. Add blog posts
|
||
|
|
8. Deploy on Vercel
|
||
|
|
|
||
|
|
## Installation
|
||
|
|
|
||
|
|
```bash
|
||
|
|
npm install
|
||
|
|
```
|
||
|
|
|
||
|
|
## Development
|
||
|
|
|
||
|
|
First, run the development server:
|
||
|
|
|
||
|
|
```bash
|
||
|
|
npm start
|
||
|
|
```
|
||
|
|
|
||
|
|
or
|
||
|
|
|
||
|
|
```bash
|
||
|
|
npm run dev
|
||
|
|
```
|
||
|
|
|
||
|
|
Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
|
||
|
|
|
||
|
|
You can start editing the page by modifying `pages/index.js`. The page auto-updates as you edit the file.
|
||
|
|
|
||
|
|
## Extend / Customize
|
||
|
|
|
||
|
|
`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` - replace with your own logo.
|
||
|
|
|
||
|
|
`data/blog` - replace with your own blog posts.
|
||
|
|
|
||
|
|
`public/static` - store assets such as images and favicons.
|
||
|
|
|
||
|
|
`tailwind.config.js` and `css/tailwind.css` - contain the tailwind 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. Feel free to customize it and use your preferred prismjs theme e.g. [prism themes](https://github.com/PrismJS/prism-themes).
|
||
|
|
|
||
|
|
`components/social-icons` - to add other icons, simply copy an svg file from [Simple Icons](https://simpleicons.org/) and map them in `index.js`. Other icons use [heroicons](https://heroicons.com/).
|
||
|
|
|
||
|
|
`components/MDXComponents.js` - pass your own JSX code or React component by specifying it over here. You can then call them directly in the `.mdx` or `.md` file. By default, a custom link and image component is passed.
|
||
|
|
|
||
|
|
`layouts` - main templates used in pages.
|
||
|
|
|
||
|
|
`pages` - pages to route to. Read the [Next.js documentation](https://nextjs.org/docs) 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.
|
||
|
|
|
||
|
|
## Post
|
||
|
|
|
||
|
|
### Frontmatter
|
||
|
|
|
||
|
|
Frontmatter follows [Hugo's standards](https://gohugo.io/content-management/front-matter/).
|
||
|
|
|
||
|
|
Currently 7 fields are supported.
|
||
|
|
|
||
|
|
```
|
||
|
|
title (required)
|
||
|
|
date (required)
|
||
|
|
tags (required, can be empty array)
|
||
|
|
lastmod (optional)
|
||
|
|
draft (optional)
|
||
|
|
summary (optional)
|
||
|
|
images (optional, if none provided defaults to socialBanner in siteMetadata config)
|
||
|
|
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: 'Introducing Tailwind Nexjs Starter Blog'
|
||
|
|
date: '2021-01-12'
|
||
|
|
lastmod: '2021-01-18'
|
||
|
|
tags: ['next-js', 'tailwind', 'guide']
|
||
|
|
draft: false
|
||
|
|
summary: 'Looking for a performant, out of the box template, with all the best in web technology to support your blogging needs? Checkout the Tailwind Nextjs Starter Blog template.'
|
||
|
|
images: ['/static/images/canada/mountains.jpg', '/static/images/canada/toronto.jpg']
|
||
|
|
authors: ['default', 'sparrowhawk']
|
||
|
|
layout: PostLayout
|
||
|
|
canonicalUrl: https://tailwind-nextjs-starter-blog.vercel.app/blog/introducing-tailwind-nextjs-starter-blog
|
||
|
|
---
|
||
|
|
```
|
||
|
|
|
||
|
|
### Compose
|
||
|
|
|
||
|
|
Run `node ./scripts/compose.js` to bootstrap a new post.
|
||
|
|
|
||
|
|
Follow the interactive prompt to generate a post with pre-filled front matter.
|
||
|
|
|
||
|
|
## Deploy
|
||
|
|
|
||
|
|
**Vercel**
|
||
|
|
The easiest way to deploy the template is to use the [Vercel Platform](https://vercel.com) from the creators of Next.js. Check out the [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
|
||
|
|
|
||
|
|
**Netlify / GitHub Pages / Firebase etc.**
|
||
|
|
As the template uses `next/image` for image optimization, additional configurations have to be made to deploy on other popular static hosting websites like [Netlify](https://www.netlify.com/) or [GitHub Pages](https://pages.github.com/). An alternative image optimization provider such as Imgix, Cloudinary or Akamai has to be used. Alternatively, replace the `next/image` component with a standard `<img>` tag. See [`next/image` documentation](https://nextjs.org/docs/basic-features/image-optimization) for more details.
|
||
|
|
|
||
|
|
The API routes used in the newsletter component cannot be used in a static site export. You will need to use a form API endpoint provider and substitute the route in the newsletter component accordingly. Other hosting platforms such as Netlify also offer alternative solutions - please refer to their docs for more information.
|
||
|
|
|
||
|
|
## Support
|
||
|
|
|
||
|
|
Using the template? Support this effort by giving a star on GitHub, sharing your own blog and giving a shoutout on Twitter or becoming a project [sponsor](https://github.com/sponsors/timlrx).
|
||
|
|
|
||
|
|
## Licence
|
||
|
|
|
||
|
|
[MIT](https://github.com/timlrx/tailwind-nextjs-starter-blog/blob/master/LICENSE) © [Timothy Lin](https://www.timlrx.com)
|