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

• Easter Dates
• Deploy a Sapper Web App Automatically to GitHub Pages using GitHub Actions
• Use the ArcGIS Maps SDK for JavaScript with Svelte