Now what we’ve gone through our design review, we have one major step left BEFORE we verify our site on Google and set up Google Analytics — and that’s to PUBLISH our portfolio. And this lesson will be pretty quick: we’ll do publishing to our webflow.io domain, and then we’ll show how to connect a custom domain (whateveryoursiteis.com or .net or .biz. .info— .is? Grimur?).
[Grimur] Yeah, that's Iceland.
Let’s start with the first one. All we need to do to publish Megan’s portfolio? Let’s check in Project Settings to look at two parts here: (1) is the subdomain what we WANT it to be? This is where we could change it, but let’s leave it and look at our SECOND thing: (2) we’ll go over to SEO...and we’ll make sure that THAT subdomain is currently getting indexed by search engines (that’s USUALLY what we want). If we want to set up a rule so search engines are told NOT to look at our site, we can do that, too, but for us, we’ll make sure it’s indexed by search. Let's save those changes.
And we COULD publish here, but most commonly, we’ll publish from the Designer. In either case, we just want to make sure it’s selected? And we’ll hit one button: Publish.
That’s part 1. Now if you want to connect a custom domain, it’s just a few more steps, and once we set those up? Publishing is still literally ONE click. And we can do this part in Project Settings as well, under the Hosting tab. Now, you’ll want to make sure to add a site plan first, and once you’ve done that, down on the page you’ll see we can add a custom domain.
All we have to do? Is type in that custom domain. Now. Our fictional UX designer named Megan has a custom domain: garciaux.com. We got this domain from Google Domains. And we’ll follow THAT process. And while the setup we’re doing is similar for MOST places you’d have your domain, we’ve added a link to our FULL article which has each and every step written out to follow along.
But the idea...is to ADD our domain. Now, this part’s important: we usually don’t want our subdomain (the webflow.io domain) AND our custom domain BOTH getting indexed by Google and other search engines, so by default, it’s turning OFF indexing on the webflow.io subdomain — and it’s doing this since we’re adding our CUSTOM domain (that’s the one we want showing up in search). Long story short, 99% of the time, we’re just going to press...OK.
And a lot of stuff comes up for directions, but we only have to do three things. And we’re following the WWW version (Option 1).
Over on Google Domains (this is where we bought garciaux.com), let's go to "My domains" where we'll find all the domains we've purchased. And we want to select garciaux.com, since that's the domain we'll be connecting our portfolio to. And we’re looking for our DNS records (our DNS settings). A quick note before you change records like this — we recommend always taking a screenshot or writing down (backing up your records here in case you want to change them back later).
But all we have to do is add two A records. And, what we’ve done ahead of time, is we’ve cleared out our resource records. (You may have, in yours, a ton of resource records, and that’s okay.) But we can only have two resource records that are A records, that point to a host, that point to a name of @. If you have OTHER A records pointing elsewhere, that’s okay, but you can only have two that are A records that point to a name of @. Let’s do the first one.
Back in Webflow? We’re going to click to grab this first IP address (we’ll click it), that’s going to copy it to our clipboard. (Now, from time to time, Webflow might UPDATE these IP addresses, so yours might not match this video perfectly; that’s okay — we’re just clicking whatever the FIRST value is here.)
Back to Google, we’ll paste. That’s the first one, and the second one, we’ll press to add ANOTHER record. And of course, back in Webflow, click to copy the second IP address, that second value, back over to Google, and paste.
We have both of them (two A records) that point to a name of @. And let’s click to make sure we ADD. (That’s the first and second part of this — only one part left.)
Let’s go back and grab our CNAME record. This is the CNAME record, the name of www, and it points to THIS domain, let’s copy that. We’ll go and add CNAME, points to www, and we’ll make sure we add that specific URL.
This is what we have on our screen; yours could look different, especially if you’re using a different registrar (if you’re using something other than Google Domains). We recommend taking a look at that full article before making any changes, and always back up these resource records. Take a screenshot, write them down, whatever you need to do, before you modify any DNS records. Let’s go back over to our hosting tab, and we’ll press check status. Check status.
Now, it might say there are issues detected. That’s okay. Sometimes this can take a few moments before it goes through. We can press again, and now it says connected. (Yours could take longer, sometimes this stuff does — we’re here to help, so check the article for some specifics here, and reach out to our team if we can help in any way.)
But let’s wrap up by choosing our default. We’ll choose the WWW version as the default here.
So what does all this do? Well, now we can go back to the Designer. (Again, we can do this from the Dashboard, but we’ll go back to the Designer.) We can take a look at our site. When we go down to Publish, it’s still on the staging domain, but we can make sure we’re PUBLISHING to our custom domain. Publish? That’s it. No FTP stuff needed, no reconciling file versions. Just publish.
But that’s it! We covered publishing a portfolio to the subdomain, and we covered connecting to a CUSTOM domain. Up next, we’ll get everything up and running with Google including Google Analytics. Grimur?
[Grimur] I just published my site. And now I’m going to do it again. Click. Click. Click. Actually, my MacBook Pro is completely out of battery, and it’s actually been that way for several days now. But once you’ve published YOUR site, share it on Twitter, Facebook, LinkedIn, and Revvit. And remember to use the #21dayportfolio so we can pick out our favorites so we can showcase them. Oh, look. A charger.
