Streaming live at 10am (PST)

Exporting a Webflow Site: A Checklist - Feedback Welcome!


#1

Hello all,

This is more of a general question about site exporting rather than specific to a site. I plowed through a ton of Webflow forum articles over the weekend and couldn't find a comprehensive answer to this question, so I thought I'd ask it here.

When you export a site outside of Webflow, I know that you need to...

  • Create your own XML Sitemap
  • Create your own 404 page and modify the .htaccess file to handle 404's
  • Create your own 301 redirects and modify the .htaccess file to handle 301's
  • Create your own form code IF you are not continuing to maintain a hosting plan with Webflow. (I do plan on maintaining a plan with Webflow, so this is a non-issue for me, I think!)
  • Understand that sites built within the CMS cannot be exported (courtesy of @Revolution)

What other features / settings are not included when you export a Webflow site?
Also, does anyone have advice for creating an .htaccess file?

Many thanks in advance,
RebeccaJG


#2

You lose the CMS feature as well (If you use it).

Seems you have everything else covered (unless I missed something basic).

Exported sites will run with no issues... straight-out-of-the-box.

You cannot archive exported sites.

We do not host with webflow but we do maintain a project for each website.

Overtime this accumulates and you will need to upgrade your plan to allow more sites.


#3

@Revolution Thanks for the response!

A local web hosting approached me about some of their clients who need web design help, so it's in my best interest to keep the business with them! :slightly_smiling: I'll edit the original posting because I know I would have loved to have found this topic when I started working on this idea.


#4

HTML5 Boilerplate has a solid .htaccess


#5

Thanks! Just took a quick peek and it looks like there is very good stuff in there!


#7

Hi, great list!

Steps prior to export:

  • Clean unused classes from the Style Manager tab
  • Perform a Cmd+Shift+S and name the backup
  • Unpublish the site from the Publish menu

FYI Webflow people said that exporting CMS as flat files will be one day possible. We should not wait for it but we'll maybe get it one day :slightly_smiling:


#8

Thanks @vincent Just added these to my pre-launch checklist. I only had about 30 steps in the pre-launch list, so you know it needed more! :slightly_smiling:


#9

Don't hesitate to share the pre launch list too!

Do you mind if we rename your post to: Exporting a Webflow Site: A checklist so that it's a better way this post becomes useful for others later?


#10

Just thought abt something to add to your checklists: Check what the site looks like with JS turned off. The purpose here is to let enough info visible without JS so that people figure out what your site is and maybe what they're missing out.


#11

Sure, we can do that!


#12

As requested, here is my pre-launch checklist...feedback is welcome!

  • Get sign off from client
  • Use old XML Sitemap to gather list of old website URL's and map those to new URL's. Get approval from client on mapping AND ask client to ensure that no prior URL's are missing.
  • Make any final changes
  • Create custom error page in Webflow. Name it 404. (for errors like 404, etc.)
  • Set Open Graph image at site level OR add Open Graph images to all pages using these instructions: https://developers.facebook.com/docs/sharing/best-practices#images
  • Preview site in Webflow Tablet, Mobile Landscape and Mobile Portrait views
  • Confirm favicon is updated and not Webflow
  • Click through and view every page on the site
  • Run http://www.webpagetest.org on home page, ensure below 2 second load time
  • Run Google Page Speed Insights tool on all pages: https://developers.google.com/speed/pagespeed/insights/ Review suggestions, especially for image optmization (Review Webflow Forum other tools for options)
  • Preview site on a Droid mobile phone. Pay attention to Fonts, Colors / Gradients, Images, Logo, Navigation, Animation
  • Preview site on an Apple mobile phone. Pay attention to Fonts, Colors / Gradients, Images, Logo, Navigation, Animation
  • Preview site on Chrome. Pay attention to Fonts, Colors / Gradients, Images, Logo, Navigation, Animation
  • Preview site on IE. Pay attention to Fonts, Colors / Gradients, Images, Logo, Navigation, Animation
  • Preview site on FireFox. Pay attention to Fonts, Colors / Gradients, Images, Logo, Navigation, Animation
  • Preview site on Safari on Mac. Pay attention to Fonts, Colors / Gradients, Images, Logo, Navigation, Animation (Safari not supported on Windows. Need to use BrowserStack.com for this.
  • Preview site on Chrome on Mac. Pay attention to Fonts, Colors / Gradients, Images, Logo, Navigation, Animation (Safari not supported on Windows. Need to use BrowserStack.com for this.
  • Preivew site on different monitor sizes
  • Preview site on retina display
  • Check what the site looks like with JavaScript turned off and ensure enough information is present for visitors to identify site's purpose.
  • Confirm that email forms and click-to-call buttons are working properly
  • Copy and paste every page into Word and run a spell check
  • Spell check every page title, meta title, meta description, open graph title and open graph description
  • Add all re-directs so that old website pages are re-directed to new page links
  • Add Google Analytics
  • Add Google Search Console
  • Run link checker (start with https://validator.w3.org/checklink)
  • Run some type of SEO tool to make sure all meta tags, alt tags, etc. are set (Tool TBD)
  • Review Open Graph settings
  • Resolve issue with scroll down icon laying on top of buttons on apple mobile phone, review home page on every device again after fix
  • Resolve issue with play button on background on apple phones for both background videos
  • Preview site on a really tall monitor with lots of height (performed this with Google Chrome on 25% setting)
  • Clean unused classes from the Style Manager tab
  • Back-up the Website: Perform a Cmd+Shift+S and name the backup
  • Unpublish the site from the Publish menu

#13

Wicked checklist Rebecca!


#14

Thanks for taking the time to do this. :wink::+1:


#15

Under Hosting / Publishing Options (White Label).

Uncheck "Hide Webflow branding from HTML"

This is ON by default.

By leaving it ON... the 2nd or 3rd line... source code will display the Webflow Brand.

Unchecking it doesn't really make it white-labeled though :frowning:

"Confirm that email forms and click-to-call buttons are working properly"
- if not using Webflow form service... you have to specify your own script.


#16

I've managed to get CMS posts / pages by using an app called sitesucker.
As long as your site has links someplace to each article / post / page somewhere it will automatically download a static version (if you set your setting up in the app right).

I needed to do this because webflow doesn't' yet support SSL so we needed to self host it.

In sitesucker put in the https://sitename.webflow.io url and make sure your asset urls are using https in webflow. Sitesucker will download the whole site, and depending on the settings you choose, the assets associated with it, (I chose to keep all assets hosted on webflow's CDN but you can actually have it download all the assets as well.)

Here is an example of my .htaccess:

# Apache Rewrite Rules
<IfModule mod_rewrite.c>
Options +FollowSymLinks
RewriteEngine On
RewriteBase /
#site.com/page will display the contents of site.com/page.html
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME}.html -f
RewriteRule ^(.+)$ $1.html [L,QSA]

#301 from site.com/page.html to site.com/page
RewriteCond %{THE_REQUEST} ^[A-Z]{3,9}\ /.*\.html\ HTTP/
RewriteRule ^(.*)\.html$ /$1 [R=301,L]

#301 from index inside folders
RedirectMatch 301 ^/projects/index.html /our-work.html

RewriteCond %{HTTP_HOST} ^site\.com [NC]
RewriteCond %{SERVER_PORT} 80 
RewriteRule ^(.*)$ https://site.com/$1 [R,L]

# Uncomment this if we don't want unknown pages to try on the subdomain blog. to see if the content is on webflow
# ErrorDocument 404 /404.html

# 404 test -- file/folder exists? if not redirect to the same url but on the blog subdomain (webflow)
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^/?(.*) http://site.webflow.io/$1 [R=301]

# End of Apache Rewrite Rules
</IfModule>`

I also wherever needed in the static files downloaded by sitesucker I've modified parts to allow anything cms data updated in webflow to be pulled into the static site by using a tool called import.io and just straight up replacing html.

So for example, a blog listings page like https://thomasarts.com/blog or a jobs listing page like https://thomasarts.com/careers/ i've written some custom code that replaces sections of the html with html from the webflow site automatically using import.io and targeting certain sections.

Hopefully webflow will support SSL soon so I don't have to do so many workarounds.


#17

Rebecca,

Thank you so much for taking the time to do this. :smile:


#18

Biggest thing to note here is that .htaccess only applies to sites hosted with Apache. If you roll your own hosting (and you should) you're better off using nginx or something like g-wan. Also take into consideration exporting the Webflow site for use in a SPA running off a ruby/javascript backend wont use an .htaccess either.

Your checklist is great, but you might look into automating the majority of that stuff, some great tools are:

Sauce Labs
BrowserStack
Cross Browser Testing
Browser Shots

You could also probably automate the XML sitemap generation as well.

Run the site through an accessibility test, ensure proper document language, heading hierarchy and check images for alt tags.

Just my thoughts.


#19

JWB,

Thanks -- I've definitely been digging on Browser Stack for testing.

I'll have to check into your other ideas as well -- thanks so much for sharing!

Best,
RebeccaJG


#20

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.