Category: GitHubActions

Moving an Azure DevOps repo to use Github Actions instead

In this blog post, I am going to take an existing web application that resides in Azure DevOps and port it to build and deploy within GitHub and use GitHub Actions to build and deploy the same site to GitHub.

Here you can see I have a website in Visual Studio which is currently pointing at a repository inside Azure Devops.

And here is what it looks like inside Visual Studio 2019 with the connection to Azure DevOps.

Now I am going to remove the connection from the Azure DevOps repo by clicking on remove like so:-

When I click on remove, this removes the connection from the code to the Azure DevOps repository. Then I go to the Sync area and it now asks me where do I want to push the code to.

This time I choose to Publish to GitHub.

Give the new repository a name (for within GitHub) and press Publish

This will push the code to a new GitHub repository called AzureGlobalBootCamp2020 which you can now see below.

Now we need to create a GitHub Action so that the code is built and pushed to Azure (like it was from within Azure DevOps previously).

From within your new GitHub repo click on Actions at the top.

I then chose Setup a new workflow yourself

This will take you to a screen and create a main.yaml file.

name: Deploy ASP.NET Core app to Azure Web App

on:
  push:
    branches:
      - master
  pull_request:
    branches:
      - '*'
# CONFIGURATION
# For help, go to https://github.com/Azure/Actions
#
# 1. Set up the following secrets in your repository:
#   AZURE_WEBAPP_PUBLISH_PROFILE
#
# 2. Change these variables for your configuration:
env:
  AZURE_WEBAPP_NAME: AzureGlobalBootCamp2020     # set this to your application's name
  AZURE_WEBAPP_PACKAGE_PATH: '.'                 # set this to the path to your web app project, defaults to the repository root
  DOTNET_VERSION: '3.1.100'                      # set this to the dot net version to use

jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    steps:

      # Checkout the repo
      - uses: actions/checkout@master
      
      # Setup .NET Core SDK
      - name: Setup .NET Core
        uses: actions/setup-dotnet@v1
        with:
          dotnet-version: ${{ env.DOTNET_VERSION }} 
      
      # Run dotnet build and publish
      - name: dotnet build and publish
        run: |
          dotnet build --configuration Release
          dotnet publish -c Release -o '${{ env.AZURE_WEBAPP_PACKAGE_PATH }}/myapp' 
          
      # Deploy to Azure Web apps
      - name: 'Run Azure webapp deploy action using publish profile credentials'
        uses: azure/webapps-deploy@v2
        with: 
          app-name: ${{ env.AZURE_WEBAPP_NAME }} # Replace with your app name
          publish-profile: ${{ secrets.azureWebAppPublishProfile  }} # Define secret variable in repository settings as per action documentation
          package: '${{ env.AZURE_WEBAPP_PACKAGE_PATH }}/myapp'

# For more samples to get started with GitHub Action workflows to deploy to Azure, refer to https://github.com/Azure/actions-workflow-samples

I then pasted this into the main.yaml file and changed the following:-

AZURE_WEBAPP_NAME: AzureGlobalBootCamp2020
DOTNET_VERSION: ‘3.1.100
publish-profile: ${{ secrets.azureWebAppPublishProfile }}

The last entry above publish-profile requires you to create a new secret in GitHub under Settings -> Secrets and call it azureWebAppPublishProfile and you need to paste in the publishing profile from your Azure Web App

The above screen shows me in the Azure Portal and I’ve clicked into my Azure App Service and when I click on Get Publish Profile it downloads the content of the Publish profile which I paste into the new Secret with GitHub.

And with that we are done, GitHub will kick off the GitHub Action and built and deploy my web app changes when I publish any change to GitHub right into Azure for me.

Note
To read more on using GitHub Actions with .Net you can read more on GitHub here -> https://github.com/actions/setup-dotnet

Feel free to comment below if this is useful or if you have any feedback etc.



Hosting your blog on Github Pages using Hugo

If you want to create a new blog / or want to host your blog site then it’s worth taking a look at Hugo.

Hugo is a free static site generator.

You can install Hugo by following these steps from the docs: –
https://gohugo.io/getting-started/installing/

Once installed you can run your content locally first which means you create content and see the change with a live reload – instant feedback on your changes which means you can create content to your liking rapidly.

The content is created using markdown and if you’re looking for a nice tool to help with markdown I was recommended to take a look at stackedit.io https://stackedit.io/app#, but tools like Visual Studio Code offer this also.

I am going to assume that you have installed Hugo and have some content.

To run the website locally type hugo server

This normally shows you a screen like so:-

We can see the url to use (highlighted in red) so grab this url http://localhost:1313/ and paste it into your favourite browser and there you can see your new creation. (Keep updating the content and testing it out until your happy with all of the content.)

If your planning on hosting your site using GitHub Pages (you need a GitHub Pro licence) then you need to make a small change to the config of your Hugo site, locate the config.toml file within the root and add in the following line just before the [params] section (normally line 8 maybe 9)

publishDir = “docs”

For the cloudfamily.info project which we host on GitHub Pages our config.toml file looks like this

This file and all our code for reference can be found at https://github.com/CloudFamily/CloudFamily/

Note:-

Before we added the change to the config.toml the code would be compiled into the newly created public folder,

If your planning to host your Hugo site on Azure then come back for part 2 and I’ll show you how to host your new blog using Hugo on Azure.

I’m going to assume if you’ve gotten this far Hugo has perhaps sparked some interest, or you’re looking into moving to use GitHub Pages.

One your happy it’s time to deploy this to GitHub Pages which will host your site for as a little as $7 a month (you need GitHub Pro) – checkout pricing for more information.

Create a new repository in GitHub and upload all of your content from the root (including the docs folder, p.s. assuming you’re still pushing to GitHub Pages).

To activate GitHub Pages with the new repository you need to go to the Settings section within your new repository and make the same change as in the image below. (change the source drop-down to point to the /docs folder)

Once you have completed that step, you need to go back to the root of your repository within GitHub and look for the environments link like the image below: –

This is where the GitHub Pages are compiled and built essentially, click on this link and you’ll see the latest code being built like so: –

And once that passes, click on View deployment to see your new site in action.

Note: –

You may notice that there are some issues with the look of the site, there are 2 things to check in order to resolve.


Potential Issue 1

First, add your website URL from the browser into the top line of the config.toml file like so (changing out username and repository name for either the URL or your website name if you have a custom domain name).

baseURL = “https://<username&gt;.github.io/<repository name>/

So for the https://cloudfamily.info/ website our top line in the config.toml file looks like this:-

baseURL = “https://cloudfamily.info&#8221;

Once you make this change, go back to the command prompt or PowerShell and run the command from the root folder Hugo

This recompiles your changes, then cd into the docs folder and do the following:-

  • git add.
  • git commit -a -m “updating config.toml file”
  • git push -u origin master

Potential Issue 2

Depending on what theme you chose, you may have to add it in as a submodule, an example of this is if you chose the minimal theme then you have to run the following command from the root folder of your repo:-

$ git submodule add https://github.com/calintat/minimal.git themes/minimal
$ git submodule init
$ git submodule update

Once you make this change, go back to the command prompt or PowerShell and run the command from the root folder Hugo

This recompiles your changes, then cd into the docs folder and do the following:-

  • git add.
  • git commit -a -m “updating config.toml file”
  • git push -u origin master

That should be you up and running, just remember the following if you make changes and want them to be compiled and ran on your GitHub Pages: –

Go to the root folder within the command prompt or PowerShell

  • Type Hugo to compile
  • Change dir into the Docs folder and then
  • git add.
  • git commit -a -m “updating config.toml file”
  • git push -u origin master

Note – many thanks to people who have pointed me in the direction of Netlify and other tools, I’ll look at Netlify next and the next post will cover hosting a Hugo site in Azure.

Please get in touch if you have issues with Hugo.



Using GitHub Actions to deploy a .Net Web App

So I wanted to take a look into GitHub Action’s and deploy a .Net Web App, this is my first real look into them and will be blogging about them a lot more in the future, below are the steps I took to do this.

  • Create a basic .Net MVC Web App using .Net Core 3.1
  • Run the app and make sure all is working as expected.
  • Deploy this to Azure web app to Azure and check it runs ok.
  • I then go into my Resource Group, locate the app service and from the click on ‘Get publish profile‘ – download the file and keep handy.
  • Then I added the code to GitHub in a new repo which you can find here: – https://github.com/gsuttie/GHActionsWebApp1
  • Next, I need to create a secret from within GitHub, so once you have your code in a new repository within Github go click on Settings and then Security and click Add a new secret, call it azureWebAppPublishProfile if you want to use the YAML below.
  • Then I click on Actions and create my first workflow, I chose, Setup a workflow yourself.
  • And then from here – https://github.com/actions/setup-dotnet I used the YAML and pasted in so that my main.yaml file looks like this
name: Deploy ASP.NET Core app to Azure Web App

on:
  push:
    branches:
      - master
  pull_request:
    branches:
      - '*'
# CONFIGURATION
# For help, go to https://github.com/Azure/Actions
#
# 1. Set up the following secrets in your repository:
#   AZURE_WEBAPP_PUBLISH_PROFILE
#
# 2. Change these variables for your configuration:
env:
  AZURE_WEBAPP_NAME: dummywebsite     # set this to your application's name
  AZURE_WEBAPP_PACKAGE_PATH: '.'      # set this to the path to your web app project, defaults to the repository root
  DOTNET_VERSION: '3.1.100'           # set this to the dot net version to use

jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    steps:

      # Checkout the repo
      - uses: actions/checkout@master
      
      # Setup .NET Core SDK
      - name: Setup .NET Core
        uses: actions/setup-dotnet@v1
        with:
          dotnet-version: ${{ env.DOTNET_VERSION }} 
      
      # Run dotnet build and publish
      - name: dotnet build and publish
        run: |
          dotnet build --configuration Release
          dotnet publish -c Release -o '${{ env.AZURE_WEBAPP_PACKAGE_PATH }}/myapp' 
          
      # Deploy to Azure Web apps
      - name: 'Run Azure webapp deploy action using publish profile credentials'
        uses: azure/webapps-deploy@v2
        with: 
          app-name: ${{ env.AZURE_WEBAPP_NAME }} # Replace with your app name
          publish-profile: ${{ secrets.azureWebAppPublishProfile }} # Define secret variable in repository settings as per action documentation
          package: '${{ env.AZURE_WEBAPP_PACKAGE_PATH }}/myapp'

# For more samples to get started with GitHub Action workflows to deploy to Azure, refer to https://github.com/Azure/actions-workflow-samples
  • If you plan to use the Yaml from the above, mind and change the one setting which is AZURE_WEBAPP_NAME – I set this to dummywebsite so rename that to whatever your app service is called.
  • Save that, and then start your new GitHub workflow.
  • If all is well then your good to go, push a change to the web app and it should build and deploy automatically using your new GitHub Action.