Fizzy logic behind the scenes: How I build my weblog

People that know my old weblog may look at this and ask themselves, what the… has he been up to. Others that don’t know my old weblog may not have that question. But I think it’s a good thing to show a little about how I build this website.

In this article I will show you how I build this weblog and at the same time give you a glimpse of a great CMS called Orchard on which this site is build.

Meet orchard

The search for a good system to build the new site with took me to BlogEngine.NET, WordPress and Umbraco. All of them good systems, but some of them are also pretty hard to learn. For me this was a hard criterium to select a system for the new site. I wanted a new site, but I don’t want to take forever to build a new site.

At MIX11 I talked to a couple of folks from the Orchard team and they showed me a little about what Orchard has to offer and how I could extend it to meet my requirements. This convinced me to give it a shot.

So what is Orchard? Orchard is a content management system based on ASP.NET MVC3. This means you get all the goodness of Razor view syntax to build the theming bits. Also you get a solid framework to build modules with. If you need to build any modules, because it also features a huge amount of modules. I haven’t felt the need to build a module myself and I bet you don’t need to either.

Getting started with Orchard

There are a couple of ways in which you can get started with Orchard. You can download a package from CodePlex and open it in Visual Studio 2010. While this is the most flexible way to build an Orchard based website, there is an easier route if you just want to build a site using the existing stuff.

Fire up Microsoft WebMatrix and choose the Create new site from web gallery option. This gives you the dialog that is shown below.

Simply select the Orchard template, give it a name and you’re good to go. For me this was the fastest and easiest way to get a new website in minutes.

After the new site is created press run on the Toolbar and you’re good to go

Adding modules to make the thing more complete

After creating my Orchard based site in WebMatrix I added a couple of modules to make it a more complete system. Here’s the list of modules I’m using:

• Search form + Indexing + Lucene index implementation
• Kosfiz sitemap module (Sitemap.xml)
• Syntax highligher module
• LatestTwitter module
• Flicker gallery module
• Vandelay tagcloud module
• OpenAuthentication module
• Disqus module

All of them can be downloaded right from within Orchard.

Theming the website

Having the basic installation with a couple of modules turns a website into a working blog in no time. It took me no more than 30 minutes to get the system up and running. The next part was to create a new theme for it.

There are plenty of themes out there, but I for one don’t like standard themes. It makes my site less original and it simply doesn’t represent me as a person. So instead or rolling a standard theme I decided to create a new theme.

Making a theme in Orchard is pretty straightforward. All you need to do is open up a command-prompt and CD your way to the bin folder of your website. Enter orchard.exe and you should get a orchard console in which you can manage your site.

Enter the command codegen Theme <ThemeName> to create a new theme.

Go back to WebMatrix and you should see a new theme under the Themes folder in your website. The theme will contain the following key elements:

• A views folder that will contain the .cshtml files for the various themed components
• A Theme.txt file that describes the theme.

To make the theme complete you should edit the theme.txt so that the information in the file describes your theme correctly. The key information to enter in the theme.txt file is the name of the theme, a description and the zones you support.

Name: <Name of the theme>
Author: <Your name>
Description: <Description>
Version: <Version>
Tags: <Tags>
Website: <URL of your website>
Zones: Header, Navigation, AsideFirst, Messages, BeforeContent, Content, AfterContent, TripelFirst, TripelSecond, TripelThird, Footer

The format of the file is pretty basic. There’s not a whole lot that can go wrong.

The core of a theme is the layout.cshtml file. This file describes the layout of every page on your website. You can render zones with content using the Razor syntax that is also used in regular ASP.NET MVC3 sites. To give you an idea of what a basic layout file looks like check out the code snippet below.

@{
    Func<dynamic, dynamic> Zone = x => Display(x);
    Style.Include("reset.css");
    Style.Include("text.css");
    Style.Include("960.css");
    Style.Include("elements.css");

    // Add a couple of extras to the layout
    WorkContext.Layout.Header.Add(New.Branding(), "5"); // Site name and link to the home page
    WorkContext.Layout.Footer.Add(New.BadgeOfHonor(), "5"); // Powered by Orchard
    WorkContext.Layout.Footer.Add(New.User(), "10"); // Login and dashboard links
}

<!-- Header grid -->
<div class="container_12 clearfix">
    <div class="grid_12">
        @Zone(Model.Header)
    </div>
</div>

<!-- Main grid -->
<div class="container_12 clearfix">
    <div class="grid_3">
        <div id="navigation">
            <h2>Where to next?</h2>
            @Zone(Model.Navigation)
        </div>
        <div id="aside-left">
            @Zone(Model.AsideFirst)
        </div>
    </div>
    <div class="grid_9">
        <div id="messages">
            @Zone(Model.Messages)
        </div>
        <div id="content-before">
            @Zone(Model.BeforeContent)
        </div>
        <div id="content">
            @Zone(Model.Content)
        </div>
        <div id="content-after">
            @Zone(Model.AfterContent)
        </div>
    </div>
</div>

As you can see there’s not a whole lot going on. The layout file renders several zones that are available on the Model variable. Check the documentation of Orchard on what zones are available.

What to do if you want a little more than a basic layout

Be sure to check out the Designer module for Orchard. This module gives you an extra panel at the bottom of the page. When you open this panel you can simply click elements on the page and discover what model is used to render that part of the page and create alternate templates for that part.

To create an alternate template you select a part, select the Shape panel and open up the Alternates tree node. When you click on one of the alternate options in the tree Orchard will create a new template file and copy the original template to the new alternate template. You can edit the content of this file in WebMatrix to change it to meet your requirements.

This method is a great help to get more out of Orchard when building your own theme. Sadly the options offered aren’t all the options available. Be sure to browse around the other folders in your site to check out what else is available. Usually it’s enough to copy an existing .cshtml file to your theme to make an alternative view for that particular component.

Also, check out the documentation on the Orchard website for a more complete explanation of the customisation process.

• Alternates: http://www.orchardproject.net/docs/Alternates.ashx
• Theme file syntax: http://www.orchardproject.net/docs/Template-file-syntax-guide.ashx

Note: Be sure to disable the Shape tracing feature in the admin dashboard when you deploy your site to a production environment. Not only is de performance really bad with this module enabled. It also looks very very stupid. You don’t want that.

Applying the theme to the site

Applying the new theme to your weblog is simple. Go to the dashboard of the website and select the option Themes. There you will find your theme in the list of available themes at the bottom of the page. You can apply the new theme by clicking the Set current button underneath the theme.

Adding a commenting system

With just the new theme and the modules the website looks really good. The standard commenting system that Orchard offers just works. Having said that there’s an alternative that I can recommend, called Disqus.

Disqus is a comment system that you don’t host yourself. Instead you register on the disqus website and include a bunch of scripts from them into your own website. What you will get is a comment box with a lot of cool options like federated authentication and build in moderation that you just can’t build yourself.

Best of all, it’s free. Be sure to check it out!

Back over in the special effects department…

One final thing I don’t want you to miss out on is the Windows 7 integration that I included in the site. It’s a very small feature, but I think it’s worth noting it here.

When you drag this site to the task bar in Windows 7 you will get the option to pin it there. The second you do this the back and forward buttons turn pretty purple and you start to see a new icon in the titlebar.

The thing that makes this possible is a clever set of meta tags in the head section of the HTML page.

<meta name="msapplication-starturl" content="/" />
<meta name="application-name" content="Fizzy Logic" />
<meta name="msapplication-tooltip" content="Wilm's fizzy logic" />
<meta name="msapplication-window" content="width=1024;height=768" />
<meta name="msapplication-navbutton-color" content="#FF1168" />

The msapplication-starturl specifies the starting point of the website. The application-name and msapplication-tooltip are there to give the icon in the taskbar a name and tooltip. The msapplication-navbutton-color tells IE9 to make the buttons bright pink. Finally I added a msapplication-window setting to make the windows 1024×768 pixels in size.

That however is not all I did to make the site integrate with Windows 7. If you dragged the site to your taskbar you also get a couple of shortcuts. These are so called msapplication-task entries.

<meta name="msapplication-task" content="name=Latest posts; action-uri=/; icon-uri=@siteIcon" />
<meta name="msapplication-task" content="name=Blog Archive; action-uri=/Archive; icon-uri=@siteIcon" />
<meta name="msapplication-task" content="name=Latest photos; action-uri=/Latest-photos; icon-uri=@siteIcon" />

Each entry has a name, uri to navigate to and an icon that will be displayed in front of the item.

Like I said before, it’s a small thing not a lot of users will use. I added it because I can, it’s as simple as that.

Anything that you’d like to add in the future?

I’m pretty sure the site is the way I want it to be. There are however some small things that I’m still working on. For example, I can’t show you any Silverlight samples right now. This will change in the future. Also I haven’t got a module for Youtube integration yet, but that too is on the wishlist.

Final words

The new weblog was a project I wanted to do for a very long time. Having the new system up and running allows me to do more things with my content and offer other content than I was able to do on my previous blog. You will start to see more content about things outside my IT life. I’m fanatic about photography especially landscapes. Expect to see more on that in the future.

For now, keep an eye out for new content and follow me on twitter if you want realtime updates.