Blog Setup - hokkaido-milk-tea

Setup#

This blog is based on the template fuwari by saicaca. I forked the repo and created a new branch called personal-blog where all my changes go. I can keep the main branch of the fork synced with the upstream fuwari repo and merge changes into my personal-blog branch as needed. This process is detailed below.

Hosting#

This blog lives here in the repo hokkaido-milk-tea/hokkaido-milk-tea.github.io. The repo name lets you host it via GitHub Pages and it updates based on an action (deploy.yml) to build and deploy any time I git push to my personal-blog branch. The setup is outlined on this Astro docs page.

There’s 2 things I had to update that were easy to miss in order to get a successful build and deployment:

You need to update deploy.yml with the correct branch name so it knows to trigger every time you do git push.

name: Deploy to GitHub Pages

on:
# Trigger the workflow every time you push to the `main` branch
# Using a different branch name? Replace `main` with your branch’s name
push:
    branches: [ personal-blog ]
# Allows you to run this workflow manually from the Actions tab on GitHub.
workflow_dispatch:

You also need to update the GitHub Pages environment settings by specifying the deployment branch under Settings > Environments > github-pages. Limit it to the branch where you’re making changes.

Syncing the Fork#

Configure Remote#

If the upstream repo isn’t set up as a remote, add it as a remote.

# view remotes
git remote -v

# add saicaca/fuwari repo as a remote if it isn't
git remote add upstream https://github.com/saicaca/fuwari.git

Example:

$ git remote
origin

$ git remote add upstream https://github.com/saicaca/fuwari.git
origin
upstream

$ git remote -v
origin  https://github.com/hokkaido-milk-tea/hokkaido-milk-tea.github.io.git (fetch)
origin  https://github.com/hokkaido-milk-tea/hokkaido-milk-tea.github.io.git (push)
upstream        https://github.com/saicaca/fuwari.git (fetch)
upstream        https://github.com/saicaca/fuwari.git (push)

Sync Fork#

Fetch the upstream changes.

# view branches
git branch -a

# get changes made to fuwari
git fetch upstream

# merge changes from the `main` branch of fuwari
git merge upstream/main

# push changes to `main` branch of the fork
git push

Example:

$ git branch -a
* main
  personal-blog
  remotes/origin/HEAD -> origin/main
  remotes/origin/main
  remotes/origin/personal-blog

$ git fetch upstream
remote: Enumerating objects: 46, done.
remote: Counting objects: 100% (46/46), done.
remote: Compressing objects: 100% (20/20), done.
remote: Total 30 (delta 24), reused 13 (delta 9), pack-reused 0
Unpacking objects: 100% (30/30), 8.33 KiB | 85.00 KiB/s, done.
From https://github.com/saicaca/fuwari
 * [new branch]      main       -> upstream/main
 * [new branch]      toc        -> upstream/toc

$ git merge upstream/main
Updating 31bb0d5..8b8a765
Fast-forward
 README.md                          |   2 +-
 astro.config.mjs                   |   3 +
 package.json                       |   6 +-
 pnpm-lock.yaml                     | 174 ++++++++++++++++++++++++++++++-------
 src/components/GlobalStyles.astro  |  10 +++
 src/components/Navbar.astro        |  43 +++++----
 src/components/SearchPanel.vue     | 100 +++++++++++++++++++++
 src/components/misc/Markdown.astro |  13 ++-
 src/layouts/Layout.astro           |  21 +++--
 src/pages/posts/[...slug].astro    |   1 +
 10 files changed, 309 insertions(+), 64 deletions(-)
 create mode 100644 src/components/SearchPanel.vue

$ git push
Enumerating objects: 46, done.
Counting objects: 100% (46/46), done.
Delta compression using up to 12 threads
Compressing objects: 100% (29/29), done.
Writing objects: 100% (30/30), 8.45 KiB | 2.11 MiB/s, done.
Total 30 (delta 24), reused 0 (delta 0), pack-reused 0
remote: Resolving deltas: 100% (24/24), completed with 14 local objects.
To https://github.com/hokkaido-milk-tea/hokkaido-milk-tea.github.io.git
   31bb0d5..8b8a765  main -> main

Merge Changes#

Now switch to the personal-blog branch and merge in the changes from the newly synced main branch of the fork.

# switch branches
git checkout personal-blog

# merge changes from `main` into `personal-blog`
git merge main

# review changes as needed, then push to origin
git push

Example:

$ git checkout personal-blog
Switched to branch 'personal-blog'
Your branch is ahead of 'origin/personal-blog' by 4 commits.
  (use "git push" to publish your local commits)

$ git merge main
Auto-merging astro.config.mjs
Merge made by the 'ort' strategy.
 README.md                          |   2 +-
 astro.config.mjs                   |   3 +
 package.json                       |   6 +-
 pnpm-lock.yaml                     | 174 ++++++++++++++++++++++++++++++-------
 src/components/GlobalStyles.astro  |  10 +++
 src/components/Navbar.astro        |  43 +++++----
 src/components/SearchPanel.vue     | 100 +++++++++++++++++++++
 src/components/misc/Markdown.astro |  13 ++-
 src/layouts/Layout.astro           |  21 +++--
 src/pages/posts/[...slug].astro    |   1 +
 10 files changed, 309 insertions(+), 64 deletions(-)
 create mode 100644 src/components/SearchPanel.vue

$ git push
Enumerating objects: 32, done.
Counting objects: 100% (29/29), done.
Delta compression using up to 12 threads
Compressing objects: 100% (19/19), done.
Writing objects: 100% (20/20), 1.82 MiB | 1.90 MiB/s, done.
Total 20 (delta 11), reused 0 (delta 0), pack-reused 0
remote: Resolving deltas: 100% (11/11), completed with 6 local objects.
To https://github.com/hokkaido-milk-tea/hokkaido-milk-tea.github.io.git
   e79b063..565cdc4  personal-blog -> personal-blog

References#

GitHub - Syncing a fork

freeCodeCamp - Git Switch Branch

freeCodeCamp - How to Sync Your Fork with the Original Git Repository