Updating my homepage to make things as simple as possible
I used to have a very simple homepage before 2022. Below is a screenshot of it:
![](https://blog.usmanity.com/content/images/wordpress/2022/08/image-5-1024x798.png)
I liked this version long enough to keep it around for almost 4 years. But there was an itch earlier this year to redo my homepage. I felt like my homepage was kinda boring but maybe I was just feeling something else and projected it on my homepage.
So, once I started working on it again, I created a version using Next.js which was an overkill right from the start. Next.js is great for building an interactive, dynamic, and data-dependent application but not so great for a mostly static homepage.
The next.js version was deployed to Vercel, which was a move away from Github, for no reason except that it was “different”. The deployments were smooth because I wasn’t introducing anything major but at one point, someone I was chatting with mentioned they couldn’t access my homepage and I was surprised that they had even tried to go to my homepage and equally surprised they couldn’t see it. So I checked and yup, there was a 500 error being thrown. It was clearly my fault, I was unable to get the blog posts to show up which caused the next.js app to throw an error while running getServerSideProps
. So while fixing that error, I ran into the second issue that bothered me with this homepage, it was hard to develop. The experience required me to install the dependencies on any computer I was using and also have a build process (a strong reason why I used vercel).
And this is what it looked like:
![](https://blog.usmanity.com/content/images/wordpress/2022/08/Screen-Shot-2022-08-04-at-9.49.49-PM-1024x441.png)
The right side of my homepage (recent blog posts) required me to server-side render the view so it can fetch the json from my blog. This would result in 500 errors when the blog was not available, which ironically happened soon after I deployed this. Not just that, it was also pretty slow.
![](https://blog.usmanity.com/content/images/wordpress/2022/08/Screen-Shot-2022-08-04-at-9.53.38-PM-5-1024x784.png)
![](https://blog.usmanity.com/content/images/wordpress/2022/08/Screen-Shot-2022-08-04-at-9.53.29-PM-1-1024x767.png)
The mobile performance was bad to the point where sometimes on mobile, it wouldn’t even render and just spin. The PageSpeed results were a bit weird at first since I thought it’d be slow in both environments.
Static sites should have a smooth developer experience
I understand the need to using dependencies when building interaction-heavy and database-backed applications, but for static sites, start with the simplest setup. For me this setup consists of a few extensions for VS Code:
- SCSS to CSS compiler
This used to be Ritwick Dey’s Live Sass Compiler but now it’s Live Sass Compiler from Glenn Marks. - A local live server (for hot reloading mostly)
This is Ritwick Dey’s Live Server (believe it or not, I used these extensions when they were the same a long time ago) - Prettier
Use whatever setup you want for code linting and style but Prettier is my go-to for this.
That’s it, three extensions and I have a working environment for a local development setup. This doesn’t require me to use an build tool or any transpilers. My JS is pretty minimal on my homepage so I opted to just use plain JS instead of Typescript or anything else.
So this is what the current site looks like and below it are the Pagespeed scores:
![](https://blog.usmanity.com/content/images/wordpress/2022/08/image-8-1024x650.png)
Pagespeed results for my current homepage:
![](https://blog.usmanity.com/content/images/wordpress/2022/08/Screen-Shot-2022-08-18-at-1.45.54-PM-1024x732.jpg)
![](https://blog.usmanity.com/content/images/wordpress/2022/08/Screen-Shot-2022-08-18-at-1.45.44-PM-1024x733.jpg)
Can’t beat 100 score but for mobile, I’ll take a 98, not a bad score for a simple website. One change I could make to the overall load speed is to minimize or compress the json request that comes from my blog.
Comments ()