Cloud CI/CD - Deploy a Nuxt.js App using GitLab and Surge.Sh

In the last couple of years, I have seen a few new hosting services enter the market place focused on Static Site Hosting.

The Big Three, AWS, GCP and Azure all offer Static Web hosting options.

So I wanted to see what the developer experience was like for taking a static site written in Nuxt.js and deploy it from Gitlab to one of these services.

I am going to start with Surge.sh

Surge.Sh

Surge.sh offers a very basic service to host static sites.

• Front End only. There is no back end suport so you cannot host any serverless function or Backend Api.
• Basic SSL
• Custom domain names

The professional version offers extra features for a monthly subscription. Check out their pricing

The Surge.sh website has a simple video that takes you through the basics.

Go watch it now !!

Securing Credentials

Once you have setup an account and defined a Domain, you can request a Token. Using a Token allows for authentication without having to pass a username and password. You only get one token with your free account.
So all projects you have under account can be accessed with the same token.

The easiest way to get you token is from your local command prompt. Type :-

surge token

Copy the token value returned and save it to Gitlab as a Variable.

Using Surge from Gitlab

Define another protected variable in your Gitlab Repo for the Domain.

Your Gitlab Yaml needs to look similar to this. For this app, the nuxt.js source is in a folder call app

# .gitlab-ci.yml
image: node:latest

before_script:
  - yarn install --cache-folder .yarn
  - npm install -g surge

stages:
  - build
  - deploy

build:
  stage: build
  cache:
    paths:
    - app/node_modules/
    - app/.yarn
  script:
    - echo "Building"
    - cd app
    - yarn install
    - yarn generate
  artifacts:
      paths:
          - app/dist
     

deploy:
  stage: deploy
  script:
        - echo "Deploy"
        - cd app
        - surge --project ./dist  -d $SURGE_DOMAIN --token $SURGE_TOKEN

as you can see calling surge is a one line command

Summary

I like Surge.sh. If you have a simple site you want to demo to a client you can quickly deploy it there with no hosting fees. Wait for client feedback and leave the site on Surge.sh until the client is happy and more importantly they have paid you.

If your site has more complex functionality e.g. Server Side Api or Database Content. You will need to look at something else.