My personal blog
The live site can be found at blog.birki.io
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
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
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!
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 graphcover.image
- the relative path of the cover image in the media bundle - This file must be namedcover.[jpg|png|etc]
. It is just important that the file's name iscover
and it has an image extensioncover.alt
- the alt text used in open graphcover.caption
- the caption used in open graphrelative
- this is also required for open graph and Twitter Cards to work correctly. Since we use page bundles, we need to set this totrue
every time
Open Graph images should be 1200x630px
. You can use the og-playground by Vercel to generate images (source code)
This site uses the hugo-PaperMod theme
For more details on configuration, see the features page on the theme's wiki
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.
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
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
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 pointblog.birki.io
->journal.birki.io
where appropriate