My First Website (A look back at what I did at the start of the decade)
Tags: webdev, showdev
Published: 2019-11-27 03:18:20

At the start of the year I was planning to move across the country and needed to get rid of things. One of those things was my old HP Microserver that I used as a NAS. I couldn't remember putting anything important on it that I wanted to keep, so sent it with my parents to my brother so that he could put it to use. Him being the amazing person he is, checked to see what was on it before formatting it and found some of my personal files from 2014. The other night we finally got all of those files across the country and back to me, and spent some time looking through them together.

![Picture of my microserver in my home network "rack" when I first moved out of home](https://i.imgur.com/9WqNtF9.jpg)

Among them is the code from my first website. Unfortunately I didn't know how to use version control back then (though I had installed mercurial server and did have a Bitbucket account), so the revision history has been lost. Fortunately though, I did keep some screenshots!

Time for some archaeology!

I started playing with web hosting around 2009 while I was in high school. I had an old Dell desktop, that one of the computer technicians at school gave me, sitting in the corner of my bedroom that I used as my server. A network cable ran out of my bedroom door, across the doorway for the bathroom and plugged in to a switch at the family computer desk that I had bought.

I set it up a WAMP server (Windows, Apache, MySQL and PHP), configured our router to run DynDNS and started hosting a proxy on it, so I could get around the school firewall. The IT Department knew I was doing this, and never blocked it, but they did talk to me about it and tell me that I shouldn't be bypassing the school's proxy.

In 2010 I got bored of just running proxies and wanted to build my own website, so I started by looking at different websites that existed and drawing designs that I liked. I then wrote all the HTML and CSS for the layout in Notepad++, relying on search engines to help me learn the syntax. I didn't want to have to update HTML files every time so I built my own CMS system, including the login screen, myself. This was a major security mistake, as one of my friends was able to deface my website within a week.

![My desk at the start of 2011](https://i.imgur.com/n2eGtKn.png)

In 2011 I realized I didn't want to have to manage my own web server, so I bought a domain and paid for some web hosting with my first ever debit card. And with that I decided to do a complete website redesign. And I have pictures of it!

I won't explain each image, but you can see the progression in the images below:

![](https://i.imgur.com/4cf0RO5.png)
![](https://i.imgur.com/NF25TYi.png)
![](https://i.imgur.com/O5CgvOo.png)
![](https://i.imgur.com/yYg4Uv3.png)
![](https://i.imgur.com/1OiiYqe.png)
![](https://i.imgur.com/4lKQsru.png)
![](https://i.imgur.com/fZwAG5Y.png)
![](https://i.imgur.com/VSUlK5s.png)

I also kept my CMS system and started updating it to use a database in the backend instead of the flat files I had been using. This was great for making it easier to add new pages, but as a result I lost all of the content from my website, because I never took a database backup.

My home server ended up becoming a minecraft server for me and my friends, and I ended up working on some other projects (including building a job management system). I will have to do a deep dive on some of those projects, and put the code into public source control so that others can learn from my mistakes.

Footnote: If any one of the ten other active CaL members from 2010-2012 reads this, hi!