News for hackers. Stuff that matters.

Chris.lu: blog and tutorial to help you code your own (Next.js, MDX)

Hello, I built my blog <https://chris.lu> using the latest Next.js 14.x , I also wrote a complete tutorial while building it, which is now available at <https://chris.lu/web_development>

The pages are fully static MDX content, I used next/mdx and several rehype and remark plugins, like remark-gfm, rehype-github-alerts, remark-frontmatter, remark-table-of-contents and a bunch more

I wrote the tutorial to help others build their own personal space, based on the knowledge I have collected while building chris.lu. I hope it will help other developers dig deeper into topics like, using next/image for best results, adding a CSP header, linting code but also the MDX content itself (using markdown lint), adding Metadata as well as dynamic Open Graph images and a dynamic sitemap

I also wanted to experiment with new CSS and 3D technologies like three.js, which is why I created an animated header using @react-three/fiber, try it out by clicking on "press start". The header has a Jukebox filled with 80s music, if you are interested in a song, you can click on the ⏏ button to eject the virtual cassette and see the artists credits

I plan on updating the tutorial based on feedback and also based on new releases like Next.js 15, React 19 with compiler and add more dynamic content like authentication as soon as Partial Prerendering (PPR) is stable

Feedback, suggestions, bug reports are all welcome, feel free to reply here or visit the <https://github.com/chrisweb/chris.lu> where you can use the discussions and issues

( no comments | on HN )

There are no comments yet.