I thought it would be appropriate to make my first post on how I made this website, for anyone who’s curious. The website was built using Jekyll, which makes use of liquid. Jekyll is a minimalist stack which runs on the ruby language. The idea is, quoting their website:
Markdown (or Textile), Liquid, HTML & CSS go in. Static sites come out ready for deployment.
The first version of this website I’m uploading doesn’t contain a single file of javascript. Instead, pages are created by embedding markdown text inside of html, which is then styled using css (with the css being generated by sass).
Here’s an example of this page:
---
layout: post
title: How I Made This Website
date: 2017-09-07 17:00:00 -0700
tags: [website, non-gamedev, api]
---
I thought it would be appropriate. . . (etc)
The three dashes mark the file to be processed by Jekyll, and are referred to as front matter.
The real key here is that first line of front matter: layout: post. This means the page will be generated using a file _layouts/post.html.
All of my layouts are edited from the default.html layout which came with the theme I’m using.
<!doctype html>
<html lang="{{ site.lang | default: "en-US" }}">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="chrome=1">
{% seo %}
<link rel="stylesheet" href="{{ '/assets/css/style.css?v=' | append: site.github.build_revision | relative_url }}">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
</head>
{% include navigation.html %}
<style>
div#archive-link {
font-size: 18px;
margin: 10px 0px 10px 20px;
}
section {
margin-top: 10px;
padding: 10px 0px;
}
</style>
<body>
<div class="wrapper">
<div id="archive-link">
<a href="{{ site.baseurl}}/blog/archive">> Go to Blog Archive</a>
</div>
<hr>
<section>
{{ content }}
</section>
</div>
</body>
</html>
There’s two main things to point out here: Jekyll variables and filters are denoted using {{ var }}. Liquid
on the other hand lets you perform inline coding inside the html with the {% for i range(1..5) %}{% endfor %}
notation. {{ content }} is a variable which refers to the body of the associated markdown file. In the case
of this post, what I’m typing here right now is in a markdown file which will be inserted there.
Aside from that I’m just writing some simple inline css to adjust the formatting on a page-to-page basis. To give an example: pages with less content make more liberal use of whitespace (or blackspace in this theme’s case), while pages with more content are a bit more nested together.
Lastly, the navigation bar at the top is located in _includes/navigation.html, allowing me to insert it with
liquid as you see in the {% include navigation.html %} above. navigation.html uses liquid to iterate over
_data/navigation.yml which is a tiny file and looks like:
- title: Home
url: /
- title: Blog
url: /blog
- title: About
url: /about
Using yml files you can do all the data-driven programming your heart desires! There’s also a _config.yml in the
root project folder which allows you to set some site-wide Jekyll variables.
All in all I’m super pleased with how simple this has been to set up. It loads up super fast, looks good, and it’s as easy as writing markdown to create a new page. Up until this point creating a website has been a pain point I haven’t really wanted to get around to. With the number of overly complicated webdev stacks out there, I developed a general dislike for working on things web related. The simplicity of Jekyll and liquid’s minimalism has made creating this site a lot more painless than I thought it would be.
Really I’m just happy to have something that works so I can focus on game dev and graphics programming.
Here’s some starting points if you’re interested in creating something similar: