Category: GitHub

GitHub Actions 101

In this blog post series I am going to cover my journey to learning about GitHub Actions.

To get started with learning about GitHub Actions lets start by describing what they are.


So what exactly are GitHub Actions?

“GitHub Actions makes it easy to automate all your software workflows, now with world-class CI/CD. Build, test, and deploy your code right from GitHub. Make code reviews, branch management, and issue triaging work the way you want.

GitHub Actions help you automate your software development workflows in the same place you store code and collaborate on pull requests and issues. You can write individual tasks, called actions, and combine them to create a custom workflow.

You can write your own actions to use in your workflow or share the actions you build with the GitHub community

Workflows are custom automated processes that you can set up in your repository to build, test, package, release, or deploy any code project on GitHub.


To get started with learning about GitHub Actions lets start off by listing some of the best resources I have come across for getting started.

Don’t forget to checkout my YouTube Channel.



GitHub Actions Error -refusing to allow an OAuth App to create or update workflow

I have been working with VS Code and learning GitHub Actions recently and was working through a great Pluralsight course on the subject which can be found here -> https://www.pluralsight.com/courses/building-custom-github-actions

Now I had been working away and pushing code quite the thing when I came towards the very end of the course and I got this error: –

! [remote rejected] master -> master (refusing to allow an OAuth App to create or update workflow `.github/workflows/build.yml` without `workflow` scope)error: failed to push some refs to ‘https://github.com/gsuttie/auto-release-draft.git’

I was stumped for some time until I came across the answer here https://github.com/gitextensions/gitextensions/issues/4916#issuecomment-557509451 by Mike-E-wins

To fix this I regenerated a Personal Access Token from within GitHub and then went into Credential Manager within Windows and reset the password to the new personal access token and bingo – I can now push the code once more.

Big thanks for Mike adding the solution as I had tried a number of things without success.



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 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.

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.