I recently decided to start putting together a technical blog, primarily to repay all my fellow Episerver bloggers whose posts I've come back to over and over again throughout the years.

Why make a blog?

What I've come to find is that it was a great way to:

1. Challenge myself to use .NET Core
2. Challenge myself to contribute something to open-source communities
3. Challenge my understanding of the topics I'm blogging about (There's no greater test of knowledge than trying to explain it to someone else)
4. Sharpen my front-end development skills
5. Learn more about flexbox
6. Find a low/no cost alternative to a premium CMS alike Episerver

Choosing Piranha CMS

I can't remember exactly how I found out about Piranha, I believe it was through Scott Hanselman's blog post on CMS platforms in .NET core. I ran down the list of options and Piranha instantly checked all the boxes I was looking for:

1. Active development & community
2. Open source development
3. Clean Editing Interface
4. Ease of adoption

Are there UI enhancements I'd love to see? Sure. Is everything perfect? Of course not, but it's the right platform, right development team, a functional and clean UI, and setup was actually laughably easy with a few command line commands.

Making the site "mine"

I started with Piranha's blog template, which provides a great pattern for blog listings and blog posts and a simple front-end website style. I made a handful of modifications that I found really solidfy my love for Piranha:

1. Changed to use Azure SQL database
2. Used Azure DevOps to autodeploy my work
3. Completely ripped out Bootstrap and front-end build processes
4. Added bulma.io and a front-end gulp build process
5. Added an RSS feed for my blog listing pages
6. Added a code snippet block
7. Added a responsive image block w/alt text
8. Changing up the MVC organization to be straightforward

Now, that looks like a long list, but I completed this blog project and was ready to enter content within a couple days of starting it. Piranha has amazing flexibility for modifying how things work and how to get data from it.

Using Azure SQL Database

It's a personal blog project, so I am likely not going to have a "test" versus "production" environment setup for any reason. Piranha supports a number of database types and providers, so I simply swapped to the SQL Server package and connected it to an Azure-hosted sql database that I shared between my live site and my local environment, for quick editing and testing.

Azure DevOps Deployments

I want modifications and management of the blog to be as easy as possible, or else it'll become stale and I won't update it. For this reason, I setup a full Azure DevOps build and release pipeline that builds the application and deploys it to the live production site anytime I push to a "release" branch in my source control.

Goodbye Bootstrap, Hello Bulma

I have a love-hate relationship with Bootstrap. It's widely recognized and used across projects but I always find myself in "Bootstrap hell" fighting for two hours to make what I believe is a responsive template with Bootstrap's grid row/columns and elements until two hours later I "git reset --hard" and start over.

At the same time, I have heard great things about Flexbox and decided to take a leap and try Bulma. With a few snippets and markup changes, I was already done. The blog looked 10x better than it did trying to modify from the provided Bootstrap template. On top of that, it was so reusable that I gave my colleague access to fork the code and he was able to launch his own site with a simple change of SCSS variables.

RSS Feed

<Will finalize this section of the post this week>

Code Snippet & Responsive Image Block

I mainly blog about development topics, so code snippets are inevitable. My main source of reading others' blogs and news is in small chunks that I get from a few followed tags on Twitter, so mobile access and support was also a priority for me.

The responsive image block, with alt text support:

The code snippet block, with highlight.js integration for theme and language support:

MVC Pattern

Out of the box, the Piranha blog template is meant to be a very simple 1-project solution. Your page models, block models, regions and more that are used for your editing interface and stored alongside your viewmodels and views. That's great for beginner 0-100 setup and being able to see everything in use, but I would love to have these out of the presentation layer. I made a couple of changes....

A ".Core" project for my backend models:

Separation of controllers and views:

(Out of the box, the blog template has all CMS content routed through a single "CmsController" and actions for each type. If you add a few page types, the file becomes gigantic)

Wrapping up

I love Piranha CMS. Massive credit to the Piranha team, I hope you continue to enhance the already amazing product. I firmly believe it's a major contender for best .NET Core CMS solution. The blog was a massive success.