Why Won’t My Images Load?!

Struggling with Cache Purging and My Journey as a Web Developer

by Subhomoy Haldar

Reading time: 6 minutes

TL;DR

Too Long; Didn’t Read
Only applicable if you use Cloudflare to get free SSL certificates.
It’s because Cloudflare caches your files aggressively.
Be patient and purge the cache a few dozen times. You’ll be fine.
I also describe (at length) my process of finding Hugo and designing my website twice.

Introduction

After finishing my HTML templates, I ported them to Hugo templates. I checked that all assets were loading, all images showed up, all fonts looked good, and script files were loaded correctly. I was ready to push the code to the remote branch. What I hadn’t realised was that I would end up spending over an hour trying to figure out why the heck were the images not loading?

My Backstory With Web Development

I Don’t Like WordPress On Shared Hosting

Last year I realised that I finally needed to start writing. I’m interested in academia. So writing would probably be the thing that I end up doing most. I decided to start writing to gain practice and eventually get good enough to start writing papers. I tried WordPress hosting (like every other beginner). I quickly realised that no matter how much I try to optimize my website, shared hosting won’t do. I was getting TTFB (Time to First Byte) of over 2 seconds. Abominable!

I gave up on WordPress, moved to a different domain registrar, and turned my attention towards Static Website Hosting. I’ve heard good things about it. I had experimented with Jekyll and GitHub Pages. Although I didn’t like Jekyll, I really liked the super fast load times. After some searching, I came to know about Hugo ⟨hugo⟩ - a static website generator written in GoLang. It is definitely the fastest and easiest to use in my limited experience. Note that I do not like JavaScript on the server side. So I never seriously considered Gatsby, Nuxt, or other JS/TS or React based frameworks. Truth be told, I probably never will.

I followed a series of tutorials to help me get up and running with Hugo. It was a bit difficult to understand at first, but the structure made more sense the more I practised. And eventually I ended up appreciating the thought put into Hugo. So finally I built my website (blog) using Hugo.

Not Bad For A Beginner

I followed the tutorial by Zachary W. Betz ⟨hugo-tutorial⟩ to create a Hugo blog from scratch. I copied everything he did initially. Once the final result was functional, I decided to put my own spin on it. I had done front-end development before but that’s limited to plain HTML5, CSS3 and vanilla JS. So that’s what I used in my updated website as well. I did rely on Bootstrap because the tutorial used it to a small extent. I went ahead and used it to gradually incorporate my own style and structure. I came up with a decent looking result that I deployed and kept around until June 2020. At one point, I even added support for dark mode. It took me a couple of days, but the process was relatively easy.

One thing that I should have remembered was that Cloudflare (which provides free SSL for low volume websites ⟨cloudflare-free⟩) does aggressive caching. So it will take at least a dozen tries to finally see the effect your CSS.

Cut To The Present

I Redesigned My Website

I was satisfied with the design that I had come up with. However, the addition of dark mode later on had caused the structure to become a bit convoluted. I was also relying too much on scripting. So I went full out on designing good basic HTML templates for my website. Why start with HTML and not directly with Hugo templates? Here are some reasons why:

  1. I wanted to completely decouple the design of my website from the functional aspect. Or at least as much as I possibly could. Everything ultimately boils down to mark-up for content and rules for rendering said content.
  2. The page load times were on the lower side, but the time to interactive values were still higher than I would have liked. This was due to additional scripts that every page had to run.
  3. HTML+CSS (and a little bit of vanilla JS) ensured that I had a minimum viable product that I could then proceed to port into Hugo.
  4. Hugo templates are essentially HTML files with embedded logic and placeholders. If I could get one page set up correctly, I could get the other pages working relatively painlessly.
  5. I ditched Bootstrap completely and was going to do everything with plain HTML5+CSS3+JS. And I also added support for switching between light and dark themes from the start. ⟨dark-theme-day⟩

It would have been difficult starting off with Hugo and satisfying so many requirements. So I started small, just the markup and general page structure in HTML. Then I gradually added CSS styling. Eventually, when the UI was mostly ready, I added only the least amount of JavaScript needed to make the website functional (with the expand/collapse and the switch theme buttons).

Hu - we - Go!

I looked at the directory structure that I had before. I decided to keep only those parts that were relevant for the new template. Fortunately I hadn’t changed much, so the process was relatively painless. Gradually I added back all the functionality that I had before. The code I wrote this time was cleaner and I was better informed about how Hugo works.

Happy with my work, I replaced the code in my old repository (after backing it up). It checked the updated code into the version control. Pushed the commits to the remote and waited for the changes to appear. After a minute or two, I refreshed the webpage and I was elated. It worked!

Or at least I thought I did.

You Know Where This Is Going

The initial rush of excitement wore off as I realised that the scripts weren’t loaded. The navigation buttons were not expanding, the theme was not switching. Then I checked the blog posts: the images were not loaded. Okay, so not everything is working.

I changed the paths to the resources. Moved them around from one directory to another. Moved them again. Changed more paths. After enough tinkering, the scripts were loaded. And a very strange thing happened: the images were loading on one of the blog posts and not the others. 🙄

That’s functionally impossible. All posts have the same templates. They should all work, or not work at all. It was then that I remembered: I use Cloudflare for caching my website. I logged in to my dashboard and purged the cache a couple of times. Nothing happened. I did it again. Nothing. I was starting to feel flustered. So I walked around for five minutes. Then I came back and kept purging and refreshing.

Eventually, everything loaded correctly.

Concluding Thoughts

It can sometimes get frustrating when everything works on localhost but not in production. One must realise that sometimes it’s genuinely not your fault; it’s the system’s fault. The best thing to do in such scenarios is to be patient, yet persistent. After the 14th or 15th time, when something does work perfectly and you realise you’re not going insane, it really feels euphoric.

The whole experience was worth it though. It was like the final hurdle before crossing the finish line; the line being a fully operational static website. This made the final payoff that much sweeter.

Resources

  1. Hugo↗ - A fast static website generator written in GoLang. ⟨hugo⤴⟩
  2. Make a Hugo blog from scratch↗ - A tutorial I highly recommend for anyone looking to get started and hit the ground running with Hugo. ⟨hugo-tutorial⤴⟩
  3. Cloudflare Pricing↗ - The free plan is more than enough for ordinary users. ⟨cloudflare-free⤴⟩
  4. Dark theme in a day↗ - The tutorial I followed to add the dark theme to my website. It was easier this time because I was starting from scratch. ⟨dark-theme-day⤴⟩

Thoughts on this post?

If you have something to say about this post like expressing thanks, pointing out errors or seeking further clarification, feel free to contact me!

I try to reply within a week. You can find other ways to contact me in the contact page.

Tags