I’m very confident that I’m not the first to do this but recently I developed a site using BlogEngine.Net as a CMS. The site already had a blog in place (and yes it uses BlogEngine.Net) but we wanted to leave that as a separate entity and just link to it from the main site. I thought I would share my experience with you.
Let me explain the website – it’s a pet sitting website for a pet sitter based in the U.K in Dorset. She frequently changes her services and prices and adds new pet sitters etc etc so a content management system (CMS) was vital for her. Previously I would have knocked up a bespoke CMS with an SQL database and so on, but she doesn’t have a large budget and to be honest, BlogEngine has done such a great job of setting up a CMS quickly and easily that it just made sense. I have only recently discovered BlogEngine and I have to say it’s an absolute pleasure to work with. If you want to take a quick look at the site before I explain my workings go ahead – http://mypetfriend.co.uk
As you will see it isn’t a very complicated site or even particularly fancy – but it fits within the realm of the budget, which is what I’m all about.
So the first thing I did was to load the web files in Visual Studio, then I stripped out all the unnecessary stuff – for example, I don’t want the client switching themes so I got rid off all but one theme – I used the standard theme as a template. I got rid of pretty much all the CSS except the contact form stuff. I deleted any images that were in the standard theme directory. This isn’t strictly necessary but I’m a firm believer in only keeping what you need if that makes sense.
So after about 10 minutes I was down to the barebones. Make sure it still builds at this point as it’s quite easy to delete things which have dependencies.
Now onto the fun stuff. I had already designed my theme from the ground up and had it approved by the client. So I began writing the XHTML and CSS to get the site to look the same as the image I had created in Fireworks. This didn’t take too
long. Something I was keen on was having a description of the site in the top left corner in a nice big font. Having a description like this seems to be a popular trend in modern sites, it’s a great way to instantly convey the website purpose to the user and it’s also really great for SEO (Search Engine Optimization) as it appears nice and high in the mark-up. Now this is embedded on the master page so that it is viewable on every page but I wanted it to be editable by the client. So all I did was to place the blog settings description in a div and place it in the top left. This way the client can change the text in the blog settings admin panel. The code for this is simply:
<%=BlogSettings.Instance.Description %>
Sorted. The next issue was the navigation. I could have quite easily created a normal
menu and placed it on the master page with links to all the pages etc but I want the client to be able to edit the pages easily using the admin panel and also possibly add pages (although she has not expressed an interest to do so). So I decided to use the page list feature and create all my pages through the admin panel. So to do this, I first added a home page in the admin panel and set it as “front page”, this ensures that it will be loaded first when someone lands on your site (at the root level). I then added all the other pages that I wanted to be editable. I then dropped the page list control onto the master page in the suitable location:
<blog:PageList runat="Server" />
This renders as a ul (unordered list) so you can simply style it with CSS. Unfortunately there is still some work to be done here. You’ll notice that in the navigation bar there is a link to the contact page and the blog (stored elsewhere). These are not editable pages and are not part of the page list but they are necessary navigation links. To overcome this minor hurdle you you need to edit the BindPages() function in the PageList class found in the app_code\controls folder. There is a foreach loop which generates the html for each page that has been marked as published:
foreach (BlogEngine.Core.Page page in BlogEngine.Core.Page.Pages)
{
if (page.ShowInList && page.IsPublished)
{
HtmlGenericControl li = new HtmlGenericControl("li");
HtmlAnchor anc = new HtmlAnchor();
anc.HRef = page.RelativeLink.ToString();
anc.InnerHtml = page.Title;
anc.Title = page.Description;
li.Controls.Add(anc);
ul.Controls.Add(li);
}
}
Directly after the foreach loop simply add an additional section which creates an extra li control, for example for a link to the blog…
HtmlGenericControl li = new HtmlGenericControl("li");
HtmlAnchor anc = new HtmlAnchor();
anc.HRef ="http://blog.mypetfriend.co.uk";
anc.InnerHtml = "Blog"
anc.Title = "check out my blog";
li.Controls.Add(anc);
ul.Controls.Add(li);
And so on. This works quite nicely, however, a word of warning – the BlogEngine.Core.Page.Pages call seems to sort the pages into alphabetical order. This actually worked out quite nicely for me in this case but if it doesn’t for you then you will need to sort the results in some way or edit the BlogEngine Core which is possible but probably not advisable unless you really need to.
At this point we have a working menu and a nicely placed description div. The rest is merely a case of writing the CSS classes to get the desired look and then making sure to use the HTML view in the admin panel to enter the markup (with matching CSS classes) and content. Then it’s good to go.
Granted this is a very simple website, but using blogEngine as a base actually sped up the process and will add a massive amount of value to the client. I highly recommend it. The best thing is that everything is nicely coded and simple to work out meaning that any changes to the classes are very easy to do. This makes it highly flexible and an awesome tool for any ASP.NET developer.
The finalised site
Thanks for reading :)