Continuing the blog upkeep
posted under category: Life Events on February 28, 2019 by Nathan
I mentioned a couple weeks ago that I was working on updating my blog tooling to make it friendlier for me to use. Well I’ve gone and done a couple of interesting things.
- I added support for markdown
It’s like no software these days is complete until it supports markdown files. Vue CLI UI makes it pretty easy to add NPM packages. Actually, I prefer that method over the command line now because I lose the fear of misspelling the name of a package or install the wrong one because it has a logical name, and it always tells me when a package is out of date. I really love Vue UI! If you’re not convinced yet then I’ll tell you it has a dark mode. You’re welcome.
I chose the cleverly-named vue-markdown package. Okay, maybe that’s not such a clever name, but I don’t need clever, I need a markdown library that works with Vue and is easy to use, easy to integrate, and lets me work the way I want. Vue-markdown succeeds on all fronts. It’s as easy as:
<vue-markdown @rendered="grabMarkdown" :linkify="false">{{post.bodyMarkdown}}</vue-markdown>
I had to fight with it a bit in order to get both the markdown text as well as the rendered HTML - one for my continued editing, and the other for outputting on the screen without forcing a markdown render on your web browser as you read this. Because the markdown is only rendering as HTML when my editor is on the preview tab, I have to force the tabs to switch over to the preview (if it’s not already there) so that there is HTML that I can save. Of course it takes a moment to do that, it’s not automatic. Vue’s $nextTick() comes in handy in these types of situations, even though every time I use it, it feels like a hack. Really it’s just a sign that I’m rushing through a solution without thinking fully through it. Then again on the other hand, my React project at work could really use a nextTick method - setting a short timeout to an anonymous function is even more of a hack.
Anyway, Markdown was an easy thing to add, and anything that gets me playing with Vue more is a sure positive.
- Friendlier blog post URLs
I always think of URLs as part of the UX. A well-thought-out address should be discoverable and simple. It’s not even for the SEO, although I bet it benefits as well. It’s really just a thoughtful way to care for my visitors.
My post scheme is easy - this one will be /techblog/388 but is also addressable by the name alone /techblog/post/Continuing-the-blog-upkeep. That second one (slug-only links) will probably be an unused feature, but I like the idea that the ID isn’t required as part of the URL because it seems cleaner.
The worst part of the friendly URL change was definitely the URL rewriting. Not because it’s difficult, no way, but because there are so many ways to do it, and it’s hard to find the right one. For example, Hostek, my wonderful web site host that I definitely recommend, says they recommend using a .htaccess file, and that it works with ISAPI_Rewrite. I didn’t have any luck with that. The file would have been this:
.htaccess
RewriteEngine On
RewriteBase /
RewriteRule ^techblog/([0-9]+)/?(.*)$ /techblog/?id=$1 [NC,L]
RewriteRule ^techblog/(post|entry|slug)/([a-zA-Z0-9_-]+)$ /techblog/index.cfm?slug=$2 [NC,L]
Instead, I had much better luck using a web.config file. Clearly I’m on an IIS server. This worked, but the backreferencing is so ugly. Only Microsoft could ruin regular expressions. That file is like this:
<?xml version="1.0" encoding="UTF-8"?>
<configuration>
<system.webServer>
<rewrite>
<rules>
<rule name="Blog Post Slugs">
<match url="^techblog/(post|entry|slug)/([a-zA-Z0-9_-]+)$" />
<action type="Rewrite" url="techblog/index.cfm?slug={R:2}" />
</rule>
<rule name="Blog Post IDs">
<match url="^techblog/([0-9]+)/?(.*)$" />
<action type="Rewrite" url="techblog/index.cfm?id={R:1}" />
</rule>
</rules>
</rewrite>
</system.webServer>
</configuration>
Finally, I also have this site running locally in a Lucee server. It’s fast and minimal and I love it, but it’s Tomcat/Catalina which is a little harder to google the solution. The redirect file is called rewrite.config and it lives in my lucee\tomcat\conf\Catalina{domain}\ folder. It looks like this:
RewriteRule ^/techblog/([0-9]+)/?(.*)$ /techblog/?id=$1 [NC,L]
RewriteRule ^/techblog/(post|entry|slug)/([a-zA-Z0-9_-]+)$ /techblog/index.cfm?slug=$2 [NC,L]
There are subtle differences between all of these, and that was my biggest pain point.
Anyways, I hope this has been entertaining and educational as I continue to evolve dopefly.com into something that makes me proud to be associated with.
Coming up next: Fonts and colors for rendering code. Friendly URLs for years and categories. Those are the small plans that are definitely happening. The big plans are things like dumping the database altogether, putting all the code on GitHub, continuous deployment from commits, and other things I’ll probably never get to.