Skip to main content

Setting Up This Site

After listening to Podcast.__init__ Episode 20 on static site generators, I decided to switch how this is run. I don’t really know why I picked Nikola over Pelican, but something about this felt right. This site runs on an Amazon EC2 instance, and used to be served by Apache. But after reading the nginx chapter in The Architecture of Open Source Applications this week, I realized nginx is totally awesome and I want to play around with it.

Editing the configuration of Nikola proved to be pretty easy and straight forward. The CSS might still warrant some tweaking, but mostly all I did was remove author information from the posts, since it will only just be me, and I didn’t like the visual clutter. The title bothered me. Yes just the simple “Jesquik” up there. If you resize the window, at certain widths the hamburger menu on the left initially overlapped the Jesquik. At 48em the masthead title switches to being centered. To get around the overlapping problem in the title, I bumped up the margin-left to 3em. I don’t love the indented title, but I have yet to figure out how to sort out collisions with the hamburger menu in a css/template/html way. I do really like how well the Lanyon them handles resizing. Coming from a background of writing html in px and percentages, using em and rem now seems way more appealing and versatile.

Upcoming I still have to figure out how to handle images, the reStructedtext markup for them seems straight forward enough, as does the actual linking to them. Where to host the images though seems like a more nuanced issue, not from a practical standpoint, but having to weigh the pros and cons of hosting them locally on this instance or from an S3 bucket.

Learning how linear gradients work in css was a fascinating tangent. The hamburger menu is done with a stack of linear gradients. This is the relevant line of css:

background-image: linear-gradient(to bottom, #555, #555 20%, #fff 20%, #fff 40%, #555 40%, #555 60%, #fff 60%, #fff 80%, #555 80%, #555 100%);

I found that rather neat, more so than the code block specification in reStructuredText. The white space seems so fiddily important, and the documentation seems lacking of sufficient examples. Much like how the documentation on the links only lists single word links (the wikipedia page shows multiple word link text examples), and doesn’t show anything about escaping special characters in link text. That’s why only the “Episode 20” above linked, rather than the whole “Podcast.__init__ Episode 20”.

Altogether, this was a nice evening project.