Spyderboy (this site)

Role

Strategy, Architecture, Design, Development

Project goal
I wanted the ease of managing content via a CMS like Drupal or Wordpress, but I also wanted optimized speed and performance. I also wanted to use my portfolio site as a proof of concept to demonstrate the benefits of Gatsby and Netlify.

Solution
Summary: This site is made, managed and published with Decoupled Drupal, Github, Gatsby, React, Bootstrap, VirtualBox, and Netlify. These technologies come together to enable a delightful publishing workflow and end-user experience (UX).

Quick and progressive loading: Content loads as needed, and is pre-rendered on the server-side, making the experience snappy and happy. Visually rich content that is appropriately optimized. Responsive, and clean design that is accessible on your desktop, tablet, or smartphone.

Content Management: The content of this site is managed via Drupal. Drupal lives in a Virtual Machine (VM) that is run only when I want to edit and publish. 

Optimization: Another VM is used to compile the content, CSS, and JavaScript into an optimized static site.  Versioning/Backup By pushing content from the local site to GitHub, a versioned snapshot is created.

Hosting: Netlify is a Software As A Service provider that will allow you to upload a folder of your static site, OR it will even pull from your GitHub repo whenever it gets updated! The free tier allows for up to 100GB of traffic. For me, that’s 10k visitors downloading every asset. I’m happy to pay them if I outgrow that. They are blazing fast. The same site would get a PageSpeed score of 98 or 99 with Cloudflare as a CDN. With Netlify I’m getting a score of 100 on mobile and desktop.