Skip to content

Latest commit

 

History

History
105 lines (73 loc) · 3.32 KB

README.md

File metadata and controls

105 lines (73 loc) · 3.32 KB

Next js Blog Boilerplate

🚀 Next.js Blog Boilerplate is starter code for your blog based on Next.js framework. ⚡️ Made with Next.js, TypeScript, ESLint, Prettier, PostCSS, Tailwind CSS.

Clone this project and use it to create your own Next.js blog. You can check a Next js blog templates demo.

Features

Blog feature:

  • 🎈 Syntax Highlighting with Prism.js
  • 🤖 SEO metadata and Open Graph tags
  • ⚙️ JSON-LD for richer indexing
  • 📖 Pagination
  • ⬇️ Markdown

Developer experience first:

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

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:8080 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.

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.

Made with ♥ by Ixartz