Organizing My Blog — Project Structure

Published: October 1, 2025

A well-organized project helps me avoid confusion, find what I need quickly, and plan for future additions. In this post, I‘ll walk through how I set up the structure for my blog and why I think it matters.

Here‘s how I organized the project so far:

blog/
  css/
    style.css
  img/
    workstation.png
  js/
    inject.js
  partials/
    footer.html
    header.html
  posts/
    blog-structure.html
    building-a-blog.html
    starting-out.html
  about.html
  all-posts.html
  index.html
            

css/ – holds all the styles for the site. Right now it‘s just one file (style.css), but keeping it in its own folder means I can expand later without cluttering the root directory.

img/ – a folder for images. I only have one background picture right now, but the folder is ready for more as the site grows.

js/ – contains the script that injects the header and footer into each page. This way, I only have to maintain those pieces in one place.

partials/ – stores reusable snippets like the header and footer. This keeps me from repeating the same code across multiple files and makes updates much simpler.

posts/ – each blog post is its own HTML file, which keeps content separate from the rest of the site‘s structure.

about.html, all-posts.html, index.html – the main pages visitors see.

Even though some of these folders only contain a single file at the moment, organizing them this way has already paid off. It feels easier to navigate, and I don’t have to wonder where a new file should go. I also learned that reusing partials isn’t just about saving time, it makes the whole project more consistent.