series|A New Blog

Starting a new project is always exciting, especially when the building platform is totally new for oneself. As I started this blog with Hexo, I had a good experience with JavaScript and some with Node, but no with EJS, Lodash and some of the other libraries Hexo is using.

This series is a little technical diary, how I started the blog and implemented my needs one by one. Learning by doing. Maybe some of my solutions are valuable to somebody else,
who faces the same issues I had.


Following 12 posts belong to A New Blog ...

Untitled
A New Blog

Show related posts in Hexo

It is always nice to point the readers of your blog’s articles to related posts, they might be interested in. They stay a little longer to understand what you have to offer and increases the likelihood that they become loyal readers, followers or subscribers. Related posts has become a standard on delivering news and posts.

In the default Hexo theme Landscape, on which this blog is based, there is no such function built in, but as the Hexo community is very busy, there are some plugins you can use.

Continue reading ...

Untitled
A New Blog

Pimping the Permalink

How to copy and share the permalink programatically

Until now I did not show the permalink under my posts in this blog, but in the past I had sometimes the need to pass one of the links and it was not very user-friendly, on desktop as well as on mobile. Not the One-Click experience I prefer.

My goal was to show the permalink and, even more important, provide a simple way to copy and to share. JavaScript to the rescue…

Continue reading ...

Untitled
A New Blog

Horizontal navigation menu above an image

How to deal with coverage, readability and scrollbars

I changed the main menu of my blog, because I wanted to get rid of the hamburger menu on the upper left, which was shown only for smartphones, but was not really reachable conveniently. Beside that it made no sense to have different navigations for different devices.

My choice was to implement a horizontal scrolling menu, which can grow over the time, without any need of customizing. As I have quite big header images and I wanted to place the new navigation in a more accessible zone, I decided to place it at the bottom, but above the header image.

Continue reading ...

Onion Broken
A New Blog

Change CSS class when element scrolls into viewport

I had a neat visual gimmick on the start page of this blog, that the gray-scaled header image of a post in the list scaled up to 100% and became colored, when the user hovered over it:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.article-inner .article-photo {
height: 150px;
width: 100%;
object-fit: cover;
transform: scale(1);
transform-style: preserve-3d;
transition: all ease-out 0.6s;
opacity: 0.3;
filter: grayscale(1) contrast(0.5);
}
.article-inner:hover .article-photo {
transform: scale(1.1);
opacity: 1;
filter: grayscale(0) contrast(1);
}

Nice, but a little bit useless on smartphones or tablets, where HOVER doesn’t really work.

Continue reading ...

Untitled
A New Blog

Using GitHub as Commenting Platform

Integrate Utterances' GitHub Issue Commenting to Hexo

If you run a blog, it is always advisable to integrate a commenting system, in order to get feedback on your posts from your readers.

So did I, when I start this blog and I decided to use the Disqus platform, as it was very easy to integrate … but I always had a bad feeling about a third-party platform collecting data from my readers. Disqus is probably not without reason under criticism by many people in the community.

As I host this blog at GitHub (see A New Blog (Part One): VS Code, Hexo and GitHub Pages) I was looking for a solution to host the comments also on my prefered platform. There were some solutions, which uses GitHub Issues for this and wanted to implement something like that someday.

Continue reading ...

Non Toccare
A New Blog

Automatic Header Images in Hexo

Use static images randomly for posts via Hexo script

Every article in this blog has an individual header image, to bring a little bit color into it. In this post I will show you how I deal with the images in using and automatic provisioning.

For serving these pictures I use a static folder, as described in A New Blog: Customizing Hexo. The hard work is done by the plugin Hexo Generator Copy, which copies the static files into the public_dir while generating.

Continue reading ...

Glencoe River
A New Blog

Hexo and the Dark Mode ... revised

Second approach to implement 'prefers-color-scheme'

While writing my post Hexo and the Dark Mode a few days ago, I thought it would be nice, if I could switch between the normal (light) and the dark theme, I’ve created for the support of the OS-related Dark Mode, even manually. The only thing I needed was a toggle element and a little bit of JavaScript.

Of course, I couldn’t manipulate the media query prefers-color-scheme itself, but introduce a different way by blog uses it. Instead of implementing the media query directly into my CSS (or Stylus) code, I used a root selector, which can be manipulated by JavaScript … something like this:

1
2
3
4
5
6
7
8
9
10
body {
background-color: white;
color: black;
}

[data-theme="dark"] body {
background-color: black;
color: white;
}
}

Continue reading ...

Tiny Scots 5
A New Blog

A New Blog: Blogging and Synching en route

Part Three of having fun with Hexo and GitHub Pages

I work with several devices, some Windows, some Android, and sometimes I have time to write on my articles at home (Notebook, Tablet), in my spare time in the office (Desktop, Laptop) or on my way to somewhere (Smartphone). Right now I’m am in a barber shop, waiting for my haircut and write these lines. So, wherever I am, I need the Hexo project locally, but in sync on a digital device.

The blog is synced via Dropbox, but hosted on GitHub Pages, so on every device I need the publishing functions of Git too.

Continue reading ...

Thistle Fence
A New Blog

A New Blog: Customizing Hexo

Part Two of having fun with Hexo and GitHub Pages

Hexo is a great tool to get quick results (see Part One of this series), when you decide to have a blog and its defaults are practical, but it’s power lies in the possiblities of customization via plugins. On the official plugin page, there are actually 302 plugins listed, but there are many more and no wish will be unsatisfied.

I will show you which of these I found worth to work with…

Continue reading ...

Tiny Scots 7
A New Blog

A New Blog: VS Code, Hexo and GitHub Pages

Part One of having fun with Hexo and GitHub Pages

A few days ago I puzzled over a technical problem regarding SQL Server, Active Directory and Visual Studio Database Projects. With tips, hints and snippets from several websites I got it running and the solution was absolutely memorable. For myself and for others. Nothing is harder than to know ‘you did this before…’, but not to remember how.

Because of this strong leaning towards oblivion, I started over 20 years ago my very first website zerbit.de, manually crafted with Classic ASP and a SQL Server database as backend, with an editor, tagging, categories and so on. It was really exciting to build this blog from scratch and writing articles for it, but it was so time consuming to expand the features of the website and keep it running, that some day I quit it silently.

So, to document the solution mentioned above, I could use tools like OneNote or others, like in the past years, but this would be just for me and not for all developers, who have a similar problem. I felt it would be unfair to participate from the knowledge of others to get my solution and dont give something back.

I decided to write an article just in HTML and publish it on my personal GitHub Page that I didn’t used so far. Ok, just Text … ugly. Just a little CSS and a little more structure and maybe I should do something with Vue JS … STOP … It would be better to pick one of the cool new static website generators based on Node.js, to detain myself from inventing the wheel again and save my time to write articles. So I did a little research and found HEXO … Bingo! I can work with my favorite editor Visual Studio Code, its all HTML, JavaScript and CSS, I can write my articles in Markdown and Hexo has a lot of helpers for stuff Markdown doesn’t provide, it produces static files and works only with files, therefore no need for a database … and it is well documented.

Continue reading ...