March 31, 2020 ~ 6 min read

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:

  1. You've setup a free account on Netlify
  2. 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..
  3. You own a domain at which you'd like to publicly publish your Svelte-powered Sapper site. (optional)
  4. 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

Create a new Netlify site from your Github repo

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)

Connect to your Github account

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.

Authorize Netlify to access your Github account

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

Select your Sapper repo

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.

Netlify deployment settings

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.

Your new Sapper site is live on Netlify

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.

Visit your live site via Netlify special URL

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.

Enter a custom domain or sub-domain

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.

Update Terser Plugin

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.

Success!

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

Shutdown DEV Server

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.

Provision SSL Certificate

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.

Provision SSL Certificate

There's still a LOT to do. But for now, you can do the following until I get the next post up:

  1. Read up on both the Svelte docs and Sapper docs.
  2. 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.
  3. Check out the Roadmap to see what I'm currently working on for this site.
  4. 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.

Good Luck!


Shane Robinson on Instagram
Shane Robinson on Twitter
Shane Robinson on Github
Shane Robinson on Pinterest
Enthusiastically built using Svelte, Sapper, and TailwindCSS.
Graciously hosted at Netlify.
Source code crafted using Visual Studio Code.
Version control via Github.
Image pre-processing by svelte-image.

Site last updated: Tuesday, August 11, 2020