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, we just need to change a few things.

Title

The site title, which appears as the browser tab name, can be found in the /html/ folder in the title.html file.

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.

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">Home</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, 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 delete it and simply insert 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://max.gripe

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://max.gripe/

Published on 2024-12-27