My blog was made with Next.js, using npx create-next-app@latest or similar command, with a template which supports MDX including syntax highlighting. You have the choice of using npm, yarn, or pnpm to follow along.

Create your own coding blog using the https://vercel.com/templates/next.js/portfolio-starter-kit template.

Make sure you have git and Node.js installed. You can install pnpm globally with npm i -g pnpm which is a fast package manager.

To scaffold the next.js blog with MDX/syntax highlighting support, run:

pnpm create next-app --example https://github.com/vercel/examples/tree/main/solutions/blog blog

It supports syntax highlighting...

const add = (...args) => args.reduce((acc, curr) => acc + curr, 0);
console.log('1+2=', add(1,2))
console.log('1+2+3=', add(1,2,3))

Why create a coding blog of your own?

Starting a coding blog offers personal growth, professional development, and community engagement. Writing about programming deepens your knowledge, sharpens communication skills, and builds a portfolio that strengthens your personal brand. A well-curated blog sets you apart in job searches, opens networking opportunities, and can lead to collaborations.

So where do you start

What does it take to get it set up?

Well, follow the link above to start. It requires git, Node.js, and pnpm. Make sure you have git. You can get npm by installing Node.js. I recommend installing something like node version manager for your operating system, e.g. windows-nvm or just nvm for linux should work, then you can change node version easily and install the --lts to get the latest supported node (which brings npm with it).

Once you have node and npm, in the terminal, npm i -g pnpm to install pnpm globally so you can use pnpm anywhere.

MDX support - your codebase

Storing content in .mdx files in a git repository makes it easy to organise and use git as a content management system - the content coexists with the code.

Get started

Read package.json and update dependencies as necessary.

pnpm run dev - opens on localhost:3000 where you can view the website.

You could do all of this with npm instead.

Deploying

Add the project in vercel to deploy it or use AWS amplify, or some other way to deploy a Next.js app.