Scribbles for my bad memory

You probably know:

• git diff shows unstaged changes.
• git diff --cached shows staged changes.

But how do you see all changes in one go? Just use:

git diff HEAD

Here's the breakdown:

• git diff compares the working directory to the staged index. If nothing is staged, it's the same as git diff HEAD.
• git diff --cached compares the staged index to HEAD. It's a shortcut for git diff --cached HEAD.
• git diff HEAD (or git diff <commit/branch/tag>) compares your current working directory with the specified commit.

Default 'Hide whitespace' can significantly save your time on reviewing. Many many developers have asked for this feature for a long time, but GitHub still doesn't officially support it. You don't have to wait. This small browser extension GitHub Whitespace comes to rescure!

Deploying a Flutter web application to GitHub Pages is a straightforward process, but integrating a custom domain can sometimes introduce challenges. Recently, I faced an issue where my Flutter web app, which deployed perfectly to the default GitHub Pages URL, stopped working after setting up a custom subdomain. Here's a step-by-step guide on how I resolved this issue, which might help others facing the same problem.

The Initial Setup

I had a Flutter web app named "HappyNotes" hosted on GitHub Pages. The GitHub Actions workflow used to build and deploy the app looked like this:

name: Deploy HappyNotes Web

on:
  workflow_dispatch:
  push:
    branches:
      - master

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
      - uses: actions/checkout@v4
      - uses: subosito/flutter-action@v2
        with:
          flutter-version: '3.22.x'
          channel: 'stable'

      - name: Build web
        run: |
          cp .env.production .env
          flutter config --enable-web
          flutter build web --release --base-href "/HappyNotes/"

      - name: Deploy to GitHub Pages
        uses: peaceiris/actions-gh-pages@v3
        with:
          github_token: ${{ secrets.RELEASE_TOKEN }}
          publish_dir: ./build/web

This workflow worked flawlessly with the default URL: https://shukebeta.github.io/HappyNotes.

The Problem

After setting up a custom subdomain happynotes.shukebeta.com, the app stopped working. The root cause of this issue involved multiple configuration steps that needed to be adjusted for the custom domain to work properly.

The Solution

Here’s how I resolved the issue:

1. DNS Settings

First, I ensured that the DNS settings were correctly configured:

1. DNS Provider Configuration:

   • Added a CNAME record for happynotes.shukebeta.com pointing to shukebeta.github.io. (attention: the last . after io is important!)

2. GitHub Pages Configuration

Next, I checked the GitHub Pages settings:

1. Custom Domain Setup:

   • Navigated to the repository’s settings on GitHub.
   • Under the "Pages" section, set the custom domain to happynotes.shukebeta.com.
   • Enabled "Enforce HTTPS".

3. CNAME File

To ensure GitHub Pages recognized the custom domain, a CNAME file will be needed to put into the build/web directory. I automated this step in the GitHub Actions workflow:

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
      - uses: actions/checkout@v4
      - uses: subosito/flutter-action@v2
        with:
          flutter-version: '3.22.x'
          channel: 'stable'

      - name: Build web
        run: |
          cp .env.production .env
          flutter config --enable-web
          flutter build web --release --base-href "/"

      - name: Create CNAME file
        run: echo 'happynotes.shukebeta.com' > ./build/web/CNAME

      - name: Deploy to GitHub Pages
        uses: peaceiris/actions-gh-pages@v3
        with:
          github_token: ${{ secrets.RELEASE_TOKEN }}
          publish_dir: ./build/web

4. Base URL Adjustment

Since the custom subdomain serves the app from the root, the base-href parameter is also needed to adjust:

- name: Build web
  run: |
    cp .env.production .env
    flutter config --enable-web
    flutter build web --release --base-href "/"

that's it.

Today, I created another workflow file to deploy my side project to the production environment. Here's a simple memo for what I have done.

1. Setup a new domain name on <cloudflare.com>

2. Setup a GitHub runner on the target VPS (this step is not really necessary, I can use an existing runner, but then I'll need to cope with coping built result to the target VPS )

   1. Setup the runner as a service, in the runner folder, run

      1. sudo ./svc.sh install
      2. sudo ./svc.sh start

3. Create a work-flow file in the .github/workflow folder, and set

     on:
       workflow_dispatch
   

4. Manually run the work flow and deploy the project to the target place

5. Setup that project as a systemd service so we can easily restart it in the workflow file

For your reference, here the whole workflow file, and as I mentioned before, this article helped me a lot.

name: Deploy to the production env

# Controls when the workflow will run
on:
  workflow_dispatch:

jobs:
  deploy:
    # Our previously created self-hosted runner
    runs-on: [self-hosted, linux, racknerd]

    strategy:
      matrix:
        dotnet: ["8.0.x"]

    # A sequence of tasks that will execute as part of the job
    steps:
      # Checks out repository so our job can access it
      - uses: actions/checkout@v4
      - name: Setup .NET Core SDK ${{ matrix.dotnet-version }}
        uses: actions/setup-dotnet@v4
        with:
          ref: ${{ github.event.inputs.tag }}
          dotnet-version: ${{ matrix.dotnet-version }}

      - name: Install dependencies
        run: dotnet restore

      - name: Build
        run: dotnet build --configuration Release --no-restore

      - name: Publish
        run: dotnet publish -c Release --property:PublishDir=/a-target-folder/HappyNotes.Api

      - name: Replace credentials
        run: |
          pwd
          sed -i "s/password-placeholder/${{ secrets.PRODUCTION_MYSQL_PASSWORD }}/g" /a-target-folder/HappyNotes.Api/appsettings.json
          sed -i "s/symmetric-security-key-placeholder/${{ secrets.PRODUCTION_SYMMETRIC_SECURITY_KEY }}/g" /a-target-folder/HappyNotes.Api/appsettings.json
          sed -i "s/staging-happynotes-api.dev/happynotes-api/g" /a-target-folder/HappyNotes.Api/appsettings.json

      - name: Restart the app
        run: |
          echo $XDG_RUNTIME_DIR
          export XDG_RUNTIME_DIR=/run/user/$(id -u)
          systemctl --user restart HappyNotes.Api.service

set meld as an external diff tool, it is the Old way, which is no longer preferred

First you will need to create a simple wrapper script for meld

$ cat ~/bin/git-meld
#!/usr/bin/bash
exec Meld "$2" "$5"

Please don't forget to add the directory containes Meld.exe to your PATH environment variable.
if you are using a real Linux system instead of MSYS2, you will normally need to change Meld to meld and /usr/bin/bash to /bin/bash

After that, run git config --global diff.external git-meld. Ok, you have done. Every time you run git diff, meld will be called.

In case you want to temporarily disable the behaviour, run git diff --no-ext-diff

Normally it is enough for your daily diff job. However, there is also another approach that you can always keep the default text diff behaviour for git diff while you use git difftool for a gui diff.

Another way / Preferred way

Regarding this approach,

• don't set the diff.external config, so we will not change the default diff behaviour
• run the following config instructions:

git config --global diff.tool meld
git config --global difftool.prompt false

If you want a normal text diff, run git diff as usual. If you want a GUI diff, run git difftool instead.
PS. Based on my experience, the second way is more comfortable, so it is the preferred way.