【Dev Log】My Tech Blog Website

Table of Contents

Overview

Project Goal: Build a personal blog website from scratch to document and share my learning notes, development journey, and reflections. It also serves as part of my portfolio.
Tech Stack: GitHub Pages + Hugo, with lightweight customizations based on the Stack theme.
Start Date: 2025-09-14
Current Status: In progress
Learning Resources: Hugo official docs, Stack theme docs, tutorials from Bilibili and other creators online.
Repository: GitHub

Goals：
- Set up the site and enable auto-deployment
- Add a basic version of the animated character widget
Issues：
- Page not found when switching between Chinese and English
- Website tab icon not showing
Solutions:
- Used GitHub Copilot in VS Code to help write a JS file for language switching
- Tested with icons that worked on other websites to rule out image issues; the icon eventually appeared after I worked on other modules

Thoughts:
- I need to learn web programming systematically while developing, so I can understand not just how things work, but why
- GitHub Pages deploys quickly, but changes may take time to show. If the repo is updated but the site hasn’t refreshed, just wait a bit

Goals:
- Add an Update Log to the sidebar
- Upload the first blog post (Chinese version)
- Change fonts
- Use a custom cursor
Issue:
- Custom cursor not showing
Solution:
- Found in the tutorial’s comment section that the issue might be with the image. Tested with the blogger’s image and it worked
Thoughts:
- Comments under articles or videos can be very helpful—others may have already solved the same problem

Goal:
- Finish a round of basic visual improvements
Issues:
- Unsure how to apply specific fonts to different languages and code blocks
- Syntax error during auto-deployment
Solutions:
- Used Copilot’s suggestions to fix the font issue
- Syntax error was due to indentation. VS Code auto-formatted incorrectly, so I switched to Notepad to fix it
Thoughts:
- Front-end code is sensitive to indentation. Better to use Notepad or other editors instead of VS Code for certain tasks

Goals:
- Continue visual improvements
- Adjust icons and text for Color Scheme
- Add dynamic background
- Add blog view counter
Issue:
- After fixing overlapping icons, text formatting still didn’t align with other sidebar items
Notes：

Tried for quite a while without success – I’ll leave it for now and revisit it after I’ve studied more front-end

Goals:
- Continue visual improvements
- Add homepage loading animation
- Add footer animation
- Add blog post heatmap
Issues:
- Unrelated text appeared at the bottom of the site
- Tried adding animation to the icon below the avatar but it didn’t work
Solution:
- AI helped identify the issue: I used C++ style comments in custom.html, which browsers treated as text
Notes：
- Will revisit the small icon animation after learning more front-end (fixed on 9-23)
Thoughts:
- Comment syntax varies a lot between languages - important to follow the correct format strictly

Goal：
- Continue visual improvements
Issue：
- Link page card images couldn’t be resized uniformly
Notes：
- Still couldn’t solve the issue, so I’ve manually adjusted each image for now. Will come back to unify the layout after I’ve learned more front-end

Goals:
- Add RSS feeds for language-specific subscriptions
- Upgrade character widget2D to moc3 version
- Add footer animation
- Add blog post heatmap
Issue:
- Character model failed to load
Solution:
- Used browser dev tools to debug. AI helped identify a missing \ in the model folder path
Thoughts:
- Always double-check file paths
- Dev tools are super useful for debugging

Goals:
- Add a new character model and customize all parameters
Issues:
- New model failed to load
- jsDelivr didn’t load newly pushed files
Solutions:
- Dev tools showed the model was too large, so I decided to abandon it
- Learned from AI that jsDelivr caches tags and doesn’t auto-update. Used precise loading to avoid cluttering the repo
Thoughts:
- First time realizing how important file size is for web delivery. Just like managing game assets in later stages of Brotato, each programming domain has its own key concerns that you only grasp through hands-on experience

Goals:
- Add runtime statistics and article count to the bottom of the webpage
Issues:
- Chinese characters appeared as garbled text
Solutions:
- Followed AI’s suggestion to inspect the file using VS Code. Found that the encoding was incorrect under UTF-8. After adjusting the encoding, the characters displayed correctly
Thoughts:
- Opening the file in VS 2022 did not reveal any encoding issues, but VS Code clearly exposed the problem
- However, after editing in VS Code, clicking Save would automatically change the file format, causing Hugo to fail during compilation

Progress:
- Finished initial setup of the tech blog, including auto-deployment and basic visual customization
Takeaways:
- Learned the basics of static site generators (config → template → render)
- Got familiar with GitHub Pages deployment
- Didn’t study front-end formally during this phase—relied on tutorials and AI. Learned how to ask AI better questions to solve problems
Next Steps:
- Study front-end systematically and revisit unresolved issues
- Read and understand the customized parts of the code
- Keep updating the site based on my TODO list