tgct 💙

My personal story with TGCT.

The live site can be found at tgct.birki.io

Development 💻

First, ensure you have the hugo binary installed. Then, run the following commands:

hugo server -D

This will start a local development server with live reloads

WSL Note 📓

If you are using WSL, you will need to run the following commands to ensure the server is accessible from your browser:

ifconfig # find the IP address of your WSL instance

hugo server --bind <ip> --baseURL=http://<ip> -D

New Blog Post 📝

To create a new blog post, run the following command:

hugo new posts/my-first-post.md

If you don't have the hugo binary installed, you can simply create a new folder + file in the content/posts directory with the following format:

note: ensure the file is a .md file

---
title: "some title" # The title of the post
description: "a description" # required for open graph
date: 2017-06-23T00:00:00-07:00 # the date of the post
draft: false # whether or not the post is a draft
cover:
  image: "cover.jpg" # the relative path of the cover image in the media bundle - MUST be named cover.[jpg|png|etc]
  alt: "alt text" # required for open graph
  caption: "a caption" # required for open graph
  relative: true # required for open graph (since we use page bundles)
---

## Some cool title

Content goes here!

Open Graph 🌐

A quick note about Open Graph

For both Open Graph and Twitter Cards to work correctly you must include the lines as seen below in your post front matter:

description - the description that will be used in open graph
cover.image - the relative path of the cover image in the media bundle - This file must be named cover.[jpg|png|etc]. It is just important that the file's name is cover and it has an image extension
cover.alt - the alt text used in open graph
cover.caption - the caption used in open graph
relative - this is also required for open graph and Twitter Cards to work correctly. Since we use page bundles, we need to set this to true every time

Open Graph images should be 1200x630px. You can use the og-playground by Vercel to generate images (source code)

Theme 🎨

This site uses the hugo-PaperMod theme

For more details on configuration, see the features page on the theme's wiki

Hugo Shortcodes 📄

Huge has a ton of built-in shortcodes that can do a bunch of things from rendering GitHub Gists, to Tweets, to YouTube videos, and a whole lot more.

Video Support 📹

This site also supports embedded videos with the following extensions:

.mp4 / .m4v
.webm
.ogv

Add the video to the page bundle (alongside the .md file and images) and then you can reference the file without its extension like so:

{{< video src="some-cool-video" >}}

{{< video src="some-cool-video" height="600px" width="600px" autoplay="true" loop="true" muted="true" >}}

To learn more about the theme that provides video support, check out the hugo-video repository

GitHub Pages 🌩

This site is hosted on GitHub pages

GrantBirki / tgct