Minimalist Next.js theme for Markdown content

Try the demo

Table of Contents

1. Features
2. Getting started
3. Customization
4. Deploy to production

Features

• 🔥 Next.js for Static Site Generator
• ⬇️ Markdown for the content
• 🎨 Integrate with Tailwind CSS
• 💅 PostCSS for processing Tailwind CSS
• 🎉 Type checking TypeScript
• 📱 Responsive
• ⏺ Easy to configure

Built-in feature from Next.js:

• ☕ Minify HTML & CSS
• 💨 Live reload
• ✅ Cache busting

Getting started

Run the following command on your local environment:

git clone --depth=1 https://github.com/raulmar0/nextjs-md-theme.git my-project-name
cd my-project-name
npm install

First of all, use this line in next.config.js if using Github pages with a custom domain

module.exports = {
  basePath: '/your-repo-name',
}

else use

module.exports = nextConfig

Then, you can run locally in development mode with live reload:

npm run dev

Customization

You can easily configure Next js Boilerplate. Please change the following file:

• Posts in _posts directory
• Other pages such as "about" in _misc directory
• General styles in ./styles/globals.scss
• Blogpost styles in ./styles/globals.scss under the .post- classes
• Favicon ./public
• Main config file ./utils/AppConfig.ts
  • Site name, title and description
  • Projects
  • Social media links

Deploy to production

In order to deploy your static site run:

$ npm run export

The generated HTML and CSS files are minified (built-in feature from Next js). It will also removed unused CSS from Tailwind CSS.

Now, your blog is ready to be deployed. All generated files are located at _static folder, which you can deploy with any hosting service.

Verified hosting services with a free tier

• Github pages
• Azure app services
• Digital Ocean Web Apps