More Things I Learned While Building My Blog

In my previous post, I talked about some of the key things I learned while building my blog — from setting up Astro to discovering handy CSS tricks like margin-inline and element + element. This post continues from there, covering more insights and questions that came up during the process.

Removing Submodules from a Project

At one point, I experimented with using Git submodules. While they can be useful for splitting large projects or sharing common components, I quickly realized they can also be a headache if you're not careful. I ended up needing to remove one — both from my local directory and GitHub — and learned that it's not as simple as deleting the folder. You need to remove references using Git commands and also make sure your .gitmodules and .git/config files are clean. It was a frustrating but useful experience.

One important lesson I learned during this process was about the build workflow. I initially pushed the submodule first and then ran npm run build to generate the /dist folder, followed by another push to GitHub. The /dist folder contains the final, production-ready version of the site—the static files that get deployed. Running npm run build compiles and bundles my source code and assets into optimized files for the web.

In hindsight, it would have been much simpler to run npm run build before creating the submodule and pushing it. That way, the /dist folder would already be included in the initial push, saving me from having to push twice and making the process cleaner and less confusing.

Keeping the Footer at the Bottom of the Page

I learned why it's important to set height: 100% on both the html and body elements to keep the footer at the bottom of the page, even when there isn't much content. Without setting these heights, the footer might appear somewhere in the middle of the screen if the page is short. By ensuring the body fills the viewport height, the footer stays visually “at the bottom” as intended.

What I Know (and Don't Fully Understand) About flex: 1

One of the layout tricks I used to keep the footer at the bottom of the page was applying flex: 1 to the main content area. I know it's a shorthand for:

  • flex-grow: 1;
  • flex-shrink: 1;
  • flex-basis: 0%;

I'll be honest — I don't fully understand how all three properties work together just yet. But I do know that using flex: 1 helped the main section take up all the remaining space in the layout, pushing the footer down when the content wasn't tall enough. I plan to explore flex-grow and the rest in more detail later, but for now, it does what I need.

Grid vs Flexbox (And That One Misaligned Card)

Finally, a small but interesting detail: If you noticed that one of the blog cards sits slightly lower than the one beside it — good catch. That's just how CSS Grid behaves when rows start independently. I could've switched to Flexbox for perfect alignment, but I chose to stick with Grid for its responsive flexibility. It's a tradeoff I'm okay with for now.

Overall, building this blog taught me way more than I expected — not just about HTML and CSS, but also about Git, build workflows, and layout logic. I'm still learning, and that's the whole point of doing projects like this.

Git Conventional Commits

I learned about this while committing my markup changes.

While reviewing my Git commit messages with ChatGPT, it pointed out the use of Conventional Commits. I hadn't realized that was the name for the pattern I was already noticing. After double-checking, I confirmed that this is indeed a standard way to write commit messages.