Overview

This is meant to be a very beginner-friendly guide for those who aren’t necessary tech savvy (like myself). It covers the ins-and-outs of how to get a static site and a blog published onto the world wide web, but will not function as a complete guide on web development (HTML/CSS/Javascript). Consider taking a class or self-teach in order to fill in that gap. Coding may seem scary, however it can be incredibly rewarding to struggle. Its sort of the “artsy” skill of the many languages that exists.

The resulting site will include two things:

• A static site of interlinked .html files and assets
• A blog written in markdown that is pieced together and organized by Jekyll

A tidbit about Wordpress

Before we jump in, I wanted to discuss alternatives to ensure you are pursuing the option that makes the most sense given your time and knowledge. I would consider this method to be the cheapest and barest bones way to make a content-driven website. However it does require having an already made site written in HTML/CSS/Javascript. If you are starting out with no web development knowledge and would like to get a site published ASAP, a Wordpress site is probably the most sane pathway to getting a website running.

For Wordpress’ Free Tier, you cannot link your site to a custom domain; you will be stuck with the address “username.wordpress.com”. To get custom link support, you will have to opt for a paid Basic plan or higher. You could also find a third-party to host your site. WP is so universal that most offer direct compatibility and even offer some extra features.

While their content management system (CMS) is incredibly accessible, it can look a little same-y to other WP sites. Customization happens via plugins which are unlocked with Wordpress’ Business tier. Note that this allows you acces to the store, and some plugins have their own cost themselves. Fair warning that too many plugins can get expensive, bloated, or more prone for security vulnerabilities.

Otherwise, if you are fairly peculiar with how your site looks, enjoy web developing, or are very limited on funds, consider building your own site from the ground up and follow this guide to get it running!

Tools I use

Setting up a static site

Optional: Purchase a custom domain

My custom domain, “AnthonyHua.com” was purchased at ~$10 a year from a domain registrar. It does not matter which once, but I went with PorkBun

What to call it? If this for a professional website, the standard is to buy your name: “(firstname)(lastname).com”. If it is not available, you can use some variation of it, like adding a middle initial or adding your profession at the end (like “anthonyhualibrarian.com”). If privacy is your concern and you want to stay anonymous, use a fun alias! For instance, I’m currently sitting on my pen name “peanutbuddha.com”, for a future project.

Domain Extensions: .com web domains are by far the most common, trusted, and most visible (look into SEO), however most names under this domain are likely taken. You can also consider trending domains like .io, .co, or .ai. but they can be exceedingly expensive

Set up your Github repository

I chose Github because they offer a free hosting platform via Github Pages, and free custom domain mapping. Start by creating an account, and following these instructions:

1. Click

For the blog portion (both for my writing and recipes), I use Jekyll, which is prepackaged with Github Pages. Jekyll is a static site generator

Under Construction…

Setting up the Blog

Jekyll

Jekyll functions completely invisibly, meaning there is no fancy GUI to configure anything. There are two necessary points of interaction with Jekyll:

• the “config.yml” file: the brain of Jekyll containing all the options in a text format
• the “_posts” and “_layouts” folders: where the content of your blog goes

  Markdown

  Jekyll heavily utilizes .md (markdown files). Markdown is a very lightweight plain-text formatting (as oppose to rich text formatting used in MS Word). It strikes a balance of being fairly intuitive for humans to use, while still being compatible with software to parse. In the context of Jekyll’s workflow, blog posts (or any page really) are written in Markdown, then are pieced together with layouts that add consistent metadata and styles to every post.

Markdown files can exist anywhere in the your repo. They must contain front matter, which are bookended by three hyphens like below. Then the content of the page can be freely written below in markdown

---
title: Blog Post
layout: post
date: 2025-01-24 08:00:00
category: writing
tags: fun
---
~CONTENT~

Liquid: How Jekyll Pieces Together Pages

Jekyll uses a templating language called Liquid, which allows us to string together dynamic variables with static content. It is important for this use-case, because blogs contain many repeating elements and may feel arbitrary to build in each workflow. For example, when publishing a new post you would need to create a new .html file, apply the same styles/ heading/ footers/ metadata for consistency, then update all the links in connecting pages to point to your new page.

With liquid, you can have common static elements that loads your content dynamically, without needing to keep a database of all pages that exists. It also makes updating your layout MUCH easier.

The dynamic content is summoned using variables, tags, and arrays. Here are here is a full list you can reference, however I’ll try to include relevant variables into this guide.

The Actual Guide Part

Layouts

Do you see the layout attribute above? Layouts are .html files that live in the _layouts folder. In the frontmatter, you should not include the .html after the filename; it will simply know how to identify it.

Layouts should contain the html metadata, and references to styles or script so that the page can render properly. Using the liquid variables, you can pull metadata assigned to each markdown file to auto-populate into the processed page. Its good practice to have something like a post.html layout for each post page, and a list.html layout for the list of posts page, since both will use different structures.

I will go over making a list of post in the following section. For individual post pages or any other static pages, here is a non-comprehensive list of variables you can use:

How to set up a Jekyll blog

You can simply create the aforementioned folders and config.yml onto the root of your repository. The tricky part is configuration your config.yml file correctly. Jekyll’s documation provides a default set

If you don’t want to deal with that, let me introduce you to Jekyll Now. Simply fork this started into a repository you own, and import your existing files.

How to create lists of ALL posts

Using liquid templating language, you will create a loop using the tags:

"{% for post in site.posts %}

{%end for%}"

It will go through every post in your _post folder, in reversed chronological order, and repeatedly output any appropriate variables and html tags that exists within the loop. Meaning you will need to populate html tags and liquid variables.

For example, in my site I used the following format:

"{% for post in site.categories.writing %}

<article class="post">

<h2><a href="{{ site.baseurl }}{{ post.url }}">{{ post.title }}</a></h2>

<time datetime="{{ post.date | date: "%Y-%m-%d" }}">{{ post.date | date_to_long_string }}</time>

<div class="onedot"></div>

</article>

{% endfor %}"

It will create a hyperlinked header 2 displaying the title of the post, the timestamp of the post, and my divider. You can just copy and paste my code, or build your own. Here is a non-comprehensive list of variables you can use:

How to create lists of all posts of a certain category/tag

In the frontmatter of every .md file, you can designate a category or tag attribute. To create a list of post for a particular attribute, simply replace the “site.categories.writing” in the loop with either “site.categories.CATEGORY” or “site.tags.TAG”. Replace the all caps word with your category or tag of interest.

This is how I made a separate “blogs” for my writing and recipe

Blogs have many repeating elements; to add a post, you have to have the same metadata Creating multiple pages content can be very time-consuming, so these aspects of Jekyll can make a blog very easy to set up.

As a note: GH Pages will automatically handle the Jekyll build on their servers. You do not have to install Jekyll or Ruby, unless you want to develop and test your site locally. (what this looks like in laymans term… Visual Studio Code wont preview the blog portion of your site… you’ll need to deploy on Github first in order to see changes)

Another thing is that Obsidian interfaces directly into your computers filesystem (rather than a cloud). Pointing your Github Repository, code editor, and markdown editor makes updating your site seemless!