Introducing PineBlog a new ASP.NET Core blogging engine

Introducing PineBlog a new blogging engine, light-weight, open source and written in ASP.NET Core MVC Razor Pages, using Entity Framework Core. It is highly extendable, customizable and easy to integrate in an existing web application.

Mục Lục

Why another blogging engine?

I’ve had a blog website for years (I do still need to move the old posts to this blog), and have been using various blogging engines. But I had some time lately and wanted to try some new things, so I thought lets build my own! When I started I knew there were a few things that I really wanted it to be/have:

Super easy installation, basically add a NuGet package and done
Modern architecture, I chose to use a Clean Architecture (youtube: Clean Architecture with ASP.NET Core)
Light-weight, just a blogging engine nothing more..
Write my posts in Markdown

So that is what I’ve been building 🙂 So if you want to know more about it, please read on..
And I will write a more in depth blog post about Clean Architecture later.

Build Status
NuGet Badge
License: MIT

Features

Markdown post editor
File management
Light-weight using Razor Pages
SEO optimized
Open Graph protocol
Clean Architecture
Entity Framework Core, SQL database
Azure Blob Storage, for file storage
..only a blogging engine, nothing else..

What is not included

Because PineBlog is very light-weight it is not a complete website, it needs to be integrated in an existing web application of you need to create a basic web application for it. There are a few things PineBlog depends on, but that it does not provide.

Authentication and authorization

Note: The admin pages require that authentication/authorization has been setup in your website, the admin area has a AuthorizeFilter with the default policy set to all pages in that area folder.

Where can I get it?

You can install the Opw.PineBlog metapackage from the console.

> dotnet add package Opw.PineBlog

The Opw.PineBlog metapackage includes the following packages.

Opw.PineBlog.EntityFrameworkCore package
The PineBlog data provider that uses Entity Framework Core.
Opw.PineBlog.RazorPages package
The PineBlog UI using ASP.NET Core MVC Razor Pages.
Opw.PineBlog.Core package
The PineBlog core package. This package is a dependency for Opw.PineBlog.RazorPages and Opw.PineBlog.EntityFrameworkCore.

Getting started

You add the PineBlog services and the RazorPages UI in the Startup.cs of your application.

public void ConfigureServices(IServiceCollection services)
{
    ...
    services.AddPineBlog(Configuration);
    
    services.AddMvc().AddPineBlogRazorPages();
    // or services.AddMvcCore().AddPineBlogRazorPages();
    ...
}

Configuration

A few properties need to be configured before you can run your web application with PineBlog.

{
    "ConnectionStrings": {
        "DefaultConnection": "Server=inMemory; Database=pineblog-db;"
    },
    "PineBlogOptions": {
        "Title": "PineBlog",
        "Description": "A blogging engine based on ASP.NET Core MVC Razor Pages and Entity Framework Core",
        "ItemsPerPage": 5,
        "CreateAndSeedDatabases": true,
        "ConnectionStringName": "DefaultConnection",
        "AzureStorageConnectionString": "UseDevelopmentStorage=true",
        "AzureStorageBlobContainerName": "pineblog",
        "FileBaseUrl": "http://127.0.0.1:10000/devstoreaccount1"
    }
}

Blog layout page

For the Blog area you need to override the _Layout.cshtml for the pages, to do this create a new _Layout.cshtml page in the Areas/Blog/Shared folder. This will make the blog pages use that layout page instead of the one included in the Opw.PineBlog.RazorPages package.
In the new page you can set the layout page of your website. Make sure to add the head and script sections.

@{
    Layout = "~/Pages/Shared/_Layout.cshtml";
}
@section head {
    @RenderSection("head", required: false)
}
@section scripts {
    @RenderSection("scripts", required: false)
}
@RenderBody()

Your layout page

PineBlog is dependent on Bootstrap 4.3 and Font Awesome 4.7, so make sure to include them in your layout page and add the necessary files to the wwwroot of your project (see the sample project for an example).

<html>
    <head>
        ...
        <environment include="Development">
            <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:400,700|Merriweather:700">
            <link rel="stylesheet" href="~/css/bootstrap.css" />
            <link rel="stylesheet" href="~/css/font-awesome.min.css">
        </environment>
        <environment exclude="Development">
            <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:400,700|Merriweather:700">
            <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
                asp-fallback-href="~/css/bootstrap.min.css"
                asp-fallback-test-class="sr-only"
                asp-fallback-test-property="position"
                asp-fallback-test-value="absolute"
                integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
                crossorigin="anonymous">
            <link rel="stylesheet" href="~/css/font-awesome.min.css" asp-append-version="true">
        </environment>
        ...
    </head>
    <body>
        ...
        <environment include="Development">
            <script src="~/js/jquery.js"></script>
            <script src="~/js/popper.min.js"></script>
            <script src="~/js/bootstrap.js"></script>
        </environment>
        <environment exclude="Development">
            <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"
                    asp-fallback-src="~/js/jquery.min.js"
                    asp-fallback-test="window.jQuery"
                    integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
                    crossorigin="anonymous">
            </script>
            <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
                    integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
                    crossorigin="anonymous">
            </script>
            <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
                    asp-fallback-src="~/js/bootstrap.min.js"
                    asp-fallback-test="window.jQuery && window.jQuery.fn && window.jQuery.fn.modal"
                    integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
                    crossorigin="anonymous">
            </script>
        </environment>
    </body>
</html>

Overriding the UI

You can override any other Razor view you like by following the same steps as described above for the layout page. For an example have a look at the sample project where we override the footer (_Footer.cshtml).