My Blog Tweaks | 私のブログで行っている微調整をまとめてみた

Intro

This blog uses Hugo , a static site generator, and the theme is PaperMod .
I use GitHub Pages for the hosting service.
For the sake of notes and introduction, I write down some of the tweaks I made.
At first, the motto was KISS, but the tweaking became bloated before long.
The code became bloated, but the output was designed to be lightweight. (No unnecessary CSS loading, etc.).
This blog is designed to look correct even if JavaScript is disabled. ( for privacy nerds like me :) )
Also, all scripts are downloaded by Makefile and no CDN is used.
The repository for this blog is https://github.com/HidegonSan/blog/ .
Thanks and Open Source License: https://hidegonsan.github.io/blog/pages/thanks/

Shortcodes

Alert

Our very own Aditya thinks that a monochrome theme is appropriate for PaperMod, so I followed his lead.
The Tabler Icon is used for the svg.
Tabler Icon’s license: MIT

Usage:

{{< alert note >}}
**Note** or **Alert** or **Danger**  
Here is the text...
{{< /alert >}}

Sample:

Audio

Audio tag support.
Plyr and others are not used because it is against my belief to load superfluous JavaScript.

Usage:

{{< audio "Little_Bits.mp3" >}}

Sample:

Little_Bits.mp3 from http://www.openmusicarchive.org/
Audio license: Public Domain

Video

Video tag support.
Like audio support, no JS libraries are used.

Usage:

{{< video "video.mp4" >}}

Sample:

Video from my youtube .
Game: Animal Crossing: New Leaf © Nintendo
Music: Maritime Memory - Splatoon © Nintendo

Color

Color view for the code span.

Usage:

{{< color "#009900" >}}

Sample:

red
orange
tan
rebeccapurple

#090
#009900
#090a
#009900aa

rgb(34, 12, 64, 0.6)
rgba(34, 12, 64, 0.6)
rgb(34 12 64 / 0.6)
rgba(34 12 64 / 0.3)
rgb(34 12 64 / 60%)
rgba(34.6 12 64 / 30%)

hsl(30, 100%, 50%, 0.6)
hsla(30, 100%, 50%, 0.6)
hsl(30 100% 50% / 0.6)
hsla(30 100% 50% / 0.6)
hsl(30 100% 50% / 60%)
hsla(30.2 100% 50% / 60%)

inherit
initial
revert
unset

Spoiler

Hi! I’m spoiler contents :)

// me too! \\

Integration

I integrated some libraries to make my site more useful.

Chroma

Use the great Chroma that bundled with the Hugo.
Highlight.js is not used.
Supports dark/light theme toggle and works correctly even in a JavaScript disabled environment.
I created a 100 line small python script for this.

Sample:

for i in range(1, 101):
    if i % 3 == 0 and i % 5 == 0:
        print("FizzBuzz")
    elif i % 3 == 0:
        print("Fizz")
    elif i % 5 == 0:
        print("Buzz")
    else:
        print(i)

GoatCounter

GoatCounter is an open source web analytics platform that aims to provide easy-to-use and privacy-friendly web analytics.
Very lightweight and I am satisfied with it.
It is not loaded in the development environment.
JS License: ISC License

instant.page

instant.page uses just-in-time preloading - it preloads a page right before a user clicks on it.
I don’t know how well it works, but it looks good.
License: MIT

KaTeX

$KaTeX$ is the fastest math typesetting library for the web.
Auto-render, Copy-tex and mhchem are also integrated.

$KaTeX$:

$$ f(\relax{x}) = \int_{-\infty}^\infty \hat f(\xi)e^{2 \pi i \xi x} ,d\xi $$

mhchem:

$$\ce{Hg^2+ ->[I-] HgI2 ->[I-] [Hg^{II}I4]^2-}$$

License: MIT

Mermaid.js

Mermaid is a JavaScript based diagramming and charting tool that uses Markdown-inspired text definitions and a renderer to create complex diagrams.

sequenceDiagram Alice->>John: Hello John, how are you? John-->>Alice: Great! Alice-)John: See you later!

License: MIT

Contact form with Google Forms

Contact form made with Google Forms .
It’s works great.

Tweaks

Image popup

Based on the Magnific Image Pop-Up Modal for Hugo .
CSS and JS are optimized for PaperMod.

Sample:

Show related posts

Based on the Show related posts .
CSS is optimized.

Image:

Also, I’ve added a little line.
You can see them at the bottom of this page.

Render-link hook

Based on the Adding a render-link hook .
External links open in a new tab.
It works great.

File name for codeblock

Make file names visible at the above of code blocks.

def main():
    print("Hello, World!")

if __name__ == "__main__":
    main()

This was a struggle.

Other

• Auto image compression to webp
• PWA support
• SEO Optimization
• NoScript tag for search
• Customized archetypes
• Hamburger menu for mobiles (not used)
• Sticky toc
• Customized post meta
• Ultimate Makefile (Update all deps with one command and debugging)

Various other minor CSS are also applied.

END

I’m interested in making the site useful, not unique.
Don’t be too heavy. OGP image generation is not implemented.
Thanks for reading.