Moving 24 Days into the cloud

This marks our 5th year, and we managed to change things up quite a bit — these are some random ramblings about what, why and how we did some of it.

This year we finally got our act together and did two of those to-do-thingies we'd really been wanting to do for a least a couple of years:

  1. Upgrade the site to (or start over in) Umbraco 7
  2. Move to Umbraco Cloud

Umbraco 7

We actually tried setting up a version of the site on Umbraco 7 in October/November of last year (2015) but never managed to finish it before we had to execute on all the usual stuff needed when ramping up for a new calendar.

The original site was built on Umbraco 4.10.1 and never got upgraded - but this year, we even managed to squeeze in a redesign!

Packages

Let me just take a moment here and praise a couple of packages we use in the backoffice, that I really think you should know about:

  1. Switcher from Bjarne Fyrstenborg is one of my favorites. It's a fabulous replacement for the standard True/False checkbox, with dual labels, a default value and a color setting. Try it!
    Switcher OFF

    Switcher ON
  2. Styled Textbox from Kevin Jump serves as a great replacement for the Textstring editor when you need to add placeholder text or if you want to style it just a little teeny-tiny bit. Oh, and it does character count as well!
    Styled Textbox
    Styled Textbox used both in single- and multi-line configurations

Umbraco Cloud

This year has already seen a couple ofgreat articles about this new awesome thing, but I'll just cover some of my own experiences...

Deployment

For a relatively simple site as this, Umbraco Cloud is a really good place to be. I'm constantly amazed by the simpleness of operation I can get by with, given I know how much stuff is being done behind the scenes when I press the Deploy button. Major kudos to all who worked on this product!

My Precioussss URL...

When I wrapped up the first year's calendar I wrote a little about how we built the site and how I had problems placing the backoffice on another URL than the default /umbraco/ — this year I kinda just accepted that moving to Umbraco Cloud I would have to let go of that requirement — but I needed to make sure that all the URLs for the previous 4 years of articles would be redirected to their new home on the /umbraco-cms/ path (with the lovely 301 Moved Permanently status code that tells browsers and bots to ditch that old URL because this new one's the shizzle now).

Now, the old me would have used UrlRewriting.config for this, but the new me has been told numerous times by Sebastiaan to use the IIS Rewriting Module which has been available for quite some time. "Well what's the difference?" you might ask - and I don't know all the good reasons, but the one I liked immediately was the fact that IIS rewrite rules happen before Umbraco even sees the request, which is perfect for this. 

The IIS Rewrite Module's rules reside in Web.config, but do yourself a favor and put them in a separate file by using the configSource attribute. 

Here's the simple rule that ensures a request for an old article gets redirected:

<rule name="Redirect from old site">
	<match url="^umbraco/(201[2-9])/(.*)$" />
	<action type="Redirect" url="/umbraco-cms/{R:1}/{R:2}" redirectType="Permanent" />
</rule>

Rewrite rule to redirect from /umbraco/ to /umbraco-cms/

  

(Be smart and set redirectType="Found" until you've confirmed everything works as expected - it's way easier to debug :-)

(If you want to know more about redirects, Niels Ellegaard wrote a very thorough article two years ago.)

Archival

Since the first thought of migrating/moving to Umbraco 7 occurred, I had a pretty good idea about how to handle the old articles in a way that didn't force us to replicate the Document Types (and thus miss out on new available functionality etc.).

We already had a way to export everything to an XML format suitable for building the EPUBs, so creating an archive template and a macro for rendering the List and Post views was pretty straightforward. So the YearArchive doctype just has an XML File picker property that selects a single XML file containing all of that year's articles. This also means that none of the archived articles have their own Umbraco node, so they're all rendered on the YearArchive node — i.e., their URLs are rewritten using this rule:

<rule name="Rewrite archived articles">
	<match url="^umbraco-cms/(201[2-5])/([!\(\)_0-9=a-z-]+)(/?)$" />
	<action type="Rewrite" url="/umbraco-cms/{R:1}/?article={R:2}" />
</rule>

Rewrite rule to rewrite URLs for archived articles

I'm fully aware that using a ContentFinder might accomplish this too in some way, but I much prefer a rewrite, if it solves the problem.

Them Comments

One very important feature on the site has always been the comments — we're using Disqus which has been working very well, so I was of course a little anxious to know if changing an article's URL would mean that it lost its comments, since the JavaScript uses a document's URL and an identifier to associate them?

No problem at all - if you've set up 301 redirects for all your URLs they have a scraping tool you can run OR you can do what we ended up doing: Make sure to provide the correct identifier when writing the script to the page; so I just added a disqusID attribute to the exported articles and use that when rendering the inline script.

Once again, I'd worried way too much about it ahead of time :)

Roll The Credits

Thanks to Jan Skovgaard for all the heavy-lifting behind the scenes of getting people to "sign up" for this, and for making them stick to it and deliver - it simply wouldn't be possible if it weren't for that!! #h5yabeer 

Thanks a bunch to Mikkel Aggerbo for coming up with a nice, clean design to celebrate the move to Umbraco 7, Umbraco Cloud, and 5 years of “calendaring” for all the umbracians in the world!

Also huge thanks to Dave Woestenborghs for helping out this year - it's a major boost to your own commitment when someone offers to help with what you're doing!

Chriztian Steinmeier

Chriztian is on Twitter as