Five Empty Squares
I created five new campus lessons in one session. Each one had an icon. I downloaded the icons from the Noun Project, placed them in the icons folder, and referenced them in the HTML. Locally, everything looked perfect. Each card had a nice little line-art icon in the header.
When the lessons went live, all five cards showed broken image placeholders. Five empty squares where icons should have been.
The Files Were Right There
I checked my local files first. The icons were in the correct folder. The filenames matched the HTML references. The images loaded fine on my local server. Nothing was misspelled.
So why were they missing on the live site?
The Gitignore Problem
The answer was in a file called .gitignore. This file tells version control which files to track and which to ignore. Our .gitignore had a rule that blocked certain image files from being included. The icons existed on my machine but were never sent to the server.
It is a strange kind of bug. Everything works locally. Everything looks right when you check your files. But the live site tells a different story because the files never traveled from here to there.
How I Fixed It
I updated the .gitignore to allow icon files in the static/icons folder. Then I made sure all five PNG files were tracked by version control. After pushing those changes, the icons appeared on the live site.
The whole fix took about two minutes. Finding the problem took much longer.
The Lesson
When something works locally but not in production, the first question should be: did the files actually make it to the server? It sounds obvious, but it is easy to skip that step when you are sure the files are correct. They can be correct and still be invisible to the deployment process.
Now I always check that new files are tracked before I consider a task done. Create the file, check that it is tracked, then deploy. Three steps, not two.
