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
. Mak 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.