Customization

OK, you've read the Setup guide and Blogging with Markdown. You have your site online, everything works beautifully but you're wondering how to adapt it to your needs. It's very simple.

Site configuration

Open SkunkUtils.fs in the root of your repository. You'll find five values near the top — just change the text between the quotation marks:

let siteTitle = "SkunkHTML"
let siteDescription = "The simplest blog on GitHub Pages..."
let siteBaseUrl = "https://mg0x7be.github.io/skunk-html"
let siteLanguage = "en"
let siteAuthor = ""

siteTitle — appears in the browser tab and RSS feed
siteDescription — used in meta tags and RSS feed description
siteBaseUrl — the full URL of your site, without a trailing slash. Examples: https://<user>.github.io/my-blog for a GitHub project page, https://<user>.github.io for a user page, or https://example.com if you self-host with a custom domain
siteLanguage — language code (e.g. en, pl, de)
siteAuthor — optional, shown in RSS feed. Leave empty ("") to skip

You don't need to know F# — just edit the text between the quotation marks and push. That's it.

Avatar and icons

The avatar at the top can be found in the /assets/ folder as avatar.jpg. You can replace it with another one. Next to it are icons for various browsers and devices, such as favicon.svg. You can replace these files with others.

You can also use a different set of images and formats. In that case, make sure to update the header in the /html/ folder in the head.html file. If you google for "favicon generator" you'll find millions of sites that generate these types of assets for different devices.

Themes

SkunkHTML comes with four color themes. All of them support both light and dark mode automatically.

Theme	File	Style
Default	`css/tweaks.css`	Clean, minimal with dark mode
Ocean	`themes/theme-ocean.css`	Cool blue tones, GitHub-inspired
Terminal	`themes/theme-terminal.css`	Green-on-dark hacker aesthetic
Ink	`themes/theme-ink.css`	Warm serif typography, newspaper-inspired

To switch themes, open one of the files from the themes/ folder, copy its entire contents, and paste it into css/tweaks.css (replacing everything that's there). Push, and your site will use the new theme.

You can also create your own theme by editing the CSS variables in tweaks.css.

Dark mode

Dark mode works automatically — your site respects your visitors' browser/OS preference. No toggle is needed. This is handled by the data-color-mode="user" attribute on the <html> tag, which tells MVP.css to follow the system's prefers-color-scheme setting.

All built-in themes include matching dark mode colors.

RSS feed and sitemap

Your site automatically generates two files every time it builds:

*feed.xml* — an RSS feed that readers can subscribe to with any RSS reader. It includes all your blog posts with titles, dates, and descriptions.
*sitemap.xml* — helps search engines discover and index your pages.

Both files use the siteBaseUrl from your configuration, so make sure that value is correct.

More sections!

You can find how to create blog posts in the Blogging with Markdown article. However, if you'd like to add a new tab (next to "Home" and "Links"), you just need to create a new markdown file and add a reference to it in the header.html file in the /html/ folder.

For example, create a file called whatever.md with this content:

# Favorite food
This page will contain a list of my favorite dishes

When you save this file in the /markdown-blog/ folder, the build process will generate a favorite-food.html (file name based on the title inside the file).

So the only thing left to do is add a link in the header.html file in the /html/ folder:

<ul>
    <li><a href="index.html">Home</a></li>
    <li><a href="favorite-food.html">Favorite food</a></li>
    <li><a href="links.html">Links</a></li>
</ul>

Colors and CSS

If you'd like to play with colors and CSS changes beyond the built-in themes, you'll find everything in the /css/ folder. There are two files:

styles.css is the original, unmodified MVP.css v1.17 - https://github.com/andybrewer/mvp
tweaks.css contains small tweaks that override the above settings in several places. You can modify this freely or even replace it entirely with your own styles.

You can find references to these files in the /html/ folder in head.html. You can completely replace these CSS files with something else.

You can see how such a modified site might look here: https://mg0x7BE.github.io/

Blog comments system

SkunkHTML integrates beautifully with giscus. It allows to add comments under each blog post. Everything about this topic can be found on the giscus website. All you need to know is that you'll find the configuration script in the /html/ folder in the script_giscus.html file. It's currently commented out. Remove the arrows and adjust it according to what's described on the giscus website.

As above, you can see an example of such integration at https://mg0x7BE.github.io/

Published on 2024-12-27