This Website

This website is not running on a blogging platform like WordPress. It is designed fully custom. Why choose this route over going with one of the many existing platforms?

Design Goals

My main goals were to have something cheap/free to host and not worry about server maintenance.

My previous website ran on WordPress and was costing me about $7/month to run. That isn't crazy expensive, but free is better.

I also wanted my personal website to feel custom, not just another templated site.

Maybe the main reason above all else, was to improve my front end development skills.

The Result

While the site is not complete yet, I ended up meeting all my design goals and more. This site is hosted for free, loads quickly, and is easy to maintain.

The whole site is stored in a GitHub repository, meaning I have version data from all the changes I've ever made to the site. No need to worry about databases or backups!

I can make changes to the site's content in a couple ways. I can either edit Markdown files using my favorite editor, VS Code, or I can go to the site's admin panel and edit in a web interface that supports rich text and picture editing. This system automatically stores draft posts in new branches in the GitHub repository. Once I'm ready to publish, they just get merged into the master branch and a new version of the site is built and published in under a minute.

The Details

Framework

I previously made a simple Single Page App (SPA) using Vanilla Javascript for my Spin Bike Monitor Project. I knew creating an entire blog would be much easier with a framework.

There are a few type of frameworks I considered:

• Server Side Rendered (SSR) - These are sites where the page is rendered on the server, on-demand as a user needs it. WordPress works like this, so does Django. The main downside is hosting for this type of website is either expensive or requires server maintenance and backups. It also is harder to scale if you get more traffic.
• Client-side Frameworks like React, Vue and Angular. These generate the page in your browser using javascript. Sites build with these are cheap/free to host on platforms like Netlify. The downside is longer load times and Search Engine Optimization (SEO).
• Statically Rendered (Jamstack) - These are fairly new. They often use the same client-side rendered frameworks like React and Vue, but they generate the site on the server as soon as you push new code to your git repository. Then they serve the generated pages to every user. Some popular frameworks include Gatsby, Jekyll, Nuxt and and more. Any user data (if any) is stored using API calls to third-party services.

I decided to go with a Jamstack framework, specifically Nuxt. Nuxt is Vue based and I was already using Vue for my Rescheduler Project.

Hosting

This decision was easy after picking the framework. I would only need to host static files, no webserver. The main free choices are Netlify and GitHub Pages. I tried both, but found Netlify was easier to setup and provided useful features like a Content Management System (CMS) and form submissions. I highly recommend their services.

Visual Design

There are many CSS frameworks available, including Bootstrap, Bulma, Spectre and more. I learned about a new one recently called Tailwind. It does not provide components like buttons, alert boxes and dropdowns like the other frameworks. Instead, it makes it so you pretty much don't have to type CSS.

Tailwind Advantages:

• Almost no typing css
• Don't need to create new css class names all the time
• No need to add more css classes as the page grows
• All dimensions are defined relative to the root, automatically increasing size on devices that use bigger fonts
• Plenty more advantages

Technologies Used

To summarize, I picked the following technologies:

• Nuxt.js is the main framework that generates this site
• Netlify hosts and builds the website for free. Each commit I push to my GitHub repository, Netlify builds and deploys a new version of this site
• TailwindCSS allows making a very custom-feeling site while minimizing effort required by reducing CSS
• NetlifyCMS Allows editing the site's posts via an admin panel

Build a Site Like This

If you want to build a site using the same technology stack as me, I'm creating a guide I plan to publish once I'm happy with the design of this site.