Publishing & Settings

Managing Staging and Versions for Your Framer Project

4:21

17K views

Sep 12, 2023

About this lesson

Learn how to effectively manage staging and versions for your Framer website. Discover how to publish new versions, roll back, and review previous website versions. Explore the settings and options available for staging, enabling you to deploy the desired version as the live website. Additionally, gain insights into identifying and resolving optimization warnings that may affect site speed and SEO performance.

https://www.youtube.com/watch?v=SOKaagpf-3o&t=0s - Introduction

https://www.youtube.com/watch?v=SOKaagpf-3o&t=18s - Accessing Staging & Versions

https://www.youtube.com/watch?v=SOKaagpf-3o&t=24s - Viewing and Comparing Published Website Versions

https://www.youtube.com/watch?v=SOKaagpf-3o&t=58s - Enabling Staging and Deploying Older Versions

https://www.youtube.com/watch?v=SOKaagpf-3o&t=69s - Deploying a Version as the Live Website

https://www.youtube.com/watch?v=SOKaagpf-3o&t=102s - Understanding Optimization Warnings

https://www.youtube.com/watch?v=SOKaagpf-3o&t=120s - Debugging and Fixing Nested Link Errors

https://www.youtube.com/watch?v=SOKaagpf-3o&t=240s - Updating and Publishing the Optimized Version

🌞 Try Framer for free: https://framer.com

🎉 Follow on Twitter: https://twitter.com/framer

💎 Join Community: https://www.framer.community

0:00so every time you publish your frame or 0:01website a new version of your website 0:03will be generated through staging and 0:05versions you can look back at the other 0:07website versions that you've published 0:09you can also roll back your website and 0:13you can see if there's any errors in 0:14your published website so let's head 0:18over to our project settings and then 0:19head over to staging inversions and this 0:22is where you'll be able to see all of 0:24the Publishers that you've made to your 0:25website so you can see here that I can 0:28click on the latest which is going to 0:30open the latest version of my website 0:32and this URL is always going to show the 0:35latest version of my site that I've 0:36published but I can also click on any of 0:39these versions that I've published 0:41previously so let's click on this one 0:42and this way I can look at what my 0:45website looked like when I published 0:47that version 0:50now you'll notice that the deploy 0:51buttons on this are grayed out if we 0:54want to deploy any of these versions 0:56we'll have to enable staging 0:58and what staging does is it allows us to 1:00always roll back to an older version of 1:02our website so if I go back to this 1:05older version I can now click on deploy 1:08which means this is now the live version 1:09of our website 1:11uh so if I go to my custom URL which is 1:15fusion.frame or website this will be the 1:17live version that's going to show on 1:19this URL 1:20you'll also notice that when I publish 1:22my website 1:24a new version will be generated but this 1:27version will not automatically be set 1:28live that's because we have staging 1:30enabled if we now want to deploy this 1:33version to my custom URL 1:35I will have to click on deploy version 1:37and this will now be the version that is 1:40live on my custom URL 1:42you'll also notice that there's a few 1:44warnings here 1:45what this means is that your website 1:48failed to optimize which may cause your 1:50website to be slower or the SEO to 1:53suffer so if you want to see what this 1:55warning is you can click on the warning 1:57and then download the error file 2:00so in the error file you can see a few 2:02things we'll give you some context on 2:04what this error means there are multiple 2:06errors you can get but in this specific 2:08error it says this page has nested links 2:12and it could not be optimized which 2:15means it will be slower to load and the 2:16SEO will suffer 2:19it is also showing which page has the 2:21nested links in this case there's no 2:24page showing which means it's the home 2:25page 2:27um we always show you a link on how to 2:29debug this error or how to fix it and 2:32we'll try to show you on which element 2:34this nested link appears or where the 2:37error appears in your website 2:40so let's head back to our canvas and see 2:43if we can fix this error 2:45so I know that it's about nested links 2:47so I'm going to look for an element in 2:49my layer panel that has a link on it and 2:51I can see that there's a button element 2:52here that has a link so because it says 2:56it had as next links I'm going to assume 2:59that the element inside of it also has a 3:01link which is a component so I'm going 3:03to click into the component 3:04and I can see here that on these two 3:07components these also have links which 3:10means this is a nested link because 3:11there's a link inside of a link which is 3:14technically not allowed by HTML and will 3:16cause your site not to optimize 3:18so I think I'm going to keep this link 3:20but go back to my canvas and remove the 3:24link that is on this button frame that 3:26is wrapped around the component so I'm 3:28gonna go over to link in the top right 3:30and just remove this 3:33now let's head back over to our project 3:35settings and staging inversions and 3:38publish it again 3:41you will see a new version appear it's 3:43optimizing and you'll now see that it's 3:46successfully optimized because we've 3:47removed that nested link which is not 3:49showing a warning anymore 3:51so because this version is now optimized 3:54this is actually the version I want to 3:55deploy 3:57and this version is now live on my 4:00website so if I click on this URL 4:03this is now the optimized version of my 4:05website it's the latest version and this 4:08is exactly what I want to set live 4:10so that is how you manage staging 4:12inversions and go back to previous 4:15versions of your website but also fix 4:16certain warnings that might show up

TeachesStaging vs Production

Also coversComponents Frames Links

Watch on YouTube ↗

‹ Adding Redirects to your Framer Website

Tracking Website Visitors with Framer's Built-in Analytics ›