This details how I made this static github page.

First, I installed Hugo on my local machine and created a site. I chose the theme Hugo-Nuo because it looked nice and because the author has a github page with regular updates and decent documentation.

It was not crashing, so I deployed it to a Github static page using the official Hugo Guide for hosting on Github.

Then I wrote this blog post using the standard template by running hugo new post/how_i_made_this.md and writing the rest in the resulting .md file. I ran deploy.sh (from the Hugo Guide’s instructions) and did not see this post.

So I removed the “draft:true” property from this post, felt like an idiot for taking 30min to figure that out, then deployed again.

Finally, I realized I had forgotten to set the new domain in my config file after deploying. So I fixed that and now everything seems to be working, I think.

Nick Rout noticed that the quote styling didn’t come out right, so I changed that. It also screwed up my normal code highlighting, but I think it’s better to use GitHub gists anyway, and I’m too lazy to create my own custom code styling template and shortcode in hugo. I’ve had some issues with the code highlighting’s limited support for Kotlin so I’m basically just pretending it doesn’t exist.

Nick also noticed that the images stretch badly on mobile. This was because I was setting a constant height to my images, and the width expanded only up until it hit the edge. So I changed all my images to use width=percentage% and now the scaling is right.

For SEO purposes, I also added my site to GoogleAnalytics Console, and registered my site with Google Search Console to claim ownership of the domain according to google. I should now get pushed up on Google Search results a bit, and also get analytics on how many people visit my site or click through based on search terms, if I understand correctly.

I added the Kotlin Playgrounds shortcode as well, in order to make my kotlin more interactive

I’m putting further tests in here. For example:

Code Highlighting

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

inline fun<reified T: Any> get(key: String): T? {

    val instance = FirebaseRemoteConfig.getInstance()

    return when (T::class) {
        Long::class -> instance.getLong(key) as T?
        String::class -> instance.getString(key) as T?
        else -> throw IllegalArgumentException("the ${T::class} class is not supported yet")
    }
}

Which you’ll notice is incorrectly styled with red thanks to the single-quote styling change I made.

Git Gist

Image with zooming and title

Embedded Youtube

Linking to another post

References