Jesper O. Christensen

Cloud Architect @ Brandheroes

How to setup a blog using Umbraco

2016-03-14 jesper o. christensen.NET...

In this tutorial I’ll show you how to setup a blog in Umbraco. For that we’re going to be using a package called Articulate. Unfortunately Articulate doesn’t come as a NuGet package. Therefore we’ll have to handle the binary files ourselves. I’ll show you how to do that further down.

This tutorial is gonna start off where How to setup Umbraco locally and on Azure ended.

Installing Articulate

To install the Articulate package, fire up your Umbraco project (with or without debugging doesn’t matter) and log in to the back office. You do this by hitting http://localhost:3000/Umbraco (port can vary).

Next you navigate to the Developer tab to the left of the screen. It’s the gearwheel icon. Open the folder Packages and click on Umbraco package Repository.

From there you search for “Articulate”.

Select Articulate. Now you can read about what the plugin provides.

Hit the Install package button. Now on the next page you need to pay special attention!

Pay special attention to the red box with the “Binary files in the package!” text. This means that your plugin is gonna add .dll files to your project. These files will be placed in your bin folder. The problem with this is that files inside your bin folder are usually ignored by your .gitignore file and are not published when using a deploy method like Web Deploy. This means that we gotta explicitely add them to our version control and manually push these files to our production server. We’ll be taking care of this later. For now lets click the Read more… link so we know which files to keep an eye out for.

So here we have it. If it wasn’t because I provided you with a list, I would have asked you too write these 6 names down. But since you can find the complete list right here, we’ll accept the license and install the package. Now just wait for the package to install and wait for the browser to refresh, and Voila you now got a blog running!

What can it do?

Now that we’ve installed a blogging plugin. What can it actually do for us? I’ll give you a short introduction to that and let you dig deeper into it yourself.

Let’s start off going back to the backoffice and click the Content button in the sidebar. Now if you installed Umbraco without a starter kit you should see the same, as the picture below. Here you can give your blog a title and a description. You can add a Disqus shortname if you want Disqus commenting as well as a Google Analytics id and name.

If you head over to the tab called Style you’ll be able to select between some default themes that Articulate comes with. Now I don’t really like the default one (Shazwazza) so I’m going to select VAPOR. There is also a blog logo and a blog banner too swap out with your own.

Now on to the important stuff about having a blog. Making posts! Let’s make one. Hit the Archive and select the Create dropdown. It has two options. Choose the editor your most comfortable with. I usually go with the Rich Text editor.

So let’s write a short post. Excerpt is what the users read before they click on your post to read the entire thing. The content inside the post is entered in the Content tab.


Now we get to the part where our list of DLL files become important. But you can actually just go ahead and publish your project with web deploy as in the first tutorial.

What you’ll get now is an application that doesn’t work. But we’ll fix that asap! Navigate into the bin folder. This folder is hidden in the Solution Explorer so you need to turn on Show hidden files. Select all the files from the above list. I have marked them in the image below.

Right click on them and select publish. When you have published all 6 files. Refresh the published page. You should now have a working blog deployed!

Handling Git

The first thing we wanna do before committing this is to make sure that the Articulate folder is included in the solution. So right click on the folder and click Include in project.

Next we need to handle those 6 files in the bin folder. Select them and Add ignored Files to Source Control

This will make them show up in your Team Explorer. But if you have a local or global .gitignore file it will tell you that you that no changes have been made and the files won’t get committed. That’s because .dll and .pdb files are ignored. Well if you have a local .gitignore file it’s probably ignoring your bin folder all together as well as ignoring .pdb files. Where on the other hand the global .gitignore mostly just ignores .dll and .pdb files.

If you can actually commit the files. I would probably add a local .gitignore file to the project afterwards 😉 But in any case you should be up and running!

So to those who can’t commit the files. The first thing to do is to head over to your local .gitignore file and add the following lines to the bottom of the file:

# Articulate dependencies

Now you should be able to commit the files. 🙂

That’s it for this tutorial. I hope you got your blog up and running! Feel free to post a comment and let me know how it went.