├── .gitattributes ├── .gitignore ├── .prettierrc ├── CODE_OF_CONDUCT.md ├── LICENSE ├── README.md ├── app ├── about │ └── page.tsx ├── blog │ ├── [slug] │ │ └── page.tsx │ └── page.tsx ├── inspiration │ ├── [slug] │ │ └── page.tsx │ └── page.tsx ├── layout.tsx ├── page.tsx ├── podcasts │ ├── [slug] │ │ └── page.tsx │ └── page.tsx ├── resources │ ├── [slug] │ │ └── page.tsx │ └── page.tsx ├── tags │ ├── [slug] │ │ └── page.tsx │ └── page.tsx └── tools │ ├── [slug] │ └── page.tsx │ └── page.tsx ├── components ├── BackButton.tsx ├── BlogPost.tsx ├── CategoryHeader.tsx ├── Footer.tsx ├── Header.tsx ├── Icon.tsx ├── InspirationPost.tsx ├── Layout.tsx ├── NetlifyIdentityRedirect.tsx ├── Pagnation.tsx ├── PostFooter.tsx ├── PostHeader.tsx ├── Tag.tsx ├── Video.tsx └── cards │ ├── BlogPostCard.tsx │ ├── InspirationPostCard.tsx │ ├── PodcastPostCard.tsx │ ├── ResourcePostCard.tsx │ └── ToolsPostCard.tsx ├── config.js ├── content ├── blog │ ├── 2024-09-25-placeholder-post-2.md │ ├── 2024-09-25-placeholder-post-3.md │ └── 2024-09-25-placeholder-post.md ├── inspiration │ ├── 2024-09-25-placeholder-post-2.mdx │ ├── 2024-09-25-placeholder-post-3.mdx │ ├── 2024-09-25-placeholder-post-4.mdx │ └── 2024-09-25-placeholder-post.mdx ├── page │ ├── about.md │ ├── contact.md │ └── home.md ├── podcasts │ ├── placeholder-podcast-2.md │ ├── placeholder-podcast-3.md │ ├── placeholder-podcast-4.md │ └── placeholder-podcast.md ├── resources │ └── placeholder-resource.md └── tools │ ├── placeholder-tool-2.md │ ├── placeholder-tool-3.md │ ├── placeholder-tool-4.md │ └── placeholder-tool.md ├── contentlayer.config.ts ├── jsconfig.json ├── next-env.d.ts ├── next-seo.config.js ├── next-sitemap.config.js ├── next.config.js ├── package.json ├── postcss.config.js ├── public ├── admin │ ├── config.yml │ └── index.html ├── favicon.ico ├── favicon.svg ├── media │ ├── inspiration__placeholder-post-1200x1200.png │ ├── next-image-export-optimizer-hashes.json │ ├── podcast__placeholder-post-1200x1200.png │ ├── resource__placeholder-post-1200x1200.png │ ├── tools__placeholder-post-1200x1200.png │ └── video__placeholder-post.mp4 ├── og-card.png ├── robots.txt ├── sitemap-0.xml └── sitemap.xml ├── screenshot--cms1.png ├── screenshot--cms2.png ├── starter-cover.png ├── starter-preview.png ├── styles ├── index.css ├── prism-a11y-dark.css └── tailwind-classes.js ├── tailwind.config.js ├── tsconfig.json └── utils ├── index.js └── tags.ts /.gitattributes: -------------------------------------------------------------------------------- 1 | # Auto detect text files and perform LF normalization 2 | * text=auto 3 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | /package-lock.json 8 | 9 | # testing 10 | /coverage 11 | 12 | # next.js 13 | /.next/ 14 | /out/ 15 | 16 | # production 17 | /build 18 | 19 | # misc 20 | .DS_Store 21 | *.pem 22 | 23 | # debug 24 | npm-debug.log* 25 | yarn-debug.log* 26 | yarn-error.log* 27 | 28 | # local env files 29 | .env.local 30 | .env.development.local 31 | .env.test.local 32 | .env.production.local 33 | 34 | # vercel 35 | .vercel 36 | 37 | 38 | # Contentlayer 39 | .contentlayer 40 | /.contentlayer/ 41 | 42 | # Next Image Export Optimizer 43 | **/nextImageExportOptimizer/ -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "trailingComma": "es5", 3 | "tabWidth": 2, 4 | "semi": false, 5 | "singleQuote": true 6 | } 7 | -------------------------------------------------------------------------------- /CODE_OF_CONDUCT.md: -------------------------------------------------------------------------------- 1 | # Contributor Code of Conduct 2 | 3 | ## 1. Be Respectful 4 | 5 | We welcome everyone to contribute and share ideas. Be polite and respectful when communicating with others. Avoid offensive, harmful, or negative language. 6 | 7 | ## 2. Stay Positive 8 | 9 | We're all here to build something cool together. Keep the conversation constructive and offer feedback that helps others grow. If you see something wrong, help to improve it with solutions. 10 | 11 | ## 3. Keep the Project Healthy 12 | 13 | Follow the project's guidelines and structure. 14 | Make sure your contributions align with the project's goals. 15 | When creating new features, ensure they don't break existing functionality. 16 | 17 | ## 4. Be Open and Collaborative 18 | 19 | Collaboration is key in open-source projects. Share your knowledge, and be open to learning from others. We encourage you to ask questions when needed and help others when you can. 20 | 21 | ## 5. Report Issues 22 | 23 | If you experience or notice behavior that does not align with this code of conduct, please report it. We want to maintain a welcoming and positive environment for everyone. 24 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2024 Nuno Marques (OSITAKA) 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: 6 | 7 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 8 | 9 | THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 10 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # 🚀 Next.js 14 Blog Starter with Tailwind CSS, Contentlayer, & Decap CMS 2 | 3 | [![Netlify Status](https://api.netlify.com/api/v1/badges/51784f6e-1f73-4db9-ad5e-c0c514a47181/deploy-status)](https://app.netlify.com/sites/nextjs-blog-tailwind-starter/deploys) 4 | 5 | Welcome to the [**design-code.tips**](https://design-code.tips/) Next.js starter! 6 | 7 | This open-source starter template is built with **Next.js 14**, **Tailwind CSS**, **Contentlayer**, and **Decap CMS**. It's designed to be a simple and customizable way to launch a modern blog, with support for MDX and multiple categories like Code Blog, Inspiration, Podcasts, Tools, and Resources. 8 | 9 | ![Starter Cover Preview](/starter-cover.png) 10 | 11 | [![Deploy to Netlify](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/ositaka/nextjs-blog-tailwind-starter/) 12 | [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/import/project?template=https://github.com/ositaka/nextjs-blog-tailwind-starter/) 13 | 14 | --- 15 | 16 | ## 💻 Starter Preview 17 | 18 | ![Homepage in light and dark modes](/starter-preview.png) 19 | 20 | ## ✨ Features 21 | 22 | - 🛠️ **Next.js 14**: Fast, modern React framework for production-ready web applications. 23 | - 🎨 **Tailwind CSS**: Utility-first CSS for rapid UI development. 24 | - 📄 **MDX Support**: Write your blog posts in Markdown with JSX components. 25 | - 🗂️ **Contentlayer**: Simple content management with files as data. 26 | - 📋 **Decap CMS**: Easily manage your posts through a friendly CMS interface. 27 | - 🏷️ **Categories**: Pre-configured sections for Code Blog, Inspiration, Podcasts, and Tools. 28 | - 🖼️ **Optimized Images**: Use the `` component from the [`next-image-export-optimizer`](https://www.npmjs.com/package/next-image-export-optimizer) package for optimized image handling in static exports, replacing the default Next.js `` component for better control over image quality, formats (like WEBP), and cache settings. 29 | - 🌗 **Dark/Light Mode**: Automatically adapts to the user's operating system settings. 30 | 31 | ## 📦 Tech Stack 32 | 33 | - **Next.js 14** 34 | - **Tailwind CSS** 35 | - **MDX** 36 | - **Contentlayer** 37 | - **Decap CMS** 38 | 39 | ## 🚀 Quick Start 40 | 41 | Follow these steps to get the project up and running: 42 | 43 | 1. **Clone the repository**: 44 | 45 | ```bash 46 | git clone https://github.com/ositaka/nextjs-blog-tailwind-starter 47 | cd nextjs-blog-tailwind-starter 48 | ``` 49 | 50 | 2. **Install dependencies:** 51 | 52 | ```bash 53 | npm install 54 | ``` 55 | 56 | 3. **Run the development server:** 57 | 58 | ```bash 59 | npm run dev 60 | ``` 61 | 62 | Open http://localhost:3000 in your browser to see the app running. 63 | 64 | --- 65 | 66 | ## ✍️ Writing Content (without CMS) 67 | 68 | You can create different types of content (like blog posts or podcasts) in separate folders under `content/`. Each folder corresponds to a category in your blog. 69 | 70 | Content is written in **MDX** format and managed using [**Contentlayer**](https://contentlayer.dev/). To create a new post, add an `.mdx` file in the appropriate folder inside `content/` for each category: 71 | 72 | ``` 73 | content/ 74 | ├── blog/ 75 | ├── inspiration/ 76 | ├── podcasts/ 77 | ├── resources/ 78 | └── tools/ 79 | ``` 80 | 81 | Each post supports frontmatter fields like `title`, `description`, `date`, and `featured`. 82 | 83 | Example frontmatter for a blog post: 84 | 85 | ```md 86 | --- 87 | templateKey: blog 88 | title: > 89 | Custom Scrollbar with CSS (WebKit) 90 | date: 2021-06-19T19:28:37.629Z 91 | featured: true 92 | description: > 93 | Learn how to customize the scrollbar with CSS for WebKit browsers, providing a visually appealing design for scrollable elements on your website. 94 | tags: 95 | - web-development 96 | - css 97 | --- 98 | 99 | Your markdown content here... 100 | ``` 101 | 102 | Example inspiration post, with a video: 103 | 104 | ```md 105 | --- 106 | templateKey: inspiration 107 | title: > 108 | 2Advanced Studios — Flash website in 2003 109 | date: 2003-03-03T15:04:10.000Z 110 | featured: true 111 | description: > 112 | An old flash website (v4) of 2advanced.com, that has inspired me quite a lot in my teenage years. 113 | tags: 114 | - animation 115 | - flash 116 | - website 117 | image: /media/2advanced-flash-website-v4-2003.jpg 118 | --- 119 | 120 |