I have the privilege of maintaining the archives for The Sockdolager, an online zine of speculative fiction. Although the zine is currently on publishing hiatus, I feel very strongly about keeping the lights on for the authors who'd done me the honor of letting me publish their work. As convenient as Squarespace was for helping the zine get off the ground quickly, it is quite expensive, and it had become unwieldy for managing the nearly 100 stories of the zine's catalog.

For a bunch of reasons too boring to get into, I settled on the Ghost blog engine, which I planned to host on a Linode server. For our purposes, this costs something like a quarter of what Squarespace hosting goes for.

Skills learned or brushed up on:

DNS registrar migration and configuration
Deploying a Linode server
Installing and configuring Ghost

I had hoped to have the migration done in January 2019. It was actually done in May. But it's done, and here's how that happened.

The database

I had a secret weapon in this project—ever since The Sockdolager switched from a Gmail inbox to an Airtable-hosted database for taking submissions, I'd populated database with the full text and metadata of every story ever published in The Sockdolager.

This was easier than it might have been. Part of the workflow for the ebook authoring process involved creating text files for each individual story, containing the bare HTML source. These files had always been considered the canonical “master” text from which all of the publication targets were eventually derived, and were perfect for populating the database.

Thanks to that rare piece of forethought on my part, I already had a structured representation of all the text the site would host, but in order to be truly useful for site migration purposes, the database needed to account for a subtly important piece of information that it hadn't tracked before: the canonical URL of each story. So just before the Squarespace site went down, I made sure to click through the entire site and record each story’s URL, because I knew I'd need them later, to make sure the new site would still correctly serve any existing links floating around the internet.

Skills learned or brushed up on:

general thinking about databases, publication process, and data sanitation

The design

Once I was satisfied the database was complete, I started working on the site’s design. I am not a designer by trade, but I still wanted to hand-code as much of the site as I could myself. I decided to minimize the damage I could do with my lack of expertise by limiting the design-y work to a big hand-drawn logotype at the top, with a very plain columnar layout beneath it. The issue covers would all remain the same.

The iPad and Apple Pencil are absolutely incredible tools for drawing. I used a vector drawing app called Graphic to draw the logo, going through several iterations before closing in on a shape I liked. This also involved learning how to draw with bezier curves, which was a skill I’d never really gotten my head around before. Graphic's tools are especially handy for creating letter shapes, so it didn't take long before I had something I was pleased with. I then spent many (many) hours tweaking the letter shapes. (Realizing I could turn the “LAGER” in "SOCKDOLAGER" into one big, dramatic ligature was a high point.)

Columnar layouts that render well on mobile devices are settled science at this point, but I was determined to implement mine from scratch as a learning exercise. I was initially using CSS floats to arrange content in boxes, but then I discovered that web design has gotten much easier, because now we have flex-box.

Readers, I am never floating another <div> as long as I live. All hail flex-box!

I’m pretty sure there are still some bugs and rough edges, but the design scales fairly coherently from three columns, to two, to a single column. It looks good on both my giant desktop’s monitor and my phone, so hopefully it’s doing that on everybody else’s browsers, too. My reference design for this project was Strange Horizons, which I kept open in a browser tab and squinted at occasionally when I got stymied.

This is the first site I’ve made that takes a real stab at looking just as nice on phones and tablets as it does big displays. I’d had a vision of using the vector drawing I’d made of the logo to mask out a background image, but it turns out that doing this in a way that works reliably across all major browsers is tricky. After much fiddling around in CSS, I ended up opening the SVG source code in a text editor to restructure the arrangement of the shapes, then copy-pasting the encoded data of a background jpeg image right into the SVG source.

Skills learned or brushed up on:

Modern-ish HTML/CSS
Type sketching
Vector drawing
SVG source editing
base64 encoding

The migration

Once I finished the static mockups of the design (which included a front index page, an issue TOC page, and an individual story page) I had to move onto the really hairy part; getting the new site set up.

This is where the content-complete story database ended up paying off. I wrote a quick-and-dirty app in Glitch that used the Airtable API to get story data from the database, then generate a big structured text file in the format that Ghost expected to import. Ghost’s installation instructions were relatively straightforward, but the documentation for its import/export format is much less complete, and I ended up having to deduce some of its unexpected quirks from context. But with a little bit of jiggering, I’d hit the next big milestone—a Ghost blog running its default template, populated with all the stories The Sockdolager had ever published.

I’d been clever enough to automate some of the drudgery away—all the stories were already tagged with the issue they’d appeared in—but there was still quite a bit of fiddly data cleanup left to do. Ghost has a beautiful interface, but what it does not have is any ability to bulk-edit entries, so anytime I discovered some small data sanitation mistake, I had to click on each affected entry manually, open its metadata panel, fix the mistake, then save the changes.

Ghost really, really needs a bulk post-editing interface.

Skills learned or brushed up on:

JavaScript/node.js
Airtable’s node.js library
big, messy JSON objects
content organization
Reading between the lines of Ghost’s incomplete documentation

The design translation

Despite the design being “finished,” I still had to translate it into Ghost’s template language. This was about exactly as much of a pain in the ass as I expected it to be, which is to say: a moderate, but not terrible, pain in the ass.

Skills learned or brushed up on:

Handlebars

Lessons learned

I cannot overstate the utility of having a complete, accurate database of every issue and every story ready at hand throughout this process. It wasn’t just useful for the data migration: I lost count of the number of times I had to return to it to re-check when a given issue was published, or which story appeared in which issue, or where in the table of contents a story had been placed. I’m astonished I ever tried to do things any other way, and I’d certainly never consider doing without in the future.

After all the work, I ended up with the most beautiful version of The Sockdolager that’s ever existed, hosted more cheaply than it’s ever been hosted before. Whatever the future holds for this little project, I’m delighted that the back catalogue is available to the public again, and will remain so.