Ben Marte

Ben Marte
on July 29, 2018

What we're gonna do right here is go back, wayback...

What we're gonna do right here is go back, wayback...

In 2012 I started dabbling with CMSs and as a Front End Developer whose backend expertise is dropping tables making a site with tons of features out of the box was glorious but the hindrance of using a CMS that no one tells you that you ignore is the constant updating and how vulnerable they are to hacks.

Because of this (version control anyone? and many other reasons) I stopped using CMSs but I still had a few sites I no longer updated running on a CMS (no it’s not wordpress ๐Ÿ’ฉ), anyways recently said CMS got hacked and since I didn’t keep the CMS up to date my sites were affected by said hack ๐Ÿ˜‘.

Since I value my videogaming time, I updated the CMS hoping that would make the problem go away quickly (it didn’t ๐Ÿ™„) so now I had to invest some time to fix the issue (bye bye videogames ๐Ÿคฌ).

I download my site files, backed up the database and scanned the files with an antivirus and it was going to be impossible time consuming to fix since the site had a ton of ๐Ÿ’ฉ PHP files that were infected with malicious code. (Hackers: 1 Ben: 0)

Since my last backup was non-existant ๐Ÿคฆโ€ lost to data corruption ๐Ÿ˜‰ I was faced with deciding to either decommission the sites or find a way to fix them.

Going back

I decided I was not going to let the Hackers win but I didn’t have any usable source files, so what to do? ๐Ÿค” Enter the waybackmachine or as I call it my backup solution ๐Ÿ˜‚.

The waybackmachine had a few snapshots of my site ๐Ÿ˜ฌ so now it was a matter of finding a way to get a hold of one of the snapshots and I would have the static source files of my site. After a bit of googling I found Github user hartator (you da real MVP son ๐Ÿ™Œ) made the wayback-machine-downloader a small ruby app that can download waybackmachine snapshots.

Now I was faced with another problem do I really wanna install ๐Ÿ’ฉ Ruby to do this? NOPE. Luckily the wayback-machine-downloader has a dockerfile which means I can just run this app in a docker container and get my site files ๐Ÿ‘Œ which is what I ended up doing.


Wayback-Machine-Downloader in action

The wayback-machine-downloader worked flawlessly. With a working copy of my static site files I could get my site working again (Hackers: 1 Ben: 1), but no I already missed my gaming session invested too much time and figured lets go one step further and lets fix it for good and port the site to my preferred static site generator Hugo.

Hugo All The Things Sites

Since I already have Hugo (if you don’t read here) installed on my computer I just need to create a new Hugo site by running this command in my terminal:

hugo new site mySiteName

Once the site was generated I had to create a theme for my site which I did by running the command:

hugo new theme myThemeName

This generates all the files necessary to theme your site so now all that was left to do was getting my static files into Hugo theme partials.

Hugo Generated Theme Partials

Hugo Generated Theme Partials

So once I’m done copying over my html to the partials and run my site locally I am greeted by this:

Close But No Cigar

Close But No Cigar ๐Ÿ˜‘

Upon further inspection using my browsers dev tools โค๏ธ we can see we have a few broken asset links no big deal, since we are using the files we downloaded from the wayback-machine-downloader and copied the HTML markup into Hugo which has a different file structure than the files we downloaded we need to fix the paths to our assets in Hugo.

Browser Dev Tools

Apparently the red sea was full of console errors

After using our dev tools we know the problem is our file references in our old files they were under a assets folder, Hugo keeps all its static assets in a static folder.

So in our old files the references were something like this:


Now in Hugo they becomes this:


So I ran a search in all the files to see how bad it was and the results were a mere 1229 occurrences in 226 files ๐Ÿ˜ฎ yeah, good thing our code editor has a nifty Replace in Files function ๐Ÿ˜.

Replace in Files

VSCode Replace in Files

So after running the Replace In Files function for each of our broken assets now my site looks something like this:

Fixed Assets

Fixed assets, such cool, much wow ๐Ÿ˜Ž

So at this point I was more than happy now I had to start making content pages in Hugo and start copying the content of each page into its own .md (Markdown) file. Luckily this particular site only had 16 articles so I decided to do this manually otherwise I would’ve probably reached out to our resident Hulk genius Zach to help me come up with some clever way of accomplishing this. (Hackers: 1 Ben: 2)

After creating all my content pages I started navigating the site locally and noticed the links were not the same as they were on the old site, no bueno as I would have to make 301 redirects for every page in order to avoid affecting my Google page rank. (Hackers: 1 Ben: 1) ๐Ÿ˜‘.

I told you guys Hugo was awesome right? I was not about to do 301 redirects for 16 pages thankfully Hugo has a thing called permalinks. So by adding a permalink to my Hugo config.toml I can solve this issue with a single line of code ๐Ÿ˜ฌ all I had to do was match the permalink to the same URL pattern of YYYY/MM/DD/Title I used in the old CMS (Hackers: 1 Ben: 2) ๐Ÿ˜œ, here’s what that looks like:

      blog = "blog/:year/:month/:day/:title/"

After applying the permalink and testing everything locally the site was once again ready to go live, I used these instructions on how to host a Hugo site on Gitlab โค๏ธ and these instructions on how to use a custom domain on Gitlab Pages with CloudFlare Certificates. So now my site is out of a CMS, is version controlled in Gitlab, has CI/CD and hosted for FREE. (Hackers: 1 Ben: 3) ๐ŸŽ‰

So that was my weekend without videogames ๐Ÿ˜ญ, I hope yours was better โœŒ๏ธ.

We'd love to hear your thoughts. Find us on Twitter, LinkedIn or write in to

Next: If weโ€™re gonna get fuzzy, letโ€™s be discrete - Up close and personal with a Minesweeper solver

Share this on:

Ben Marte

Ben Marte
on July 29, 2018

Perchy Subscribe to our blog