My Next.js blog

Before

My previous website was a static site built with Jekyll.

It worked just fine.

Now

I wanted to play with a modern stack.

The site you're viewing now is powered by Next.js, TailwindCSS, TypeScript, and MDX.

It's still a statically-generated site and it's deployed via GitHub Pages.

MDX

I think MDX is the most interesting bit so far: it lets you embed React components directly into your Markdown source files.

For example, here I'm embedding a counter react component with <Counter />:

Flexibility

Since this uses Next.js, it also allows me to add dynamic features to the site (via server-side (SSR) or client-side (SPA) rendering). If I end up going that way, I could host it on something like Vercel or Netlify. Also I'd be lying if I said I wasn't inspired by Brian Lovin's new website, which is a webapp deployed to Vercel.

Deployment to GitHub Pages

I have a GitHub Actions workflow that deploys the site to GitHub Pages via the gh-pages action.

Here's what happens when I push to the main branch:

next build

This creates an optimized version of the site in ./_next/

next export

This exports the site to static HTML that doesn't need a node server to run. See the gh-pages branch on my repo to see the exported site structure

peaceiris/actions-gh-pages@v3

This action pushes the exported site to gh-pages, which is the branch that GitHub Pages uses to host the site.

Resources

I started with the typescript blog starter example from Next.js, and then I added MDX support using this post in this commit, using the remark-prism plugin for syntax highlighting.

Check out the code for this site on GitHub.