New post: Get Frontend Theme Updates Using Git

src/content/blog/get-frontend-theme-updates-using-git-part-1.md

@@ -0,0 +1,108 @@
+---
+pubDatetime: 2024-10-28T14:00:00+02:00
+title: "Get Frontend Theme Updates Using Git: Part 1"
+slug: get-frontend-theme-updates-using-git-part-1
+featured: false
+draft: false
+tags:
+  - beginner
+  - git
+  - frontend
+description: When starting a project using frontend themes, you may want to incorporate new features or bug fixes. In this article, I will provide an alternative approach to effectively manage these updates.
+---
+
+Frontend **themes** and **templates** are incredibly helpful for starting a project or using as a base, letting you focus on what you need—like I’m doing with this blog! I’m using the [*Astro Paper theme*][astro-paper], which includes amazing features for a blog, so I can focus entirely on the **content** I want to share.
+
+But as time goes on, new features and *bug fixes* are added, and keeping your **site up-to-date** with the latest **updates** from the *original theme repository* is essential. In this post, I’ll show you a straightforward method to **update your blog or website** with changes from the original repository, using **Git** for a seamless upgrade.
+
+## Table of contents
+
+## Setting Up for Updates
+
+Before pulling updates from the original theme or template, let’s first set up a **backup branch** and configure the **upstream repository**. This backup keeps a safe copy of your current work, so if anything goes wrong during the update process, you can easily revert to the original version.
+
+Start by creating a backup branch to save your original changes:
+```bash
+git checkout -b backup_main
+```
+After that, return to your primary branch (`main` is used here):
+```bash
+git checkout main
+```
+Next, add the original theme’s repository as your upstream. Since I’m using Astro Paper, I’ll run the command below:
+```bash
+git remote add astro-paper https://github.com/satnaing/astro-paper.git
+```
+> You can get the repository URL on GitHub by clicking `<> Code`, then selecting the `HTTPS` tab.
+
+To verify the repository was added correctly, run this command.
+```bash
+git remote -v
+```
+Your output should look similar to this:
+
+    astro-paper     https://github.com/satnaing/astro-paper.git (fetch)
+    astro-paper     https://github.com/satnaing/astro-paper.git (push)
+    origin  [email protected]:shield-wall/erison-work.git (fetch)
+    origin  [email protected]:shield-wall/erison-work.git (push)
+
+## Pulling Commits from Upstream repository
+
+Let’s assume we’re on version `4.5.1`, with the following git history:
+
+    31a8f0b (HEAD -> build/update-astro-paper) My local changes
+    d56bc0c bump: version 4.5.0 → 4.5.1
+    b16fba8 refactor: remove duplicate [page].astro (#389)
+    c11b2a2 fix(docs): update giscus blog post (#392)
+    149264a build(deps): bump rollup from 4.21.2 to 4.22.4 (#390)
+
+To upgrade to version `4.7.0`, run the following command:
+```bash
+git pull --rebase astro-paper v4.7.0 --allow-unrelated-histories
+```
+> Note: Conflicts may occur during this process. If they do, you'll need to resolve them to complete the pull.
+
+This will pull all commits from the upstream repository and add them below your changes (commit `779c4f8`):
+
+    779c4f8 (HEAD -> build/update-astro-paper) My local changes
+    7fdebb5 (tag: v4.7.0) bump: version 4.6.0 → 4.7.0
+    7573617 feat: add archives page with configurable menu (#386)
+    58a0d25 chore: format .github markdown files with Prettier (#400)
+    cdf31a2 (tag: v4.6.0) bump: version 4.5.1 → 4.6.0
+    e1ba9c1 chore: add FUNDING.yml
+
+> **Note**: If you're a few versions behind, you can update incrementally, version by version, and resolve conflicts as they come up.
+
+Now, if everything looks good, you can push the changes to your repository with the following command:
+```bash
+git push origin main --force
+```
+Since we used `git pull --rebase`, the commit hash for `My local changes` changed from `31a8f0b` to `779c4f8`. To push these changes, we need to use the `--force` option.
+
+> Remember, we’re pulling commits from the upstream (`astro-paper`) and pushing them to our repository (`origin`).
+
+## Tips
+
+### Minimize Direct Changes to Upstream Files
+
+Try to avoid making significant changes to files that originate from the upstream repository. This will reduce conflicts when you update to newer versions. Instead, consider creating new files and using imports, for example, for CSS files or custom components.
+
+### Handling conflicts in `package-lock.json`
+
+The `package-lock.json` file often generates conflicts. In these cases, I typically discard changes in this file, then run:
+
+```bash
+npm install
+npm update
+```
+
+## Conclusion
+
+The `git pull ...` command is a straightforward way to incorporate features and bug fixes from the original repository, but it can make your Git history a bit confusing. If you're willing to invest a little more time, I’ve written a second article explaining how I manage my updates while keeping my Git history clean.
+
+Check it out: [Get Frontend Theme Updates Using Git: Part 2][second-article].
+
+If this guide helped you or if you encountered any issues, please let me know in the comments below!
+
+[astro-paper]: https://github.com/satnaing/astro-paper
+[second-article]: /posts/get-frontend-theme-updates-using-git-part-2

src/content/blog/get-frontend-theme-updates-using-git-part-2.md

@@ -0,0 +1,161 @@
+---
+pubDatetime: 2024-10-28T14:00:00+02:00
+title: "Get Frontend Theme Updates Using Git: Part 2"
+slug: get-frontend-theme-updates-using-git-part-2
+featured: true
+draft: false
+tags:
+  - git
+  - frontend
+description: In this article, I’ll share an advanced method for updating your projects based on frontend themes using Git. You'll learn how to efficiently cherry-pick commits from the upstream repository and organize your local commits for a cleaner Git history. This approach not only simplifies future updates but also enhances the overall management of your codebase. Whether you're a developer looking to streamline your workflow or simply want to keep your frontend project up to date, this guide will provide you with the necessary steps and insights.
+---
+
+Welcome to the second part of my guide on updating projects based on frontend themes. In this article, I’ll share my approach to obtaining new updates from the upstream repository.
+
+This method requires a bit more **experience** with Git, even though I’ll provide the necessary commands. It's important to **understand** what each command does, as you’ll be utilizing Git features like cherry-picking, squashing, and reordering commits.
+
+Feel free to use an IDE of your choice, such as `LazyVim`, `VSCode`, `WebStorm` and so on.
+
+## Table of contents
+
+## Convert All Commits into One
+
+The first step is to retrieve all commits from the upstream repository (`astro-paper`) and consolidate them into a single commit.
+
+Start by pulling all commits from upstream:
+```bash
+git pull --rebase astro-paper v4.5.0 --allow-unrelated-histories
+```
+After running this command, your commit history should look something like this:
+
+    d89fb48 (HEAD -> main, tag: v4.5.0) bump: version 4.4.0 → 4.5.0
+    c164b5e build(deps): upgrade dependencies (#381)
+    cbbb3eb perf: preload font and load theme script asynchronously (#380)
+    1a19eb5 build(deps): bump path-to-regexp from 6.2.2 to 6.3.0 (#379)
+    66c2664 build(deps): bump dset from 3.1.3 to 3.1.4 (#377)
+
+> Note: At this point, you MUST have only upstream commits. If you have any local changes, move them to another branch before proceeding.
+
+Now, let’s convert all commits related to astro-paper into a single commit:
+```bash
+git reset --soft $(git rev-list --max-parents=0 HEAD) \
+&& git commit --amend --no-edit
+```
+After executing these commands, your commit history will now appear as follows:
+
+    7f94f8b (HEAD -> main) Initial commit from Astro
+
+## Organize our local commits
+
+Organizing your local commits is an essential step in maintaining a clean and manageable Git history. I recommend using `rebase` in addition to `merge` to simplify your Git tree and make reordering easier, which will be necessary later.
+
+Here’s how I suggest organizing your commits:
+
+    2bedd59 (HEAD -> main) New post: Post xyz
+    cd4b199 [erison.work] new files
+    196e885 [erison.work] local changes
+    e85f005 [AstroPaper][4.5.0] Initial commit
+
+- **New Post Commits:** For each new post you create, make a separate commit. If you need to make updates, squash your changes into this commit. This way, you’ll always have one post per commit.
+- **New Files:** Use the `[erison.work] new files` commit to keep track of any new files you add to the project.
+- **Local Changes:** The `[erison.work] local changes` commit should contain all files that originate from the original repository. This approach concentrates any conflicts that may arise into this commit, making them easier to resolve.
+- **Initial Commit from AstroPaper:** For the `[AstroPaper] Initial commit`, I recommend renaming this commit to reflect its purpose and keeping all new files from the upstream repository here.
+
+### Update Your Repository from Upstream
+
+> In this section, I will use the command line, but you can also accomplish these tasks using your favorite IDE.
+
+### Cherry-Picking New Commits from Upstream
+
+Now it’s time to update our blog when a new release appears in the main repository. In this case, we’ll bump to version `4.7.0`. To do this, we’ll cherry-pick the commits between versions `4.5.0` and `4.7.0`.
+
+Run the following command:
+```bash
+git cherry-pick v4.5.0..v4.7.0
+```
+You should see several new commits on top of New post: Post xyz, similar to this:
+
+    a16d766 (HEAD -> main) bump: version 4.6.0 → 4.7.0
+    0b76073 feat: add archives page with configurable menu (#386)
+    e511fee chore: format .github markdown files with Prettier (#400)
+    7dbf18e bump: version 4.5.1 → 4.6.0
+    6842fe4 chore: add FUNDING.yml
+    e252f35 chore(template): add PR template
+    1e9e274 docs: add contributing guidelines
+    042e2de chore(templates): add issue templates
+    9b03638 docs: add code of conduct
+    2eb7700 feat: add edit post feature in blog posts (#384)
+    491e59c build(deps): bump cookie and astro (#397)
+    d16fbaa bump: version 4.5.0 → 4.5.1
+    c3fc175 refactor: remove duplicate [page].astro (#389)
+    d4fab3e fix(docs): update giscus blog post (#392)
+    df91ced build(deps): bump rollup from 4.21.2 to 4.22.4 (#390)
+    eee2dd9 fix: add missing posts sorting (#383)
+    d174b09 build(deps): bump vite from 5.4.3 to 5.4.6 (#382)
+    bf73644 New post: Post xyz
+    e88f297 [erison.work] new files
+    95d2f8e [erison.work] local changes
+    6a03576 [AstroPaper] Initial commit
+
+
+### Squash Commits into the Initial Commit
+
+Next, we need to squash all the new commits into one and then squash that with the Initial commit. Start by running:
+```bash
+git rebase -i --root
+```
+In the interactive rebase editor, you will need to squash all commits after your post. Your rebase file should look like this:
+
+    pick 6a03576 [AstroPaper] Initial commit
+    pick 95d2f8e [erison.work] local changes
+    pick e88f297 [erison.work] new files
+    pick bf73644 New post: Post xyz
+    pick d174b09 build(deps): bump vite from 5.4.3 to 5.4.6 (#382)
+    squash eee2dd9 fix: add missing posts sorting (#383)
+    squash df91ced build(deps): bump rollup from 4.21.2 to 4.22.4 (#390)
+    squash d4fab3e fix(docs): update giscus blog post (#392)
+    squash c3fc175 refactor: remove duplicate [page].astro (#389)
+    squash d16fbaa bump: version 4.5.0 → 4.5.1
+    squash 491e59c build(deps): bump cookie and astro (#397)
+    squash 2eb7700 feat: add edit post feature in blog posts (#384)
+    squash 9b03638 docs: add code of conduct
+    squash 042e2de chore(templates): add issue templates
+    squash 1e9e274 docs: add contributing guidelines
+    squash e252f35 chore(template): add PR template
+    squash 6842fe4 chore: add FUNDING.yml
+    squash 7dbf18e bump: version 4.5.1 → 4.6.0
+    squash e511fee chore: format .github markdown files with Prettier (#400)
+    squash 0b76073 feat: add archives page with configurable menu (#386)
+    squash a16d766 bump: version 4.6.0 → 4.7.0
+
+After squashing, you should see:
+
+    a5c427a (HEAD -> main) build(deps): bump vite from 5.4.3 to 5.4.6 (#382)
+    bf73644 New post: Post xyz
+    e88f297 [erison.work] new files
+    95d2f8e [erison.work] local changes
+    6a03576 [AstroPaper] Initial commit
+
+Now, squash the commit `a5c427a` with the initial one by updating the rebase file:
+
+    pick 6a03576 [AstroPaper] Initial commit
+    squash a5c427a build(deps): bump vite from 5.4.3 to 5.4.6 (#382)
+    pick 95d2f8e [erison.work] local changes
+    pick e88f297 [erison.work] new files
+    pick bf73644 New post: Post xyz
+
+After finalizing the squashing, you should have:
+
+    b49cf90 (HEAD -> main) New post: Post xyz
+    27b32d6 [erison.work] new files
+    b25d845 [erison.work] local changes
+    7cdeca2 [AstroPaper] Initial commit
+
+Now you are done! When you want to update your repository, just follow the steps outlined in this section.
+
+## Conclusion
+
+This approach requires a bit more work, but it offers the advantage of maintaining a well-organized git tree, making it easier to manage changes in the future.
+
+If this guide helped you, or if you ran into any issues, let me know in the comments below!
+