typescript. Close #1. #2
70
README.md
70
README.md
@ -1,13 +1,8 @@
|
|||||||
![tailwind-nextjs-banner](/public/static/images/twitter-card.png)
|
![tailwind-nextjs-banner](/public/static/images/twitter-card.png)
|
||||||
|
|
||||||
# Tailwind Nextjs Starter Blog
|
# Ivan Li's Blog
|
||||||
|
|
||||||
[![GitHub Repo stars](https://img.shields.io/github/stars/timlrx/tailwind-nextjs-starter-blog?style=social)](https://GitHub.com/timlrx/tailwind-nextjs-starter-blog/stargazers/)
|
[![Build Status](https://ci.ivanli.cc/api/badges/Ivan/tailwind-nextjs-blog/status.svg)](https://ci.ivanli.cc/Ivan/tailwind-nextjs-blog)
|
||||||
[![GitHub forks](https://img.shields.io/github/forks/timlrx/tailwind-nextjs-starter-blog?style=social)](https://GitHub.com/timlrx/tailwind-nextjs-starter-blog/network/)
|
|
||||||
[![Twitter URL](https://img.shields.io/twitter/url?style=social&url=https%3A%2F%2Ftwitter.com%2Ftimlrxx)](https://twitter.com/timlrxx)
|
|
||||||
[![Sponsor](https://img.shields.io/static/v1?label=Sponsor&message=%E2%9D%A4&logo=GitHub&link=https://github.com/sponsors/timlrx)](https://github.com/sponsors/timlrx)
|
|
||||||
|
|
||||||
[![Deploy with Vercel](https://vercel.com/button)](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.
|
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.
|
||||||
|
|
||||||
@ -17,36 +12,6 @@ Facing issues? Check the [FAQ page](https://github.com/timlrx/tailwind-nextjs-st
|
|||||||
|
|
||||||
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!
|
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.
|
|
||||||
- [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)).
|
|
||||||
- [alfoncode.com](https://alfoncode.com) - Alfonso García's personar website. Customized design ([source code](https://github.com/alfoncode/personal-web))
|
|
||||||
|
|
||||||
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
|
## Features
|
||||||
|
|
||||||
- Easy styling customization with [Tailwind 3.0](https://tailwindcss.com/blog/tailwindcss-v3) and primary color attribute
|
- Easy styling customization with [Tailwind 3.0](https://tailwindcss.com/blog/tailwindcss-v3) and primary color attribute
|
||||||
@ -67,7 +32,7 @@ I wanted it to be nearly as feature-rich as popular blogging templates like [bea
|
|||||||
- Blog templates
|
- Blog templates
|
||||||
- TOC component
|
- TOC component
|
||||||
- Support for nested routing of blog posts
|
- Support for nested routing of blog posts
|
||||||
- Newsletter component with support for mailchimp, buttondown, convertkit and klaviyo
|
- 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
|
- Supports [giscus](https://github.com/laymonage/giscus), [utterances](https://github.com/utterance/utterances) or disqus
|
||||||
- Projects page
|
- Projects page
|
||||||
- Preconfigured security headers
|
- Preconfigured security headers
|
||||||
@ -84,18 +49,27 @@ I wanted it to be nearly as feature-rich as popular blogging templates like [bea
|
|||||||
|
|
||||||
## Quick Start Guide
|
## Quick Start Guide
|
||||||
|
|
||||||
1. JS (official support)
|
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
|
```bash
|
||||||
npx degit https://github.com/timlrx/tailwind-nextjs-starter-blog.git
|
npx degit https://github.com/timlrx/tailwind-nextjs-starter-blog.git
|
||||||
```
|
```
|
||||||
|
|
||||||
or with TypeScript (community support)
|
|
||||||
|
|
||||||
```bash
|
|
||||||
npx degit timlrx/tailwind-nextjs-starter-blog#typescript
|
|
||||||
```
|
|
||||||
|
|
||||||
2. Personalize `siteMetadata.js` (site related information)
|
2. Personalize `siteMetadata.js` (site related information)
|
||||||
3. Modify the content security policy in `next.config.js` if you want to use
|
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.
|
any analytics provider or a commenting solution other than giscus.
|
||||||
@ -165,7 +139,7 @@ You can start editing the page by modifying `pages/index.js`. The page auto-upda
|
|||||||
|
|
||||||
Frontmatter follows [Hugo's standards](https://gohugo.io/content-management/front-matter/).
|
Frontmatter follows [Hugo's standards](https://gohugo.io/content-management/front-matter/).
|
||||||
|
|
||||||
Currently 10 fields are supported.
|
Currently 7 fields are supported.
|
||||||
|
|
||||||
```
|
```
|
||||||
title (required)
|
title (required)
|
||||||
@ -217,6 +191,6 @@ The API routes used in the newsletter component cannot be used in a static site
|
|||||||
|
|
||||||
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).
|
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
|
## License
|
||||||
|
|
||||||
[MIT](https://github.com/timlrx/tailwind-nextjs-starter-blog/blob/master/LICENSE) © [Timothy Lin](https://www.timrlx.com)
|
[MIT](https://github.com/timlrx/tailwind-nextjs-starter-blog/blob/master/LICENSE) © [Timothy Lin](https://www.timlrx.com)
|
||||||
|
Loading…
Reference in New Issue
Block a user