The idea of having a personal blog, is quite old, but I think I've never done some much work to make it happen like now! That's good, some good content is coming soon! Well let's see what we can do with this great beauty!
This project is written in NextJS 14 and Velite, which transform every .mdx
file I have in content/ to a page on the blog website.
This is the only thing needed to add new posts, the post list and the routing will be automatically updated by the project.
The .mdx
has some cool features like <Callout />
, NextJS <Image />
, and the code line highlights. All from .mdx
patterns. If new image has to be added, place it under public/static folder with the correct naming convention. On the .mdx
file it will be under /blog/static/
.
Before anything, install the dependencies using:
npm i
This project has a .devcontainer which sets up a Vscode Development Environment which can be quite useful to split development from host resources.
Start a development server by running:
npm run dev
A development server will start at http://localhost:3000
.
After starting the development server, velite also needs to be started to keep track of the .mdx
changes and update the js files, to make that happen run:
npm run velite
Which will start a watch command for every change on content/, updating the files and paths of the project for new and modified .mdx
files.
Because the production build can be quite different, one might want to build it and see it in action before pushing, archive that by running:
npm run build
npm run start
The production server will be started on http://localhost:3000
.
There is an action that prepares the project and publish it to Github Pages, so no neet to do anything else, just make sure a production build is creatable.