Create Azure storage and automate a static website via CI/CD!

Create a Azure storage (Part 1)

1. Login into the Azure Portal using your account or sign up.
2. Go to Azure https://portal.azure.com/#home and click on Storage tile’s create link.

3. Create a new resource group called “website”.
4. Give new name to the storage “<your_storage_name>”. it has to be globally unique.
5. Select the region close to you and close the Review +Create button.

6. After all input values are verified successfully, you can finally click on the create button.
7. You will see now ‘deployment in process’ page and should render success in few seconds.
8. Open the container on the storage and select the ‘$web’ container from the list and click on “Change Access Level” as shown below.

9. Enable the static website hosting on the Azure storage you created. You have to provide the index & error documents name.

Set up a Pipeline by creating Gitlab repository (Part 2)

1. Create a gitlab account if you do not have or sign in.
2. Create a new project (repository) and name it.
3. Add new variable by visiting the Setting => CI/CD => Add new variable called “AZURE_STORAGE_CONNECTION_STRING” with connection value from the Azure portal for the storage as shown below.

Step 1. Copy the connection from the Access Keys for your Azure Storage

Step 2: Paste the value from the above step 1 into the value for the said variable

4. git clone <project_URL> on your CLI.

5. Add an static Index.html page & Custom404.html into the repository.

6. Create a new yml file named “.gitlab-ci.yml” and add into your repository.

stages:
  - build
  - test
  - deploy
build-job:
  stage: build
  script:
    - echo "Compiling the code..."
    - echo "Compile complete."
  artifacts:
    paths:
      - /*.*
unit-test-job:
  stage: test
  script:
    - echo "Running unit tests... This will take about 60 seconds."
    - sleep 60
    - echo "Code coverage is 90%"
  artifacts:
    paths:
      - /*.*
lint-test-job:
  stage: test
  script:
    - echo "Linting code... This will take about 10 seconds."
    - sleep 10
    - echo "No lint issues found."
  artifacts:
    paths:
      - /*.*
deploy-job:
  stage: deploy
  image: mcr.microsoft.com/azure-cli
  dependencies:
    - lint-test-job
  script:
    - ls -ltr
    - mkdir data
    - cp *.html data
    - >-
      az storage blob delete-batch -s "\$web" --connection-string
      $AZURE_STORAGE_CONNECTION_STRING
    - >-
      az storage blob upload-batch -d "\$web" -s data --connection-string
      $AZURE_STORAGE_CONNECTION_STRING

7. Run following git commands.

git add .
git commit -m “new pipeline to automate the deployment of static website”
git push

8. Your CI/CD pipeline should running successfully and deploy your *.html assets into the $web container.

Deploy-job : Pipeline Successful Status

9. You can visit your website by
https://<your_storage_name>-secondary.z6.web.core.windows.net
https://<your_storage_name>.z6.web.core.windows.net/

Default Index.html page rendering

Thanks for reading the article.