How I Migrated From WordPress to a Static Site

I've just recently done a complete redesign and rewrite of my course platform site Learn Build Teach. Originally, I created it using Celý článek

I've just recently done a complete redesign and rewrite of my course platform site Learn Build Teach. Originally, I created it using WordPress along with a Divi, a very popular theme that includes a visual builder. While my site worked fine with Wordpress, there were several reasons why I decided to migrate, so let's dive into the why.

https://www.youtube.com/watch?v=1STcr1gTbDU

TLDR

Gatsby is an increible option for creating static sites. Netlify provides a great static site hosting plan for free. By combining the two, you can migrate your site from Wordpress and improve your site's speed and security as well as your development experience.

The Why

I originally decided to use Wordpress and the Divi plugin because I thought it would be my quickest option, but I pretty quickly figured out that was more difficult than coding it mysesl. Divi is great for non-developers (and in some cases developers as well), but for me, a developer, I really wanted full control over the code.

Finding a comfortable deployment workflow with Wordpress can be challenging...

Additionally, I struggled with getting a good workflow for deploying new versions of my site. I found a migration tool that worked well, but I didn't find a way to connect a deployment strategy to source control. I had to export my site locally to a file, then upload that file to the live site... this just never felt right. Here's a few of the things I struggled with.

• too much overhead with Divi plugin
• deployments were very manually and clumsy
• code not tracked under source control

Because of these reasons, I started looking at other options. I'd heard developers rave about a few different Static Site Generators, so I figured it was worth a shot. Here are a few worth checking out.

• Gatsby.js

• Jekyll

• Next.js

Find out why static sites are awesome with 5 Reasons Why Static Sites Rock.

Getting Started

Although I didn't want to change much visually, I did start with creating a new design for the site. I've been trying to constantly improve my design skill, so figured this was a good opportunity.

Database Migration...or Lack There of

The original wordpress site did not have blog posts attached to it, yet another reason why using Wordpress was a bit overboard. Because of this, I didn't actually have any data in my Wordpress DB to migrate over. However, when migrating from Wordpress, this would be a common necessity, so I did a little digging.

Static Site Generators often use Markdown files to store the equivalent of blog posts ( and whatever else you want to use them as), so you would want to convert your blog posts to markdown files for them to be carried over. Here's a couple of tools to help you get there!

• Wordpress to Hugo Exporter
• Wordpress to Jekyll Exporter
• Blogger to Markdown
• Pelican

Site Redesign

I personally use Sketch App, one of the most popular design tools in the industry. I had two main goals with the redesign.

1. Display and Link to my courses
2. Drive users to subscribe to my newsletter

Here's what the new design looked like.

Creating a Github Repository

Because of my struggles with Wordpress it was really important to me to have all of the source code for my site checked into source control. In the spirit of Open Source I decided to create a public repository in Github. Feel free to check it out and make pull requests if you want to contribute!

Diving Into Gatsby

Because of my interest in React, I decided to use a static site generator called Gatsby. Gatsby was completely new to me, so like any good developer does, I went straight to YouTube. I found a great series by Level Up Tutorials that provided me with the getting started content I needed.

After running through that series on Gatsby, it was time to start building. I determined my MVP version only has one page with a few different sections. Additionally, static site generators are great at pulling in data from Markdown files. Ideally, I want to pull course data that way, but I decided not to for the MVP. I simply hard coded the class title, description, and image url. Don't judge!

Hosting and Deployment

With an MVP version of the site ready (skipping over handling newsletter subscribers for now), it was time to find a host. After hearing tons of positive feedback about [Netlify](https://www.netlify.com/) I decided to give it a try.

Netlify is one of the best hosts out there for static sites!

For a detailed look at Netlify, check out Getting Started With Netlify.

Turns out, it was incredibly easy to get my site hosted with Netlify. I was able to create a new site, setup Continuous Deployment by connecting to my Github repository, and have my site deployed in just a couple of minutes. I'm not kidding, it was less than five minutes, and the best part...it was totally free!

I set up continuous deployment for my site in under 5 minutes using Netlify!

With Continuous Deployment configured, Netlify pulled my latest code, did a Gatsby build, a pushed the new version of the site out live. You can read about deployment in more details at Deploy Your First Gatsby Site to Netlify.

Handling Newsletter Subscribers

The most complicated piece of the whole thing was handling new subscribers to my newsletter. I use Mailchimp to handle my newsletter, and the Divi plugin in Wordpress made it super simple to integrate with. After looking at the Mailchimp docs, I figured out you can include a script in your site that would handle everything for you but I didn't like this for 2 reasons.

1. Wanted complete control over styling
2. Wanted to include as little external JS as possible

Mailchimp API

All in all, I decided to handle email signups myself, so I started digging into the Mailchimp API. I played around with the API playground to explore the different kind of calls your can make. It took a bit of time, but eventually I found out how to format an Http request including an API key to add a new subscriber.

After figuring out how to format the URL, I just needed to make a Post request to that URL with the new subscriber.

Serverless Functions in Netlify

Netlify supports Lambda Functions to add back-end functionality to your app!

Although I could post to the Mailchimp API directly from the React, I had a couple of concerns.

• didn't want my API key included in source control
• didn't want my API key included in front-end code

So, I wanted to handle the actual Mailchimp API call on the server, but with static sites, you don't have direct access to a server/backend. This is, in fact, one of the "downsides" of static sites. However, Netlify, has a service called Lambda Functions, which allows your to create and host serverless functions to add functionality to your app.

One thing to consider with Static Sites is where backend functionality comes from.

After digging around the Lambda Functions Netlify Docs for a bit, I figured out how to create an endpoint that would accept an email from the front-end and send it over to Mailchimp via a REST call. For details, check out Building and Deploying A Severless Function With Netlify.

What's Next

I'm incredibly proud of the migration that I've gone through so far. I had to learn so much! Static site generators, Gatsby, hosting with Netlify, the Mailchimp API, as well as Lambda Functions in Netlify. All that said, I still have work to do.

• pull in and display recent YouTube videos
• pull/load classes from Markdown file instead of being hardcoded
• make it prettier
• Migrate two other sites to Gatsby!

Recap

After migrating from Wordpress to Gatsby and Netlify, I feel great about several things. I've got complete control over my code. I've got an amazing development workflow...just push to Github and Netlify does the rest. Lastly, I'm staying up to date with some of the latest trends in Web Development!