BlogDevOps

As I was mentioning the inaugural blog post, I was looking to build a simple but elegant solution to manage my blog, and as I went for the static site generator route, I was left with no “administration” panel to write and publish posts.

While researching my options, I noticed a lot of people were using GitHub to host their sources, and deploying either to GitHub pages or to other hosts via Git hooks. But I wanted to use the infrastructure I already had in place using Visual Studio Team Services to host the code and Azure Websites for hosting.

The process - how does a static site work?

First of all, I had to understand how Hexo works (and pretty much any static site generator for that matter). This wasn’t very hard, you just need to read the readme file of the tool. I’ll lay it out in a few words. First you need to install the tool, usually using npm. Once you have it, you can initialize your blog in a new folder - I’m not going to go into any more details about this, maybe another post. Suffice to say, this folder is now your “source” for the blog. Since the tool has quite a few dependencies, you need to run npm install to ensure they all get deployed in your folder as well. Once you have that, you run a command to generate your site - same as you would compile your sources in any other language. The result of this compilation is a folder that is essentially your entire site - a self-contained website consisting of just a bunch of HTML, CSS, JS and images. The idea is, you take this folders and publish it anywhere and you’re done with it.

The goal

So my goal for the blog deployment was to be able to host my code in Visual Studio Team Sarvices in a Git repository and every time I write something, commit the article and via some magic in the next couple of minutes my Azure Website would show the post. I could commit a new markdown file in the repository from anywhere or any device and it I would get a new post on my blog. No need to worry about compilation, deployment, or anything

Read More

Share Comments

Hexo image hacking

As I just started blogging on the hexo platform I quickly stumbled upon a behavior that was not what I expected.

I wanted to insert an image that links to a different site, but because of the fancybox implementation whenever you clicked the image, it would open the image rather than opening the link as I wanted.

For example, I want to show my StackOverflow flair image and point the link at the profile page:

1. The most basic thing you would try is:

1
[http://stackexchange.com/users/flair/17621.png](http://stackexchange.com/users/17621)

This will render like this:

http://stackexchange.com/users/flair/17621.png

Obviously not what you’d expect. All right, maybe what you’d expect, but certainly not what we want.

2. Trying to fix our initial mistake, try and render the image in the tag

1
[![Alex Drenea's Stack Exchange profile](http://stackexchange.com/users/flair/17621.png)](http://stackexchange.com/users/17621)

Rendering like:

Alex Drenea's Stack Exchange profile

This is close to what we want, but not exactly there. If you click on the image, it just open the fancybox for that image, but I want clicking the image to take me to the destination website instead. I don’t like the caption under the image in this case even though it points to the right link. But I want the image to go to the link. I also don’t like the center alignment.

Read More

Share Comments

Making it happen

The beginning of a new era

It’s been a while since I felt the need for a blog to put down my various thoughts and finds. At the same time, I feel more and more that it’s time to start giving back to the community. Combined with the fact that I’ve been doing some pretty interesting new things at work lately I thought there’s no excuse in putting it off any longer and set up a goal to get it done last weekend.

As you can see in the about page, I am not really an web guy so I knew going in that this will not be easy. But hopefully I made it work and I will be more than happy to hear your feedback and learn from you guys how to make it better.

Read More

Share Comments