Redesign

After several years hosting an academic website, I’ve decided to add a blog section for occasional posts on my ongoing research in literature and science and on digital humanities techniques. I thought I’d share some of the details on how this site works.

At UCSB from 2011-3, I hosted a simple WordPress site to broadcast details about my teaching and research, and on moving to Arizona for 2013-4, I built a static HTML site with the Gumby responsive framework. I did this in part because the SQL databases that power WordPress aren’t freely available for personal pages at Arizona, but also because I wanted to make my own responsive site design. Responsive CSS frameworks dynamically adjust the site layout for tablets and phones:

 


Responsive static site from 2013-4

 

As I was finishing this site, Andrew Goldstone told me about Octopress (which powers his blog), a platform that uses Ruby scripts and gems to generate blogs as static HTML files, which can then be synced to any server space. With this type of framework, you can place content in folders in the simplified Markdown language and then run a script to generate all the dynamic links, lists, and sections of the blog. For the present update, I wound up settling on Hugo, a similar static site builder written in Go, both for its speed and its relative simplicity. (Jon Goodwin told me about Hugo, to which he recently switched his blog.)

I took a Hugo theme (liquorice) based on a responsive framework (Skeleton) and set about replicating the responsive, column-based design of my 2013–14 site, which I still liked.

 


New front page with dynamically loading elements

 

This was a fun way to see what Hugo could do. One proof of concept was to serve my course descriptions, stored as Markdown files, dynamically, rather than as a single, long HTML page. Each course’s Markdown file has a paragraph of description, preceded by metadata that give it a title, semester, image link, and image caption. Here’s what those files look like in Hugo (it’s similar in Octopress):

 

+++
date = "2014-11-16T16:56:00-07:00"
draft = false
title = "English 310: Intro to Digital Literary Studies"
image = "librarybabel.png"
imagecaption = "Ignacio Rabado, <em>Babel Library IX</em>, photo by Susan Groppi"
semester = "spring 2015"
+++
How have computers and the internet changed fiction? How have they shaped its topics, how we read it, and how critics and scholars write about it? ...

 

The Courses page loads the whole folder of these course files in order by date, with the image for each offset to the right. The site’s front page, on the other hand, pulls the most recent course’s semester name (for the section heading) and the two most recent courses’ images and captions them with the course titles. Here’s how the latter works in Hugo using the range command to traverse and display the site data:

 

{{range first 1 (where .Data.Pages "Section" "courses")}}
  <h3><a href="/courses/"></a>{{.Params.semester | title}} Courses</a></h3>
{{end}} 
{{ range first 2 (where .Data.Pages "Section" "courses") }}
  <div class="four columns">
      <a href="/courses/">
          <img src="/images/{{.Params.image}}" width= "100%" title="{{.Params.imagecaption | safeHtml}}">
          <span><em>{{.Title}}</em></span>
      </a>
  </div>
{{ end }}

 

Semester titles are in lower case on the course list page (and the Markdown files), so the “| title” capitalizes “spring” for this header. My image captions (which appear on hover in this view, and as proper captions on the course list view) often include italics, so “| safeHtml” tells Hugo to use any HTML tags found in the caption. Then, when I add next fall’s course descriptions, I can pick images, upload new Markdown files for those classes (or update a repeated class), and the front page will change automatically. This was less an exercise in working-hard-to-be-lazy than in testing out the design principles of the static site generator (which, with flexible content types, behaves like Drupal without the whole “breaking all the time” part.)

Overall, I’d recommend playing with Hugo or Octopress, especially as a way to host a blog on a static server, or, say, as an intermediary step toward working with Ruby on Rails (a fully model-view-controller-oriented app framework). And with the new blog, I look forward to sharing some work-in-progress on network visualization, some reflections after teaching my first graduate digital humanities seminar, and more.

comments powered by Disqus