I built a website from the toilet 🚽

Alex Pak
4 min readJun 17, 2020

--

And it’s not as 💩 as you might think.

I wanted to build a simple personal web page that would have some basic information about myself and my work, which I could later share with people.

Since I didn’t have much time, everything had to be

  • Quick
  • Simple
  • Free
  • Easily-editable
  • and visually appealing.

And so I started to think of my options.

The Obvious Solution

At first, I wanted to find a nice HTML template to use, so I went to various websites such as HTML5 UP!, and searched for something that would suit my needs.

I quickly realized that I wanted my website to be much more minimal and much easier to set up. So I thought why not write plain HTML? This shouldn’t take much time.

But, as a designer, I wanted to see something more aesthetically pleasing, and because I didn’t want to write any CSS, I decided to search for some ready-made stylesheet that would look good and wouldn’t require modifying my HTML.

Google search for “minimalist css no class names”

I found MVP.css, and it looked like it could work for me.

No class names, no frameworks, just semantic HTML, and you’re done.

The Toilet Part

While the solution I found was relatively

  • ✅ Quick
  • ✅ Simple
  • ✅ Free
  • ✅ and visually appealing

it certainly wasn’t

  • ❌ Easily-editable

at least not for me.

So what do I mean by “Easily-editable”? It’s quite simple — I wanted to be able to edit the contents of my web page and push the updates on the go, i.e. using my iPhone or iPad.

I know that there are HTML editors for iOS, and I could potentially use them but I found it very suboptimal — it wouldn’t be as convenient and as elegant as I have imagined it.

Before I came up with a solution, I made my goal even more complicated:

If I can find a way how to use my phone to edit a website, why can’t I use it to create a website?

I googled again and found only some mediocre website builders for mobile which did not meet my needs, and this was when I knew I needed to think outside the box.

I wanted to build a simple personal page — sort of an advanced résumé. Why HTML? Why even code? Why can’t I just use some text editing app, create a nice page in it, and share it online under my domain name? It appears I can.

I remembered that Notion (an app I use for note-taking and organizing my thoughts) allows opening shared documents in a browser.

Notion’s website

I quickly realized that I could create a document in Notion which would contain everything I wanted to include on my web page, make the document public with reading rights, which means anyone with the link can view it but can’t edit it, and redirect visitors from www.alexpak.work to this Notion document which is already responsive, i.e. optimized for viewing on any device be it a desktop computer or a smartphone. And the best part was that I could do it on my iPhone!

www.alexpak.work on iPad Pro and iPhone 11

It didn’t take me much time to put together a nice Notion page, include all the information I wanted, and set up a simple redirection rule in index.html of www.alexpak.work using

<meta http-equiv="refresh" content="0; URL='https://www.notion.so/Alex-Pak-97b45878f216471aabbe11bdf44f4b9d'" />

Now, whenever someone tries to access www.alexpak.work, it takes them to my Notion page, and I can make live changes from my iPhone, iPad, Mac, or any other device with an Internet browser, no matter where I am.

I also made a template out of this page that anyone can duplicate and use. The template is available here.

You can go even further with the website set-up and use custom domains, embed code, change fonts, and many other exciting things using tools like Fruiton or similar.

For those who want more 📨

I share the best things I find — articles, tools, books, videos, and other great things worth your time, in my newsletter Things Worth Sharing.

--

--

Alex Pak
Alex Pak

Written by Alex Pak

⁣Product Designer | University Lecturer⠀

No responses yet