Repository files navigation

This is aNext.js,Tailwind CSS blogging starter template. Version 2 is based on Next App directory withReact Server Component and usesContentlayer to manage markdown content.

Probably the most feature-rich Next.js markdown blogging template out there. 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 theFAQ page 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!

Note: These are community contributed forks using different frameworks or with significant changes to the codebase - not officially supported.

Astro alternative -Tailwind Astro Template.

Remix-run alternative -Tailwind Remix-run Starter Blog Template.

Internationalization support -Template with i18n andsource code.

• Demo Blog - this repo
• My personal blog - modified to auto-generate blog posts with dates
• Karhdo's Blog - Karhdo's Blog - Karhdo's Coding Adventure (source code)
• SOTO's Blog - A more personalized personal website upgraded from V1 (source code)
• Prabhu's Blog - Prabhu's Personal website with blog (source code)
• Rabby Hasan's Blog - Rabby Hasan's personal blog about full stack development with cloud (source code)
• enscribe.dev - enscribe's personal blog; cybersecurity shenanigans, frontend webdev, etc. (source code)
• dalelarroder.com - Dale Larroder's personal website upgraded from V1 (source code)
• thetalhatahir.com - Talha Tahir's personal blog. Added article thumbnails, linkedIn card, Beautiful hero content, technology emoticons.
• homing.so - Homing's personal blog about the stuff he's learning (source code)
• zS1m's Blog - zS1m's personal blog for recording and sharing daily learning technical content (source code)
• dariuszwozniak.net - Software development blog (source code)
• dreams.plus - Blog site for some thoughts and records for life and technology.
• francisaguilar.co blog - Francis Aguilar's personal blog that talks about tech, fitness, and personal development.
• Min71 Dev Blog - Personal blog about Blockchain, Development and etc. (source code)
• Bryce Yu's Blog - Bryce Yu's personal Blog about distributed system, database, and web development. (source code)
• Remote Startup Senpai Anime Series Website - Landing page for the anime series Remote Startup Senpai.
• Secret Base - Jac Hsu's personal Blog.talks about tech, thought, and life in general.
• Zsebinformatikus - The information superhighway guide blog.
• Anton Morgunov's Blog - talking about science without oversimplifications or why theoretical and computational chemistry is cool.
• Hans Blog - Hans' personal blog, front-end technology, gallery and travel diary 中文. (source code)
• London Tech Talk - A podcast exploring technology trends and expatriate living experiences. - 日本語
• CRUD Flow Blog - A technical blog about AI, Cloud Engineering, Data Science and Personal development
• Trillium's Blog - Modified to render resume pdf on/resume page. (source code)
• Wujie's Blog: 旅行者计划 - Wujie's personal digital garden (source code)
• Xiaodong's Blog - Xiaodong's personal blog about front-end technology, and life. 「中文」(source code)
• Azurtelier.com - Amos's personal website for tech, music, AI illustrations, etc. [English/中文] (Source code)
• JoshHaines.com - Personal website for Josh Haines. (source code)
• Jigu's Blog - Jigu's personal blog about tech, crypto, golang, and life. 「中文」
• andrewsam.xyz - Andrew's Personal website using ShadCN, Prisma, MongoDB, Auth.js, Resume Page, Custom Experience timeline and technologies components. (source code)
• Rulli Damara Putra's Portfolio - Rully's personal blog and portfolio.
• blog.taoluyuan.com 套路猿 - A personal tech blog that supports multi-theme switching. 「中英」
• LyricsDecode.com - A song lyrics website offering original lyrics, Romanisation, and English translations with customisable viewing options.
• bmacharia.com - Benson Macharia's technical blog about Cybersecurity and IT Risk Management.
• armujahid.me - Abdul Rauf's personal blog about tech and random stuff.
• leohuynh.dev - 🇻🇳 Leo's dev blog – stories, insights, and ideas. Add/snippets,/books pages, addProfileCard,CareerTimeline components and many more. (source)
• OpenSats Blog - A 501(c)(3) public charity which aims to sustainably fund free and open-source projects. (source code)
• Schedles Blog - Social media scheduling tips, strategies, and product updates for content creators. (Project Link)
• YawDev Blog - IT-Agency / Software Development. Blog about tech and business (Project Link)
• Engineering Notes - Jonas Vetterle Personal Website & Blog. I'm writing articles about software engineering that interest me, including AI and Quantum Computing
• Screenager.dev - Personal Website as Portfolio & Blog. Documenting my learning journey and some guides.
• kezhenxu94's blog - Blogging about dev, tips & tricks, tutorials and more.
• Parminder's blog - Thoughts on software development, life and more.
• wheelcircuit.com - Automotive YouTube News & Videos blog, updated daily.
• taitrd.com - Tai's personal dev blog, technologies and coding activity with Dynamodb practice (source code).
• Shelton's Blog - Sharing insights on TypeScript full-stack development (Next.js, React, Hono, Supabase), web crawlers, and other cutting-edge technologies.
• Culture DevOps - Technical blog on DevOps practices and tools (source code).
• InnovateWire Blog - A tech blog about software automation and automation tools (Project Link)
• MichaelScheiwiller.com - Mix of software and data engineering blog as well as personal notes and updates
• Wahyu Ikbal Personal Website - Personal website with blog and ai feature, share about Technology literacy (source code)
• ByteGeometry Blog - Software development blog about tech trends and business growth. AI and web-apps development (Project Link)
• Farhad's Blog - Farhad's personal website sharing tech news and insights on emerging technologies, with a focus on AI and Data Science (Project Link)
• Utanzu Cybersecurity – A thriving community where mentorship and expert training help cybersecurity professionals unlock their full potential and advance their careers.
• trungtmnguyen.com - 🇻🇳 Trung's personal and technical blogs – some idea about me, tips, ideas and learned. Add some custom components, like: UnderlineHoverLink, Timeline, neon-border styles and will have more in the future. (source)
• Ryan Fitton's Blog – A custom theme version with 'Portfolio' section. Used as a personal Blog/Portfolio for development projects. (source code)
• ktovoz.com - Kto's personal blog, sharing life, technology. Added article categories and article directory navigation 「中文」

Using the template? Feel free to create a PR and add your blog to this list.

Thanks to the community of users and contributors to the template! We are no longer accepting new blog listings over here. If you have updated from version 1 to version 2, feel free to remove your blog from this list and add it to the one above.

• Aloisdg's cookbook - with pictures and recipes!
• GautierArcin's demo with next translate - includes translation of mdx posts,source code
• David Levai's digital garden - customized design and added email subscriptions
• thvu.dev - Addedmdx-embed, view count, reading minutes and more.
• irvin.dev - Irvin Lin's personal site. Added YouTube embedding.
• KirillSo.com - Personal blog & website.
• slightlysharpe.com -Tincre's main company blog
• blog.b00st.com -b00st.com's main music promotion blog
• astrosaurus.me - Ephraim Atta-Duncan's Personal Blog
• dhanrajsp.me - Dhanraj's personal site and blog.
• blog.r00ks.io - Austin Rooks's personal blog (source code).
• honghong.me - Tszhong's personal website (source code)
• marceloformentao.dev - Marcelo Formentão personal website (source code).
• abiraja.com - with arunnable JS code snippet component!
• bpiggin.com - Ben Piggin's personal blog
• maqib.cn - A blog of Chinese front-end developers 狂奔小马的博客 (源码)
• ambilena.com - Electronic Music Blog & imprint for upcoming musicians.
• techipedia - Simple blogging progressive web app with custom installation button and top progress bar
• reubence.com - Reuben Rapose's Digital Garden
• axolo.co/blog - Engineering management news & axolo.co updates (with image preview for article in the home page)
• musing.vercel.app - Parth Desai's personal blog (source code)
• onyourmental.com -Curtis Warcup's website for the On Your Mental Podcast (source code)
• cwarcup.com - Curtis Warcup's personal website and blog (source code).
• jmalvarez.dev - José Miguel Álvarez's personal blog (source code)
• justingosses.com - Justin Gosses's personal website and blog (source code)
• raphaelchelly.com - Raphaël Chelly's personal website and blog (source code)
• kaveh.page - Kaveh Tehrani's personal blog. Added tags directory, profile card, time-to-read on posts directory, etc.
• drakerossman.com - Drake Rossman's blog about NixOS, Rust, Software Architecture and Engineering Management, as well as general musings.
• meamenu.com - Landing page and product blog starting from this template. It also usesframer-motion for animations, custom layout templates,waline for blog comments andprimereact forms [Ita]
• giovanni.orciuolo.it - Giovanni Orciuolo's personal website, blog and everything nerd.

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 fromTailwindlabs blog.

I wanted it to be nearly as feature-rich as popular blogging templates likebeautiful-jekyll andHugo Academic but with the best of React's ecosystem and current web development's best practices.

• Next.js with Typescript
• Contentlayer to manage content logic
• Easy styling customization withTailwind 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 withnext/font
• Integration withpliny that provides:
  • Multiple analytics options includingUmami,Plausible,Simple Analytics, Posthog and Google Analytics
  • Comments viaGiscus,Utterances or Disqus
  • Newsletter API and component with support for Mailchimp, Buttondown, Convertkit, Klaviyo, Revue, Emailoctopus and Beehiiv
  • Command palette search withKbar or Algolia
• Server-side syntax highlighting with line numbers and line highlighting viarehype-prism-plus
• Math display supported viaKaTeX
• Citation and bibliography support viarehype-citation
• Github alerts viaremark-github-blockquote-alert
• Automatic image optimization vianext/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!

• 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

1. Clone the repo

npx degit'timlrx/tailwind-nextjs-starter-blog'

2. PersonalizesiteMetadata.js (site related information)
3. Modify the content security policy innext.config.js if you want to useother analytics provider or a commenting solution other than giscus.
4. Personalizeauthors/default.md (main author)
5. ModifyprojectsData.ts
6. ModifyheaderNavLinks.ts to customize navigation links
7. Add blog posts
8. Deploy on Vercel

yarn

Please note, that if you are using Windows, you may need to run:

$env:PWD =$(Get-Location).Path

First, run the development server:

yarn dev

Openhttp://localhost:3000 with your browser to see the result.

Edit the layout inapp or content indata. 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 indata/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 andcss/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. Feel free to customize it and use your preferred prismjs theme e.g.prism themes.

contentlayer.config.ts - configuration for Contentlayer, including definition of content sources and MDX plugins used. SeeContentlayer 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 avoidexisting issues with Next.js.

layouts - main templates used in pages:

• There are currently 3 post layouts available:PostLayout,PostSimple andPostBanner.PostLayout is the default 2 column layout with meta and author information.PostSimple is a simplified version ofPostLayout, whilePostBanner features 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 theNext.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.

Content is modelled usingContentlayer, which allows you to define your own content schema and use it to generate typed content objects. SeeContentlayer documentation for more information.

Frontmatter followsHugo's standards.

Please refer tocontentlayer.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: 'Introducing Tailwind Nexjs Starter Blog'date: '2021-01-12'lastmod: '2021-01-18'tags: ['next-js', 'tailwind', 'guide']draft: falsesummary: '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: PostLayoutcanonicalUrl: https://tailwind-nextjs-starter-blog.vercel.app/blog/introducing-tailwind-nextjs-starter-blog---

Apages.yml workflow is already provided. Simply select "GitHub Actions" in:Settings > Pages > Build and deployment > Source.

The easiest way to deploy the template is to deploy onVercel. Check out theNext.js deployment documentation for more details.

Netlify’s Next.js runtime configures enables key Next.js functionality on your website without the need for additional configurations. Netlify generates serverless functions that will handle Next.js functionalities such as server-side rendered (SSR) pages, incremental static regeneration (ISR),next/images, etc.

SeeNext.js on Netlify for suggested configuration values and more details.

Run:

$ EXPORT=1 UNOPTIMIZED=1 yarn build

Then, deploy the generatedout folder or runnpx serve out it locally.

$ EXPORT=1 UNOPTIMIZED=1 BASE_PATH=/myblog yarn build

Consider removing the following features that cannot be used in a static build:

1. Comment outheaders() fromnext.config.js.
2. Removeapi folder and components which call the server-side function such as the Newsletter component. Not technically required and the site will build successfully, but the APIs cannot be used as they are server-side functions.

• How can I add a custom MDX component?
• How can I customize thekbar search?
• Deploy with docker

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

MIT ©Timothy Lin