Host Your Sapper Site on Netlify, Part 2
If you followed my instructions in step 1 (or other instructions you found), you now have a Svelte-powered Sapper website running on your local machine.
Before we go any farther, let's setup free, SSL secure, custom domain hosting on Netlify.
Baseline assumptions:
- You've setup a free account on Netlify
- You're currently logged in to your Github account. You don't have to have a window/tab open. Just need to be recently logged in to Github..
- You own a domain at which you'd like to publicly publish your Svelte-powered Sapper site. (optional)
- You know how to edit and add DNS records to the domains you have.
So let's get started...
Step 1 - Create a new site in Netlify
Login to your Netlify account and click the "Sites" tab. Then click the green "New site from git" button
Step 2 - Connect to your Github account
On the following page select "Github" as your git provider. (You can also use Gitlab or Bitbucket and the process will be the same)
Step 3 - Authorize Netlify to access your Github account
Netlify needs to access your Github account to pull the Sapper repo in and watch for future updates. Click the green "Authorize Netlify by Netlify" button to allow the connection.
Step 4 - Select your Sapper repo
You should see a list of your Github repos. Just click on the Sapper repo to connect it to Netlify
Step 5 - Create Deployment Settings
Once you've selected your Github repo, you'll be taken back to Netlify to finish setting up your website deployment settings.
Down in the "Basic build settings" section, enter the following:
- Build command:
npm run export
- Publish directory:
__sapper__/export
Then click the green "Deploy site" button.
NOTE: Make sure to have TWO (2) underlines surrounding sapper or else the site won't build properly.
If you haven't already, you can lean more about Sapper export in the docs.
Step 6 - Your new site is published!
If all went well, your new Sapper site will be published live on Netlify in a few seconds.
Step 7 - Visit your new live site via the special Netlify URL
Netlify provides you with a special URL which consisits of a randomly generated sub-domain + ".netlify.com."
Here you can see my random sub-domain is "stoic-bose-c743eb" and in fact, if you hit this URL, you'll see this very site: https://stoic-bose-c743eb.netlify.com/
But that's not a very friendly or memorable URL. So let's setup your own custom domain by clicking the "Set up a custom domain" link.
Step 8 - Enter your custom domain or sub-domain
You can see in the screenshot that I entered the sub-domain "sapper" on my main "shanerobinson.com" domain. But you can enter any main domain or sub-domain you own.
Then click the green "Verify" button.
Step 9 - Add domain you own
Netlify will check to see if that domain is registered and ask if you are the owner. Assuming you entered the correct domain and already do own it, click the "Yes, add domain" button.
Step 10 - Your Domains screen
You'll now be taken to the "Domains management" tab of the Settings for this site. You should see your new custom domain under the randomly generated Netlify domain.
You now need to make edits to your DNS settings at your domain Registrar (GoDaddy, Google Domains, etc.). Click on the "How to redirect the drfault Netlify subdomain to your primary domain." section and follow the instructions for your domain Registrar.
Step 11 - Configure Secure SSL certificate for your new domain
Depending on your Domain Registrar settings, it may take as little as a few minutes or as much as 48 hours for your domain settings to "propagate" and be seen by Netlify. Once your new DNS settings have propagated, you can setup the Secure SSL settings for your custom domain.
Click on the "HTTPS" tab within the "Domains management" section. Then click on the "Verify DNS configuration" button to see if your custom DNS settings have propagated.
BE PATIENT. It may take a while for your DNS settings to update and be available to Netlify
Step 12 - Provision SSL Certificate
When Netlify can see your DNS settings, you'll be able to "Provision certificate" to finish setting up your secure SSL for your custom domain.
Step 13 - Success!
If you're not seeing your settings update, take a break. Perhaps overnight. If you've followed the steps above, and did everything correctly at your Domain Registrar, everything will eventually update and you'll have a free, SSL certificate on your custom domain, hosted for free at Netlify.
There's still a LOT to do. But for now, you can do the following until I get the next post up:
- Read up on both the Svelte docs and Sapper docs.
- Poke around the /src/routes/index.svelte and /src/routes/about.svelte files, and files in /src/routes/blog/ to get a sense of how Sapper routing works and how you'll be writing and coding your new site/blog.
- Check out the Roadmap to see what I'm currently working on for this site.
- Subscribe to my new email newsletter below (if you haven't already) and I'll email you every time I post updates to this site.