BlogMatrix uses WebMatrix as the development environment (hence the word Matrix in my blog engine name). WebMatrix is a great little web development tool for creating websites that use the Razor view engine and C#. Unlike most frameworks you can pretty much come up with whatever project structure you want. Let's take a 10,000 foot view of what I did.

My goal here was to come up with a simple, logical project structure with the minimal amount of coding required. Drawing on my experience with RoR and various other conventions I'd adopted over the years this is what I came up with.

File / Directory Structure

Firstly let me show you the file/directory structure of my projects:

assets/
blog/
layouts/
layouts/_BlogLayout.cshtml
layouts/_SiteLayout.cshtml
partials/
partials/_Archives.cshtml
partials/_Disqus.cshtml
projects/
projects/blogmatrix.cshtml
404.cshtml
about.cshtml
archives.cshtml
index.cshtml
    

As you can see the structure is very simple, logical and self documenting. Due to the way I have structure the project most of my time is spent in the blog directory.

  • The assets directory is for all of my CSS and Javascripts.
  • The blog directory contains an individual cshtml file for each post.
  • The layouts directory is for the templates which are used to define the layout of all the pages.
  • The partials directory is used for snippets that will get included in other pages.
  • The projects directory is just a logical grouping for my various projects.
  • Finally the root directory contains cshtml files that are pretty self explanatory :)

Razor Pages

Let's have a look at the 404.cshtml file so you can see exactly how a Razor Page work.

    
@{
    Layout = '~/layouts/_SiteLayout.cshtml';
    Page.Title = 'Page Not Found';
}

<section id='page_title'>
    <div class='page-header'>
        <h1>404 <small>@Page.Title</small></h1>
    </div>
</section>

<section id='page_content'>
    <p>Sorry but the page you are looking for can't be found!</p>
    <p>Please try one of the links in the menu.</p>
</section>
    
    

This is a very simple razor page and I really want to focus on the section at the top in between the @{} symbols.

The use of @{} tells razor that you are defining a block of code to be processed. Within it there are two assignment declarations:

  1. Layout = '~/layouts/_SiteLayout.cshtml';
  2. Page.Title = 'Page Not Found';

The first line is telling razor what to use as the layout/template for this page. Layout is a builtin razor variable specifically for this purpose.

The second line sets up a dynamic property on the Page object (this is another builtin razor variable) called Title. This is then used on the 7th line (h1 tag) and is also used in the ~/layouts/_SiteLayout.cshtml to set the title tag. If you goto the 404 page you will see what I mean.

Here's the first few lines of the ~/layouts/_SiteLayout.cshtml file so you can see how @Page.Title is used.

    
@{
}
<!DOCTYPE html>
<html lang='en'>
  <head>
    <meta charset='utf-8'>
    <title>@Page.Title &middot; Kestrel Blackmore</title>
    
    

Conclusion

That's a very quick overview of the project structure and how a razor page works. If you view the BlogMatrix GitHub repository you'll very quickly figure out how it all ties together and the simplicity of my 'blog engine'.

Next post I'll be looking at how I actually deploy the website to pure HTML.

Happy coding!



comments powered by Disqus