未加星标

How I Migrated From WordPress to a Static Site

字体大小 | |
[开发(php) 所属分类 开发(php) | 发布者 店小二03 | 时间 2018 | 作者 红领巾 ] 0人收藏点击收藏

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.

Table of Contents Database Migration...or Lack There of Creating a Github Repository Hosting and Deployment Handling Newsletter Subscribers Serverless Functions in Netlify

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.

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.j s

Jekyll

Next.js

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

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

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

Display and Link to my courses Drive users to subscribe to my newsletter

Here's what the new design looked like.


How I Migrated From WordPress to a Static Site
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!


How I Migrated From WordPress to a Static Site

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.


How I Migrated From WordPress to a Static Site

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!


How I Migrated From WordPress to a Static Site
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!

Scotch Newsletter

Join 100,000 subscribers. Get weekly dev news and tutorials.

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


How I Migrated From WordPress to a Static Site

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!
How I Migrated From WordPress to a Static Site

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.

Wanted complete control over styling Wanted to include as little external JS as possible Mailchimp API
How I Migrated From WordPress to a Static Site

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.


How I Migrated From WordPress to a Static Site

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 .

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!

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!

本文开发(php)相关术语:php代码审计工具 php开发工程师 移动开发者大会 移动互联网开发 web开发工程师 软件开发流程 软件开发工程师

代码区博客精选文章
分页:12
转载请注明
本文标题:How I Migrated From WordPress to a Static Site
本站链接:https://www.codesec.net/view/621361.html


1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责;
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性,不作出任何保证或承若;
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
技术大类 技术大类 | 开发(php) | 评论(0) | 阅读(84)