September 19, 2020#technical

Templating My Website

For the last month or so, ever since I redid my website and starting sharing it with people, I've been receiving a variety of compliments on it as people seem to have loved the minimalistic layout. I think I'm going to keep this layout for a while, as it's simple for me to extend with any new functionality I might need, but also fun to share and get people's reactions on.

I'm not only keeping this website for myself though. The number of people who asked me how I did it wasn't exactly small, so I decided hey, is there a way I can make this website into a reusable template that people could base their personal websites off of?

The answer is yes. I can, and I did. The website now uses a config.json file to determine how it should be structured. This allows you to skip directly into writing the content, and you don't have to worry about the layout or the header at all. The default example configuration on the repository above reflects the configuration I use on this website (links might be outdated by the time you read this, in case I overhaul my domain management), and it saves me a ton of typing. Not only do I not have to repeat myself, I don't even have to make the React Components myself! They're all templated from the configuration file, and I can focus on the content.

The reason I did this is not because I want everyone to just copy my website. On the contrary, I hope very few people actually copy what I have here. The point of making it open source and easy to use is to help people experiment. I hope that people fork the repository and clone it, open it up in their favorite text editor and tinker around until they like the result. This is largely just a skeleton, but it's a skeleton that's designed to be redesigned. After all, I could've easily just packaged this up into an npm package and made it so that you have to use it as-is, but that isn't what I do. I'm a teacher, first and foremost, and I want everyone to learn in whatever manner works for them. Making this template reusable is simply a push for a particular learning technique that may be helpful, as I described in my previous post -- learning by doing.

If you fork my template, I hope it helps you dive into next.js, or just web development in general, a little deeper. See you online!