I've been meaning to replace my old blog for a long time now, but I was dreading getting my hands dirty with it. I made the original blog more than 5 years ago back when Asp.net MVC was still being developed and my blog had been based on an early example of a blog called oxite.

My primary motivation in using the oxite blog was to prove to myself and others that I at least understood how to modify and deploy an asp.net MVC website, which the exercise more or less did. The problem was that the oxite sample was not particularly rigorous, as it was intended more as an example, and to make matters worse eventually later versions of Asp.net MVC made the blog sample more or less obsolete. Also, I later learned there was some sort of security hole, probably sql injection, in the comments section or perhaps elsewhere, and I had to make the comments readonly, further declining the utility of the blog. To add to all of that, its base design was not particularly pretty compared with the responsive mobile designs of today. I decided that I needed to scrap the site and start over with a new system, preferably a CMS, but there are so many, which one to choose?

In a recent project, I got to a chance to develop new features for a website based on the Umbraco CMS. Having worked on a number of CMSes written in PHP and other languages, I know that CMSes often have ugly or confusing design concepts and sometimes they are missing features unexpectedly. So I was not particularly excited about working on a CMS-based application. But with Umbraco, I was pleasantly surprised to find a nice, clean, straightforward, and easy to modify CMS, written using some of the latest web technologies, like AngularJS.

Umbraco

I would normally paste an image of the umbraco logo here to make the article less boring, but apparently the for-profit side of Umbraco has some weird trademark issues with the logos, since they make money from official training.

Setting up and installing Umbraco was fairly straightforward and easy. The CMS generates and uses a SQL Server Compact Edition database, so it will get itself up and running with no real database setup, at least initially. Once you decide to deploy the database, however, you'll have to use SQL Server Compact & SQLite Toolbox to generate create table and data insert scripts. Which was kind of confusing at first, but eventually I learned how to migrate the data out of the Compact database with ease.

Next I began porting all of my old blog posts over to the default Umbraco blog setup. I ran into trouble with the default post document type and template not displaying full html as my original blog had. Perhaps I needed to use some other document type and template, but none of them seemed to fit what I needed at the time. So I figured it was a good time to explore the creation of custom document types and templates. I had some experience with template creation before, but I felt it would probably be good to go over it again to cement my knowledge of the basic building blocks of the CMS.

After creating a new html/blog friendly template and document type, I started to look at how the blog looked overall. The default web site design was based on the Overflow design at HTML 5UP, which has a series of creative commons Html 5 site designs.

I noted that there were several stylistic issues that probably needed some editing. First off, the first page just featured my name with nothing else and the second page was just a single button that led to the next page. While these elements made for a slick demo, they kind of seemed like a waste of space for my purposes. So I stripped out those elements and, with some help from my beautiful wife, cleaned-up and reworked the html and css for the site.

Next, I looked at the my ajax-enabled demo examples/blog posts like the random name generator or the json pretty printer and looked at how to implement custom ajax functionality in Umbraco, another task that I had completed before but that I felt it couldn't hurt to get some practice on. In order to expose an MVC controller for API usage, one has to implement a controller that inherits from the Umbraco Surface Controller. After that, it's pretty much like any other asp.net mvc controller; the only major difference is that, like web api, the route urls are usually prefixed with '/api/'.

Finally, almost everything seemed in place, except I wanted to display links to my github and nuget accounts and the built-in social icon display partial view didn't have code for either of those. I modified the umbSocial partial view to add spots for those two sites, and my wife found a github icon among the ones provided by Font Awesome. However, we couldn't find an icon with font-awesome that was associated with nuget.

My wife found a nice blog post on converting an image into a font at WebdesignerDepot.com. First, she used inkscape to convert the standard nuget icon into a vector graphic, and then used one of the online converters mentioned in the article to convert the vector image into a font. Lastly, we modified the css to include the new icons, and that was that.

After all is said and done, I think the blog turned out pretty well, and I got some nice training setting up and deploying an umbraco blog.