This is my first post for my github pages site blog. Now that I got that out of the way I thought I would start out by writing about hexo.io. Hexo is a node.js powered static site generator that can take markdown files and generate a collection of html files with a given theme. It is a very useful tool that can automate a great deal of work that would otherwise be hand coded.
Speaking of hexo I thought I would make my first post about one of the static site generators features called tags. Hexo tags are a way that I can quickly append generated html content in my blog posts.
For example embedding a youtube video into one of my posts is as simple as typing this is my markdown.
When I generate my site the above is parsed into the following HTML.
So say I want to embed one of my favortie cyriak videos into a blog post. Doing so is as simple as finding the id of the video I want to post, and then use that id as the single argument given to the tag.
Writing my own tag.
Say I want to write my own hexo tag, rather then using a built in one. To do so I need to save a js file in my root scripts folder in my hexo project working tree. Maybe call it something like my-tags.js, hexo does not care what the name of the file is that much as long as it is a *.js file. Inside the js file is where I will write my tag.
So for an example why don’t I throw together a simple little tag that will inject a random quote from the Simpson’s. Well maybe that will be what happens if I don’t give an argument actually.
So then I would write something like this in the my-tags.js file:
So then if I put this in my markdown:
I get a Simpson’s quote:
I can later on expand this so that I can set a certain style of quote that is maybe a little more meninful by giving it a argument so that:
gives me an Allen Watts quote:
Sometimes I might want to grab some data from a server to use in a tag.
Say for whatever the reason I might want to write yesterdays winning Pick 10 numbers from data.ny.gov. A poor example I know, but every now and then I might want to grab something from somewhere and use that data in a blog post in some way.
So to do any kind of Async thing with a hexo tag I will need to use a promise. As such I will want to promisify an http request. To help with that without useing bluebird.js I found this on stackoverflow.
Once I have my httpRequest promise method to make the call to a server I put together this.
That Will give what I want in this case if all goes well.
Tags a very helpful for generating and injecting content into a post. Whats also great about it is that the final content is plain old static html. However if it is a situation in which it is part of the theme that needs to be augmented, helpers will be a wiser choice. In any case I will likely be writing more hexo tags in the future now and then, so this blog post will come in handy. I will update it as needed, as I do with many of my posts so far.
Be sure to check out my other posts on hexo