π Hi! I wanted to host this site on azure blob storage and I found this solution. It's created with Hugo. I'm using Gitlab CI to deploy it to the server.
π Configure static site hosting on azure
- So First thing you need is to create an Azure account. When you are done then go to Azure Portal, and create the storage account
- Locate your storage account
- On the menu pane (left) find "Static website" and select Enabled to enable it.
- Configure paths for Index document for. example
index.html
and for Error document404.html
. Click Save, that's it, you have configured your Azure storage to server static websites.
πΈ Custom Website address
The next thing you will need is to configure CNAME records in case you want to use your domain. π‘ Azure will serve your page under HTTP, but I wanted to use HTTPS so I using Cloudflare DNS which proxying data to azure blob storage. In this case, you need to verify the domain indirectly (not proxied). So Let,s create 2 new CNAME records.
- Again go to Azure Portal and locate your storage account.
- In the menu pane under the Settings section find properties.
- Scroll down and find Static Website section. Copy one of the Primary or Secondary endpoints.
- Configure CNAME records as following
Name | Target | TTL | Proxy |
---|---|---|---|
www | {storage_name}-secondary.z1.web.core.windows.net | Auto | Yes |
asverify.www | {storage_name}-secondary.z1.web.core.windows.net | Auto | No |
After you are done go back to Azure portal
- Locate Custom domain in the menu pane
- In domain name write
www.yourdomain.tld
and check indirect verification. - Click Save
π³ Deploying your site
As I wrote above I'm using Hugo to build this site so the following is an example of how to deploy the site to azure. After some changes can be used for any site.
Ok. If you have your site create .gitlab-ci.yml
Add there build section. This is example for hugo. Exact script I'm using on this site
image: maymeow/hugo-builder # or any other hugo image you trust
stages:
- build
- deploy
# Build site with hugo and upload cache and artifacts
build: # change name to pages if you wat to use gitlab pages
stage: build
cache:
key: themaymeow-com-build
paths:
- public
policy: push
script:
- hugo --config ./production.config.toml --enableGitInfo
artifacts:
expire_in: 1 week
paths:
- public
only:
- master
# Uncomment if your GitLab runner need tags and change them how you need
# tags:
# - docker
# - digitalocean
Repo for the Hugo builder image is on my Github Account.
Next, add at the bottom to your .gitlab-ci.yml
stage for deploy to Azure. Script is based on this one. π
# deploying site to azure storage
deploy to azure:
stage: deploy
image: microsoft/azure-cli
cache:
key: themaymeow-com-build
paths:
- public
policy: pull
dependencies:
- pages
script:
- az storage blob delete-batch -s "\$web" --connection-string $AZ_STORAGE_CONNECTION_STRING
# Change public to required folder name
- az storage blob upload-batch -d "\$web" -s public --connection-string $AZ_STORAGE_CONNECTION_STRING
only:
- master
# tags:
# - docker
# - digitalocean
This stage will be the same for any other static site. One thing you have to change there is the folder where your site is.
Next, you need to obtain Azure connection string for your storage account and set it to AZ_STORAGE_CONNECTION_STRING
for CI/CD on your GitLab.
β Setting up CI/CD
- One more time go to Azure Portal and locate your storage account.
- Find Access keys on menu pane
- Copy one of your connection strings
- Go to your Gitlab instance and locate your project
- On menu pane open Settings then click to CI/CD
- Find Variables and click Expand
- Click Add Variable
- In key field write
AZ_STORAGE_CONNECTION_STRING
and to value field paste your connection string - (Optional) Check Protect Variable if you want that variable can be used only with protected branches (master is protected by default)
- Click Add Variable
Ok this is the configuration for Ci / CD so go back to your editor.
- π Commit
- β¬ Push changes to your server
- β± Wait some time until GitLab will do its job
- π Enjoy
So that's it. This is how you can deploy your page to Azure. If you have some questions you can send me an email (address is on the home page).
See you later π.
Photo by Todd Diemer on Unsplash
Originally posted on TheMayMeow Blog
Top comments (0)