- Ensure theme submodule is loaded:
git submodule init && git submodule update
- Run the server with
hugo server --noHTTPCache --ignoreCache --disableFastRender --buildDrafts
Good old-fashioned ![](image.png)
markdown image embedding works just fine.
- Place the image file beside the content in the folder (called a "page bundle").
- For a Featured Image, use the line
featured_image = "image.jpg"
in the frontmatter. - For an inline image, use
{{< image src="image.jpg" >}}
Note: The working directory for relative resource locations uses the name of the content file as the current location. E.g. referencing the image
./myimage.jpg
or./myimage.jpg
from inside the/content/projects/myproject.md
content file, would look for those images at/content/projects/myproject/myimage.jpg
.
- To include a table of contents at the beginning of a page, add the flag
toc = true
to the frontmatter. - To insert a table of contents inline with the text, use the
{{% toc %}}
shortcode. - Tables of contents are configured under the
[markup]
configuration node inconfig.toml
.
Use hugo's hugo new content
command with the path (relative to root) to the content page for the new article.
Examples:
hugo new content content/projects/my-new-project.md
This will create a new draft page with the title and date set smartly, as well asdraft = true
hugo new content content/projects/my-new-project/index.md
This will create a new draft page inside a page bundle, creating the bundle directory if needed.
To set the image that is used when other sites or services embed a link (e.g. Discord), we use the ogimage
page param in the frontmatter. The value is the path to the desired image relative to the static
directory.
Examples:
- Unset
ogimage
tag will fall back to/static/img/logo.png
. ogimage = 'img/mobilebanner.png'
will use/static/img/mobilebanner.png
.
This is separate from any image content visible on the site itself, which makes it useful for preserving the cleanliness of the reading experience.
Assign the text to use for the article image to the LOGOTEXT
variable. E.g. LOGOTEXT="Jafner.dev"
LOGOTEXT="Jafner.dev"
convert -size 1200x630 xc:#1b1c1d -pointsize 110 -font "Noto-Sans-Mono-Regular" \
-fill #A9A9B3 -draw "text 50,360 '>$ ~/$LOGOTEXT'"\
-fill #FE5186 -gravity East -draw "text 50,0 '█'"\
$LOGOTEXT.logo.png
And that will generate an image like:
It can be a little finicky to make the text look right, especially getting the left-right spacing down. Use the following parameters to make changes:
xc:#1b1c1d
sets the background color to the provided hex code.-pointsize 128
sets the font size of the text.- The first
-font @Inter.ttf
sets the font to Inter, the preferred font for the site. - The first
-fill #A9A9B3
sets the color for the text part of the logo. - The first
-draw "text 50,360 '>$ ~/$LOGOTEXT'"
draws the>$ ~/
part of the logo, then uses the$LOGOTEXT
variable for the proceeding text. Thetext 50,360
describes the X,Y offset in pixels from the top-left of the image to begin drawing the text. - The second
-font "Noto-Sans-Mono-Regular"
sets the font we need to use for Unicode character support. See the list of available fonts withconvert -list font | less
. If we don't need the cursor block, this entire line can be omitted. - The second
-fill #FE5186
sets the color of the cursor block. -gravity East
sets the draw orientation to the middle of the right side of the frame.- The second
-draw "text 50,0 '█'"
draws the unicode cursor block character 50 pixels X-offset (from the middle-right)
Hex codes:
- Pink cursor block: #FE5186
- Dark grey header background: #1A1B1C
- Light grey header logo text: #A9A9B2
When creating new content, we gotta keep in mind a few of the systems that are dependent on organizational consistency.
- Use
slug = 'mypage'
to set the name that will be used in the URL, and in the dynamic logo at the top-left.- For
homelab
articles, this will be prepended with/homelab/
already, so don't be redundant. E.g. don't useslug = 'homelab-tour'
, useslug = 'tour'
. The former will render as/homelab/homelab-tour/
and the latter will render as/homelab/tour/
- For
- Isn't
/homelab/
a type of/projects/
? Yes. But it's such a huge project that it has earned its own category. - Titles should be either like
Homelab Tour: Reviewing the what, how, and why of my lab
, orEsports-grade Overwatch 2 on Linux
. That is, either a very short title with an expounding subtitle, or a sufficiently self-descriptive title.- Use a colon to separate subtitle.