Bark of the byte

Running with bytes and other wild creatures

Setting up BlogEngine.NET 2.9

Some steps and hints for setting up BlogEngine.NET. 

Requirements: -

  • Simple to install into Azure.
  • No database required (with the option to migrate at a later stage).
  • ASP.NET (preferably MVC).

Winner: BlogEngine.NET.

Because: -

  • Looks good. Well supported. Current.
  • Pretty much one click install. See these steps.
  • No DB required – stored as XML.
  • ASP.NET (though not MVC).

Take control

Make sure you change the admin password as per the setup steps. Also change the various admin settings as appropriate for your site.

Get the source. You will find that there is something that you want to do that is not possible or obvious using the UI and the source is just easier. The code is pretty well organized and easy to find your way around, especially if you are familiar with ASP.NET. So, FTP to the web site and download everything under site/wwwroot.

Favicon

By default the blogengine.ico favicon is used. To replace with yours: -

  1. The blogengine.ico is located in the \pics folder. It is quite easy to create a similar ico using gimp. Just create an image with two overlapping layers, one 16x16 and the other 32x32 and save as .ico. Look at the blogengine.ico as a guide.
  2. Upload your icon (e.g. barkofthebyte.ico) to the \pics folder.
  3. Change the ico referenced by the theme. In \themes\Standard open site.master for editing.
  4. Change the line referring to blogengine.ico to your icon:
    <link rel="shortcut icon" href="~/pics/barkofthebyte.ico" type="image/x-icon" />
  5. Upload site.master.
  6. Press refresh in your browser and you are done.

Note: if you decide to take a shortcut and just replace blogengine.ico with your icon of the same name then the browser might have cached the blogengine.ico so your icon will not show up. In which case you will need to edit the href in site.master to something like ‘~/pics/blogengine.ico?dummy=1’ so that the browser detects that it has changed and retrieves the new image. 

Changing logo and social media

You will notice that there are logo and social media buttons on the blog page. It is not immediately obvious how to configure them. You can do this by navigating to Custom | Themes | Standard. You will then see a form similar to:

image

Setting the accounts to empty removes the buttons.

Adding Google +1, Facebook likes for each blog post

These are some quick and dirty instructions for setting up +1 and likes. There were a few extensions available for this, but none of them seemed flexible enough, so I did it myself.

Google +: Google’s instructions can be found here. Add the script tag to Settings | Custom Code (you only need to do this one):

image

<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>

Then in your blog post paste the button as HTML (you will need to do this for each blog post). Something like:

<div class="g-plusone" data-href="http://barkofthebyte.azurewebsites.net/post/Burn-down-charts-advanced-interpretation-techniques" data-size="medium" data-align="right"></div>

Facebook: Facebook’s instructions here. Add the script directly under <body> in site.master (you will only need to do this once):

<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_GB/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

Then paste something like this in the blog entry HTML(you will need to do this for each blog post):

<div class="fb-like" data-href="http://barkofthebyte.azurewebsites.net/post/Burn-down-charts-advanced-interpretation-techniques" data-layout="button_count" data-action="like" data-show-faces="false" data-share="true"></div>

Google Analytics

Insert the snippet from Google analytics in the Tracking script text window. This is under Settings | Custom code:

Writing the blog entries

The BlogEngine.NET tiny MCE editor is OK, but I use Windows Live Writer because it has a good plug-in for pasting code from Visual Studio and because you can edit and save everything on you computer first and upload afterwards.

Troubleshooting

Errors

You may occasionally get a ‘failed’ error box popping up when you edit settings, posts, etc. This normally just means that you need to log back in. Refresh the page and you will be prompted with a login prompt.

Logs

You can find the logs at /App_Data/logger.txt.

Azure and subdomain policy

If you are hosting your website on the azure domain (e.g. http://xyz.azurewebsites.net) don’t be curious and click Enforce for the www subdomain policy. This will cause a redirect to http://www.xyz.azurewebsites.net. Even after you change it back your browser will remember the redirect until you clear your cache.

image

Comments (1) -

  • Oliver Richmond

    4/12/2016 8:34:29 AM | Reply

    I am trying to set up BlogEngine.NET 2.9. And I am a big of this. I am owned by a website of "http://resumeplus.us";.  What's new in 2.9?  Admin UI redesigned using latest Bootstrap framework. New standard theme, also Bootstrap based, standards compliant with clean and beautiful design that is easy to extend and pleasure to use. Improvements to theme layouts (separate single post and page templates, navigation template and more) New light-weight JavaScript based post editor. New admin UI runs on AngularJS and SPA (single page) application model.ASP.NET Web API and Repository Pattern on the back-end. But we need some technical requirements such as .NET framework 4.5, Visual Studio 2012/2013 to work with code (express is fine), IIS 7 and up, integrated mode etc., But you explained all very well. Thank you so much for that.

Loading