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?
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! 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.
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.
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.)
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
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 Careers - TA 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.
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: