Publish a Svelte Web App with GitLab Pages

If you’ve built a Svelte web application and would like to host it, you can do so easily using GitLab Pages.

  1. Create and clone a new GitLab repository.
  2. Download and extract the Svelte Starter Template into the repository.
  3. Since your URL will be at a subdirectory (https://username.gitlab.io/repository-name), make the references to the JS and CSS files in your public/index.html file relative. In other words, remove the leading / from the /global.css, /build/bundle.css, and /build/bundle.js URLs.
  4. Create a .gitlab-ci.yml file at the top-level of the repository, with the following contents:
       image: node:latest
        pages:
          stage: deploy
          script:
            - npm install
            - npm run build
          artifacts:
            paths:
              - public
          only:
            - master
        
    This says, when there’s a new commit on master (last line), use the node:latest docker image to check-out the code and run npm install and npm run build commands.

Your site will now be live - find the URL under GitLab Settings > Pages. Check the CI/CD status page of your GitLab repository to see the status of the build process if you ever have issues with that. Unlike GitHub, the site is not public by default. To make it publicly accessible, go into GitLab Settings > General > Visibility, project features, permissions and set Pages to Everyone. Your site is now available!

See Also