This is a blogging starter template built with Next.js, GraphQL, and Tailwind CSS. As opposed to the parent project this one uses GraphQL for data fetching instead of MDX and plain JavaScript mock data.
Check out the documentation below to get started.
Facing issues? Feel free to open a new issue if none has been posted previously.
Feature request? Check the past discussions to see if it has been brought up previously. Otherwise, feel free to start a new discussion thread. All ideas are welcomed!
I wanted to port my WordPress blog to Nextjs and Tailwind CSS and there was a perfect template for this purpose Tailwind Nextjs Starter Blog.
Unfortunately, Tailwind Nextjs Starter Blog works with MDX and fetches content from markdown files and I wanted to communicate with my old blog with GraphQL.
So I stripped out the original template from all markdown features and added support for GraphQL.
The design is adapted from Tailwindlabs blog by Timothy and I believe it's a perfect design for a personal blog.
- Support for WordPress integration with GraphQL
- Easy styling customization with Tailwind 3.0 and primary color attribute
- Mobile-friendly view
- Light and dark theme
- Automatic image optimization via next/image
- Support for the native WordPress comment system
Also, all pull requests for code optimization, cleaning up, refactoring the codebase, and fixing even minor issues are highly appreciated. Just try to keep it small and simple.
- JS (official support)
npx degit https://github.com/artabr/tailwind-nextjs-graphql-blog.git- Duplicate
.env.exampleas.envand populate it with correct values. Explanation of what each variable does is in the file as comments - Bootstrap the WordPress headless CMS. You can use this repository to run a WordPress Docker image prepopulated with some dummy data
- Add blog posts with WordPress
- Deploy on any platform of choice
First, run the development server:
yarn run devOpen 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.
Using the template? Support this effort by giving a star on Github, sharing your own blog, giving a shoutout on Twitter, or being a project sponsor of the original author.