blog 🌍

My personal blog

The live site can be found at blog.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: "Budapest" # The title of the post
description: "Budapest trip" # 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: "Budapest" # required for open graph
  caption: "Budapest" # 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" >}}

or

{{< 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

Cloudflare Pages 🌩

This project uses Cloudflare Pages for static site hosting. A few things to note:

• Do not adjust the cache settings via Page Rules for the blog.birki.io domain. Cloudflare Pages does static asset caching for you out of the box

Why Cloudflare Pages

Nearly all of my other projects are hosted on GitHub Pages, so why did I choose Cloudflare Pages for this project?

• I wanted to try something new
• GitHub Pages has a "limit" of 100GB of bandwidth per month
• I needed to setup a _redirects file with Cloudflare to point blog.birki.io -> journal.birki.io where appropriate