My Personal Website Migration Process

Published on September 6, 2020

Understanding a person’s process allows you to peak into their mind. So this is a breakdown of the process I went through when redesigning my site, transitioning it to a new CMS, and migrating hosting plans.

Design

  • Redesigned site in Figma
  • Inspiration from Dave Rupert
    • Large character off-set with prominent links
  • Inspiration from Los Montoya
    • Geometric shapes around the image of the subject at top of homepage
  • Inspiration from Brad Frost
    • Important links on the homepage
  • Inspiration from Figma
    • Bright happy colors
    • Geometric mark
  • Inspiration from MoneyLab
    • Mobile menu remaining simple text links and not moving to an offscreen menu
  • Creating SVGs
    • Homepage hero image
    • Wasn’t going to have a mark, but the homepage image turned into a nice little graphic

Prototyping

  • Prototyping in Codepen Project
  • Establishing page types in static HTML
  • SCSS for site
    • Universal layout classes
    • Componentized elements for easier updating and reuse

Development

  • Local dev environment using Local
  • Using Underscore as the base theme
  • Deciding on page layout architecture
  • Using Block Lab for Resume
    • Understanding how it works
    • Configuring “Job” block
    • Building block lab template
  • Using Prepros for quick and easy SCSS processing

Content Migration

  • Scraping my old website using ScreamingFrog
    • Faster and easier than doing an SQL export
    • Probably could have found a Craft plugin, but this was simple enough
  • Modifying image locations with regex find and replace in Atom
  • Importing via WP All Import
    • Doing test imports on local site before importing on production

Deployment

Post-Deployment Cleanup

  • Installing GTM and GA via Site Kit
  • Installing Yoast
    • Adding meta descriptions for every post
  • Reviewing Lighthouse score
    • Good enough scores for now. An average score of 90 across primary pages.

Future Improvements

  • Technical
    • Optimizing homepage SVG – DONE 9/6/2020
    • Image optimization on blog posts – Fixed Imagick issue 9/29/2020
    • Adding a sticky table of contents to long-form blog posts
    • Move to CI/CD – thinking of using Beanstalk
    • Accessibility – adding ARIA roles
    • Creating custom Gutenberg blocks within the theme to reduce BlockLab plugin dependency
  • Content
    • Add skills list to resume page
    • Add about page
  • Design
    • Dark mode version
      • Using CSS variables to change primary colors for dark mode users
    • Accessibility – ensure WCAG compliance of colors
    • Custom icons for the homepage menu. I think some cool illustrations would be nice. Maybe they change depending on the hover state.
Meet the Author

Ethan Thompson is a Divisional Marketing Manager for a global safety company. He has worked in the digital marketing field for 13 years and loves the challenges the ever-changing field brings. When he isn't exploring new digital marketing tactics at his desk, he's out exploring Western New York. During the warmer months, he can often be seen riding his bike around the Empire State and sampling the local beer selection.