Website work
Friday, September 16, 2022
Whew.
Website Maintence.
I’m writing this as I have decided to overhaul this website thoroughly. After months of not posing any new content, I realized the bar I had set was too high when making posts. I was writing raw HTML, and it took lots of tedious work to ensure all posts had consistent styling and feel. I began to cut corners, not even commenting on image sets I took, and I felt this defeated the purpose of having the webpage anyway.
I want this webpage to be a throwback to earlier 2000s blog-style webpages with more of a journal feel, almost as if someone added photos to Zen and the Art of Motorcycle Maintenance.
The rest of this post is a technical deep dive into modern website design.
- HTML
- CSS
- JavaScript
The basics. HTML (Hypertext Markup Language) makes up the content and organization of every webpage on the internet. CSS (Cascading Style Sheets) Makes all your content pretty. JavaScript (ECMA Script) makes your content responsive. With my knowledge of the basics, I wrote the original webpage. This was great for simplicity, and the page worked great, but there were some severe issues with maintaining this. None of these features has built-in templates. This means one page could have a different font, color background, or a typo in the footer, and it would require a proof read. Also, if I decided to add a link to the footer of every page, then it would be a ton of edits. This was not sustainable.
So what is a developer to do? The standard solution is to leverage the power of JavaScript to your advantage. This means using a library or framework that can insert content into a pre-formatted page using document object model manipulation (editing the webpage while you look at it). But this has huge disadvantages. Mainly it doesn’t solve the issue of less development time spent on every page. Most JavaScript frameworks add hundreds, if not thousands, of features as they all compete against each other as one company adopts them and decides it is easier to extend rather than revise.
An example, the most common one is the React JavaScript framework developed at Facebook. This framework was designed to replace Zuckerburg’s aging PHP server-based rendering model in his college dorm room. React was made open source to hundreds of large-scale businesses that could have their input on the design and modify it for their needs. This sounds great, but if you haven’t realized, this isn’t a social media page.
This blog more closely follows the initially intended design of the internet. The internet is a loaded term, so let me be specific, Hypertext Transfer Protocol. This protocol, used to display webpages in your browser, was designed to share documents between universities. In essence, static pages. No likes, videos, or shitty Netflix specials. All of that technology was an afterthought.
Therefore, the solution is a static site generator. The newest of which is HUGO. HUGO builds off Google’s lust for a compiled, statically typed, hardware accelerated replacement for the ancient C++. GO is computer code designed to perform like a frat boy after four lines of cocaine, and it can smash like three folding tables simultaneously. HUGO leverages this to generate the entire website you see in under 16 milliseconds!
The base content for HUGO is also written in Markdown, a fantastic formatting language a toddler could read.
This is a paragraph! It has some information in it.
# This is a title
(this is a link)[https://harry.technology/]
Wow look how easy that post was, glad I didn't waste a whole bunch of time building this system!
This forms the base of this entire webpage, then using HUGO’s templating code and the HTML I already wrote, the transfer only took 28 hours of straight work!
So, I wasted 28 hours to save 5 mins every time I posted. Was it worth it? Absolutely.
Here is a photo of Jasper for your paitence:
