GitHub Pages with Jekyll

Want to create a site like this one? Follow these steps:

1. Create a repository using the just-the-docs template

This site was created using just-the-docs. I have made a template version of just-the-docs that is easy to create a new repository from. Just visit this repository and select “Use this template.”

2. Update config.yml

This file is where the settings for your Jekyll site are located.

The baseurl should match your repository’s name and the url should have your GitHub username as the subdomain. Once each of the following settings match your repository, your GitHub pages site will be available at [https://.github.io/](https://.github.io/).

title: Site Title
description: Some docs for my class
baseurl: "/<repo-name>" # the subpath of your site, e.g. /blog
url: "https://<username>.github.io" # the base hostname & protocol for your site, e.g. http://example.com

# Aux links for the upper right navigation
aux_links:
  "Site Title on GitHub":
    - "//github.com/<username>/<repo-name>"

footer_content: 'Copyright &copy; 2022 <Your Name>. Distributed by an <a href="https://github.com/<username>/<repo-name>/tree/main/LICENSE.txt">MIT license.</a>'

3. Change colors and fonts

Visit _sass/support/_variables.scss.

Fonts

You can use Google Fonts by importing them. Set the $body-font-family and $mono-font-family variables.

@import url("https://fonts.googleapis.com/css2?family=Inconsolata&family=Kdam+Thmor+Pro&display=swap");
$body-font-family: "Kdam Thmor Pro", sans-serif !default;
$mono-font-family: "Inconsolata", monospace !default;

Colors

The main colors to change are these:

$link-color: $blue-000 !default;
$btn-primary-color: $blue-100 !default;

If you want to customize the purple, blue, green, yellow, or red color shades, I recommend using hsl color values to easily get different luminosities of the same hue. Example:

$yellow-000: hsl(50, 95%, 75%) !default;
$yellow-100: hsl(50, 95%, 66%) !default;
$yellow-200: hsl(50, 95%, 57%) !default;
$yellow-300: hsl(50, 95%, 48%) !default;

4. Add content

index.md is the home page of your site. Visit the docs folder to add and modify Markdown files. See the included example files for more.

5. Local development

Clone your repository. Ensure you have Ruby installed by running ruby -v in a terminal (if not, download Ruby here). Then, run jekyll serve to server your files.