Portfolio Website with Github Pages, Sapper (Svelte) and Custom Domain Name

Sapper Website in Github Pages

Decided to have your own personal website but don't like to spend hard-earned money on hosting solutions for a website that will get only just a few visits per day or even a week? If so then you are in the right page. Follow with me to see how you can have your own fully working fast website bundled with your own custom domain at no cost for hosting that.

Steps

  1. Create a Github Pages Repository
  2. Configure Your Custom Domain Name
  3. Create a Sapper Project
  4. Publish Static Exported Site to Github Pages

Github allows you to have a special repository under your personal account and have it bound to a automatically generated Github subdomain and that's Github Pages. Github Pages will server static websites so you can easily export your React or Sapper project and push the result into this special repository and have it served with a subdomain that Github creates for you.

Create a Github Pages Repository

First you need to create a public repository named youraccount.github.io then push the static content which can be as simple as a index.html file to this repository and done. You have a personal website with an accessible URL.

For example for my Github account (mafshin), I would create a public repository named mafshin.github.io.

Use your Custom Domain Name

Once you have your special Github Pages repository ready, go to the repository Settings page, in the bottom of the page you have Github Pages section with an input field named Custom Domain. Enter your domain name here (e.g mafshin.com) and press Save. Github will add a CNAME file to your repository with the value of your custom domain name. This file will guide Github to recognize that your custom domain is an alias name for your Github Pages repository subdomain (e.g mafshin.github.io).

Beside that you also need to add A records to your domain DNS provider to relay requests of your domain name to Github servers. For doing so, follow these steps:

  1. Change your domain name NS records in your domain control panel to a DNS provider like Cloudflare

  2. Inside DNS provider control panel, for each IP Address of Github Pages add an A record.

    When those A records are present and your special Github Pages repository have that CNAME file then you can browse to your custom domain name and the contents of the repository will be served as a static website.

Using Sapper

As I said you can host any static website in Github pages but it would be nice to have some well structured framework based website so that you can easily update its contents. There are lots of JS Frameworks available out there which you can use like React, Angular, VueJS, etc. In this tutorial we use the new player in JS Frameworks, Svelte powered framework Sapper.

Create a simple Sapper project

Run the following commands to have Sapper default template project cloned and compiled.

npx degit "sveltejs/sapper-template#rollup" my-site

cd my-site

npm install

npm run dev & open http://localhost:3000

Now you can browse to http://localhost:3000 to see the output.

Exporting static website from Sapper

Run the command npm run export and the exported version of your website will be available in this folder: __sapper__/export. Now you must commit the content of this folder to your special Github Pages repository.

Can I export my project directly to Github Pages? Yes you can.

This functionality is available via a npm package named gh-pages which can commit the content of a folder to the Github Pages repository.

So first create a file named deploy.js in you scripts folder of Sapper project and put the following into that (update your-github-account):

const ghpages = require('gh-pages');

ghpages.publish(

    '__sapper__/export',
    {
        branch: 'master',
        repo: "https://github.com/your-github-account/your-github-account.github.io.git",
        user: {
            name: 'your-github-account',
            email: 'your-email'
        }
    },
    () => {
        console.log('Deploy Complete!')
    }
)

Also edit your package.json and add the following line to scripts section:

"deploy": "npm run export && shx cp CNAME __sapper__/export/CNAME && node ./scripts/deploy.js"

Then add the same CNAME file that Github created in your repository to the root folder of your Sapper project. You can also easily create a file named CNAME (without any extension) and type your custom domain name in that.

Also you need to install this package which I used for copying the CNAME file to the exported folder so that it is pushed as part of project.

npm install shx --save-dev

Finally apply your desired changes to the Sapper project and once you are happy, run the following command which will export your website and push it the Github Pages repository:

npm run deploy

References