[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-71283":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":10,"totalLinesOfCode":10,"stars":12,"forks":13,"watchers":14,"openIssues":15,"contributorsCount":16,"subscribersCount":16,"size":16,"stars1d":17,"stars7d":17,"stars30d":18,"stars90d":16,"forks30d":16,"starsTrendScore":19,"compositeScore":20,"rankGlobal":10,"rankLanguage":10,"license":21,"archived":22,"fork":22,"defaultBranch":23,"hasWiki":24,"hasPages":24,"topics":25,"createdAt":10,"pushedAt":10,"updatedAt":33,"readmeContent":34,"aiSummary":35,"trendingCount":16,"starSnapshotCount":16,"syncStatus":36,"lastSyncTime":37,"discoverSource":38},71283,"tailwind-nextjs-starter-blog","timlrx\u002Ftailwind-nextjs-starter-blog","timlrx","This is a Next.js, Tailwind CSS blogging starter template. 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.","https:\u002F\u002Ftailwind-nextjs-starter-blog.vercel.app\u002F",null,"TypeScript",10498,2592,51,48,0,12,33,36,45,"MIT License",false,"main",true,[26,27,28,29,30,31,32],"blogging","demo-blog","mdx","nextjs","publishing","reactjs","tailwind-css","2026-06-12 02:02:50","![tailwind-nextjs-banner](\u002Fpublic\u002Fstatic\u002Fimages\u002Ftwitter-card.png)\n\n# Tailwind Nextjs Starter Blog\n\n[![GitHub Repo stars](https:\u002F\u002Fimg.shields.io\u002Fgithub\u002Fstars\u002Ftimlrx\u002Ftailwind-nextjs-starter-blog?style=social)](https:\u002F\u002FGitHub.com\u002Ftimlrx\u002Ftailwind-nextjs-starter-blog\u002Fstargazers\u002F)\n[![GitHub forks](https:\u002F\u002Fimg.shields.io\u002Fgithub\u002Fforks\u002Ftimlrx\u002Ftailwind-nextjs-starter-blog?style=social)](https:\u002F\u002Fgithub.com\u002Ftimlrx\u002Ftailwind-nextjs-starter-blog\u002Fforks)\n[![Twitter URL](https:\u002F\u002Fimg.shields.io\u002Ftwitter\u002Furl?style=social&url=https%3A%2F%2Ftwitter.com%2Ftimlrxx)](https:\u002F\u002Fx.com\u002Ftimlrxx)\n[![Sponsor](https:\u002F\u002Fimg.shields.io\u002Fstatic\u002Fv1?label=Sponsor&message=%E2%9D%A4&logo=GitHub&link=https:\u002F\u002Fgithub.com\u002Fsponsors\u002Ftimlrx)](https:\u002F\u002Fgithub.com\u002Fsponsors\u002Ftimlrx)\n\n[![Deploy with Vercel](https:\u002F\u002Fvercel.com\u002Fbutton)](https:\u002F\u002Fvercel.com\u002Fnew\u002Fgit\u002Fexternal?repository-url=https:\u002F\u002Fgithub.com\u002Ftimlrx\u002Ftailwind-nextjs-starter-blog)\n\nThis is a [Next.js](https:\u002F\u002Fnextjs.org\u002F), [Tailwind CSS](https:\u002F\u002Ftailwindcss.com\u002F) blogging starter template. Version 2 is based on Next App directory with [React Server Component](https:\u002F\u002Fnextjs.org\u002Fdocs\u002Fgetting-started\u002Freact-essentials#server-components) and uses [Contentlayer](https:\u002F\u002Fwww.contentlayer.dev\u002F) to manage markdown content.\n\nProbably 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.\n\nCheck out the documentation below to get started.\n\nFacing issues? Check the [FAQ page](https:\u002F\u002Fgithub.com\u002Ftimlrx\u002Ftailwind-nextjs-starter-blog\u002Fwiki) and do a search on past issues. Feel free to open a new issue if none has been posted previously.\n\nFeature 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!\n\n## Variations\n\n**Note**: These are community contributed forks using different frameworks or with significant changes to the codebase - not officially supported.\n\nAstro alternative - [Tailwind Astro Template](https:\u002F\u002Fgithub.com\u002Fwanoo21\u002Ftailwind-astro-starting-blog).\n\nRemix-run alternative - [Tailwind Remix-run Starter Blog Template](https:\u002F\u002Fgithub.com\u002FSangeetAgarwal\u002Ftailwind-remix-run-mdxjs-typescript-starter-blog).\n\nInternationalization support - [Template with i18n](https:\u002F\u002Ftailwind-nextjs-starter-blog-i18n.vercel.app\u002F) and [source code](https:\u002F\u002Fgithub.com\u002FPxlSyl\u002Ftailwind-nextjs-starter-blog-i18n\u002Ftree\u002Fmain).\n\n## Examples V2\n\n- [Demo Blog](https:\u002F\u002Ftailwind-nextjs-starter-blog.vercel.app\u002F) - this repo\n- [My personal blog](https:\u002F\u002Fwww.timlrx.com) - modified to auto-generate blog posts with dates\n- [Karhdo's Blog](https:\u002F\u002Fkarhdo.dev) - Karhdo's Blog - Karhdo's Coding Adventure ([source code](https:\u002F\u002Fgithub.com\u002FKarhdo\u002Fkarhdo.dev))\n- [SOTO's Blog](https:\u002F\u002Fwww.atksoto.com\u002F) - A more personalized personal website upgraded from V1 ([source code](https:\u002F\u002Fgithub.com\u002Facsoto\u002Fsoto-blog-nextjs))\n- [Prabhu's Blog](https:\u002F\u002Fv1-prabhukirankonda.vercel.app) - Prabhu's Personal website with blog ([source code](https:\u002F\u002Fgithub.com\u002Fprabhukiran8790\u002Fprabhukirankonda))\n- [Rabby Hasan's Blog](https:\u002F\u002Fblog.rabbyhasan.com.bd\u002F) - Rabby Hasan's personal blog about full stack development with cloud ([source code](https:\u002F\u002Fgithub.com\u002Frabbyalone\u002Fmyblog))\n- [enscribe.dev](https:\u002F\u002Fenscribe.dev) - enscribe's personal blog; cybersecurity shenanigans, frontend webdev, etc. ([source code](https:\u002F\u002Fgithub.com\u002Fjktrn\u002Fenscribe.dev))\n- [dalelarroder.com](https:\u002F\u002Fdalelarroder.com) - Dale Larroder's personal website upgraded from V1 ([source code](https:\u002F\u002Fgithub.com\u002Fdlarroder\u002Fdalelarroder))\n- [thetalhatahir.com](https:\u002F\u002Fwww.thetalhatahir.com) - Talha Tahir's personal blog. Added article thumbnails, linkedIn card, Beautiful hero content, technology emoticons.\n- [homing.so](https:\u002F\u002Fhoming.so) - Homing's personal blog about the stuff he's learning ([source code](https:\u002F\u002Fgithub.com\u002Fhominsu\u002Fblog))\n- [zS1m's Blog](https:\u002F\u002Fcontrails.space) - zS1m's personal blog for recording and sharing daily learning technical content ([source code](https:\u002F\u002Fgithub.com\u002FzS1m\u002Fnextjs-contrails))\n- [dariuszwozniak.net](https:\u002F\u002Fdariuszwozniak.net\u002F) - Software development blog ([source code](https:\u002F\u002Fgithub.com\u002Fdariusz-wozniak\u002Fdariuszwozniak.net-v2))\n- [dreams.plus](https:\u002F\u002Fdreams.plus) - Blog site for some thoughts and records for life and technology.\n- [francisaguilar.co blog](https:\u002F\u002Ffrancisaguilar.co) - Francis Aguilar's personal blog that talks about tech, fitness, and personal development.\n- [Min71 Dev Blog](https:\u002F\u002Fmin71.dev) - Personal blog about Blockchain, Development and etc. ([source code](https:\u002F\u002Fgithub.com\u002Fmingi3442\u002Fblog))\n- [Bryce Yu's Blog](https:\u002F\u002Fearayu.github.io\u002F) - Bryce Yu's personal Blog about distributed system, database, and web development. ([source code](https:\u002F\u002Fgithub.com\u002Fearayu\u002Fearayu.github.io))\n- [Remote Startup Senpai Anime Series Website](https:\u002F\u002Fremote-startup-senpai.com) - Landing page for the anime series Remote Startup Senpai.\n- [Secret Base](https:\u002F\u002Fwww.jachsu.com\u002F) - Jac Hsu's personal Blog.talks about tech, thought, and life in general.\n- [Zsebinformatikus](https:\u002F\u002Fwww.zsebinformatikus.hu\u002F) - The information superhighway guide blog.\n- [Anton Morgunov's Blog](https:\u002F\u002Fblog.ischemist.com\u002F) - talking about science without oversimplifications or why theoretical and computational chemistry is cool.\n- [Hans Blog](https:\u002F\u002Fwww.hansking.cn\u002F) - Hans' personal blog, front-end technology, gallery and travel diary 中文. ([source code](https:\u002F\u002Fgithub.com\u002Fhansking98\u002Fhans-nextjs-blog))\n- [London Tech Talk](https:\u002F\u002Flondon-tech-talk.com\u002F) - A podcast exploring technology trends and expatriate living experiences. - 日本語\n- [CRUD Flow Blog](http:\u002F\u002Fblog.ndamulelo.co.za\u002F) - A technical blog about AI, Cloud Engineering, Data Science and Personal development\n- [Trillium's Blog](https:\u002F\u002Ftrilliumsmith.com\u002F) - Modified to render resume pdf on `\u002Fresume` page. ([source code](https:\u002F\u002Fgithub.com\u002Ftrillium\u002Ftrilliumsmith.com))\n- [Wujie's Blog: 旅行者计划](https:\u002F\u002Fwww.wujieli.com\u002F) - Wujie's personal digital garden ([source code](https:\u002F\u002Fgithub.com\u002Fwujieli0207\u002Fwujie-blog-next))\n- [Xiaodong's Blog](https:\u002F\u002Fblog.linxiaodong.com) - Xiaodong's personal blog about front-end technology, and life. 「中文」([source code](https:\u002F\u002Fgithub.com\u002Fbuxuku\u002Fbuxuku.github.io))\n- [Azurtelier.com](https:\u002F\u002Fwww.azurtelier.com\u002F) - Amos's personal website for tech, music, AI illustrations, etc. [English\u002F中文] ([Source code](https:\u002F\u002Fgithub.com\u002FAmosChenZixuan\u002FAzurtelier.com))\n- [JoshHaines.com](https:\u002F\u002Fwww.JoshHaines.com\u002F) - Personal website for Josh Haines. ([source code](https:\u002F\u002Fgithub.com\u002Fjdhaines\u002Fjoshhaines))\n- [Jigu's Blog](https:\u002F\u002Fanimeirl.top) - Jigu's personal blog about tech, crypto, golang, and life. 「中文」\n- [andrewsam.xyz](https:\u002F\u002Fwww.andrewsam.xyz\u002F) - Andrew's Personal website using ShadCN, Prisma, MongoDB, Auth.js, Resume Page, Custom Experience timeline and technologies components. ([source code](https:\u002F\u002Fgithub.com\u002Fandrew-sameh\u002Fandrewsam.xyz))\n- [Rulli Damara Putra's Portfolio](https:\u002F\u002Fwww.damaraputra.my.id\u002F) - Rully's personal blog and portfolio.\n- [blog.taoluyuan.com 套路猿](https:\u002F\u002Fblog.taoluyuan.com) - A personal tech blog that supports multi-theme switching. 「中英」\n- [LyricsDecode.com](https:\u002F\u002Flyricsdecode.com) - A song lyrics website offering original lyrics, Romanisation, and English translations with customisable viewing options.\n- [bmacharia.com](https:\u002F\u002Fbmacharia.com\u002F) - Benson Macharia's technical blog about Cybersecurity and IT Risk Management.\n- [armujahid.me](https:\u002F\u002Farmujahid.me\u002F) - Abdul Rauf's personal blog about tech and random stuff.\n- [leohuynh.dev](https:\u002F\u002Fwww.leohuynh.dev\u002F) - 🇻🇳 Leo's dev blog – stories, insights, and ideas. Add `\u002Fsnippets`, `\u002Fbooks` pages, add `ProfileCard`, `CareerTimeline` components and many more. ([source](https:\u002F\u002Fgithub.com\u002Fhta218\u002Fleohuynh.dev))\n- [OpenSats Blog](https:\u002F\u002Fopensats.org\u002Fblog) - A 501(c)(3) public charity which aims to sustainably fund free and open-source projects. ([source code](https:\u002F\u002Fgithub.com\u002FOpenSats\u002Fwebsite))\n- [Schedles Blog](https:\u002F\u002Fschedles.com\u002Fblog) - Social media scheduling tips, strategies, and product updates for content creators. ([Project Link](https:\u002F\u002Fschedles.com))\n- [YawDev Blog](https:\u002F\u002Fyawdev.org\u002Fblog) - IT-Agency \u002F Software Development. Blog about tech and business ([Project Link](https:\u002F\u002Fyawdev.org))\n- [Engineering Notes](https:\u002F\u002Fwww.jonvet.com) - Jonas Vetterle Personal Website & Blog. I'm writing articles about software engineering that interest me, including AI and Quantum Computing\n- [Screenager.dev](https:\u002F\u002Fscreenager.vercel.app) - Personal Website as Portfolio & Blog. Documenting my learning journey and some guides.\n- [kezhenxu94's blog](https:\u002F\u002Fkezhenxu94.me) - Blogging about dev, tips & tricks, tutorials and more.\n- [Parminder's blog](https:\u002F\u002Fsinghspeak.com) - Thoughts on software development, life and more.\n- [wheelcircuit.com](https:\u002F\u002Fwheelcircuit.com) - Automotive YouTube News & Videos blog, updated daily.\n- [taitrd.com](https:\u002F\u002Ftaitrd.com) - Tai's personal dev blog, technologies and coding activity with Dynamodb practice ([source code](https:\u002F\u002Fgithub.com\u002Ftaitrd\u002Ftaitrd)).\n- [Shelton's Blog](https:\u002F\u002Fwww.sheltonma.top) - Sharing insights on TypeScript full-stack development (Next.js, React, Hono, Supabase), web crawlers, and other cutting-edge technologies.\n- [Culture DevOps](https:\u002F\u002Fculturedevops.com\u002Fen) - Technical blog on DevOps practices and tools ([source code](https:\u002F\u002Fgithub.com\u002FCultureDevOps\u002Fblog)).\n- [InnovateWire Blog](https:\u002F\u002Finnovatewire.com) - A tech blog about software automation and automation tools ([Project Link](https:\u002F\u002Finnovatewire.com))\n- [MichaelScheiwiller.com](https:\u002F\u002Fwww.michaelscheiwiller.com\u002F) - Mix of software and data engineering blog as well as personal notes and updates\n- [Wahyu Ikbal Personal Website](https:\u002F\u002Fwww.wahyuikbal.web.id) - Personal website with blog and ai feature, share about Technology literacy ([source code](https:\u002F\u002Fgithub.com\u002Fwahyudesu\u002FPersonal-Website-Next-js-Obsidian-Ai-))\n- [ByteGeometry Blog](https:\u002F\u002Fbytegeometry.com\u002Fblog) - Software development blog about tech trends and business growth. AI and web-apps development ([Project Link](https:\u002F\u002Fbytegeometry.com))\n- [Farhad's Blog](https:\u002F\u002Fwww.farhad.my) - Farhad's personal website sharing tech news and insights on emerging technologies, with a focus on AI and Data Science ([Project Link](https:\u002F\u002Ffarhad.my))\n- [Utanzu Cybersecurity](https:\u002F\u002Futanzu.com\u002F) – A thriving community where mentorship and expert training help cybersecurity professionals unlock their full potential and advance their careers.\n- [trungtmnguyen.com](https:\u002F\u002Fwww.trungtmnguyen.com\u002F) - 🇻🇳 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](https:\u002F\u002Fgithub.com\u002Ftrungntm\u002Ftrungtmnguyen.com))\n- [Ryan Fitton's Blog](https:\u002F\u002Fryanfitton.co.uk\u002F) – A custom theme version with 'Portfolio' section. Used as a personal Blog\u002FPortfolio for development projects. ([source code](https:\u002F\u002Fgithub.com\u002Fryanfitton\u002Fryanfitton-nextjs-2024))\n- [ktovoz.com](https:\u002F\u002Fwww.ktovoz.com\u002F) - Kto's personal blog, sharing life, technology. Added article categories and article directory navigation 「中文」\n\nUsing the template? Feel free to create a PR and add your blog to this list.\n\n## Examples V1\n\n[v1-blogs-showcase.webm](https:\u002F\u002Fgithub.com\u002Ftimlrx\u002Ftailwind-nextjs-starter-blog\u002Fassets\u002F28362229\u002F2124c81f-b99d-4431-839c-347e01a2616c)\n\nThanks 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.\n\n- [Aloisdg's cookbook](https:\u002F\u002Ftambouille.vercel.app\u002F) - with pictures and recipes!\n- [GautierArcin's demo with next translate](https:\u002F\u002Ftailwind-nextjs-starter-blog-seven.vercel.app\u002F) - includes translation of mdx posts, [source code](https:\u002F\u002Fgithub.com\u002FGautierArcin\u002Ftailwind-nextjs-starter-blog\u002Ftree\u002Fdemo\u002Fnext-translate)\n- [David Levai's digital garden](https:\u002F\u002Fdavidlevai.com\u002F) - customized design and added email subscriptions\n- [thvu.dev](https:\u002F\u002Fthvu.dev) - Added `mdx-embed`, view count, reading minutes and more.\n- [irvin.dev](https:\u002F\u002Fwww.irvin.dev\u002F) - Irvin Lin's personal site. Added YouTube embedding.\n- [KirillSo.com](https:\u002F\u002Fwww.kirillso.com\u002F) - Personal blog & website.\n- [slightlysharpe.com](https:\u002F\u002Fslightlysharpe.com) - [Tincre's](https:\u002F\u002Ftincre.com) main company blog\n- [blog.b00st.com](https:\u002F\u002Fblog.b00st.com) - [b00st.com's](https:\u002F\u002Fb00st.com) main music promotion blog\n- [astrosaurus.me](https:\u002F\u002Fastrosaurus.me\u002F) - Ephraim Atta-Duncan's Personal Blog\n- [dhanrajsp.me](https:\u002F\u002Fdhanrajsp.me\u002F) - Dhanraj's personal site and blog.\n- [blog.r00ks.io](https:\u002F\u002Fblog.r00ks.io\u002F) - Austin Rooks's personal blog ([source code](https:\u002F\u002Fgithub.com\u002FAustionian\u002Fblog.r00ks)).\n- [honghong.me](https:\u002F\u002Fhonghong.me) - Tszhong's personal website ([source code](https:\u002F\u002Fgithub.com\u002Ftszhong0411\u002Fhome))\n- [marceloformentao.dev](https:\u002F\u002Fmarceloformentao.dev) - Marcelo Formentão personal website ([source code](https:\u002F\u002Fgithub.com\u002Fmarceloavf\u002Fmarceloformentao.dev)).\n- [abiraja.com](https:\u002F\u002Fwww.abiraja.com\u002F) - with a [runnable JS code snippet component!](https:\u002F\u002Fwww.abiraja.com\u002Fblog\u002Fquerying-solana-blockchain)\n- [bpiggin.com](https:\u002F\u002Fwww.bpiggin.com) - Ben Piggin's personal blog\n- [maqib.cn](https:\u002F\u002Fmaqib.cn) - A blog of Chinese front-end developers 狂奔小马的博客 ([源码](https:\u002F\u002Fgithub.com\u002Fmaqi1520\u002Fnextjs-tailwind-blog))\n- [ambilena.com](https:\u002F\u002Fambilena.com\u002F) - Electronic Music Blog & imprint for upcoming musicians.\n- [techipedia](https:\u002F\u002Ftechipedia.vercel.app) - Simple blogging progressive web app with custom installation button and top progress bar\n- [reubence.com](https:\u002F\u002Freubence.com) - Reuben Rapose's Digital Garden\n- [axolo.co\u002Fblog](https:\u002F\u002Faxolo.co\u002Fblog) - Engineering management news & axolo.co updates (with image preview for article in the home page)\n- [musing.vercel.app](https:\u002F\u002Fmusing.vercel.app\u002F) - Parth Desai's personal blog ([source code](https:\u002F\u002Fgithub.com\u002Fpycoder2000\u002Fblog))\n- [onyourmental.com](https:\u002F\u002Fwww.onyourmental.com\u002F) - [Curtis Warcup's](https:\u002F\u002Fgithub.com\u002FCwarcup) website for the On Your Mental Podcast ([source code](https:\u002F\u002Fgithub.com\u002FCwarcup\u002Fon-your-mental))\n- [cwarcup.com](https:\u002F\u002Fwww.cwarcup.com\u002F) - Curtis Warcup's personal website and blog ([source code](https:\u002F\u002Fgithub.com\u002FCwarcup\u002Fpersonal-blog)).\n- [jmalvarez.dev](https:\u002F\u002Fwww.jmalvarez.dev\u002F) - José Miguel Álvarez's personal blog ([source code](https:\u002F\u002Fgithub.com\u002Fjosemiguel-alvarez\u002Fnextjs-blog))\n- [justingosses.com](https:\u002F\u002Fjustingosses.com\u002F) - Justin Gosses's personal website and blog ([source code](https:\u002F\u002Fgithub.com\u002FJustinGOSSES\u002Fjustingosses-website))\n- [raphaelchelly.com](https:\u002F\u002Fwww.raphaelchelly.com\u002F) - Raphaël Chelly's personal website and blog ([source code](https:\u002F\u002Fgithub.com\u002Fraphaelchelly\u002Fraph_www))\n- [kaveh.page](https:\u002F\u002Fkaveh.page) - Kaveh Tehrani's personal blog. Added tags directory, profile card, time-to-read on posts directory, etc.\n- [drakerossman.com](https:\u002F\u002Fdrakerossman.com\u002F) - Drake Rossman's blog about NixOS, Rust, Software Architecture and Engineering Management, as well as general musings.\n- [meamenu.com](https:\u002F\u002Fwww.meamenu.com) - Landing page and product blog starting from this template. It also uses [framer-motion](https:\u002F\u002Fwww.framer.com\u002Fmotion) for animations, custom layout templates, [waline](https:\u002F\u002Fwaline.js.org\u002Fen\u002F) for blog comments and [primereact](https:\u002F\u002Fprimereact.org\u002F) forms [Ita]\n- [giovanni.orciuolo.it](https:\u002F\u002Fgiovanni.orciuolo.it) - Giovanni Orciuolo's personal website, blog and everything nerd.\n\n## Motivation\n\nI 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:\u002F\u002Fgithub.com\u002Ftailwindlabs\u002Fblog.tailwindcss.com).\n\nI wanted it to be nearly as feature-rich as popular blogging templates like [beautiful-jekyll](https:\u002F\u002Fgithub.com\u002Fdaattali\u002Fbeautiful-jekyll) and [Hugo Academic](https:\u002F\u002Fgithub.com\u002Fwowchemy\u002Fwowchemy-hugo-modules) but with the best of React's ecosystem and current web development's best practices.\n\n## Features\n\n- Next.js with Typescript\n- [Contentlayer](https:\u002F\u002Fwww.contentlayer.dev\u002F) to manage content logic\n- Easy styling customization with [Tailwind 3.0](https:\u002F\u002Ftailwindcss.com\u002Fblog\u002Ftailwindcss-v3) and primary color attribute\n- [MDX - write JSX in markdown documents!](https:\u002F\u002Fmdxjs.com\u002F)\n- Near perfect lighthouse score - [Lighthouse report](https:\u002F\u002Fwww.webpagetest.org\u002Fresult\u002F230805_BiDcBQ_4H7)\n- Lightweight, 85kB first load JS\n- Mobile-friendly view\n- Light and dark theme\n- Font optimization with [next\u002Ffont](https:\u002F\u002Fnextjs.org\u002Fdocs\u002Fapp\u002Fapi-reference\u002Fcomponents\u002Ffont)\n- Integration with [pliny](https:\u002F\u002Fgithub.com\u002Ftimlrx\u002Fpliny) that provides:\n  - Multiple analytics options including [Umami](https:\u002F\u002Fumami.is\u002F), [Plausible](https:\u002F\u002Fplausible.io\u002F), [Simple Analytics](https:\u002F\u002Fsimpleanalytics.com\u002F), Posthog and Google Analytics\n  - Comments via [Giscus](https:\u002F\u002Fgithub.com\u002Flaymonage\u002Fgiscus), [Utterances](https:\u002F\u002Fgithub.com\u002Futterance\u002Futterances) or Disqus\n  - Newsletter API and component with support for Mailchimp, Buttondown, Convertkit, Klaviyo, Revue, Emailoctopus and Beehiiv\n  - Command palette search with [Kbar](https:\u002F\u002Fgithub.com\u002Ftimc1\u002Fkbar) or Algolia\n- Server-side syntax highlighting with line numbers and line highlighting via [rehype-prism-plus](https:\u002F\u002Fgithub.com\u002Ftimlrx\u002Frehype-prism-plus)\n- Math display supported via [KaTeX](https:\u002F\u002Fkatex.org\u002F)\n- Citation and bibliography support via [rehype-citation](https:\u002F\u002Fgithub.com\u002Ftimlrx\u002Frehype-citation)\n- [Github alerts](https:\u002F\u002Fdocs.github.com\u002Fen\u002Fget-started\u002Fwriting-on-github\u002Fgetting-started-with-writing-and-formatting-on-github\u002Fbasic-writing-and-formatting-syntax#alerts) via [remark-github-blockquote-alert](https:\u002F\u002Fgithub.com\u002Fjaywcjlove\u002Fremark-github-blockquote-alert)\n- Automatic image optimization via [next\u002Fimage](https:\u002F\u002Fnextjs.org\u002Fdocs\u002Fbasic-features\u002Fimage-optimization)\n- Support for tags - each unique tag will be its own page\n- Support for multiple authors\n- 3 different blog layouts\n- 2 different blog listing layouts\n- Support for nested routing of blog posts\n- Projects page\n- Preconfigured security headers\n- SEO friendly with RSS feed, sitemaps and more!\n\n## Sample posts\n\n- [A markdown guide](https:\u002F\u002Ftailwind-nextjs-starter-blog.vercel.app\u002Fblog\u002Fgithub-markdown-guide)\n- [Learn more about images in Next.js](https:\u002F\u002Ftailwind-nextjs-starter-blog.vercel.app\u002Fblog\u002Fguide-to-using-images-in-nextjs)\n- [A tour of math typesetting](https:\u002F\u002Ftailwind-nextjs-starter-blog.vercel.app\u002Fblog\u002Fderiving-ols-estimator)\n- [Simple MDX image grid](https:\u002F\u002Ftailwind-nextjs-starter-blog.vercel.app\u002Fblog\u002Fpictures-of-canada)\n- [Example of long prose](https:\u002F\u002Ftailwind-nextjs-starter-blog.vercel.app\u002Fblog\u002Fthe-time-machine)\n- [Example of Nested Route Post](https:\u002F\u002Ftailwind-nextjs-starter-blog.vercel.app\u002Fblog\u002Fnested-route\u002Fintroducing-multi-part-posts-with-nested-routing)\n\n## Quick Start Guide\n\n1. Clone the repo\n\n```bash\nnpx degit 'timlrx\u002Ftailwind-nextjs-starter-blog'\n```\n\n2. Personalize `siteMetadata.js` (site related information)\n3. Modify the content security policy in `next.config.js` if you want to use\n   other analytics provider or a commenting solution other than giscus.\n4. Personalize `authors\u002Fdefault.md` (main author)\n5. Modify `projectsData.ts`\n6. Modify `headerNavLinks.ts` to customize navigation links\n7. Add blog posts\n8. Deploy on Vercel\n\n## Installation\n\n```bash\nyarn\n```\n\nPlease note, that if you are using Windows, you may need to run:\n\n```bash\n$env:PWD = $(Get-Location).Path\n```\n\n## Development\n\nFirst, run the development server:\n\n```bash\nyarn dev\n```\n\nOpen [http:\u002F\u002Flocalhost:3000](http:\u002F\u002Flocalhost:3000) with your browser to see the result.\n\nEdit the layout in `app` or content in `data`. With live reloading, the pages auto-updates as you edit them.\n\n## Extend \u002F Customize\n\n`data\u002FsiteMetadata.js` - contains most of the site related information which should be modified for a user's need.\n\n`data\u002Fauthors\u002Fdefault.md` - default author information (required). Additional authors can be added as files in `data\u002Fauthors`.\n\n`data\u002FprojectsData.js` - data used to generate styled card on the projects page.\n\n`data\u002FheaderNavLinks.js` - navigation links.\n\n`data\u002Flogo.svg` - replace with your own logo.\n\n`data\u002Fblog` - replace with your own blog posts.\n\n`public\u002Fstatic` - store assets such as images and favicons.\n\n`tailwind.config.js` and `css\u002Ftailwind.css` - tailwind configuration and stylesheet which can be modified to change the overall look and feel of the site.\n\n`css\u002Fprism.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:\u002F\u002Fgithub.com\u002FPrismJS\u002Fprism-themes).\n\n`contentlayer.config.ts` - configuration for Contentlayer, including definition of content sources and MDX plugins used. See [Contentlayer documentation](https:\u002F\u002Fwww.contentlayer.dev\u002Fdocs\u002Fgetting-started) for more information.\n\n`components\u002FMDXComponents.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\u002Fimage` 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](https:\u002F\u002Fgithub.com\u002Fvercel\u002Fnext.js\u002Fissues\u002F51593).\n\n`layouts` - main templates used in pages:\n\n- There are currently 3 post layouts available: `PostLayout`, `PostSimple` and `PostBanner`. `PostLayout` is the default 2 column layout with meta and author information. `PostSimple` is a simplified version of `PostLayout`, while `PostBanner` features a banner image.\n- There are 2 blog listing layouts: `ListLayout`, the layout used in version 1 of the template with a search bar and `ListLayoutWithTags`, currently used in version 2, which omits the search bar but includes a sidebar with information on the tags.\n\n`app` - pages to route to. Read the [Next.js documentation](https:\u002F\u002Fnextjs.org\u002Fdocs\u002Fapp) for more information.\n\n`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.\n\n## Post\n\nContent is modelled using [Contentlayer](https:\u002F\u002Fwww.contentlayer.dev\u002F), which allows you to define your own content schema and use it to generate typed content objects. See [Contentlayer documentation](https:\u002F\u002Fwww.contentlayer.dev\u002Fdocs\u002Fgetting-started) for more information.\n\n### Frontmatter\n\nFrontmatter follows [Hugo's standards](https:\u002F\u002Fgohugo.io\u002Fcontent-management\u002Ffront-matter\u002F).\n\nPlease refer to `contentlayer.config.ts` for an up to date list of supported fields. The following fields are supported:\n\n```\ntitle (required)\ndate (required)\ntags (optional)\nlastmod (optional)\ndraft (optional)\nsummary (optional)\nimages (optional)\nauthors (optional list which should correspond to the file names in `data\u002Fauthors`. Uses `default` if none is specified)\nlayout (optional list which should correspond to the file names in `data\u002Flayouts`)\ncanonicalUrl (optional, canonical url for the post for SEO)\n```\n\nHere's an example of a post's frontmatter:\n\n```\n---\ntitle: 'Introducing Tailwind Nexjs Starter Blog'\ndate: '2021-01-12'\nlastmod: '2021-01-18'\ntags: ['next-js', 'tailwind', 'guide']\ndraft: false\nsummary: '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.'\nimages: ['\u002Fstatic\u002Fimages\u002Fcanada\u002Fmountains.jpg', '\u002Fstatic\u002Fimages\u002Fcanada\u002Ftoronto.jpg']\nauthors: ['default', 'sparrowhawk']\nlayout: PostLayout\ncanonicalUrl: https:\u002F\u002Ftailwind-nextjs-starter-blog.vercel.app\u002Fblog\u002Fintroducing-tailwind-nextjs-starter-blog\n---\n```\n\n## Deploy\n\n### GitHub Pages\n\nA [`pages.yml`](.github\u002Fworkflows\u002Fpages.yml) workflow is already provided. Simply select \"GitHub Actions\" in: `Settings > Pages > Build and deployment > Source`.\n\n### Vercel\n\nThe easiest way to deploy the template is to deploy on [Vercel](https:\u002F\u002Fvercel.com). Check out the [Next.js deployment documentation](https:\u002F\u002Fnextjs.org\u002Fdocs\u002Fapp\u002Fbuilding-your-application\u002Fdeploying) for more details.\n\n### Netlify\n\n[Netlify](https:\u002F\u002Fwww.netlify.com\u002F)’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\u002Fimages`, etc.\n\nSee [Next.js on Netlify](https:\u002F\u002Fdocs.netlify.com\u002Fintegrations\u002Fframeworks\u002Fnext-js\u002Foverview\u002F#next-js-runtime) for suggested configuration values and more details.\n\n### Static hosting services (GitHub Pages \u002F S3 \u002F Firebase etc.)\n\nRun:\n\n```sh\n$ EXPORT=1 UNOPTIMIZED=1 yarn build\n```\n\nThen, deploy the generated `out` folder or run `npx serve out` it locally.\n\n> [!IMPORTANT]\n> If deploying with a URL base path, like https:\u002F\u002Fexample.org\u002Fmyblog you need an extra `BASE_PATH` shell-var to the build command:\n>\n> ```sh\n> $ EXPORT=1 UNOPTIMIZED=1 BASE_PATH=\u002Fmyblog yarn build\n> ```\n>\n> => In your code, `${process.env.BASE_PATH || ''}\u002Frobots.txt` will print `\"\u002Fmyblog\u002Frobots.txt\"` in the `out` build (or only `\u002Frobots.txt` if `yarn dev`, ie: on localhost:3000)\n\n> [!TIP]\n> Alternatively to `UNOPTIMIZED=1`, to continue using `next\u002Fimage`, you can use an alternative image optimization provider such as Imgix, Cloudinary or Akamai. See [image optimization documentation](https:\u002F\u002Fnextjs.org\u002Fdocs\u002Fapp\u002Fbuilding-your-application\u002Fdeploying\u002Fstatic-exports#image-optimization) for more details.\n\nConsider removing the following features that cannot be used in a static build:\n\n1. Comment out `headers()` from `next.config.js`.\n2. Remove `api` 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.\n\n## Frequently Asked Questions\n\n- [How can I add a custom MDX component?](\u002Ffaq\u002Fcustom-mdx-component.md)\n- [How can I customize the `kbar` search?](\u002Ffaq\u002Fcustomize-kbar-search.md)\n- [Deploy with docker](\u002Ffaq\u002Fdeploy-with-docker.md)\n\n## Support\n\nUsing 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:\u002F\u002Fgithub.com\u002Fsponsors\u002Ftimlrx).\n\n## Licence\n\n[MIT](https:\u002F\u002Fgithub.com\u002Ftimlrx\u002Ftailwind-nextjs-starter-blog\u002Fblob\u002Fmain\u002FLICENSE) © [Timothy Lin](https:\u002F\u002Fwww.timlrx.com)\n","这是一个基于Next.js和Tailwind CSS的博客启动模板，旨在通过最新的技术简化技术写作过程。项目支持React Server Components，并使用Contentlayer来管理Markdown内容，提供了丰富的功能配置选项和高度可定制性。其核心优势在于易于配置、快速部署以及现代化的设计风格。特别适合那些希望替换现有Jekyll或Hugo个人博客网站的开发者，也适用于任何想要搭建一个美观且响应式的博客平台的技术写作者。",2,"2026-06-11 03:36:59","high_star"]