Chris.lu: How I Used Next.js and MDX to create a modern, static-first Blog

by chriswwweb • 2 years ago

5 1 2 years ago

chriswwweb• 2 years ago

Hello Hacker News,

I recently rebuilt my blog https://chris.lu to be static first, easy to maintain, and provide a great developer experience. While doing so, I also wrote a tutorial that can be found in my https://chris.lu/web_development section. I covered all the steps from building a solid foundation using Next.js (14.x) and React (18.x) . Several chapters about adding MDX support (using @next/mdx) and several plugins to improve authoring tech articles, like a plugin for beautiful code blocks or another one to automatize the creation of a dynamic table of contents for each post. There are also chapters about improving linting so that ESLint does not just lint the code but also the MDX content, increasing security with CSP headers, optimizing loading times using @next/image and @next/fonts, and a few more.

As chris.lu is a side project, I've had the freedom to experiment with new technologies, such as WebGL, which I've used to build the header (click on 'PRESS START' to give it a try). I've also explored new CSS features, like the extended web color palette (display-p3), to create a neon 80s-style theme that fully utilizes the potential of modern screens. It's been exciting to see that for some UI elements, like a dialog or modal box, we no longer need to rely on jQuery plugins or React components. The native dialog HTML element now offers a viable solution, especially with good browser support if you can afford to not support IE 11. The source code for chris.lu is available on GitHub at https://github.com/chrisweb/chris.lu/.

Also, I'm currently for hire, serious offers are welcome. My areas of expertise are Javascript (Typescript) development, team building, and management. You can contact me on LinkedIn at https://www.linkedin.com/in/chrisdotlu/ or look at my projects on GitHub at https://github.com/chrisweb.

Chris.lu: How I Used Next.js and MDX to create a modern, static-first Blog

Related Stories