|
2 | 2 |
|
3 | 3 | # Tailwind Nextjs Starter Blog
|
4 | 4 |
|
5 |
| -[](https://github.com/timlrx/tailwind-nextjs-starter-blog/stargazers/) |
6 |
| -[](https://github.com/timlrx/tailwind-nextjs-starter-blog/forks) |
7 |
| -[](https://x.com/timlrxx) |
8 |
| -[](https://github.com/sponsors/timlrx) |
9 |
| - |
10 |
| -[](https://vercel.com/new/git/external?repository-url=https://github.com/timlrx/tailwind-nextjs-starter-blog) |
11 |
| - |
12 |
| -This is a [Next.js](https://nextjs.org/), [Tailwind CSS](https://tailwindcss.com/) blogging starter template. Version 2 is based on Next App directory with [React Server Component](https://nextjs.org/docs/getting-started/react-essentials#server-components) and uses [Contentlayer](https://www.contentlayer.dev/) to manage markdown content. |
13 |
| - |
14 |
| -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. |
15 |
| - |
16 |
| -Check out the documentation below to get started. |
17 |
| - |
18 |
| -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. |
19 |
| - |
20 |
| -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! |
21 |
| - |
22 |
| -## Variations |
23 |
| - |
24 |
| -**Note**: These are community contributed forks using different frameworks or with significant changes to the codebase - not officially supported. |
25 |
| - |
26 |
| -Astro alternative - [Tailwind Astro Template](https://github.com/wanoo21/tailwind-astro-starting-blog). |
27 |
| - |
28 |
| -Remix-run alternative - [Tailwind Remix-run Starter Blog Template](https://github.com/SangeetAgarwal/tailwind-remix-run-mdxjs-typescript-starter-blog). |
29 |
| - |
30 |
| -Internationalization support - [Template with i18n](https://tailwind-nextjs-starter-blog-i18n.vercel.app/) and [source code](https://github.com/PxlSyl/tailwind-nextjs-starter-blog-i18n/tree/main). |
31 |
| - |
32 |
| -## Examples V2 |
33 |
| - |
34 |
| -- [Demo Blog](https://tailwind-nextjs-starter-blog.vercel.app/) - this repo |
35 |
| -- [My personal blog](https://www.timlrx.com) - modified to auto-generate blog posts with dates |
36 |
| -- [Karhdo's Blog](https://karhdo.dev) - Karhdo's Blog - Karhdo's Coding Adventure ([source code](https://github.com/Karhdo/karhdo.dev)) |
37 |
| -- [tsix blog](https://tsix.top) - A front-end engineer is used to record some knowledge points in work and study _中文_ |
38 |
| -- [SOTO's Blog](https://www.atksoto.com/) - A more personalized personal website upgraded from V1 ([source code](https://github.com/acsoto/soto-blog-nextjs)) |
39 |
| -- [Prabhu's Blog](https://v1-prabhukirankonda.vercel.app) - Prabhu's Personal website with blog ([source code](https://github.com/prabhukiran8790/prabhukirankonda)) |
40 |
| -- [Rabby Hasan's Blog](https://blog.rabbyhasan.com.bd/) - Rabby Hasan's personal blog about full stack development with cloud ([source code](https://github.com/rabbyalone/myblog)) |
41 |
| -- [enscribe.dev](https://enscribe.dev) - enscribe's personal blog; cybersecurity shenanigans, frontend webdev, etc. ([source code](https://github.com/jktrn/enscribe.dev)) |
42 |
| -- [dalelarroder.com](https://dalelarroder.com) - Dale Larroder's personal website upgraded from V1 ([source code](https://github.com/dlarroder/dalelarroder)) |
43 |
| -- [thetalhatahir.com](https://www.thetalhatahir.com) - Talha Tahir's personal blog. Added article thumbnails, linkedIn card, Beautiful hero content, technology emoticons. |
44 |
| -- [homing.so](https://homing.so) - Homing's personal blog about the stuff he's learning ([source code](https://github.com/hominsu/blog)) |
45 |
| -- [zS1m's Blog](https://contrails.space) - zS1m's personal blog for recording and sharing daily learning technical content ([source code](https://github.com/zS1m/nextjs-contrails)) |
46 |
| -- [dariuszwozniak.net](https://dariuszwozniak.net/) - Software development blog ([source code](https://github.com/dariusz-wozniak/dariuszwozniak.net-v2)) |
47 |
| -- [dreams.plus](https://dreams.plus) - Blog site for some thoughts and records for life and technology. |
48 |
| -- [francisaguilar.co blog](https://francisaguilar.co) - Francis Aguilar's personal blog that talks about tech, fitness, and personal development. |
49 |
| -- [Min71 Dev Blog](https://min71.dev) - Personal blog about Blockchain, Development and etc. ([source code](https://github.com/mingi3442/blog)) |
50 |
| -- [Bryce Yu's Blog](https://earayu.github.io/) - Bryce Yu's personal Blog about distributed system, database, and web development. ([source code](https://github.com/earayu/earayu.github.io)) |
51 |
| -- [Remote Startup Senpai Anime Series Website](https://remote-startup-senpai.com) - Landing page for the anime series Remote Startup Senpai. |
52 |
| -- [Secret Base](https://www.jachsu.com/) - Jac Hsu's personal Blog.talks about tech, thought, and life in general. |
53 |
| -- [Zsebinformatikus](https://www.zsebinformatikus.hu/) - The information superhighway guide blog. |
54 |
| -- [Anton Morgunov's Blog](https://blog.ischemist.com/) - talking about science without oversimplifications or why theoretical and computational chemistry is cool. |
55 |
| -- [Hans Blog](https://www.hansking.cn/) - Hans' personal blog, front-end technology, gallery and travel diary 中文. ([source code](https://github.com/hansking98/hans-nextjs-blog)) |
56 |
| -- [London Tech Talk](https://london-tech-talk.com/) - A podcast exploring technology trends and expatriate living experiences. - 日本語 |
57 |
| -- [CRUD Flow Blog](http://blog.ndamulelo.co.za/) - A technical blog about AI, Cloud Engineering, Data Science and Personal development |
58 |
| -- [Trillium's Blog](https://trilliumsmith.com/) - Modified to render resume pdf on `/resume` page. ([source code](https://github.com/trillium/trilliumsmith.com)) |
59 |
| -- [Wujie's Blog: 旅行者计划](https://www.wujieli.com/) - Wujie's personal digital garden ([source code](https://github.com/wujieli0207/wujie-blog-next)) |
60 |
| -- [Xiaodong's Blog](https://blog.linxiaodong.com) - Xiaodong's personal blog about front-end technology, and life. 「中文」([source code](https://github.com/buxuku/buxuku.github.io)) |
61 |
| -- [Azurtelier.com](https://www.azurtelier.com/) - Amos's personal website for tech, music, AI illustrations, etc. [English/中文] ([Source code](https://github.com/AmosChenZixuan/Azurtelier.com)) |
62 |
| -- [JoshHaines.com](https://www.JoshHaines.com/) - Personal website for Josh Haines. ([source code](https://github.com/jdhaines/joshhaines)) |
63 |
| -- [Jigu's Blog](https://animeirl.top) - Jigu's personal blog about tech, crypto, golang, and life. 「中文」 |
64 |
| -- [andrewsam.xyz](https://www.andrewsam.xyz/) - Andrew's Personal website using ShadCN, Prisma, MongoDB, Auth.js, Resume Page, Custom Experience timeline and technologies components. ([source code](https://github.com/andrew-sameh/andrewsam.xyz)) |
65 |
| -- [Rulli Damara Putra's Portfolio](https://www.damaraputra.my.id/) - Rully's personal blog and portfolio. |
66 |
| -- [blog.taoluyuan.com 套路猿](https://blog.taoluyuan.com) - A personal tech blog that supports multi-theme switching. 「中英」 |
67 |
| -- [LyricsDecode.com](https://lyricsdecode.com) - A song lyrics website offering original lyrics, Romanisation, and English translations with customisable viewing options. |
68 |
| -- [bmacharia.com](https://bmacharia.com/) - Benson Macharia's technical blog about Cybersecurity and IT Risk Management. |
69 |
| -- [armujahid.me](https://armujahid.me/) - Abdul Rauf's personal blog about tech and random stuff. |
70 |
| -- [leohuynh.dev](https://www.leohuynh.dev/) - 🇻🇳 Leo's dev blog – stories, insights, and ideas. Add `/snippets`, `/books` pages, add `ProfileCard`, `CareerTimeline` components and many more. ([source](https://github.com/hta218/leohuynh.dev)) |
71 |
| -- [OpenSats Blog](https://opensats.org/blog) - A 501(c)(3) public charity which aims to sustainably fund free and open-source projects. ([source code](https://github.com/OpenSats/website)) |
72 |
| -- [Schedles Blog](https://schedles.com/blog) - Social media scheduling tips, strategies, and product updates for content creators. ([Project Link](https://schedles.com)) |
73 |
| -- [YawDev Blog](https://yawdev.org/blog) - IT-Agency / Software Development. Blog about tech and business ([Project Link](https://yawdev.org)) |
74 |
| -- [Engineering Notes](https://www.jonvet.com) - Jonas Vetterle Personal Website & Blog. I'm writing articles about software engineering that interest me, including AI and Quantum Computing |
75 |
| -- [Screenager.dev](https://screenager.vercel.app) - Personal Website as Portfolio & Blog. Documenting my learning journey and some guides. |
76 |
| -- [kezhenxu94's blog](https://kezhenxu94.me) - Blogging about dev, tips & tricks, tutorials and more. |
77 |
| -- [Parminder's blog](https://singhspeak.com) - Thoughts on software development, life and more. |
78 |
| -- [wheelcircuit.com](https://wheelcircuit.com) - Automotive YouTube News & Videos blog, updated daily. |
79 |
| -- [taitrd.com](https://taitrd.com) - Tai's personal dev blog, technologies and coding activity with Dynamodb practice ([source code](https://github.com/taitrd/taitrd)). |
80 |
| -- [Shelton's Blog](https://www.sheltonma.top) - Sharing insights on TypeScript full-stack development (Next.js, React, Hono, Supabase), web crawlers, and other cutting-edge technologies. |
81 |
| -- [Culture DevOps](https://culturedevops.com/en) - Technical blog on DevOps practices and tools ([source code](https://github.com/CultureDevOps/blog)). |
82 |
| - |
83 |
| -Using the template? Feel free to create a PR and add your blog to this list. |
84 |
| - |
85 |
| -## Examples V1 |
86 |
| - |
87 |
| -[v1-blogs-showcase.webm](https://github.com/timlrx/tailwind-nextjs-starter-blog/assets/28362229/2124c81f-b99d-4431-839c-347e01a2616c) |
88 |
| - |
89 |
| -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. |
90 |
| - |
91 |
| -- [Aloisdg's cookbook](https://tambouille.vercel.app/) - with pictures and recipes! |
92 |
| -- [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) |
93 |
| -- [David Levai's digital garden](https://davidlevai.com/) - customized design and added email subscriptions |
94 |
| -- [thvu.dev](https://thvu.dev) - Added `mdx-embed`, view count, reading minutes and more. |
95 |
| -- [irvin.dev](https://www.irvin.dev/) - Irvin Lin's personal site. Added YouTube embedding. |
96 |
| -- [KirillSo.com](https://www.kirillso.com/) - Personal blog & website. |
97 |
| -- [slightlysharpe.com](https://slightlysharpe.com) - [Tincre's](https://tincre.com) main company blog |
98 |
| -- [blog.b00st.com](https://blog.b00st.com) - [b00st.com's](https://b00st.com) main music promotion blog |
99 |
| -- [astrosaurus.me](https://astrosaurus.me/) - Ephraim Atta-Duncan's Personal Blog |
100 |
| -- [dhanrajsp.me](https://dhanrajsp.me/) - Dhanraj's personal site and blog. |
101 |
| -- [blog.r00ks.io](https://blog.r00ks.io/) - Austin Rooks's personal blog ([source code](https://github.com/Austionian/blog.r00ks)). |
102 |
| -- [honghong.me](https://honghong.me) - Tszhong's personal website ([source code](https://github.com/tszhong0411/home)) |
103 |
| -- [marceloformentao.dev](https://marceloformentao.dev) - Marcelo Formentão personal website ([source code](https://github.com/marceloavf/marceloformentao.dev)). |
104 |
| -- [abiraja.com](https://www.abiraja.com/) - with a [runnable JS code snippet component!](https://www.abiraja.com/blog/querying-solana-blockchain) |
105 |
| -- [bpiggin.com](https://www.bpiggin.com) - Ben Piggin's personal blog |
106 |
| -- [maqib.cn](https://maqib.cn) - A blog of Chinese front-end developers 狂奔小马的博客 ([源码](https://github.com/maqi1520/nextjs-tailwind-blog)) |
107 |
| -- [ambilena.com](https://ambilena.com/) - Electronic Music Blog & imprint for upcoming musicians. |
108 |
| -- [techipedia](https://techipedia.vercel.app) - Simple blogging progressive web app with custom installation button and top progress bar |
109 |
| -- [reubence.com](https://reubence.com) - Reuben Rapose's Digital Garden |
110 |
| -- [axolo.co/blog](https://axolo.co/blog) - Engineering management news & axolo.co updates (with image preview for article in the home page) |
111 |
| -- [musing.vercel.app](https://musing.vercel.app/) - Parth Desai's personal blog ([source code](https://github.com/pycoder2000/blog)) |
112 |
| -- [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)) |
113 |
| -- [cwarcup.com](https://www.cwarcup.com/) - Curtis Warcup's personal website and blog ([source code](https://github.com/Cwarcup/personal-blog)). |
114 |
| -- [jmalvarez.dev](https://www.jmalvarez.dev/) - José Miguel Álvarez's personal blog ([source code](https://github.com/josemiguel-alvarez/nextjs-blog)) |
115 |
| -- [justingosses.com](https://justingosses.com/) - Justin Gosses's personal website and blog ([source code](https://github.com/JustinGOSSES/justingosses-website)) |
116 |
| -- [raphaelchelly.com](https://www.raphaelchelly.com/) - Raphaël Chelly's personal website and blog ([source code](https://github.com/raphaelchelly/raph_www)) |
117 |
| -- [kaveh.page](https://kaveh.page) - Kaveh Tehrani's personal blog. Added tags directory, profile card, time-to-read on posts directory, etc. |
118 |
| -- [drakerossman.com](https://drakerossman.com/) - Drake Rossman's blog about NixOS, Rust, Software Architecture and Engineering Management, as well as general musings. |
119 |
| -- [meamenu.com](https://www.meamenu.com) - Landing page and product blog starting from this template. It also uses [framer-motion](https://www.framer.com/motion) for animations, custom layout templates, [waline](https://waline.js.org/en/) for blog comments and [primereact](https://primereact.org/) forms [Ita] |
120 |
| -- [giovanni.orciuolo.it](https://giovanni.orciuolo.it) - Giovanni Orciuolo's personal website, blog and everything nerd. |
121 |
| - |
122 |
| -## Motivation |
| 5 | +> Forked from the amazing https://github.com/timlrx/tailwind-nextjs-starter-blog |
| 6 | +
|
| 7 | +## [Author](https://github.com/timlrx) Motivation |
123 | 8 |
|
124 | 9 | 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).
|
125 | 10 |
|
@@ -179,7 +64,6 @@ npx degit 'timlrx/tailwind-nextjs-starter-blog'
|
179 | 64 | 5. Modify `projectsData.ts`
|
180 | 65 | 6. Modify `headerNavLinks.ts` to customize navigation links
|
181 | 66 | 7. Add blog posts
|
182 |
| -8. Deploy on Vercel |
183 | 67 |
|
184 | 68 | ## Installation
|
185 | 69 |
|
@@ -333,4 +217,4 @@ Using the template? Support this effort by giving a star on GitHub, sharing your
|
333 | 217 |
|
334 | 218 | ## Licence
|
335 | 219 |
|
336 |
| -[MIT](https://github.com/timlrx/tailwind-nextjs-starter-blog/blob/main/LICENSE) © [Timothy Lin](https://www.timlrx.com) |
| 220 | +@MIT |
0 commit comments