Blog like a hacker
The first thing I wanted to do when I started the Fellowship was set up a blog. Writing is how I plan, how I reflect, how I unpick problems and think my way around them. I’d heard a lot about static site generators, and something called Jekyll, as an alternative to a traditional CMS like Wordpress. It’s one of the things I was hoping I would finally have time to explore once the project started - especially given its focus on minimal computing.
Tom Preston-Werner created Jekyll for people that want to ‘blog like a hacker’. Dash off my thoughts in markdown, pass posts through simple templates, and generate a complete static website, which is secure, freely hosted, version-controlled, and served by GitHub Pages. What’s not to like?! I didn’t require much from a blog - just a place to record thoughts in a tidy, systematic way. The idea of being able to start simple, but modify any aspect of appearance or configuration, appealed to me, as someone who has always learned by fiddling with the controls.
Jekyll is beautifully simple - and with no superfluous functionality or features, and no clunky database, it’s blisteringly fast. It’s clean and uncluttered - no advertising, branding, or logos. Most importantly for me, it offers complete control over design, allowing me to create my own theme or customise from a simple base theme, which is great for anyone just starting out learning about html and css. And yes, it’s free!
My first stop was GitHub Skills, where I worked through their ‘first day’ courses. The course on GitHub Pages got me up and running in no time - I made a blog in a matter of minutes. But at the end, I had no real sense of how I’d done it, or what any of it meant, so I headed to YouTube in search of something a little more in depth.
I highly recommend this series of videos by Mike Dane, which walk you slowly through every single stage of the set up in a very accessible way.
Here’s a summary of what’s needed, and proof that anyone can set up a free, unbranded blog with just a dozen lines of code.
- Download Ruby and install Jekyll (instructions for Mac and Windows are in the videos), plus Git Bash, and a text editor, e.g. Visual Studio Code
- Set up a GitHub account and create a personal access token
- Open the command line.
- Type the following commands
cd [name of folder where you want to store your blog] jekyll new [blog name] cd [blog name] bundle add webrick bundle exec jekyll serve
- Go to GitHub and set up a new repository, with the name of your blog
- Go to Windows Explorer or equivalent, and go and look at your blog files! Open the config.yml, and enter the name of your repository under ‘baseurl’. Save the file.
- Open Git Bash
cd [blog folder] git init git checkout –b gh-pages git add . git commit –m "load files" git remote add origin https://github.com/[username]/[blog name].git git push origin gh-pages
- Paste in your personal access token when prompted.
- Go to https://[username].github.io/[blogname] and admire your gorgeous new blog!
The tutorials in Mike Dane’s playlist explain what to do next, such as how to write posts and new pages in markdown. These files are saved in a local folder, and when ready to publish changes, just run a few commands in Git Bash:
git add .
git commit –m "[comment here]"
git push origin gh-pages
You can avoid this step by installing GitHub Desktop, which also avoids the need to keep a personal access code on hand, but this is optional.
I can never resist a few modifications, and learned the following means of overriding the default theme that gets installed (minima). In my local Ruby folder, C:\Ruby31-x64\lib\ruby\gems\3.1.0\gems\minima-2.5.1, I copied the _includes, _layouts, _sass, and _assets folders, and pasted them into my blog folder. I opened the config.yml file and put a hash in front of the theme, cancelling it out:
#theme: minima
Now I could start to make minor, tentative changes. I wanted a short excerpt of each post to show on the home page. This required the following tweaks:
- Update config.yml to tell it that I want to show excerpts, and that the excerpts should stop whenever it sees the separator I’ve defined:
show_excerpts: true
excerpt_separator: <!--more-->
- Add the separator:
<!--more-->
to every post, at the point I want each excerpt to stop.
- In the home layout, add this line to add a ‘continue reading’ prompt at the end of each excerpt:
<a class="excerpt-post-link" href="">Continue reading →</a>
Modifying the default minima theme from a baseline really appeals to me. Thousands of people use minima, and there’s plenty of documentation online to help me out as I get to grips with a completely new area of web design. I think it will help me learn as I go, and I can document any changes on the blog itself. I would like to help other people to build smart, simple, unbranded websites for their research projects, and this feels like a great way for me to start building those skills.
The next step for the Fellowship is to investigate some issues I’ve been having recently with our implementation of the Universal Viewer. It’s the sort of problem I need to show rather than describe, and I think that the blog will be the perfect place to display the results of the tests I’ve been running, and share the outputs with colleagues who may be able to help me get to the bottom of it.