It’s been just under a month since my last post. Summer had just started, I was migrating my projects from GitHub to GitLab… Now I’ve got a couple part-time summer jobs and just enough free time to work on my projects. I’ve been spending a lot of time working on my website theme over the past month; I keep telling myself I’m going to take a break and work on other things, but it just doesn’t happen. Maybe this time, though.

… Probably not.

Anyways, below is a list of the major improvements I’ve made to the theme and a little bit about each one, followed by a bulleted list of some of the more minor changes I’ve made.

Analytics by Piwik

I’m an advocate of online privacy and freedom - though perhaps not to the degree some would say I should be - and I’ve tried to keep that in consideration while creating this theme. For instance, it does not support Disqus comments or Google Analytics, even though Hugo comes with built-in support for both, as both are notorious for tracking people across websites. In my last post I talked about finally choosing Muut as a comment service provider and my reasons for doing so.

At first, I didn’t want to include any analytics at all in my theme - after all, isn’t all analytics collecting infringing on a user’s privacy? Yet, as I’ve been involved in the “No GAPPS” and microG communities, I realized that I have no clue how many people, if any, are visiting the documentation I’ve put together or using the installers I provide. That is valuable information that can help me figure out which areas to focus on and improve. So I see why people would use analytics. Even so, I wasn’t about to add Google’s analytics, given that tracking issue…

Some research (searching something like “self-hosted analytics”) pointed me to Piwik, self-proclaimed as “the leading open-source analytics platform”. Features include “free”, “open-source”, “100% data ownership”, and “user privacy protection” - all good things, in my opinion.

The first three features are all straightforward enough, but how does Piwik protect user privacy? The best place to answer that is the official documentation. As of the date of this post, that list includes:

About that third item: the way Piwik provides an opt-out method is by giving site owners an <iframe> that can be included somewhere on the site (e.g. on the Privacy Policy page). For those who aren’t web developers, an <iframe> is like a picture-in-picture window in a website that allows you to see another website. The outer website has no control over anything inside the <iframe>, which is a problem for a developer whose theme allows people to modify the appearance of their website. Also, this particular <iframe> is large enough that it takes up too much space to be included in the sidebar or footer of every page.

So, I did the next best thing and put a link to the page that the <iframe> loads in the footer. If you scroll to the bottom of this page, you can see an example of it. It’s a tacky method that I hope to replace in the future, perhaps with a JavaScript-powered button, however that requires crawling through Piwik’s API documentation just to see if it’s possible.

If you happen to be using this theme, you can learn how to enable Piwik on your site here.

Search

The ability to search the website for content is a feature that I’d been wanting to implement for a while. Many static sites use Algolia for their searches, though I found by scanning the documentation that updating the search database has to either be done manually or in the JavaScript in a visitor’s browser, due to the nature of static sites (no server-side processing). I prefer a solution that doesn’t require extra intervention from the site developer.

Then I came across Lunr.js, a client-side search library written in JavaScript. The client web browser loads a collection into a search index and performs all searching in the browser. The only thing sent to the server is a request for the JSON file containing the page information to load into the index. Ideally, the server used for hosting is configured to tell browsers to cache non-HTML files so that the JSON file doesn’t need to be downloaded on every page, just on the first visit or when the file changes (i.e. the site was updated).

The search is pretty basic in terms of features. Lunr.js provides some methods of customizing searches that allow you to emphasize certain words in results or allow “fuzzy searching” with a certain number of allowable differences between a search term and a word in a result page. I was not too content with any sort of blanket-applying of any of these customizations to search terms, so search by default matches only exact words and a wildcard to match a potentially unfinished final word.

If you are a site developer who wishes to use search on your site, check the documentation.

New Icons

A previous version of this theme used the Foundation CSS framwork by Zurb for the layout, as well as the icon set that came with it. The CSS framework has long since been removed from the theme in favor of CSS flexboxes, but the icons remained. I wasn’t content to use their icons, though, especially since Font Awesome provides an even larger set of icons that I was able to use for the social icons feature of BluestNight.

Speed improvements

I finally decided to check my website against Google’s PageSpeed Insights tool.

55100

My website had received a failing score of 55100. I wasn’t about to settle for a failing grade, so I set out to improve where I could. A number of improvements were made to my server’s configuration, namely enabling file compression and browser caching. That improved the score a bit, but only from a “Failing” to “Needs Work.” The rest were things to fix in the theme. The two main things to fix were optimizing images for file size - without skimping on image quality - and minimizing the CSS and JavaScript files.

It took some time, but I managed to figure out how to use Hugo’s template functions to minimize the generated CSS using regular expressions. The JavaScript file for searching is a static file, so I settled for shipping and using a .min.js version.

A recent commit also includes some experimentation with HTML that tells browsers to prematurely connect to servers or download files that will be used later, thus minimizing loading time for when those files end up being used.

Other changes

This list isn’t all-inclusive - for that, check out the git commit log.

  • Documentation was moved from the GitLab project wiki to the example site, now mirrored on GitLab pages. This is in part due to the GitLab wiki not showing all the different pages in the navigation sidebar.
  • The next/previous page (in section) buttons have been revamped and now allow custom targets.
  • The RSS file generation has been improved to only include content pages with dates associated with them - i.e. blog posts and similar content. Basic site pages (“About”, “Contact”, etc.) are assumed to be those without the date set in the front matter and are ignored.
  • Many bug fixes…

What’s next?

I’m planning on taking a break from working on BluestNight for a bit. There’s some writing that I’ve been planning on doing for a while, which you will be able to read on my personal blog. Along with that, I’ll be working on my game engine project some more, maybe finally figure out how I’m going to enable game scripting. I’ll still be paying attention to the BluestNight issue tracker, if anyone finds any bugs with the theme.

So, what do you think about this theme? Do you think I made the right decision in adding support for Piwik analytics? Let me know in the comments below.

Comments