July 12, 2021 How I Built My Website

The idea for building this website came after realizing I often forgot what I was doing, why I was doing it, and how I got it done. This brought me to the concept of a personal documentation site to post about whatever I felt was worth remembering at the time. I wanted a simple home base to organize the tools and tips that help me achieve my goals and complete my jobs. Since I've been blessed by a number of resources by others I've studied for free, I thought it's only fair to share what I did too (no promises on the quality).

Build it, or buy it

The platform you choose to build your website on does not matter nearly as much as the content you plan to put on it.

If you want to get your words on the internet, don't waste time writing code or perfecting a design. There are a ton of great platforms that can get you up and running in actual minutes. Ghost is my favorite. Please take a look yourself; you might end up launching a website before I can even finish this post.

I've used many different platforms, both paid and free/open-source, and always struggled with being completely happy with any of them (that's something I should probably unpack in another post stored under mental health). Since I've only been coding for about a year and still have plenty to learn, I thought building my own website would be a great vessel to further my skills in web development. I learn best by doing, so I decided to build something from scratch utilizing the power of open source software.

Understanding JAMstack

If you type jamstack into Google, you'll find no short of 781,000 results, most of which tell you it is "the future." As a developer newbie, naturally, backend languages and servers scare me. Okay, maybe not that much, but more importantly, I failed to understand why traditional web servers are required when all we need is to put an HTML file for people to view. The thought of maintaining a whole server to throw few words on a page seemed like too much and also unnecessarily insecure. This is what brought me down the path of JAMstack, and I'm happy to have found it.

With a JAMstack website, you are building the website on a local machine, templating it together using a site generator to produce static HTML, then host it on a CDN without the need for a server. There's plenty more I could talk about regarding jamstack architecture, but you should learn from people that actually know what they're doing, so my suggestion is to go to Jamstack.org and explore for yourself!

Here are the tools I chose to build my website with:

Site Generator: Nuxt

Nuxt is a framework to help you put together a Vue app very quickly. It helped me get off the ground with my front-end skills. Their documentation is excellent, and create-nuxt-app gets you up and running super fast. I came across Vue late last year and started playing around with it. Once I grasped a general understanding, I became very impressed with what I could create with the limited about of Javascript knowledge I had. Nuxt made it even easier.

My Nuxt project is pretty standard. I only have four pages: work, life, contact and index. I utilize nuxt-child to show an article's contents within work and life, so the sidebar remains stationary. Only the content that needs to change is updated while navigating this website using some great built-in transitions, simple and smooth!

Content Management System: Nuxt Content & Netlify CMS

Nuxt Content is a module that acts as a git-based headless CMS. So you can create folders and write blog posts as Markdown files super quickly, right in the project repository. If I want to make a lot of changes at once, I just create/edit files directly in my repo using my editor of choice, VSCode, or sometimes directly on GitHub.com.

For making changes on the fly, or if I don't want to write in Markdown, I added Netlify CMS, which has a very simple installation. It's free, why not!

Design System: TailwindCSS

Like many developers, I relied on CSS frameworks to help me put together front-end UIs. Bootstrap was the only one I ever used before Tailwind. I found with Bootstrap that I was almost exclusively using their utility classes, so it didn't make much sense to use a CSS framework if I'm not even using the components that make using a framework worth it. Once I finally gave Tailwind a shot, I fell in love. Tailwind makes a hack like myself look like a pro, without having to write any CSS manually. It also makes implementing a dark-mode theme almost effortless.

While most of the design was from scratch, I will give due credit to the team at TailwindUI for making some beautiful components which helped tremendously. I highly recommend purchasing their kit.

Static Hosting: Netlify

There is no static hosting provider that makes it as easy as Netlify does. Period. Their platform is excellent. Once my Nuxt project was ready to deploy, I was live on a custom domain in minutes.

What I learned

I loved building this site, and in the end I do feel I achieved my original goal of improving my web-dev skills and will continue to tweak as I go along. This project taught me how to stay organized, on all fronts. Whether it be the importantance of writing clean code, file organization, or the key to an attractive color pallet––I had fun.