As a teen, I used to spend an unreasonable amount of time on Tumblr. Compared to other social media at the time, Tumblr had a very interesting element: the possibility to modify and customize your blog. I could never find a theme or template I’d be fully happy with, so I ended up modifying them. In fact, this tinkering on Tumblr was one of my first experiences with HTML and CSS. Whereas, as a teen I wasn’t creating much (besides angsty posts), but as an adult I’ve found passion in baking and other crafts.
With this passion for creativity came the need to share it with others. So I’ve decided I would like to have a place online to share results of my work. I wanted to be fully in control of the design, storage and hosting, which meant I wouldn’t want to use traditional social media for this purpose.
Knowing I wanted to have a website / blog of my own and knowing I’d want it to be lightweight and simple meant that the most popular choice, WordPress, was not feasible. Because I didn’t know of other blogging platforms, I went looking for something that would fit my criteria, and I’ve settled on static website generators. Since this was a few months ago, I don’t remember the exact reasoning behind choosing Hexo, but I believe the fact I was already slightly familiar with JavaScript helped to steer me in that direction. I do not regret the choice.
Design
Customization is not the only thing I brought into this project from Tumblr. I also envisioned my blog to be a blend between Instagram feed and my favorite kind of theme for my Tumblr blog - a multi-column tapestry of the posts in a single feed.
I had a rough idea what I wanted each post to look like. I knew I wanted the image to dominate each post, while also including title, description, date and time, and tags.
Design of a single post
So I knew what I wanted the feed to look like, but I still needed some sort of menu. I always liked the themes that had a menu on the side and I never really liked when the menu took space from the top of the page for a blog. It took a few retries to get it looking the way I wanted, but in the end I’m happy with it. In the sidebar, I’ve included a “profile picture” and banner, main menu links, a little description / bio, social media links and the footer.
Another element that I’ve implemented into the theme from old Tumblr days is scarves. Scarves were strips hanging from the top of the page (like a scarf) that would serve as a secondary menu, often redirecting to tag pages. That’s how I’ve decided to use them on my blog.
The rest of the theme was made to complement the design mentioned above.
Making the theme
Because I was completely new to Hexo, and the environment, I had to learn how the platform works as I wrote my theme. I have used several resources for this:
- Official Hexo Docs
- “Creating a Hexo theme from scratch” by Yuexun
- Dissecting other themes, like the official Hexo theme - landscape
- Using ChatGPT to help and explain anything I had trouble understanding.
For anyone who’s interested to know, a Hexo theme is a template, which Hexo uses to build the website. It is built primarily via .ejs files (Embedded JavaScript templates) or .njk (Nunjucks). For my purposes, I’ve chosen .ejs templates. These templates tell Hexo how the website should be shaped, and then CSS is used to style the template.
It took me about two days of studying and writing to create the first version, and I ended up with almost finished product. After I prepared and fed finished product into my blog, I ran into my first issue - load times.
You see, at the start, there was no pagination, and the images were quite big. Because I didn’t want to use external scripts for pagination, I’ve decided to start generating thumbnails first. I wasn’t fully confident with JavaScript yet and wanted results quickly, so I used ChatGPT to generate a starting point for the script. I took it from there, making sure I understand what the script does and tuning it until it was doing what it was supposed to.
This is the state I had the blog in action for a while, and besides some minor quirks, it was working out pretty well. But the original plan was to publish the template on Hexo site, as well as writing a blog about it. So after about seven months of procrastination, a few days ago I finally sat down and decided to address some of the quirks.
I’ve settled on using the combination of imagesLoaded, Masonry and Infinite Scroll for the infinite scroll implementation. Originally I thought I should write my own implementation, but at the same time I didn’t want to reinvent the wheel.
I have also made changes to the thumbnail script, where it was generating three different sizes, I now only generate one. The thumbnail is served in the newsfeed, while the full-sized image is in the posts themselves.
If you are interested in getting the theme or seeing the code, I have published it on github under MIT licence. You can also see my personal blog or demo page.
Future of Tapestry
I am not done with Tapestry yet. I’m using it for my blog and will continue to do so, so I will be adding more features for it as time goes on. Some of the features I am considering are:
- Clicking on the image in the feed opens it in foreground
- Ability to have multiple images attached to a post, and choose their layout
- Photo Galleries
- Whatever else I will find the template is lacking
In addition to Tapestry main, I have also forked the project into Tapestry Code, a theme I am currently using for this blog. Tapestry Code still needs some work before it can be published.