Create a blog in 5 mins

Create a blog in 5 minutes using Next.js, Vercel, and a CMS

Leveraging the power of a CMS you can build pages very fast with little to no code at all. With nextjs and Vercel we can quickly pump out SSG ready pages for your website. Vercel comes into play on a couple areas to easily get started with the per blog setup for your website. To get started with the blog pages you will need to create two routes in a folder called `blog`. Below is a picture showing multiple domains on Vercel and using a _middleware (optional) to route to the appropriate paths. domain page with multiple domains

Project setup and configuration

The following example will bring a nextjs app to utilize wordpress or webflow in order to build SSG content across all pages (Free). The middleware is optional but, highly recommended to separate the blog via dns.




Blog Component

Create a blog component to render the meta tags that return as props in the `getStaticProps` . Inside the BlogPage component we use

html-react-parser to render the body of the blog page. Take a look at the short example below:


import { getBlogPage } from '@app/lib/get-blog'

import { BlogPage } from '@app/components/blog/blog-page'

import type { GetStaticProps } from 'next'

export default function Blog(props:) {

return <BlogPage {...props} />


export const getStaticProps: GetStaticProps = async (context) => {

const { slug } = context.params ?? {}

const websiteUrl = Array.isArray(slug) ? slug : []

let props = {}

try {

props = await getBlogPage(websiteUrl.join('/'))

} catch (e) {



return {


revalidate: 3600 * 4, // every 4 hours




Parsing via node-html-parser

The getBlogPage method uses node-html-parser to extract all links, styles, scripts, and meta tags into a js array of objects with the following keys. The idea is to remove the content that you do not need from blog and parse it out with the new HTML. You can opt into using puppeteer to get the HTML content if your content requires javascript to render. You can see the full example on github.

Middleware setup.

With nextjs middlewares we can use rewrites to use one project and template custom headers and footers to the blog page.


import { NextResponse, NextRequest, userAgent } from 'next/server'

import { IFRAME_URL } from './configs/api-route'

export async function middleware(req: NextRequest) {

let res =

if (

req.headers?.get('host')?.endsWith('.blog') ||


) {

const url = req.nextUrl.clone()

url.pathname = `/blog${req.nextUrl.pathname}`

res = NextResponse.rewrite(url)


return res


export const config = {

matcher: [









The `config` export is critical for controlling the flow of the rest of the assets to render correctly SSG. It is best to add the exact paths so nextjs can build the routes during compilation. If you share assets between the repo you can leave out the public folder from the routes.


With the above you should be able to create your next blog page fully for free using vercel and wordpress. For a full example of the code check out the web project to see an example. The current implementation is used to power our blog at also created a package that you can use to build out the pages with very little code requirements needed at

ps:  I would post more of the code directly if wordpress Elementor did not auto format the content after every other saved post.

Jeff Mendez

My name is Jeff and I am the founder and creator of A11yWatch.