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.
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
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:
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 😏.
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 ✌️.