Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ixartz/next-js-blog-boilerplate
🚀 Nextjs Blog Boilerplate is starter code for your blog based on Next framework. ⚡️ Made with Nextjs 12, TypeScript, ESLint, Prettier, PostCSS, Tailwind CSS 3.
https://github.com/ixartz/next-js-blog-boilerplate
boilerplate boilerplate-front-end eslint jamstack jamstack-site netlify next-js next-theme nextjs nextjs-starter starter starter-kit starter-project starter-template static-site static-site-generator static-website tailwind-css typescript
Last synced: about 3 hours ago
JSON representation
🚀 Nextjs Blog Boilerplate is starter code for your blog based on Next framework. ⚡️ Made with Nextjs 12, TypeScript, ESLint, Prettier, PostCSS, Tailwind CSS 3.
- Host: GitHub
- URL: https://github.com/ixartz/next-js-blog-boilerplate
- Owner: ixartz
- License: mit
- Created: 2020-07-25T13:09:25.000Z (about 4 years ago)
- Default Branch: master
- Last Pushed: 2024-08-07T09:35:08.000Z (about 2 months ago)
- Last Synced: 2024-09-24T03:27:00.208Z (about 13 hours ago)
- Topics: boilerplate, boilerplate-front-end, eslint, jamstack, jamstack-site, netlify, next-js, next-theme, nextjs, nextjs-starter, starter, starter-kit, starter-project, starter-template, static-site, static-site-generator, static-website, tailwind-css, typescript
- Language: TypeScript
- Homepage: https://creativedesignsguru.com
- Size: 1010 KB
- Stars: 642
- Watchers: 13
- Forks: 165
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
# Next js Blog Boilerplate with Tailwind CSS [](https://twitter.com/ixartz)
🚀 Next.js Blog Boilerplate is starter code for your blog based on Next.js 12+ framework with Tailwind CSS 3.0. ⚡️ Made with [Next.js](https://nextjs.org), [TypeScript](https://www.typescriptlang.org), [ESLint](https://eslint.org), [Prettier](https://prettier.io), [PostCSS](https://postcss.org), [Tailwind CSS](https://tailwindcss.com).
Clone this project and use it to create your own [Next.js](https://nextjs.org) blog. You can check a [Next js blog templates demo](https://creativedesignsguru.com/demo/Nextjs-Blog-Boilerplate/).
## Sponsors
### Features
Blog feature:
- 🎈 Syntax Highlighting with Prism.js
- 🤖 SEO metadata and Open Graph tags
- ⚙️ JSON-LD for richer indexing
- 📖 Pagination
- 🌈 Include a FREE minimalist blog theme
- ⬇️ Markdown
- 💯 Maximize lighthouse score
Developer experience first:
- 🔥 [Next.js](https://nextjs.org) for Static Site Generator
- 🎨 Integrate with [Tailwind CSS](https://tailwindcss.com)
- 💅 [PostCSS](https://postcss.org) for processing [Tailwind CSS](https://tailwindcss.com)
- 🎉 Type checking [TypeScript](https://www.typescriptlang.org)
- ✏️ Linter with [ESLint](https://eslint.org)
- 🛠 Code Formatter with [Prettier](https://prettier.io)
- 🦊 SEO metadata, [JSON-LD](https://developers.google.com/search/docs/guides/intro-structured-data) and [Open Graph](https://ogp.me/) tags with [Next SEO](https://github.com/garmeeh/next-seo)
- ⚙️ [Bundler Analyzer](https://www.npmjs.com/package/@next/bundle-analyzer)
Built-in feature from Next.js:
- ☕ Minify HTML & CSS
- 💨 Live reload
- ✅ Cache busting
### Philosophy
- Minimal code
- SEO-friendly
- 🚀 Production-ready
### Requirements
- Node.js and npm
## Sponsors
[](https://nextlessjs.com)
### Getting started
Run the following command on your local environment:
```
git clone --depth=1 https://github.com/ixartz/Next-js-Blog-Boilerplate.git my-project-name
cd my-project-name
npm install
```
Then, you can run locally in development mode with live reload:
```
npm run dev
```
Open http://localhost:3000 with your favorite browser to see your project.
```
.
├── _posts # Your blog posts
├── public # Static files
│ ├── assets
│ │ └── images
│ │ └── posts # Images used in your blog posts
└── src
├── pages # Next.js pages
├── styles # Your blog CSS files
└── templates # Blog templates
```
### Customization
You can easily configure Next js Boilerplate. Please change the following file:
- `public/apple-touch-icon.png`, `public/favicon.ico`, `public/favicon-16x16.png` and `public/favicon-32x32.png`: your blog favicon, you can generate from https://favicon.io/favicon-converter/
- `public/assets/images/logo.png`, `public/assets/images/logo-32x32.png`: your blog logo
- `src/styles/main.css`: your blog CSS file using Tailwind CSS
- `src/utils/Config.ts`: configuration file like blog name, url, etc.
- `src/templates/Main.tsx`: blog theme
### Deploy to production
You can see the results locally in production mode with:
```
$ npm run build
$ npm run start
```
The generated HTML and CSS files are minified (built-in feature from Next js). It will also removed unused CSS from [Tailwind CSS](https://tailwindcss.com).
You can create an optimized production build with:
```
npm run build-prod
```
Now, your blog is ready to be deployed. All generated files are located at `dist` folder, which you can deploy with any hosting service.
### Deploy to Netlify
Clone this repository on own GitHub account and deploy to Netlify:
[](https://app.netlify.com/start/deploy?repository=https://github.com/ixartz/Next-js-Blog-Boilerplate)
### Contributions
Everyone is welcome to contribute to this project. Feel free to open an issue if you have question or found a bug.
### License
Licensed under the MIT License, Copyright © 2022
See [LICENSE](LICENSE) for more information.
## Sponsors
---
Made with ♥ by [CreativeDesignsGuru](https://creativedesignsguru.com) [](https://twitter.com/ixartz)
[](https://github.com/sponsors/ixartz)
