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.

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.

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

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.

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:

assets/templates/css/style.css

assets/templates/js/script.js

assets/templates/images/image.jpgs

Now in Hugo they becomes this:

css/style.css

js/script.js

images/image.jpgs

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 😏.

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

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)

The case of the broken links

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:

    [permalinks]
      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 hello@perchsecurity.com

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