Build a static comic blog using Hexo---
date: Apr 03, 2022
This is an article about building a simple static comic blog that behaves like xkcd with
Self-hosted and static
I have been wanting to build my own comic blog for… (checks my last comic) a year now. One thing I always trying to achieve is to make it simple and static, and self-hosted.
The first thing I thought is to use ComicPress on WordPress that being used by a lot of people including the famous xkcd. After I tried to setup WordPress I realised the ComicPress no longer exist on the plugin store for the newer version, and the existing ones like Comic Easel is not what I expected, since they all tried to load comic on a subpage like
This leads me to go back to Hexo. Unfortunately, there is no information about building comic website on Hexo. Only one I found is a theme called funnies and it is broken in the latest version of Hexo. This leads me to the idea of building my own comic site using Hexo.
To the latest comic!
Firstly, I tried to redirect the index page(
index.ejs) to the latest comic:
<meta http-equiv='refresh' content="0;URL='<%- url_for(site.posts.sort('date').toArray().slice(-1).path) %>'" />
This will redirect index page to the latest comic page, a.k.a.
<%- url_for(site.posts.sort('date').toArray().slice(-1).path) %>.
This one-liner is pretty simple: get all posts, sort by date, convert to Array, get the last item, and then get the
path property and pass to the Hexo built-in function
url_for() to get the URL.
Also, you should also consider the people who block auto-redirect by include a link to the latest comic too:
<b>If auto-redirect is not working, click <a href="<%- url_for(site.posts.sort('date').toArray().slice(-1).path) %>">here</a>.</b>
The navigation I am referring to is the thing like this:
Yes, that one in the red rectangle: First(
|<), Prev, Random, Next and Last(
For the First, Prev, Next and Last(
>|), the code will look like the following:
Let’s not talk about that Random link for now. As you can see, it is really similar to the redirection code, since they are just like the standard pagination.
You possibly noticed that the text for
page.prev are actually Prev and Next. This is because the default sorting used in
page.prev is from oldest to newest (a.k.a. The order of
site.posts.sort('date')), and that is why it is named like this.
Random: the mix of JS and EJS
comic tag in posts; and RSS
This part is rather simple: add following code in your
However, if you generate RSS feed, this would be problematic since there will be no comic in your RSS xml.
So firstly, add following content to your custom RSS template:
Then, add or change the following content in our
Please keep in mind: do not include any
feed, since they will overwrite the custom template. Then, you should have a properly generated RSS!
With researching and implementing everything, it only took me about 6 hours to complete the theme. I bellieve that now you have all the resources you need, you can definitely build a similar site faster than me. I am looking forward for your own comic site on Hexo!