New software for this blog

The existing software for this blog site was written from scratch back in 2017 and did receive only minor updates ever since. So it was time, to give it some love and overhaul it.

Re-design

Well, jblog started from scratch, exactly built to my needs. I took that as a base, started from there. The whole rewrite took about two months time (on weekends and evenings). If I had to guess, on how much time I spent on this, I'd have to do a wild quess... probably about 40h of work in total.

I started with not much of a plan to the project, actually I was just looking to implement more of the API in order to be able to use local editors to actually edit blog posts.

As I am the only one posting here, it is obviously a useful approach to built it exactly as I need it 😉

locally Editing blog posts

Editing a blog-post was a bit of a fuss with the old software. The Editor-Pane was poorly built (by me) and I wanted to have some fancy markdown editor to make it work better. I did not want to implement that on the website, so I wanted to use my local, very fancy text-editors to edit my blog. I use especially NeoVim and Obsidian for my knowledgebase and now also for creating blog-posts. I actually used NeoVim before already, but I had to copy the text over to the html input. That was a bit too much.

local data structure

The blog posts are stored in a local directory structure which is accessible from Obsidian (so it is an Obsidian-Root) and so it is also available with other editors like NeoVim. This way I can edit all blog posts with both editors, or whatever editor I choose. (although, Obsidian is way more than just an editor).

Blot posts are identified by a name (which is also part of the URL to access them) and an id (to be able to change the name, if neccesary). This name is used as a directory name for this blog post. In that directory there is a file called .settings.json which holds the metadata of this post, like creator, when it was created, the state, visible on which blog sites.

And then there are the files for the blog post itself (texts in german and english). And maybe linked images or other binary data.

Twitter vs X and API

I was using twitter4j on the original implementation of JBlog, but I removed twitter support for now. Not sure, if I will include it again.

It was quite convenient to have the website tweet on its own as soon as a new blog post goes live. Maybe it will be implemented in future.

History of things

Also, having this on the Website directly, it did have some impact on data structure. A blog-Post did have a history of changes, that was built like this:

A history was not really necessary (just fancy), so I reduced it to a currentEdit and the currentLive - Version. But you get the idea.

Moving to a local edit, reduced complexity on server side. It was only necessary to implement a proper API... (which could in parts also be used by the frontend itself).

Having the blog posts and metadata on a local storage, it is easy to add them to a git repository. Hand thus get history for free.. 😉

Blog posts states

The old application used several states for Blog posts, NEW, DRAFT, LIVE, DELETED. This was a good start, although NEW and DRAFT actually had the same meaning.

Right now, those states are more or less obsolete. When having all blog posts on a local git repos

new restful API

This was the main driver behind this project - creating a new API to be able to edit blog posts (and basic information like categories) on my local machine using my favorite editor. Maybe in terminal, maybe with a fancy pancy full fledged GUI Editor. Or on my mobile phone...

some thoughts about the API:

• keep it simple. Wanted to make things more or less straight forward, no complex frameworks
• Authentication is important, how can I make sure, no spam-bot can post stuff (like they did on my wordpress installation)
• What client to use? Probably something implemented by myself - opportunity to learn?

Frontend outdated

The frontend also was a bit outdated. It used some old pre-release version of bootstrap and some free admin theme. It was nice as a start, but needed to be updated. I choose to switch to bootstrap 5, and have freemarker for the SEO - pages, as a javascript framework I chose Vue.js.

Although there are not many things, that are dynamic on the frontend side, I used Vue.js for the authentication and login stuff on the website. When logged in, you cannot create any posts, but you can fix translations and get some statistics.

Also, I wanted to change the logic a bit more. On the index page now it shows the latest Blog posts with a short teaser, which might be just the first couple of words of the blog post, but I can write my own text there.

Searching is now implemented purely using Vue.js and the restful API. Was a nice way got get to know Vue.js better.

The client

I implemented the client in Python. Was a good opportunity to freshen up my python skills 😉

There is only one bigger script, which does parse commandline parameters (using argparse) and does some actions. The following funktionalities are implemented already:

• Creating a new blog entry. Creates the local filestructure and creates the entry on the server as "NEW" (not really necessary, but I get an ID for the other operations)
• Syncing: This updates all server stored entries with the data that is local available. The server version is always overwritten (lokal holds primary data, no "conflict"). This is only an issue, when working on several machines. If so, you need to assure, that the directory structure is synced somehow (iCloud Drive, OneDrive, git,...)
• show Metadata of a post
• preview a post
• download or upload categories

This way more or less everything a fancy admin page on the blog would have done is possible locally. The implementation of this python script alone took about 10h (just because my python is a bit rusty, i had to look up a ton of things).

Conclusion

That was a fun project.