Self-hosted Site Development

December 14th, 2022

Summary since the last update:

  • Created index page and latest post page for miketekin.dev using only HTML, CSS, and JS.

  • Created responsive elements and tested them on multiple devices and browsers

  • Created a new header image

  • Used online tools to perform an analysis of the site's performance

  • Worked on optimizing for performance, readability, accessibility, and SEO

  • Worked on compressing the image to optimize load times

  • Added metadata for SEO and enhanced accessibility


My main focus since the last update has been cloning the look and functionality of this site onto miketekin.dev while seeing how much I can do with just HTML, CSS, and JS.


I'm restricting myself to using just HTML, CSS, and JS because I want the site to be lightweight, and I want to develop a solid understanding of these fundamental tools.


I'm cloning the look and functionality of this site partially because I'm fairly happy with it and partially because I believe it will be a good learning exercise. When I'm done, I should be able to leave this site behind and just use miketekin.dev.


To help me with CSS, I've been relying heavily on MDN's guides.


I'm happy to have a general structure I can now build off of, like scaffolding. But I'm eager to get more complex elements and styles added.


Since my last update, I've worked on:


Using the box model

To clone the look of miketekin.com with just HTML and CSS, I've had to learn about the box model in order to figure out spacing and layout in a way that prioritizes readability. I used an online character counter to help me figure out a reasonable line length and margin size.


Reviewed best practices for using HTML

I learned a bit about semantic HTML to avoid using divs everywhere and, in doing so, make my site more accessible for e-readers.


Inspecting the code on miketekin.com

I used devtools and the inspect element function to figure out how to replicate specific designs and styles. It helped with copying the look of the footer's social links and figuring out a way to get the header image to zoom/crop in when expanded rather than get stretched out.


Created a new header image using Dall-e

I was going to use the same image that is on miketekin.com. It was one of a small collection of images offered by google sites. But the location of the image itself is restricted, and I can't seem to get a full-resolution display of the entire thing on the screen at once to get a screenshot. So, trying to copy the lower resolution version leads to a lot of pixelation when trying to replicate the zoom/cropping effect when expanding the window/image on miketekin.dev. I tried using a reverse image search engine to find a source with a full-resolution copy but couldn't find anything close enough that I liked. So I decided to use the AI image generation software Dall-e 2.


Tested the site's performance, accessibility, and SEO scores using PageSpeed Insights

Found that all the scores could be improved, and began working on making the necessary changes. This included compressing the header image to improve load times, adding alt text to links and images to improve accessibility, and adding a meta description to improve SEO.


Next elements to add:

  • Implement a nav bar in the header

  • Add "About" section in the footer

  • Add a favicon

Stability and performance improvements:

  • Find out why specific browsers on IOS (Safari and Firefox but not Chrome) only follow certain CSS rules when they're in-line but not when linked. See if I can fix that so that I can keep all the CSS rules organized

  • Create additional sizes for image files that can be loaded depending on what device the user is viewing the page on

  • Find out why Cloudflare sometimes has a hard time reaching my Nginx server (sometimes I have to try loading the root page first to get the browser to be able to load the latest-post page, and sometimes I have to try to load the root page twice before it loads)

  • See if I can get Cloudflare to route users to a backup page on a cloud server if my home server does not respond for any reason

  • Work on making more content cacheable on Cloudflare to improve performance