Blog Platform Switch and Makeover
When I first started blogging in 2004, I had to decide which platform to use. There were some hosted blog sites available, but my rule of thumb #1 is that if it’s important to me, then I need to have full control over it and not be at the mercy of some other provider. I need to have unfettered access to make changes, enhancements and backups. At the time, the best .NET-based Open Source blogging platform I could find was DasBlog. I have used it since and it has served me very well. However, the more entrenched I got with the DotNetNuke project, the guiltier I felt due to rule of thumb #2 — eat your own dog food. I desperately wanted to switch my blog to DotNetNuke but faced three obstacles:
1) Migration: As far as I know, there was no simple way to import everything from DasBlog to the DNN Blog and maintain fidelity.
2) DNN Blog: While the DNN Blog software is good, it lacked a few key attributes that I personally felt very strongly about — excessive use of tables, inability to completely control the appearance using CSS and inability to control syndication URL’s. There were a few other minor issues, but these were the primary ones.
3) Time: Just did not have enough of it to make the switch.
Last year, I had been collaborating with Antonio Chagoury, the DNN Blog Project lead, and had started to make enhancements to the DNN Blog module. However, my work got really busy and I was unable to get these changes done. Meanwhile, the Blog project team continued to make progress and I found my code to be out of sync with the project code. So here I was with some working enhancements to the Blog module, but not able to easily integrate my changes back into the project.
Over the Christmas/New Year break, I made a decision that I would switch my blog to DNN within the month of January. Once I made this decision, things got easier as I work best under deadline pressure. Spending a few hours each week during the past month, I did the following:
- Setup a DNN5 site for my blog
- Locally reconciled my changes of the Blog module with the code that was in the repository
- Wrote a small script to import from DasBlog to the DNN Blog
- Implemented many enhancements to the DNN Blog
- Created a custom skin for my blog which uses some of the new widgets I created for DNN
- Fully ported my blog to the DNN platform
The first three were simple and did not take much time at all. I spent quite a bit of time on the remaining three. Here are the details:
Blog Enhancements: I made the following enhancements:
Templating — Used the DNN token replacement engine to create template support for Header, Item List, Item Detail and Item Print. All templates support the standard DNN tokens and some custom ones. For the Header template, the permissible tokens are (using { } in place of [ ] to prevent replacement in this post):
- {BLOG:TITLE}
- {BLOG:OWNER}
- {BLOG:DATE-CREATED}
- {BLOG:DESCRIPTION}
- {BLOG:RSS-URL}
- {BLOG:RSS-IMAGE-URL}
For all other templates, the tokens permissible tokens are (using { } in place of [ ] to prevent replacement in this post):
- {BLOGITEM:TITLE}
- {BLOGITEM:AUTHOR}
- {BLOGITEM:BYLINE}
- {BLOGITEM:BYLINE-DATE}
- {BLOGITEM:DATE-PUBLISHED}
- {BLOGITEM:MONTH-PUBLISHED}
- {BLOGITEM:DAY-PUBLISHED}
- {BLOGITEM:URL}
- {BLOGITEM:PRINT-URL}
- {BLOGITEM:BLOG-TITLE}
- {BLOGITEM:BLOG-URL}
- {BLOGITEM:BLOG-CATEGORY-TITLE}
- {BLOGITEM:BLOG-CATEGORY-URL}
- {BLOGITEM:BLOG-RSS-URL}
- {BLOGITEM:BREADCRUMB-HYPERLINK}
- {BLOGITEM:TRACKBACK-URL}
- {BLOGITEM:RSS-IMAGE-URL}
- {BLOGITEM:SEARCH-RANK}
- {BLOGITEM:EDIT-URL}
- {BLOGITEM:EDIT-HYPERLINK}
- {BLOGITEM:COMMENTS-HYPERLINK}
- {BLOGITEM:COMMENTS-URL}
- {BLOGITEM:COMMENTS-COUNT}
- {BLOGITEM:MORE-HYPERLINK}
- {BLOGITEM:TAGS}
- {BLOGITEM:SUMMARY}
- {BLOGITEM:CONTENT}
These tokens make it possible to format the blog list and detail views to be customized precisely with nothing extraneous. I thought about adding a template for RSS, but decided against it to keep things simple. I did however modify the RSS template to always show full content as RSS feeds that show only summaries are a pet peeve of mine (I will not subscribe to any blog that does not post full content in the feed).
CSS-enablement — Everyplace that I found an HTML table, I removed it and replaced it with the equivalent DIV+CSS code and enabled simple URL actions instead of Javascript-driven postbacks. This reduced the HTML footprint considerably.
Archive — I added entry counts to each month in the Archive list. I also added the ability to turn off the calendar mostly because from a user experience standpoint, it is not much use. Between the Archive list and search, the bases are covered.
Tagging — We are currently working on core-provided tagging support, but I wanted to have some quick tagging support and display a tag cloud. My solution — I created a setting whereby you can specify an HTML element that indicates a word or phrase that should be a tag. The default element I picked is “cite”. Using the standard HTML editor, I can simply highlight words and apply “cite” to them. The tags are not stored anywhere separately. When a post is rendered, the tags are extracted with a regular expression and Technorati microformat tag links are automatically created. The same code is used to create a composite tag cloud using jQuery. Since tags don’t change too often, with caching this is a simple solution that can be upgraded to the core tagging engine when it is available with minimal effort since there is no data to worry about.
Tab Targeting — I wanted to display my blog listing on one or more pages, but always wanted to direct the user to a single blog page for details. The solution I implemented for this is a setting called LinkTargetTab. In the blog’s settings, you can choose the page where all links should go. I can thus have a listing on the Home page of my blog site, but have the detail and editing occur on the Blog page.
Syndication — I implemented a setting that allows you to specify the Base Syndication Url such as http://feeds2.feedburner.com. All syndication links are then automatically created by appending the name of the blog/child blog to the base URL as appropriate.
Comments — I wanted to use Disqus for comments on my blog. Since the module’s comments can easily be turned off, adding Disqus was a simple matter of adding the embed code to the Item Detail template. (The same applies for Sharing…I just added the code for ShareThis to the template.)
I implemented a few other minor enhancements, but the above list constitutes a bulk of them. At the time of this writing, the blog I am using has these enhancements. There are probably a few rough edges, but overall, things seem to work. Now that I am here, I’ll get this code over to Antonio and the Blog team so they can decide if any of it is desirable for the Blog Project. (I will not post these enhancements for general download as I think the Blog Project team is best equipped to review the code and determine if the changes should be merged. Also, I do not want to be in a position of supporting the code.)
Custom Skin: I modified the appearance of the standard DNN skin slightly to meet my branding choices. I did make a bunch of changes under the hood that make it very different structurally from the default DNN skin. These changes are —
CSS Layout — I used the built-in DNN super-stylesheets to create a table-less CSS layout.
Mobile-optimized — I used the new DNN5 RelocationWidget to optimize the skin for search-engines and mobile devices. The entire header and menu block actually appears at the end of the page, but is visually made to appear at the top using the RelocationWidget. Mobile devices should also see a simpler menu system.
TechBubble Blog: Now that my blog is fully ported to DNN, I am very excited to be able to create and share sample code with working examples right here on the site. For instance, I am using the DNN EmbedWidget on the Photo page to display my Flickr photo stream (not much to look at yet).
Overall, the time and effort it took to get here was well worth it. I am VERY happy to be using DotNetNuke for my blog.
