About (this site)
This website is built a bit atypically; and while I think this bores a ton of people, hopefully others will find it interesting!
Current
Content
The repo for the site was hosted on GitHub here, but it's very out of date (assets got big). It's a generated static site, which has some nice perks:
-
I can version control the content. I can push it to GitHub, Bitbucket, and/or ZIP it and push it to Google Drive. I've lost a website or two in my time, this is something even I can't fuck up.
-
Generated sites are extremely cheap to host: putting it on S3 costs me a single-digit number of dollars a month.
-
If I have a question or edit to make, I can use command-line tools (i.e. find all instances I've used a word, feed this into a Markov chain, or somesuch).
I'm using a tool I wrote myself, (Fleaswallow). Before Fleaswallow, I used other engines:
-
Frog, by Greg Hendershott. Greg also wrote the best damn Scheme Macro tutorial ever, and I love supporting Racket.
-
Jekyll, but its original author heinously mismanaged GitHub and was a petulant little asshole about his deservedly shameful exit. I'll follow Julie's advice and not associate with him or his work if I can help it.
I've written before about various other blogging engines and approaches I've used over the years, and while I think my preference, from a user experience, is for a self-hosted out-of-the-box system like Ghost, its generally not worth the trouble of migrating at this point 😛
I use a few scripts on top of Racket to manage things:
- A simple shell script to publish the built site to AWS via CloudFront.
- A command here and there in a Makefile around the Fleaswallow commands.
- A tool to facilitate image uploads. Also in OCaml, I might find a way to integrate it with Fleaswallow. More in the README.
Hosting
Being a static site, it's comparably easy to host this in S3. I use a full AWS stack of S3, CloudFront, and Route 53. A decent guide to do this is here.
Note that if you want to add HSTS with this stack, it's a bit more cumbersome than using CloudFlare as I did before, when I was hosting this on a running nginx container. Julia Evans explains the basics of the tech here, and this post explains how to do it in the AWS stack here. If you're feeling so empowered, check your site on Mozilla Observatory.
Comments were something of A Decision, I ended up using Discourse with embedded topics. The main other contender was Talk, as part of The Coral Project. If you're looking for a purely static solution, you can also look at Staticman.
The Discourse instance is hosted on Digital Ocean, because the prices for the compute looked comparable and their interface is just a whole lot nicer.
Styles
The backbone of this aesthetic comes from Best Motherfucking Website, part of a family of sites I mentioned here.
That said, I do add images to most posts, and I'm adding styles/nav back. I am committed to keeping this site pretty simple. Avoiding JS makes your sites automatically
- Render fast, even in terrible network conditions
- No blink render
- Declarative (HTML doesn't throw an exception)
- Search-indexable
- Accessible
- Semantic + "View Source"-able
- Battery friendly
Perf
If you run a site, there's a good chance you can find something you didn't know by running it through Google's PageSpeed Insights and Google's Mobile-Friendly Test. There's also Lighthouse.
One of my favorite people in the space of site performance is Ilya Grigorik, so I highly recommend checking out his stuff.
This, as the previous section, is massive overengineering for this pathetic little site, but then you may just smile a bit wider when you look in the mirror in the morning 😄
Accessibility
I'm pretty new to this, but it's a good idea to run your sites through something like a11y, AChecker, or WAVE. a11y Project has some great resources as well.
Historical
More Pablo used to be More Paul, and it's had a lot of different iterations. None of this applies anymore, but is worth storytelling value, and/or if you have questions for your own sites.
Content
My first blog was this LiveJournal I started freshman year of college. I can't remember the login details, and don't have access to the email addresses that they pointed to. It's a shame, there were a few "followers-only" posts (and a few private ones) so some of it is Just Lost.
In college while learning computers, WordPress was taking off, so I hosted the original "More Paul" as a WordPress install on a host I can't remember. Internet Archive caught a few of the pages, though I can't say I miss them much.
I lost that account on the host after my credit card expired and all their
warnings were Spam collected. The experience of the last two blogs might be
why, in part, I really appreciate static sites (and how easy it is to git commit && git push
them to the cloud).
Hosting
After the above and I switched to static sites, I put my files into a Linode. It was probably the simplest stack I've run until I landed back on S3.
Two years ago, as containers were blowing up, I thought I'd learn them with this site. The most ridiculous thing I ever did was host this on Google Cloud (my old team!) using Kubernetes. I can't say I came out of that particularly proficient with these technologies, but it was a fun experience.
If you're not doing your DNS through Amazon, it's pretty nice to use CloudFlare, especially for easy SSL. There might be drawbacks to this, however.
Styles
I read the CSS book by the authors way back in 2006, when blue beanies
were a thing and "web standards" was still something of a fight (such was my
perception, anyways, it might have just been great branding by Zeldman and Meyer
and co.). Which is to say, I knew what CSS looked like and float
was probably the most advanced property I remembered (that, and that to center
something dynamically, was margin: 10px auto;
).
So when I was rebuilding the site, I was looking at other sources and more or less losing my mind. Has science gone too far? What is this text-rendering property? vh as a length descriptor?!?
It was all very humbling. I did some more traditional styling, archived here and here. I got those by applying this basic process:
-
Look at the default Ghost template, Casper. Good demonstration/style-test here. They kindly annotated/explained its CSS file.
-
Some text things to keep in mind, re: text on blogs.
I found this guide (part two here) a pretty great read on these topics, too.
Frog uses Bootstrap by default; I went with Foundation since I knew it better. Now I'm trying to stay off both.
In Conclusion
Use Squarespace.