2022-01 on Funky Si's Test

Why developers need a personal site

funkysi1701@gmail.com (funkysi1701) — Tue, 25 Jan 2022 20:00:45 +0000

Is it to share my ideas? Is it to learn new technologies and techniques? Is it to create a following? Is it to educate others? Is it to build some kind of service? Is it some combination of all of these.

History

Back when the web was young and I was first learning HTML. I hand crafted web pages, adding photos I had taken with captions. If I needed a new page I just added a new html page and linked to it from another page.

As time went on I started to learn mysql and php and my website became a hand crafted php nightmare. I also applied what I learned to help my father run the website for his camera club.

At some point I started playing with WordPress. I have had various WordPress websites or blogs over the years. WordPress is very powerful you can do so many things, install so many plugins. WordPress runs on php and mysql and as my career started to centre around the .net space, I started to want something that was similar, so I could apply things I had learnt to my own website.

This has led me to the current state of my website. I have a WordPress blog, with most of my oldest content, my newer content lives on dev.to and I have a Blazor webassembly site that uses the dev.to api to run my new website.

Blazor webassembly is great, however it has some limitations which I am starting to push against. To host this as cheaply as possible I am using Azure static web apps, so no .net backend all the website is front end. I have some Azure Functions that does the backend bits that I need.

Google and other bots are not able to find any of my pages except index, due to the way Blazor works. I have got round this by pre rendering the content using https://prerender.io/

My next difficulty is how to generate a sitemap.xml or a rss feed for my blog. This has started to make me question my architecture decisions.

I could use a hosted solution like ghost which is popular with a some of my peers. This would solve many of the problems I am currently facing but I wouldn’t be able to play with everything as it is hosted and therefore someone else’s problem. How important that is I will look at later.

Another option would be to use github pages, there are quite a few ways to publish a github page, Jekyll and Hugo appear to be the most popular. Both produce static content and both are a new for me to learn. Interestingly I could also publish either to Azure Static Web apps if github pages ends up not being suitable.

Split in two

I think my website needs to be split in two. I need a stable blog platform probably using Hugo and github pages. This is what I want to get indexed by the search engines and be the primary way people find out about what I am doing.

I then have additional sites, that I use as my playground for learning new tech. I can easily link between them and I can tweak the style so they “fit” nicely together.

I am still considering what to do with dev.to. I like that I am using it as the backend for my blog posts, and its API gives me that flexibility to display that content where I want.

Using GitHub Actions

funkysi1701@gmail.com (funkysi1701) — Mon, 10 Jan 2022 20:00:45 +0000

I’ve been running my website on Azure Static Web Apps for a while and it is pretty cool.

When you create a Static Web App on Azure you get asked for the github repo of your source code and even the branch to use.

Once you have selected this, you get asked for the type of code to deploy, mine is Blazor Web Assembly but you can use Angular, React or Vue.

You now have three variables to fill in the location in your code of the Website, the location of your Azure Functions and the output location usually wwwroot. Once you have set these three you can preview the GitHub Actions file that will be created and added to your repository.

I get something like this

name: Azure Static Web Apps CI/CD
on:
push:
branches:
- feature/tempbranch
pull_request:
types: [opened, synchronize, reopened, closed]
branches:
- feature/tempbranch
jobs:
build_and_deploy_job:
if: github.event_name == 'push' || (github.event_name == 'pull_request' && github.event.action != 'closed')
runs-on: ubuntu-latest
name: Build and Deploy Job
steps:
- uses: actions/checkout@v2
with:
submodules: true
- name: Build And Deploy
id: builddeploy
uses: Azure/static-web-apps-deploy@v1
with:
azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_<GENERATED_HOSTNAME> }}
repo_token: ${{ secrets.GITHUB_TOKEN }} # Used for Github integrations (i.e. PR comments)
action: "upload"
###### Repository/Build Configurations - These values can be configured to match your app requirements. ######
# For more information regarding Static Web App workflow configurations, please visit: https://aka.ms/swaworkflowconfig
app_location: "Client" # App source code path
api_location: "Api" # Api source code path - optional
output_location: "wwwroot" # Built app content directory - optional
###### End of Repository/Build Configurations ######
close_pull_request_job:
if: github.event_name == 'pull_request' && github.event.action == 'closed'
runs-on: ubuntu-latest
name: Close Pull Request Job
steps:
- name: Close Pull Request
id: closepullrequest
uses: Azure/static-web-apps-deploy@v1
with:
azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_<GENERATED_HOSTNAME> }}
action: "close"

This github action will run when you create a Pull Request to the branch mentioned in the file, or if you push code into the branch. This code get added into the .github/workflows/ folder and is the location that all github action workflows live.

I haven’t done much with github actions, however I have used Azure DevOps quite a bit. Over on the Azure DevOps side I have created a pipeline that deploys to a Dev environment, then a Test environment and finally a production environment.

Lets have a look at the workflow that I ended up with and with can break down how it all works. Note I am new to Github actions so if there is a better way of doing this do let me know.

name: Azure Static Web Apps
on:
push:
branches:
- main
- develop
- feature/*
jobs:
dev:
runs-on: ubuntu-latest
environment:
name: Dev
name: Dev
steps:
- uses: actions/checkout@v2
with:
submodules: true
- name: Build And Deploy
id: builddeploy
uses: Azure/static-web-apps-deploy@v1
with:
azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_<GENERATED_HOSTNAME> }}
repo_token: ${{ secrets.GITHUB_TOKEN }} # Used for Github integrations (i.e. PR comments)
action: "upload"
###### Repository/Build Configurations - These values can be configured to match your app requirements. ######
# For more information regarding Static Web App workflow configurations, please visit: https://aka.ms/swaworkflowconfig
app_location: "Blog" # App source code path
api_location: "Blog.Func" # Api source code path - optional
output_location: "wwwroot" # Built app content directory - optional
###### End of Repository/Build Configurations ######
test:
if: github.ref == 'refs/heads/develop'
runs-on: ubuntu-latest
environment:
name: Test
name: Test
steps:
- uses: actions/checkout@v2
with:
submodules: true
- name: Build And Deploy
id: builddeploy
uses: Azure/static-web-apps-deploy@v1
with:
azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_<GENERATED_HOSTNAME> }}
repo_token: ${{ secrets.GITHUB_TOKEN }} # Used for Github integrations (i.e. PR comments)
action: "upload"
###### Repository/Build Configurations - These values can be configured to match your app requirements. ######
# For more information regarding Static Web App workflow configurations, please visit: https://aka.ms/swaworkflowconfig
app_location: "Blog" # App source code path
api_location: "Blog.Func" # Api source code path - optional
output_location: "wwwroot" # Built app content directory - optional
###### End of Repository/Build Configurations ######
prod:
if: github.ref == 'refs/heads/main'
runs-on: ubuntu-latest
environment:
name: Prod
name: Prod
steps:
- uses: actions/checkout@v2
with:
submodules: true
- name: Build And Deploy
id: builddeploy
uses: Azure/static-web-apps-deploy@v1
with:
azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_<GENERATED_HOSTNAME> }}
repo_token: ${{ secrets.GITHUB_TOKEN }} # Used for Github integrations (i.e. PR comments)
action: "upload"
###### Repository/Build Configurations - These values can be configured to match your app requirements. ######
# For more information regarding Static Web App workflow configurations, please visit: https://aka.ms/swaworkflowconfig
app_location: "Blog" # App source code path
api_location: "Blog.Func" # Api source code path - optional
output_location: "wwwroot" # Built app content directory - optional
###### End of Repository/Build Configurations ######

The first thing I did was create three Azure Static Web Apps, I am using the free tier so while this is tripling my costs it is all still free! Doing this created three github action workflow files, I deleted two and edited the third, but before I deleted them I made a note of the AZURE_STATIC_WEB_APPS_API_TOKEN. If you look in your settings -> secrets for your repo you will see secrets have been created, this is the secure token that github uses to update your static web app.

While we are in settings we might as well look at environments. I created a Prod, Test and Dev environment that I was going to use in my github actions.

Environments can have various rules setup on them.

Required reviewers - this is like an approver, a user specified here must approve for the workflow to be deployed
Wait time - I didn’t use this, but it looks like a certain amount of time can be set to pause the deployment. (I assume to do some kind of manual check)
Deployment Branch - specify what branch are allowed to be deployed to what environments. I specified develop, main and feature branches could be deployed to the Dev environment, develop and main could go on Test and main could go on Prod
Environment secrets - I didn’t use this as my secrets were already created, however it looks like your secrets can be associated with a specific environment

Now that we have the static web apps setup and the environments lets look at the github action file.

First of all I removed the PR stuff and just concentrated on pushes. I wanted my workflow to be.

Push to feature branch
Deploys to Dev env
PR feature branch to develop
Once merged code gets pushed into develop
Deploys to Test env
PR develop to main
Once merged code gets pushed into main
Deploys to Prod env (after approval)

The approval on deploying to production I think is probably overkill, but I still have it setup like that for now.

My gh action has three jobs defined as dev: test: and prod: they are all the same except they have the azure_static_web_apps_api_token that is correct for their environment.

They also each have a environment defined eg

environment:
name: Prod

Lastly Test and Prod have an if test setup, if the test is false the job won’t run. Importantly it won’t fail it just won’t run.

For Prod this needs to only run on main branch so we have

if: github.ref == ‘refs/heads/main’

For Test this needs to only run on develop so

if: github.ref == ‘refs/heads/develop’

I could have a test for develop to only run on feature/* but I have allowed it to run every time.

There is loads more you can do with github actions, but hopefully this gives you a taste of some of the things you can do. I currently have a mix of Azure DevOps and github actions so I will be working on getting github actions to do more.

GitHub Actions Cheat Sheet

Want a quick-reference guide you can keep beside your keyboard? I’ve put together a one-page GitHub Actions cheat sheet covering workflow structure, triggers, runners, contexts, conditions, matrix builds, caching, artifacts, OIDC permissions, and the most common actions — all on a single A4 page.

GitHub Actions Cheat Sheet — PDF

A one-page A4 quick-reference covering workflow structure, triggers, runners, contexts, conditions, matrix builds, caching, artifacts, OIDC permissions, and the most-used actions.

£2.99 Buy Now →

2022 Goals

funkysi1701@gmail.com (funkysi1701) — Sat, 01 Jan 2022 00:00:00 +0000

Lets have a look at what my goals were for 2021. I had eight of them, lets look at them one by one.

Azure certification. In May of this year I sat and passed the Azure Fundamentals exam. I am calling this goal as achieved.
Mentoring. I didn’t do anything about working with others or mentoring, so not sure I achieved this one. However I do now work in a development team and I have been reviewing others code and having my own reviewed. We have a junior developer and I am enjoying the opportunities I have to work with him and share my wisdom.
F#. I have done zero work with F# in 2021, so this one I didn’t achieve.
Cosmos db/Mongo db. I have worked with both of these technologies in 2021. I used Cosmos the most with my website, and storing data for it. I used Mongo/Atlas for auditing for a project I did for my previous job. I wouldn’t say I was expert in either of these, but I am starting to get a flavour of non SQL Server databases. I should also note that I am using mysql a lot in my latest job, so another non SQL Server technology that I get to use on a daily basis.
Give a talk. I said last year that maybe I would make baby steps towards doing this, and I have. In the interview for my new job I gave a short presentation (I thought it was bad, but others didn’t!) I also gave a short introduction to Blazor talk which went down well.
Mandlebrot Generator. Did nothing on this one as well. I may have googled the code but that is as far as I got.
Pwned Pass Mobile App. I got an increase in users in 2021 and hence it it still running and I still pay for the API key. I am still considering what to do with it.
Time for me. Achieved this one, had plenty of time for myself.

Not a bad year but what are my goals for 2022?

Video. I have just purchased a green screen, so my first goal is to learn how to use OBS, how to light myself properly without getting horrible reflections. I have the content for my first talk, the talk I gave at work about Blazor.
Conference. Attend an in person conference. I am booked to attend Scottish Summit, however it has been postponed due to COVID-19.
Blog More. I have been neglecting writing blog posts a bit recently, so I want to do more.
Metrics. I have been recording various metrics from twitter, github etc and I would like to expand this and make it a service.
Profile Pic. My profile pic is getting a bit old, so it would be nice to update the images I use online and improve my personal brand.