I’ve bloody done it - I’ve cancelled my subscription to Squarespace.
Last year I bumped into Rob Dyke on the train home and, after a brief conversation, he challenged me to roll my own website using Github Pages. So here we are - thanks Rob.
I’m far from a professional developer, but love a challenge and believe that it’s part of my job as a designer to understand (at least, in part) how tools like Github work. It’s safe to say that I’m now a lot more familiar with the basic deployment process.
My new site is (mostly) live:
There’s still a few things left to do, but I’m super proud of the result.
How I Built This Site
The process of setting up this site has been (mostly) painless.
Setting up Jekyll on Github Pages is a doddle, much quicker and easier than I remember. I followed the official guide and had a site up and running in less than 15 minutes.
Using the following criteria, I set about looking for a custom theme:
- Clean & easily accessible styling
- No-nonsense configuration with room for customisation
- Responsiveness built in (Surely this is as-standard, by now?)
Emerald ticked all the boxes.
I faced my first hurdle - I can’t seem to host Jekyll locally, despite many attempts to troubleshoot. Thankfully, I work with a bunch of talented developers and will be enlisting their help to troubleshoot! In the meantime, I’ve been making very regular commits.
I cloned the repo and set to work customising the theme:
- Colour styles & typography; I’ve chosen to change the basic theme from green to blue (#0AF), a versatile colour that I love. I’m keeping the base font (for now, at least), but may look to switch to a serif/sans serif pairing later on.
- Nav menu; I stole an idea for this from Sally Lait’s beautiful website, adding help text beneath each link to give the user an idea of where they were headed
Once the basic site was up-and-running and I was happy with the design, I began migrating portfolio content from my old Squarespace site. I created a number of pages for the companies and projects that I’ve worked on. I settled upon a simple format; outlining my role(s), the objectives of each project and the impact my work had.
Once (most of) the content was in place, I began to link between pages. Jekyll, or at least the Emerald theme, automatically adds pages to the menu - which lead to a long list, with no hierarchy. Thankfully there’s a simple way to override the menu links.
I ran into what I think is a bug in the theme - when the BaseURL is set to
/ (the default), the
home link in the menu and header don’t take you back to the home page. Looking in the inspector, I could see that the
href parameter wasn’t being added to the link, so I have hard-coded these for now.
We’ll see how 2020 goes, but my ambitions for this site are as follows:
- Introduce search; I believe that search is the future of UI (actually, the present), so hope to introduce some basic search functionality to the site
- Write more; I’ve fallen out of the loop and want to publish more written content, defeating that little critical voice
- Add analytics; I’m looking for a non-Google alternative to GA, for basic pageview metrics
- Create other GHP sites for the band(s) that I’m in
There’s still some content twiddling to do, but I’m about 90% of the way there. Thanks Rob, for poking me in the right direction.