Second version of my website

I took a different approach to develop the second version of my website. Instead of writing code that writes HTML pages from templates and data, I started with a simple website made of classic HTML with hyper-links. To modify things that are the same in all pages, like script and style sheet tags, I used a small script that replaces text. I also made sure that everything works with JavaScript disabled.

In the next stage I added features in the same way that I would with a userscript. Since the website was made basic in the previous stage, it is actually easy to add features this way. Another advantage is that the code is loosely coupled to this page in particular and could be used in a different website or userscript.

To make this into a SPA, I just had to add a client side script that crawls the page and redirect links to the data crawled. This goes a step further from removing pages reloads via AJAX by actually caching portions of the page. Also this script can be reused in other pages, and saves me the job of encoding the state of the SPA in the hash. Since there is a simple website underneath the script, links to sections of pages point to actual pages and not script generated content.

Source code

My web page

To design this website, I tried to make static everything that does not need to be generated by a server. A common use of PHP is to combine pieces of HTML together and create features like pagination, but since the output of those scripts is always the same, you can just run your PHP script once and serve the output statically. This allowed me to save money by using amazon S3 instead of EC2.

The website is assembled based on the directory tree. Folders become menu options and HTML files in them become page cards. A script recurse in the directory tree creating a page with an index of all the content. This page uses the index and AJAX to load and display content stored in the directory as the user clicks on options. The page uses the hash portion of the URL to store what content should be displayed allowing the back buttons and link to page sections to work. Since the index is written in HTML the page can also be indexed by search engines.

I could have use tools like AngularJS or React that automate the process. But I preferred to develop everything by hand in order to learn how those tools work under the hood.

Source code