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!

Thanks to https://dev.to/bryce/how-to-automatically-deploy-to-gitlab-pages-w-ci-4iko for help on this process.

Originally posted on gavinr.com

Comments

[Victor Warno]

Thanks for sharing! Used especially your last two steps to publish on Gitlab Pages. If I may suggest a change: The .gitlab-ci.yml does not have valid yaml syntax (due to indentation mostly). Maybe you could replace that by a valid version.

[Andrea Giammarchi]

This is a great hint, I just don't understand why you limited the topic to svelte. It looks like any site generator would do, but nevertheless, thanks for sharing 👍