Publishing & Settings

Publishing and connecting a domain in Framer

Publishing and connecting a domain in Framer

Publishing and connecting a domain in Framer

Joseph

·

7:59

·

56K views

·

About this lesson

You’ve designed it and now it’s time to put it out into the world. In this lesson, we’re talking about how to publish your site in Framer. And how to setup a free Framer subdomain, connect your own custom domain, use staging to test and deploy updates, and even how to unpublish if needed.

https://www.youtube.com/watch?v=lwV77Jq2oCQ&t=0s Intro

https://www.youtube.com/watch?v=lwV77Jq2oCQ&t=4s Publishing overview

https://www.youtube.com/watch?v=lwV77Jq2oCQ&t=20s One-click publish

https://www.youtube.com/watch?v=lwV77Jq2oCQ&t=50s Understanding the base domain

https://www.youtube.com/watch?v=lwV77Jq2oCQ&t=60s Visiting your live site

https://www.youtube.com/watch?v=lwV77Jq2oCQ&t=64s Adding a custom domain

https://www.youtube.com/watch?v=lwV77Jq2oCQ&t=86s How Framer optimizes sites

https://www.youtube.com/watch?v=lwV77Jq2oCQ&t=115s Getting a free Framer subdomain

https://www.youtube.com/watch?v=lwV77Jq2oCQ&t=132s Connecting a custom domain

https://www.youtube.com/watch?v=lwV77Jq2oCQ&t=166s AutoConnect setup

https://www.youtube.com/watch?v=lwV77Jq2oCQ&t=194s Manual DNS setup (A records)

https://www.youtube.com/watch?v=lwV77Jq2oCQ&t=246s Adding CNAME record

https://www.youtube.com/watch?v=lwV77Jq2oCQ&t=278s DNS propagation and checking status

https://www.youtube.com/watch?v=lwV77Jq2oCQ&t=302s Domain connected confirmation

https://www.youtube.com/watch?v=lwV77Jq2oCQ&t=312s Updating live site

https://www.youtube.com/watch?v=lwV77Jq2oCQ&t=325s Introduction to staging

https://www.youtube.com/watch?v=lwV77Jq2oCQ&t=359s Enabling staging

https://www.youtube.com/watch?v=lwV77Jq2oCQ&t=395s Using staging and production tabs

https://www.youtube.com/watch?v=lwV77Jq2oCQ&t=406s Rolling back versions

https://www.youtube.com/watch?v=lwV77Jq2oCQ&t=422s Unpublishing your site

https://www.youtube.com/watch?v=lwV77Jq2oCQ&t=438s Removing a domain

https://www.youtube.com/watch?v=lwV77Jq2oCQ&t=449s Wrap up

Sign up: https://framer.link/yt

Follow: https://framer.link/yt-x

Learn: https://framer.link/yt-academy

0:00Je hebt het ontworpen en nu is het tijd om het de wereld in te sturen. In deze les bespreken we0:06hoe je je site publiceert in Framer en hoe je een gratis framer-subdomein instelt. Je eigen aangepaste0:12domein koppelen en hoe je staging gebruikt om updates te testen en te implementeren. Laten we beginnen. [Muziek] Het publiceren van onze site0:21op het web kan niet veel eenvoudiger. Je hoeft alleen maar naar de publicatieknop in de rechterbovenhoek0:27van het scherm te gaan en met één klik gaat onze site live. Er verschijnt een klein venster dat0:32het domein laat zien waar we net hebben gepubliceerd, wanneer de laatste update live is gezet en hoeveel0:38wijzigingen er standaard zijn opgenomen. Wanneer je je site publiceert, genereert Framer automatisch een willekeurig0:44framer.app-subdomein voor je. We noemen dit het basisdomein, maar we komen hier zo op terug.0:50Om snel je live site in de browser te bezoeken, kun je direct hier klikken op de URL in het publicatievenster0:55of naast de titel van je project bovenaan het scherm. Maar laten we eens kijken naar onze opties1:01voor het instellen van een aangepast domein, aangezien we nog geen aangepast domein hebben ingesteld. Hier in1:06het publicatievenster zelf hebben we een knop om een ​​domein toe te voegen. Dit is technisch gezien gewoon een snellere1:12manier om naar de site-instellingen te gaan en naar het tabblad Domeinen te gaan. Hier vindt u het basisdomein van1:18daarvoor, samen met wat informatie over de publicatiestatus, inclusief deze kleine indicatie dat de site1:23succesvol is geoptimaliseerd. Framer-sites worden gebouwd met React, dat is gebaseerd op JavaScript en1:29meestal even nodig heeft om te laden in de browser om dingen sneller te maken. Framer rendert uw site vooraf1:35op de server, dus in plaats van een lege pagina terwijl alles laadt, zien bezoekers direct uw1:41inhoud. Het voelt sneller aan, ziet er beter uit en helpt ook met SEO. Zolang er geen fouten1:46op uw site staan, gebeurt de optimalisatie meestal binnen een paar seconden nadat u op Publiceren hebt geklikt. We hebben twee opties.1:53De eerste is om een ​​gratis Framer-subdomein te nemen en deze zijn echt gratis. U hoeft niet eens1:59een betaald siteplan te hebben. U kunt elk subdomein nemen dat u wilt, zolang het nog niet door iemand2:04anders is ingenomen. Voor wat extra variatie kunt u kiezen tussen het eindigen op framer.bsite.phos,2:11foto's, media, wiki of AI. De tweede optie is om een ​​domeinnaam van een derde partij te koppelen die u bezit2:19. een daarvan is een functie van betaalde abonnementen, dus we krijgen een prompt om ons siteabonnement te upgraden. Ik klik op '2:25Upgraden' en ga snel door het proces van het abonneren op het basisabonnement. Nu kan ik teruggaan naar2:31Framer. Ga naar het tabblad 'Domeinen' en kies er opnieuw voor om een ​​domeinnaam te koppelen die ik bezit. Ik typ mijn domeinnaam2:39en klik op de knop 'Controleren' om te bevestigen. De volgende stap is om te controleren of ons domeinnaamsysteem2:46of onze DNS-records zijn bijgewerkt, zodat onze domeinprovider weet dat deze URL naar dit Framer2:53-project moet verwijzen. Voor sommige domeinproviders ondersteunt Framer automatisch verbinden. Framer controleert of uw domein wordt2:59gehost bij een domeinprovider die dit ondersteunt en geeft u vervolgens een knop om verbinding te maken. Vervolgens logt u3:04in bij uw domeinprovider en geeft Framer de DNS-instellingen automatisch door. Maar laten we zeggen dat we3:10een domeinnaam gebruiken bij een provider die automatisch verbinden niet ondersteunt. In dat geval moeten we3:15deze DNS-instellingen die Framer ons geeft kopiëren naar de DNS-records van onze domeinprovider3:21. Ik klik om dit eerste IP-adres te kopiëren, omdat ik het zo weer nodig heb.3:27Daarna ga ik naar de DNS-instellingen voor mijn domeinprovider. wat in mijn geval3:32GoDaddy is. Dingen kunnen er een beetje anders uitzien, afhankelijk van wie je domeinprovider is, maar het3:37concept is hetzelfde. We moeten gewoon een A-record toevoegen met de naam ingesteld op een apenstaartje en vervolgens3:45het IP-adres plakken dat ik zojuist heb gekopieerd uit Framer. Vervolgens herhaal ik het proces voor3:51het tweede A-record. Kopieer dat IP-adres uit de Framer-instellingen. Ga naar mijn domeinprovider3:57en voeg een nieuw record toe. Stel het type in op de naam op een apenstaartje en plak vervolgens dat tweede IP-4:04adres. Voor het derde en laatste record klik ik om sites.framer.app te kopiëren. Ga terug4:11naar GoDaddy. Voeg een nieuw record toe, dit keer ingesteld op CNAME met de naam www en plak vervolgens4:21sites.framer.app in en klik op Opslaan. In mijn geval lijkt het erop dat er al een conflicterend CNAME-record in4:28mijn DNS-instellingen staat, maar dat is geen probleem. Ik moet dat record eerst verwijderen en dan kan ik4:34Kom hier terug en klik op 'Opslaan' en we zijn klaar. Het kan tot 48 uur duren voordat deze DNS-wijzigingen4:41wereldwijd zijn doorgevoerd, maar meestal gaat het veel sneller. Om te zien of alles goed staat, kunnen we teruggaan4:46naar de instellingen van Framer en op de kleine knop 'Vernieuwen' klikken. Sommige records hebben langer nodig om4:52doorgevoerd te worden dan andere, maar als ze goed staan, verdwijnen ze. Als er een record4:56of twee blijft hangen, kunt u op het overloopmenu klikken en de domeinstatus vernieuwen kiezen.5:02En hop, het frame is nu verbonden met ons aangepaste domein. Nu kunnen we op deze link klikken om het te testen. En5:08voilà: daar is het. Onze site is live op het aangepaste domein waarmee we zijn verbonden. Als we nu wijzigingen aan5:14onze site aanbrengen en klaar zijn om ze live te zetten, kunnen we teruggaan naar de knop 'Publiceren'. In5:19het venster 'Publiceren' kunnen we gewoon op 'Bijwerken' klikken en 'De wijzigingen zijn klaar'. De wijzigingen zijn vrijwel direct live. Maar5:25laten we zeggen dat we niet willen dat deze updates direct live gaan. Wat als we een nieuwe versie van onze site op het web in de browser willen testen5:31voordat de hele wereld hem kan zien? Dit brengt ons bij een functie5:37die staging wordt genoemd. Eerder, toen we voor het eerst... Gepubliceerd Frame heeft ons automatisch dat lange basisdomein toegewezen5:43en als we teruggaan naar de domeininstellingen, ziet u dat het nog steeds bestaat en dat het5:50standaard altijd zal gebeuren, zowel het basisdomein als ons aangepaste domein verwijzen naar de laatst gepubliceerde versie van de site.5:56Dus wat is het nut van het basisdomein? Nou, door staging in te schakelen, kunnen we dit basisdomein gebruiken om6:02een ​​voorbeeld van de laatst gepubliceerde versie van onze site te bekijken en vervolgens afzonderlijk te beslissen welke versie we openbaar willen implementeren6:08op ons aangepaste domein. Als u een siteplan hebt met staging, kunt u naar het6:14tabblad Staging en versies van de site-instellingen gaan en de optie Staging inschakelen selecteren. Nu6:21wordt de laatst gepubliceerde update altijd gefaseerd op het basisdomein en kunnen we op Implementeren klikken om te kiezen6:27welke versie we live willen hebben op ons aangepaste domein. Het publicatievenster wordt nu ook opgesplitst6:33in twee tabbladen. Op het tabblad Staging pushen we onze updates naar het basisdomein om ze te testen.6:39Vervolgens kunnen we afzonderlijk naar het tabblad Productie gaan om de nieuwste versie te implementeren op ons aangepaste domein6:45of we kunnen teruggaan naar een eerdere versie op het tabblad Staging en versies door op Implementeren te klikken naast6:50de versie die we live willen zetten. Dus als de revisie van de homepage waar ik deze week aan ben begonnen6:55, Er moet nog wat aan gewerkt worden. Ik kan deze versie van vorige week in de tussentijd implementeren.7:01Als je op een gegeven moment besluit dat je weet wat ik wil, maar ik wil de hele site gewoon offline halen, kun je naar7:05het tabblad Algemeen gaan, de site-instellingen, en zoeken naar de rode knop 'Ongedaan maken'. Je krijgt dan nog een laatste kans om7:12te bevestigen of je deze site echt uit alle domeinen wilt verwijderen en ontoegankelijk wilt maken voor7:17bezoekers. Als je alleen je domeinnaam wilt verwijderen of wijzigen, kun je altijd7:22teruggaan naar het tabblad Domeinen, op de knop van het overloopmenu onder Aangepast domein klikken en7:28Domein verwijderen kiezen. Daar heb je het, of je nu een gratis subdomein gebruikt of je eigen aangepaste7:34domein koppelt. Je site live zetten gaat snel en flexibel. Met staging heb je nog meer controle7:41over hoe en wanneer je updates live gaan. Dat was het voor deze keer. Ik zie je bij de volgende.
Also coversFramesLinks

Watch on YouTube ↗

More in this topic

Hard work, easy website. Get a Free Domain with Framer.0:20
Hard work, easy website. Get a Free Domain with Framer.
Announcement13M views · 4 months ago
This website never happened — Get a free domain with Framer0:22
This website never happened — Get a free domain with Framer
Publishing & Settings4.7M views · 4 months ago
Free Domains with Framer: Go Build It0:16
Free Domains with Framer: Go Build It
Publishing & Settings9.1M views · 4 months ago
Introducing Advanced Hosting in Framer2:28
Introducing Advanced Hosting in Framer
Announcement7K views · 4 months ago
Transferring Framer projects to clients2:04
Transferring Framer projects to clients
Publishing & Settings9K views · 5 months ago
Creating Remix Links in Framer1:29
Creating Remix Links in Framer
Publishing & Settings3K views · 6 months ago
How to get the most out of Framer for Free4:05
How to get the most out of Framer for Free
Animations15K views · 8 months ago
Optimizing Video files for the Web5:34
Optimizing Video files for the Web
Publishing & Settings12K views · 8 months ago

Create a free website with Framer, the website builder loved by startups, designers and agencies.