Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/joserfelix/nextjs-starter-blog
Next.js template for creating a blog. Now with dark mode and Next.js 12 🎉
https://github.com/joserfelix/nextjs-starter-blog
Last synced: 6 days ago
JSON representation
Next.js template for creating a blog. Now with dark mode and Next.js 12 🎉
- Host: GitHub
- URL: https://github.com/joserfelix/nextjs-starter-blog
- Owner: JoseRFelix
- License: mit
- Created: 2020-04-20T04:14:26.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2023-01-07T04:39:22.000Z (almost 2 years ago)
- Last Synced: 2024-08-04T13:04:14.598Z (4 months ago)
- Language: JavaScript
- Homepage: https://nextjs-starter-blog-new-demo.vercel.app/
- Size: 2.22 MB
- Stars: 332
- Watchers: 7
- Forks: 63
- Open Issues: 15
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
Next.js blog starter
Start off your writing journey with this Next.js markdown blog template.
## ✏ Features
- Next.js 12!
- RSS Feed
- Streamlined styling experience with [Tailwind.css](https://tailwindcss.com/).
- Customizable typographic defaults with [Tailwind Typography](https://github.com/tailwindlabs/tailwindcss-typography)
- Automatic image preview and optimization with [next-optimized-images](https://github.com/cyrilwanner/next-optimized-images).
- Lazyload images.
- Absolute imports.
- SEO friendly.
- Markdown code highlighting with [react-syntax-highlighter](https://www.npmjs.com/package/react-syntax-highlighter) and [PrismJs](https://prismjs.com/).
- Dark Mode
- WebP image support
## 🚀 Getting Started
First, run the development server:
```bash
npm run dev
# or
yarn dev
```
Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
You can start editing the page by modifying `pages/index.js`. The page auto-updates as you edit the file.
## ✍ Customizing Tailwind Typography
[Tailwind Typography](https://github.com/tailwindlabs/tailwindcss-typography) is an official tailwind plugin that provides a set of `prose` classes to add beautiful typographic defaults to any vanilla HTML you don't control (like HTML rendered from Markdown, or pulled from a CMS).
To customize the defaults provided by the plugin, add the overrides under the `typography` key in the theme section of the `tailwind.config.js` file. Refer to its [default styles](https://github.com/tailwindlabs/tailwindcss-typography/blob/master/src/styles.js) for more in-depth examples.
For more information, please check out Tailwind Typography's [customization section](https://github.com/tailwindlabs/tailwindcss-typography#customization).
## 📖 Learn More
### Next.js
To learn more about Next.js, take a look at the following resources:
- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
You can check out [the Next.js GitHub repository](https://github.com/zeit/next.js/) - your feedback and contributions are welcome!
### Tailwind CSS
To learn more about Tailwind CSS, take a look at the following resources:
- [Tailwind Documentation](https://tailwindcss.com/) - learn about Tailwind CSS features and API.
## ☑ Upcoming features
- [ ] Add Sitemap
- [x] Add RSS Feed
- [x] Dark Mode
- [x] Add support for WebP images
- [x] Add SEO Component
- [x] Add Dynamic Site Metadata
## ☁ Deploy
[](https://app.netlify.com/start/deploy?repository=https://github.com/Jfelix61/nextjs-starter-blog)
[](https://zeit.co/import/project?template=https://github.com/Jfelix61/nextjs-starter-blog)