Site Anatomy - How this Site was Made

Aug. 19, 2017

Code editor with code

This is a post I’ve been looking forward to writing since I started building this site so many months ago. Though the road to being a web-developer is seemingly never-ending, I feel like I’ve come a long way in the last few years of tinkering with the internet; especially in the last 8 months that I’ve been doing it daily with Recovery Brands. It’s been really cool being able to use everything I’ve learned from RB on my own personal project. In this post, I’ll talk about the anatomy of my site and share the tools/platforms I used to build it.

Hosting

I’ll start with the backbone of my site; the host. This is the first time I’ve ever strayed away from shared hosting. My host of choice used to be Siteground, but for this site I switched over to DigitalOcean. Unlike the shared hosting plans from Siteground, DigitalOcean provides VPS (virtual private server) hosting plans (you can read about the differences here). Although shared hosting would have been more than capable of handling my small blog, I wanted to switch to a VPS for the increased reliability and to sharpen up my server skills.

CMS

I use WordPress enough at work and was really eager to try a more modern and lightweight CMS for my blog. Enter Bolt. Bolt is incredible. I highly encourage you check it out. There are so many things I love about it, but two features in particular that I really like. First, Twig templating. I can’t boast enough how much I prefer dealing with Twig versus PHP for templating. Twig is much more succinct and readable than PHP. It makes fetching content from the database super simple. It also makes templating a breeze. Bolt has a great writeup of some Twig functionality here. The second feature I love is Bolt’s YAML settings. The entire site is configured with YAML files. A few examples of the YAML files are:

  • config.yml – the main settings file for your Bolt installation
  • menu.yml – for setting up menus
  • routing.yml – for setting up page routes
  • contenttypes.yml – for setting up custom content types (equivalent to WordPress’s custom post types)

As a quick example, I added the following entry in my contenttypes.yml file to add a “Job” content type for my resume page:

This enables a new content type on the backend of Bolt that allows me to easily add jobs to my resume.

This is similar to WordPress's custom post type functionality. I enabled a similar content type for the certifications on my resume page as well.

Frontend

I used a variety of different libraries and tools for the frontend side of things. In the interest of brevity, I’ll condense this section into a quick list

  • GreenSock Animation Platform (GSAP) – an SVG animation library that I used for animating the piano and computer screen on the homepage
  • Magnific-Popup – a lightbox plugin that I used for the contact pop-up form
  • Babel – a JavaScript transpiler that converts the new ES6 syntax into browser readable ES5
  • PostCSS – a webpack plugin that automatically applies vendor-prefixes to your CSS
  • Webpack – a build tool used to establish a development server and minify/concatenate JavaScript and CSS files

Backend

Nothing too fancy here. I’m using nginx as my webserver, MariaDB as my database server, and PHP 7 to run Bolt. This was my first time configuring a webserver from scratch. Before I realized that Bolt provides the necessary nginx config file on their site, I spent a lot of adjusting settings, reading about nginx online, and getting an nginx certification from Udemy.

Local Development

For local development, I set up a Virtual Machine in VirtualBox using a Vagrant config file from PuPHPet. The VM runs an Ubuntu setup that is similar to my DigitalOcean VPN. I setup Bolt in Ubuntu and edited my local machine’s host file to provide access to the bolt installation at ajschmidt.dev. I then proxied that address with Webpack’s dev-server so that I could enable HMR for my SASS/CSS styles. This was my first time using Webpack’s dev-server and I was pretty pleased with how well it worked and how convenient HMR was.

Deployment

My site changes are deployed with Git. I have two separate repos on my production machine, one for the site theme and the other for the site configuration. On my local machine, the production repos are added as remotes which makes deployments as simple as pushing to the “production” remote.

What’s Next?

That just about does it for my site setup. I have a list of things in an Evernote notebook that I want to add to this site, but my primary objective moving forward will be to post regularly. I’ve got some music and bucket-list items that I’m really looking forward to publish soon. Thanks for reading! Stay tuned for episode (err…post) 3.

Category: Web

←1st Post! Hello, World. First Half Marathon→

Contact Me