When I can, I prefer to host with Webflow. It unlocks the full power of Webflow CMS, for starters. But it’s also crazy-fast, secure, and easy to set up. But sometimes, you need another option.
For example, I run a website design firm in Columbus, Ohio, and one of my best lead sources is a local hosting provider. I like to keep my business with them for one simple reason: it helps me get more leads!
That said, Webflow handles a ton for you while you’re building your website, so exporting isn’t a simple matter of clicking “Export.” With that in mind, here’s the to-do list I follow when exporting Webflow sites. It helps ensure I don’t miss a thing.
Note: Much of this checklist applies to any website project, so it’s worth the read whether you export or not.
Before we dive in, though, let’s take a quick look at some of the benefits of hosting with Webflow.
A word from our editor: Benefits of Webflow hosting
There are tons of benefits to hosting with Webflow, but they can best be summarized in 4 words:
We deliver your content through the fastest CDN around: Fastly. Which means you’ve got over 50 data centers and thousands of servers around the world serving your website. There’s a reason we call it “the fastest hosting on the web.”
We constantly monitor for threats and intrusions across our entire platform. Plus, we offer SSL (currently in beta) for every site, so your site visitors can share their info securely. (And your site can do better in search.)
We offer enterprise-grade reliability with 99.9% uptime. Just check out our Status page.
Managing your website through cPanel (or any of its variants) is just a disjointed, confusing pain. So we take the hassle out of it for you.
But enough from our editor. On to the export list!
1. Finish design and development. Woohoo!
You’ve worked hard and built an amazing website. Now you’re ready to export it. Feel free to break out the bubbly before you move on. (But maybe hold off till you’ve read this.)
2. Test your website
While I’m designing and developing, I’m constantly previewing the site with Webflow’s tablet, mobile landscape, and mobile portrait views. But once I’m close to launching, I have to do real-world tests.
Depending on the size and scope of the project, I may create an in-depth test plan. For smaller projects, I test the site in these environments:
- On mobile, I view every page on an Android phone and an iPhone
- On desktop, I view every page in:
- Chrome, Internet Explorer, Edge, and Firefox on Windows
- Safari and Chrome on Mac
As I review pages, I’m checking the following to ensure they look good and work beautifully:
If I don’t have a particular environment handy, I mimic it with BrowserStack, which offers a few free plans. Be sure to include a few different monitor sizes and a retina display as well.
3. Review the old site’s XML sitemap and redirect pages
If your client had a previous website, gather a list of the old website’s URLs. I like to use the previous XML sitemap and map those URLs to the new site’s URLs.
Review this list with the client and get approval on the mapping. Also, ask the client to ensure that no old URLs (that they still want) are missing!
4. Make any final design changes, if needed
Inevitably, the client will ask for a few last-minute changes. Once you’ve made them, re-run your test plan (from step 2) to make sure those late-breaking changes didn’t muck up the site design.
5. Get client’s final sign-off
Review your site with the client and make sure they’re happy.
6. Create a custom 404 error page in Webflow
To create a 404 page in Webflow, just create a new page on the top level of your site (i.e., don’t nest it in a folder) and name it 404.
Content-wise, I like to let the visitor know that an error happened (uh-oh!) and provide a link back to the home page. You can also list top locations on your site, or even include a search bar, if you’re so inclined.
7. Set your Open Graph data
Be sure to set your Open Graph tags and images for each individual page. Facebook’s developer site has some great info on best practices for OG images.
Multi-page sites should have unique Open Graph info for each page. But it’s A-OK for these to match your SEO Meta Title and Description.
8. Set your site’s language
Search engines and translator tools like it when you set the language for your website.
9. Update the site’s favicon and web clip
If you haven’t done so already, update the site’s favicon and web clip to reflect your client’s branding. Make these images square (32 x 32 pixels for favicon, 256 x 256 pixels for the web clip). You’ll also want to make sure they have enough contrast against a light gray background (the browser tab itself).
You can upload the site’s favicon and web clip in the Settings tab of its Site Settings.
10. Run speed tests and check Google Page Speed Insights for suggestions on speed improvements
By this point, I’ve already run user experience tests, but I want to make sure that my pages load quickly, too.
So I run every page (and/or every page using the same layout) through Web Page Test, looking for a load time under two seconds. I also run the Google PageSpeed Insights tool on all pages and review suggestions, paying special attention to notes on image optimization.
11. Review contact methods
Confirm that all your email forms and click-to-call buttons work properly.
12. Run a spellcheck on content and metadata
Spell check every page title, meta title, meta description, Open Graph title, and Open Graph description.
Webflow’s built-in spell checker works well, but I take an extra step and copy and paste all content into a program like Microsoft Word — this helps me make sure I didn’t misspell important/unique words like my client’s brand name or industry jargon!
13. Set up 301 redirects and error handling
Next, you’ll need to set up 301 redirects. How you do this depends on your hosting environment. I usually host on environments using Apache, so I create my own .htaccess file to route clients to my 404 page and handle redirects. Here’s an excerpt from my .htaccess file from a recent site build:
#Handle 404 Errors
ErrorDocument 404 /404.html
#Redirect pages from old site to new site
Redirect /content-marketing.html /digital-marketing-services/content-marketing.html
If you’re hosting with Webflow, you can set up “wildcard” redirects to simplify this process.
14. Create a robots.txt file
Most search engines like it when you create a robots.txt file and I always use mine to point towards my XML sitemap. Here’s a sample robots.txt file:
15. Add Google Analytics
Analytics are important — and Google Analytics is free! If you don’t already have one, set up your Google Analytics account!
Here’s how to hook your analytics up to your Webflow sites:
- Classic Analytics: Go to Site Settings > Analytics, and paste in your Profile ID
- Universal Analytics: Add the code snippet to Custom Code
Once the site is up and running, I create an automated monthly report and send it to both my client and myself … makes me look good for very little work.
16. Add Google Search Console (Google Webmaster Tools)
To monitor your site from Google Search Console (formerly Google Webmaster Tools), you’ll need to verify ownership of your website with Google. Learn how to verify site ownership.
17. Run a link checker
Don’t let your website’s visitors hit broken links! I use the W3C’s free link checker tool to run a quick check of all links.
18. Do an SEO checkup
There are a plethora of SEO tools available, some free, some for a charge. Whatever tool you choose, make sure you run at least one to ensure you’ve added all the necessary meta tags, alt tags, etc.
19. Clean up unused classes
Clean up unused classes in the Designer’s Style Manager tab.
20. Back up the website
Hit Cmd+Shift+S and name the backup.
21. Unpublish the webflow.io version of your site
Search engines hate duplicate content, and so do I! Make sure you unpublish the site from the Publish menu.
22. Export your site
Finally, you’re ready to start exporting your site. Find out how to download your site files.
Once your files have downloaded, extract the files onto your local machine and prepare to upload.
Note: you’ll get all your site’s HTML, CSS, JS and images in this download. If you used Webflow’s dynamic Collections, you’ll get one HTML file for each of your Collection Template pages.
23. Upload site files to your server / hosting provider
This step varies depending on your hosting provider. Most will give you explicit upload instructions and technical support. Besides your Webflow site files, you’ll need to upload your XML sitemap, .htaccess file (if applicable), and robots.txt file.
24. Test, test, and re-test
Now that your site is live, you’ll need to test, test, and re-test to make sure all of your files work as expected. In addition to the website, you’ll want to double check redirects, 404 errors, Open Graph settings, Google Search Console, and Google Analytics. It’s also not a bad idea to run an SEO tool one last time.
Because high traffic can bring down sites, it’s a good idea to schedule your launch for a time when traffic is low.
25. Submit XML Sitemap to Google Search Console
One last step … be sure to submit your XML sitemap to Google!
Aaaaand … you’re done
Congrats! Now you actually can break out the bubbly. And give your client a high-five. You’ve both earned it.