From Scratch to Showcase: My Personal Website Creation Process

Planted  11 Dec 2023 23:10:00 PM (+07:00)
Last tended  21 Dec 2023 13:10:11 PM (+07:00)

Why I use Obsidian with Hugo?

  • I can easily write and edit content from many devices when the idea strike. Online and offline. Whether it be on my desktop PC, tablet, or mobile phone.

  • Reduce duplication. It’s a better workflow for me than to write in Obsidian, and then rewrite it again in Hugo.

  • I could use Obsidian Publish to avoid the hassle of trying to get Hugo working with Obsidian notes, but that is no fun. I want full customization for my site, from layout and how it looks. It’s also provides an opportunity for me to learn to build site with Hugo framework.

Why I choosed Hugo instead of the other CMS?

Wordpress

The reason I didn’t choose Wordpress was because I don’t want my content to be stored in a database. It’s not as easy to backup. The export files still aren’t easy to read or phrase out of the box and uses it with another CMS. Notes will be duplicate in Wordpress as well as Obsidian. I would also miss out on free hosting, as it won’t be a static website.

Implement dark mode

I mostly followed the guide written by Luke Lowrey on setting up dark mode theme using CSS and JavaScript.

Some guides suggest you add data-theme in <body> tag, but I follows Luke’s guide by added data-theme attribute to the <html> tag because the attribute will get read before the body of the page is render. This prevent the site to load the default theme, causing a brief flash, before switch to the theme that visitor set.

Note

data-theme is a custom data attribute used in HTML to store information about the current visual theme of a webpage. It’s not part of the standard HTML specification, but has become a common practice for developers to implement theme switching functionalities.

Here is the code used to load set theme from local storage, or uses the visitor’s default operating system setting to adjust the theme if the visitor never visit the site before and never set the theme:

const storedTheme = localStorage.getItem('theme') || (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
if (storeTheme) {
  document.documentElement.setAttribute('data-theme', storedTheme);
}

Custom Code Syntax Highlight

By default, Hugo appeared to use “monokai” style for syntax highlighting. If you want to switch to another style, like “nord” for example, then simply edit hugo.yaml like this:

markup:
  highlight:
    style: nord

But doing that will lock the style to both “dark” and “light” theme. Here I want the style to look different for both theme, so we have to dig further. Starts by edit hugo.yaml to this:

markup:
  highlight:
    noClasses: false

This will disable the default syntax highlighting and allows me to use custom syntax highlighting beside the one that came with Hugo (Chroma, to be exact).

First, I have to generate a style sheet from Hugo using this command line:

hugo gen chromastyles --style=xcode > assets/css/syntax-light.css

From this example, this command line will generated the “xcode” style syntax highlighting to a file called syntax-light.css in assets/css/ folder. Her you can edit this file to how you want you code syntax highlight to behave.

For my website, I want to use “xcode” style for light theme, and “catppuccin-mocha” style for dark theme. I have to generate another style sheet file out using this command line:

hugo gen chromastyles --style=catppuccin-mocha > assets/css/syntax-dark.css

Now that I have two kind of style sheets, it’s time to implement the site to display the right style for both dark and light theme.

// TO DO

Custom Scrollbar

The default scrollbar look outdated comparing to the rest of the website. Let’s fixed that by modify the look of the scrollbar with CSS:

:root {
  --scrollbar-color: rbga(0, 0, 0, 0.1);
  --scrollbar-color-hover: rgba(0, 0, 0, 0.15);
}

[data-theme="dark"] {
  --scrollbar-color: rgba(255, 255, 255, 0.1);
  --scrollbar-color-hover: rgba(0, 0, 0, 0.15);
}

::-webkit-scrollbar {
  width: 16px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  border: 3px solid transparent;
  border-radius: 9999px;
  background-clip: padding-box;
  background-color: var(--scrollbar-color);
}

::-webkit-scrollbar-thumb:hover {
  background-color: var(--scrollbar-color-hover);
}

Implement Comment System

I want part of my website to allows visitor to leave comment, but since this is going to be a static website, it’s not going to be easy to implement.

There is giscus, an open source comments system powered by GitHub Discussions.

“When giscus loads, the GitHub Discussions search API is used to find the Discussion associated with the page based on a chosen mapping (URL, pathname, <title>, etc). If a matching discussion cannot be found, the giscus bot will automatically create a discussion the first time someone leaves a comment or reaction.”1

The limitation is that it’s requires visitor who want to leave comment need to have a GitHub account. The comments will be stored within GitHub repository, which is a third-party away from the server that this website is hosting. Though, it seem to be possible to export comments out along with everything else from repository if needs to.

Deployment

“If you kept the ‘Automatically deploy on push’ option selected […], any changes you make to your GitHub repository will be automatically pushed to your site.”2

What I wrote in Obsidian won’t be automatically update on the website right away. Hugo requires you to type in command line to build the website out before it can be push to the server.

Even though, it’s possible to write come code to get the automatic workflow happens, but that’s OK, though. What I build is a website, not an X (previously known as Twitter) feed.

Places to host your static sites for free

See also

References

  1. giscus. “How it works”. Retrieved 13 December 13, 2023. ↩︎

  2. Glass, Erin (October 22, 2020). “How to Deploy a Static Site from GitHub with DigitalOcean App Platform [Quickstart]” DigitalOcean. Retrieved December 13, 2023. ↩︎