How it all started
So I started the new year by setting up a new website on GitHub Pages. For previous versions of this site I have used various drag and drop site builders, Bootstrap, and Grav and was never fully satisfied with the experience. After learning the basics of web design and web development during my studies I knew enough about it to know exactly what I wanted it to look like but too little to actually build it on my own. And none of these tools provided me the right amount of assistance to get there. When I read about Jekyll and its integration with GitHub Pages, my motivation was back. It seemed to be the optimal combination of simplicity and customizability that I needed. So here it is.
Jekyll cheat sheet
I followed this Blog Post by Steven McLintock and have to say that it was extremely easy to follow and just the right amount of extra information on what I was actually doing.
So throughout this process I took some notes that might be helpful for others as well. This might also become my cheat sheet for future work on this website.
References
- Themes: jekyllrb.com/docs/themes, with my own version of TeXt currently in use
- Filename format: YYYY-MM-DD-title.markdown
- Frontmatter defaults: jekyllrb.com/docs/configuration/front-matter-defaults/
- Permalinks: jekyllrb.com/docs/permalinks/
- Mentioning someone: [@marlenemayr] (https://github.com/MarleneMayr)
- Plugin-free solutions: jekyllcodex.org/without-plugins/
- GitHub Pages supported plugins: pages.github.com/versions/
- GitHub emojis: gitmoji.dev/
Frontmatter
This also heavily depends on the theme and the layouts you use. Here are some of the Jekyll default values:
layout: post
title: "New Year - New Website!"
date: 2021-01-01 22:36:18 +0100
Sorting
categories: jekyll update
tags: coding-adventure random
Overrides
permalink: /overriden-url/
published: false
Website Tools
As I mentioned previously, I tried quite a few tools before arriving at Jekyll. These included some technologies I was not aware of before working on my website. So if anyone else is planning to build a website, this might be helpful.
- Website Builder
- tools that let you build websites from drag-and-drop templates without coding. Online freemium builders include Wix and Squarespace but there are also self-hosted offline website builders like Mobirise.
- CMS
- content management systems are more widely known among non technically-minded users as well. TYPO3, Wordpress and others are well integrated with many hosting providers and can be extended with many plugins. Since they require quite some technical know-how, they might be an overkill for personal websites.
- Flat-file CMS
- a lightweight system that retrieves data from a folder structure instead of a database. There are numerous tools out there ranging from minimalistic online editors to fully customizable systems with admin dashboards. Octobercms, Typemill and Flextype just to name a few.
- Headless CMS
- content management systems that decouple the body from the head and provide APIs to focus on content creation. Learn more on Jamstack, which also includes information about the next category.
- Static Site generator
- Hugo and Jekyll are examples of site generators that are awesome for quickly building a website for documentation, portfolio or blog. They provide an automated way of combining templates and content into a static website which can then be hosted. For a detailed list see Jamstack.
- Javascript world
- a lot of the frameworks and applications for web development can be found in this collective overview from stateofjs.
If you’re interested in one of these systems, make sure to check out alternatives and open source software as well. Just check that they are still in development, this will make it easier for you to maintain the website.