How to host a portfolio website for $1.03 a year.

01/20/2023

In the fast moving world of web design, it’s always something of a pleasure when one comes across a website that is from another era. Most of the examples I’ve found are personal sites, belonging to early adopters or educators, who have kept the infrastructure of their humble online presence the same for decades. As I went about building my personal website, I wanted to build something with an emphasis on design, low cost, and usability.

Like these early websites, I wanted to build a portfolio website that would stand the test of time. I therefore approached this project with two criteria in mind — being as cheap to host as possible and infinitely customizable with little to no coding. 

Today, there are countless services offering easy website design, but practically all of them charge a subscription fee. While $9 might not seem like much, it quickly adds up over time.  

At first, I was quite taken by two of Automattic’s free WordPress themes -- 2020 and 2021. I loved the subtle inspiration that it drew from public signage personified by the Inter font, and the emphasis that the designs placed on content. However, as I tried to lay out my work, I quickly ran into roadblocks that would require third party plugins or quibbles which required playing with CSS. While these problems were annoying if manageable, I found that WordPress ran very slowly on Google Cloud’s free e2 Micro Instance. I still love the Inter font that it came with, and I used Inter fHowever, third party plugins such as Elementor and WPBakery.

Eventually, I settled on an entirely different solution — a WYSIWYG website editor called Sparkle. Sparkle is something of a spiritual successor to iWeb, with an interface that draws its inspiration from desktop publishing and layout software. It is extremely easy and straightforward to use, and has come to provide many useful features. Best of all, Sparkle offers a license for every kind of need and use case. They offer a lifetime license for each version they release, as well as discounts if you’re looking to upgrade. They also have a monthly and yearly subscriptions if you want every version as they come out.

Unfortunately, it’s Sparkle’s emphasis on immediacy and print-centric design which ultimately hampers its usability. There is no element library like in WordPress, which means that everything has to be manually sized and configured. For this reason, it’s very easy to make mistakes, resulting in inconsistent styling throughout your website. Interestingly, Sparkle has the same text style manager as Apple’s Pages, which quickly becomes unwieldy when applied to web design. Unlike other web editors, there is no parent-child style hierarchy, which means that you have to create a new style for every single text variable. Want bold text? That’s a new style. How about a different color? Why that’s a new style. How about a different line height? You guessed it, new style. Finally, and perhaps most frustrating of all, there is no grid system. This means that every text box has to be manually laid out for both mobile and desktop. In fairness, Sparkle does a good job scaling, but small changes on one layout view can easily break changes in the other.

With all this said, do I still recommend Sparkle? Absolutely. I think where Sparkle really shines is building something fast and usable, like a landing page or a proof of concept. If you are looking to skip the step between say Figma, Sketch, or PhotoShop and just get something you can throw on the web, then Sparkle is a stunningly good option. It is also a great choice if you have a small business with a minimalist web presence, like a restaurant, rental property, or cleaning company. Sparkle has built in payment processing, as well as support for various kinds of bookings. These options are free and very easy to configure.

If I was to do this project all over again, I would probably take a more conventional design route, starting with a mockup before building my website around a fancy new headless CMS. If money was no object, I would love to have built my website in Webflow, which I consider to be the best mix of design. However, I would miss the extra

Reimagined from the ground up, the latest version of Waikiki builds on what made the original so great. This new version offers improved mobile support, a new menu system, and a minimalist design. Fonts have been greatly streamlined as well, improving consistency and legibility across the website.  Other notable features and updates include:

- Intelligent dark mode theme.

- New sans-serif font for Chinese text.

- Improved spacing consistency between elements.

Waikiki - 0.1.3a

5/19/21

Waikiki - 0.1.2a

3/11/21

⁃ Reworked homepage.

⁃ Streamlined Portfolio pages.

⁃ Removed Portfolio logos and banners.

⁃ Moved all Portfolio pages into folder.

⁃ Made the default Serif font on mobile just a bit bigger.

⁃ Removed excess fonts.

Waikiki - 0.1.1a

3/2/21

⁃ Fixed mobile private policy banner.

⁃ Sizing fixes.

⁃ Updated SEO descriptions.

⁃ Added 孔 favicon.

Waikiki - 0.1

3/1/21

⁃ Official soft launch.

⁃ Introduced desktop and mobile interfaces.

⁃ Normalized cross-platform text styles and sizes.

⁃ Populated design and copy content.

⁃ Created homepage.

Back to full change log →

Previous change log →

First change log →