This repo houses the Gamemode 4 blog. It is hosted at the subdomain https://blog.gm4.co, but is built and hosted on GitHub pages.
This site is a static HTML generator. It is built on HexoJS.
You do not need to write Javascript to use it. It is much like Jekyll or Hugo.
This README will not outline creating custom functionality for the blog, but how to write a post.
In essence:
- Create a post
- Push to GitHub
- Hexo will generate the HTML from the templates and push to
gh-pagesbranch.
Blogs are written using markdown. You can understand more of this:
- https://www.markdownguide.org/cheat-sheet/
- https://docs.github.com/en/get-started/writing-on-github/getting-started-with-writing-and-formatting-on-github/basic-writing-and-formatting-syntax
- https://itnext.io/github-markdown-cheatsheet-50642835effa
You can embed raw html into a post. An example of this is including an iframe tag to include a YouTube video.
<iframe width="560" height="315" src="https://www.youtube.com/embed/VpejRJbGZiA" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
A blog can be created in two ways:
hexo new <scaffold_type> <file-link-name>- Copy a file in the source/_posts folder
A scaffold is a type of blueprint.
These are used to automatically generate the basics of a post. Currently blog.gm4.co has three:
- draft
- page
- post
It is best to use the type post which will automatically generate the following fields:
title: {{ title }}
date: {{ date }}
tags:
- all
excerpt:
author:
---
Title - Derived from what is placed in
Date - Generated at the time the hexo new <scaffold-type> <file-link-name> is run
Tags - Is a list separated by line breaks/paragraph breaks. You can see an example of it here!. All posts start with the all tag.
Excerpt: - This is a short extract from the piece that is rendered on the home page and can be shown elsewhere
Author - This is who wrote the piece. Currently this can only accept ONE person.
Start by creating a post:
hexo new post <name>
The name will become the hyperlink that gets generated by hexo, and replace the title: tag.
Replace the title: tag with something more solid, title. Example are:
- "November Blog Update"
- "Changes behind the scene"
If the post is to come out later, set the Date: tag to sometime in the past, so when the page is built, it actually appears.
The date: follows the format of YYYY-MM-DD 24:HR:TM.
The posts are written in markdown, however you can include raw HTML tags.
There is currently no style guide. A few principals overscore this:
- Show the post to others in draft form, they can offer invaluable feedback
- Use semi-formal language/tone. Getting humor right is hard, so use it sparingly. It is easy to write in a fun than a funn-y way.
- Include images, a wall of text sucks
- A wall of text is okay, just break it up with headings
- It is better to be short and concise than flowery.
Images for the site are store under source/images/.
Create a folder for the post and store all images in the folder.
Any previewing using a VS Code extension will not show the images, but the site will render them.
Blog posts are written locally, however drafting can be done in another program like hackmd or google docs which support markdown.
After creating a post, you can then push to GitHub, or make a PR.
This will then trigger a pipeline process which will statically generate the site. This is then cloned to a branch called gh-pages.
This whole process takes approximately 5 minutes from last push.