As a side project during lockdown, I put together an author website for Alison Marr, a flash fiction and poetry writer based in Kilburn. She had set herself up with a simple Wordpress site when she was on a Creative Writing course a few years ago, but this needed a bit of an update, and she also wanted a simpler way to author posts if possible. I decided that instead of rewriting the Wordpress theme she was using, I would transfer the site over to Jekyll (which I’m more familiar with), add a new clean design, and try to set up a simple CMS for her to author and edit posts.

The Frontend

The site design uses the CSS framework Tachyons which I’d been planning to try out for a while as it seemed like it had some really useful helper classes to smooth out some kinks in the design process. I came across Jekyll Tachyons, a starter repo by Leon Paternoster, which seemed like a great starting point for combining the static site generator (SSG) with the CSS framework. I wanted to keep the design pretty minimal to focus on the writing, so tried to avoid any unnecessary design features etc. I haven’t even used any third-party fonts, which may have to change at some point as that Baskerville doesn’t look so slick on Windows… Anyway, there’s literally just the homepage and three other pages, one for each type of writing that Alison does.

Homepage

The homepage is split into a basic two-column flexbox layout, with a main on the left and an aside on the right. The main has two blocks: a ‘Recently published’ block, and an ‘In progress’ block. The ‘Recently published’ block displays a preview of the three latest posts from the posts available on the site, which links through to the post page for each piece respectively. The ‘In progress’ block is a simple text area for Alison to give a little update about what she’s currently working on. The aside has three blocks: an ‘Author bio’, a ‘Journal’ snippet, and a blockquote. Instead of having an /about page, which I’d included in a previous version, I decided to include the author bio in the aside to front the information. This stacks on smaller breakpoints so that it’s the first thing anyone sees if they visit the site on, say, their phone. The ‘Journal’ block consists of previews of the last two posts tagged as journal posts, and the blockquote is just that.

Alison Marr homepage full scroll view
Alison Marr homepage full scroll view

Content ‘landing’ pages

The content ‘landing’ pages are essentially just static filters for the posts on the site. Using a Jekyll include with a where filter (see Jekyll docs for more info), the page is populated with all the posts on the site tagged as that particular content type. The include is itself built into the layout so that it isn’t easily editable (this will make more sense later when talking about the backend):

{% capture page_title %}{{ page.title }}{% endcapture %}

{% include posts.html category=page_title %}

As long as the page title is the same as the content type, that page will display all posts tagged as the respective content type.

The layout displays a short header with the page title and subtitle, and a short description of the content floated to the right. The posts container uses flexbox again to create a two-column tiled effect with each post preview showing its title, date, content type, and thumbnail:

Alison Marr Fiction page
Alison Marr Fiction page layout

On hover, each post grows slightly, the thumbnail turns grayscale, and a small ‘Read more…’ label appears in the bottom right corner of the post:

Alison Marr post preview behaviour
Alison Marr Fiction post preview hover

Each page then clicks through to a post page…

Post pages

Post pages use the same two-column layout the homepage uses, with the content on one side and the thumbnail plus a description of the content (if there is one) on the other:

Alison Marr example post page
Alison Marr example post page

Alison wanted a way for her audience to engage with her work, so I’ve kept the Disqus comments that ship with Jekyll although it looks a bit jarring with the minimal design. It does the trick anyway and is much easier than implementing another solution for now. There’s a short note on this in the Afterthoughts section at the bottom.

The Backend

As I’d only up to this point ever worked on personal projects, I had actually never needed to add the ability to edit site content via a CMS, so this presented a bit of a problem. I had initially planned to use Netlify CMS (providing I could get to grips with the docs) as I was planning to deploy the site on Netlify, but I had also recently come across Jekyll+, pitched as a ‘lightweight CMS for GitHub pages and Jekyll websites’, and thought maybe it’d be a good opportunity to try it out as it seemed pretty clear to plug-in, and pretty friendly on the user, which in this case fitted the bill.

There’s a lot of magic going on behind the scenes that eludes me, but for my purposes the CMS works by appending ?jekyllplus=true to the URL to show a small widget in the bottom left of the screen:

Alison Marr homepage with Jekyll+ widget
Alison Marr homepage with Jekyll+ widget

The widget then gives you some options to make some changes in the CMS:

Jekyll+ widget hover
Jekyll+ widget hover

The options are customisable, but the widget gives you options to create posts, edit the current page, duplicate the page, etc. These then link through to simple customisable forms which have direct write access to the GitHub repository where all the code sits. The form fields map onto key/value labels in the post frontmatter, and using continuous deployment the Netlify site rebuilds once the change to the repository is detected (I’m using Netlify for deployment as GitHub pages doesn’t work with private repos).

Jekyll+ CMS form
Jekyll+ CMS form

I’ve kept all the Jekyll pages empty of includes etc. so that these can’t be edited using the CMS (just in case), and I’ve also customised the widget as per the clear Jekyll+ README instructions so that the main actions I envisage Alison using are readily available:

<script>
  var JEKYLLPLUS_REPO = 'jamie-reece/alisonmarr/master';
  var JEKYLLPLUS_PATH = '_projects/2020-04-30-alison-marr.md';
  var JEKYLLPLUS_MENU = JEKYLLPLUS_MENU || [
  { label: 'Create a post', path: 'new?collection=posts' },
  { label: 'Edit author bio', path: 'edit/_includes%2Fauthor_bio.md' },
  { label: 'Edit work in progress', path: 'edit/_includes%2Fin_progress.md' },
  { label: 'Ask for help', url: 'mailto:jamiereecebowman@gmail.com' }
];
</script>
<script src='//cms.jekyllplus.com/assets/widget.js'/></script>
<link rel='stylesheet' href='//cms.jekyllplus.com/assets/widget.css'/>

I’m now in the process of working out how to give a separate GitHub user direct write access to the website repository so that I don’t have to give away my GitHub password and Netlify will still continue build the site automatically on pushes to the master branch. I’m thinking this will involve either transferring the ownership of the repo and reconnecting to Netlify (would prefer not having to set up two separate accounts though), or setting up a user as a collaborator and seeing if they can access the codebase via Jekyll+, which in theory should work. Fingers crossed.

Afterthoughts

Written by Jamie Bowman
Last updated 3rd September 2020