{"title":"Using the BlogSite Package","description":"Learn how to create a blog site using the BlogSite package with customizable themes, RSS feeds, and social features","islands":{"content":"\u003Cheader class=\u0022transition-all mb-4 lg:mb-8\u0022\u003E\u003Ch1 class=\u0022font-display text-2xl lg:text-4xl font-bold tracking-tight text-base-900 dark:text-base-50\u0022\u003EUsing the BlogSite Package\u003C/h1\u003E\u003C/header\u003E\n\n\u003Cmain class=\u0022prose dark:prose-invert dark:text-base-300 max-w-full prose-sm md:prose-base min-w-0 prose-headings:scroll-m-18 prose-headings:font-display prose-headings:text-base-900 dark:prose-headings:text-base-50\u0022\u003E\u003Cp\u003EThe \u003Ccode\u003EMyLittleContentEngine.BlogSite\u003C/code\u003E package provides a complete blog site solution with minimal setup. It includes all the components, layouts, and styling needed to create a professional blog with customizable branding, RSS feeds, and social media integration.\u003C/p\u003E\n\u003Cdiv class=\u0022markdown-alert markdown-alert-important\u0022\u003E\n\u003Cp class=\u0022markdown-alert-title\u0022\u003E\u003Csvg viewBox=\u00220 0 16 16\u0022 version=\u00221.1\u0022 width=\u002216\u0022 height=\u002216\u0022 aria-hidden=\u0022true\u0022\u003E\u003Cpath d=\u0022M0 1.75C0 .784.784 0 1.75 0h12.5C15.216 0 16 .784 16 1.75v9.5A1.75 1.75 0 0 1 14.25 13H8.06l-2.573 2.573A1.458 1.458 0 0 1 3 14.543V13H1.75A1.75 1.75 0 0 1 0 11.25Zm1.75-.25a.25.25 0 0 0-.25.25v9.5c0 .138.112.25.25.25h2a.75.75 0 0 1 .75.75v2.19l2.72-2.72a.749.749 0 0 1 .53-.22h6.5a.25.25 0 0 0 .25-.25v-9.5a.25.25 0 0 0-.25-.25Zm7 2.25v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 9a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z\u0022\u003E\u003C/path\u003E\u003C/svg\u003EImportant\u003C/p\u003E\n\u003Cp\u003EWhile functional, the \u003Ccode\u003EBlogSite\u003C/code\u003E package drives the documentation for my personal blog. It can and will\nchange as this site changes. It is better suited as inspiration or proof-of-concepts than a blog you want total control over.\u003C/p\u003E\n\u003C/div\u003E\n\u003Ch2 id=\u0022what-youll-build\u0022\u003EWhat You\u0027ll Build\u003C/h2\u003E\n\u003Cp\u003EYou\u0027ll create a blog site with:\u003C/p\u003E\n\u003Cul\u003E\n\u003Cli\u003EA nice little blog layout with posts and archives\u003C/li\u003E\n\u003Cli\u003EIndividual blog post pages with metadata\u003C/li\u003E\n\u003Cli\u003ETag-based organization and filtering\u003C/li\u003E\n\u003Cli\u003ERSS feed generation\u003C/li\u003E\n\u003Cli\u003EResponsive design with dark/light mode\u003C/li\u003E\n\u003Cli\u003ESocial media integration\u003C/li\u003E\n\u003Cli\u003EA bit of custom branding and styling\u003C/li\u003E\n\u003C/ul\u003E\n\u003Cdiv class=\u0022mx-4\u0022\u003E\u003Col class=\u0022relative text-gray-500 border-l-2 border-base-200 dark:border-base-800 dark:text-base-400 list-none \u0022\u003E\u003Cli class=\u0022mb-10 \u0022\u003E\u003Cspan class=\u0022not-prose -start-3 lg:-start-4 absolute flex items-center font-display text-xs lg:text-base font-bold justify-center mt-0.5 lg:mt-0 w-6 h-6 lg:w-8 lg:h-8 bg-base-100 rounded-full ring-2 ring-base-300 dark:ring-base-800 dark:bg-base-900\u0022\u003E1\u003C/span\u003E\n    \n    \u003Ch2 id=\u0022create-a-new-blazor-project\u0022\u003ECreate a New Blazor Project\u003C/h2\u003E\n\u003Cp\u003EStart by creating a new minimal web project:\u003C/p\u003E\n\u003Cdiv class=\u0022code-highlight-wrapper not-prose\u0022\u003E\n\u003Cdiv class=\u0022standalone-code-container\u0022\u003E\n\u003Cdiv class=\u0022standalone-code-highlight\u0022\u003E\n\u003Cpre\u003E\u003Ccode\u003E\u003Cspan class=\u0022line\u0022\u003E\u003Cspan class=\u0022hljs-built_in\u0022\u003Edotnet\u003C/span\u003E new web \u003Cspan class=\u0022hljs-params\u0022\u003E-n\u003C/span\u003E MyBlogSite\u003C/span\u003E\n\u003Cspan class=\u0022line\u0022\u003E\u003Cspan class=\u0022hljs-built_in\u0022\u003Ecd\u003C/span\u003E MyBlogSite\u003C/span\u003E\n\u003C/code\u003E\u003C/pre\u003E\n\u003C/div\u003E\n\u003C/div\u003E\n\u003C/div\u003E\n\u003C/li\u003E\u003Cli class=\u0022mb-10 \u0022\u003E\u003Cspan class=\u0022not-prose -start-3 lg:-start-4 absolute flex items-center font-display text-xs lg:text-base font-bold justify-center mt-0.5 lg:mt-0 w-6 h-6 lg:w-8 lg:h-8 bg-base-100 rounded-full ring-2 ring-base-300 dark:ring-base-800 dark:bg-base-900\u0022\u003E2\u003C/span\u003E\n    \n    \u003Ch2 id=\u0022add-the-blogsite-package\u0022\u003EAdd the BlogSite Package\u003C/h2\u003E\n\u003Cp\u003EAdd the BlogSite package reference to your project:\u003C/p\u003E\n\u003Cdiv class=\u0022code-highlight-wrapper not-prose\u0022\u003E\n\u003Cdiv class=\u0022standalone-code-container\u0022\u003E\n\u003Cdiv class=\u0022standalone-code-highlight\u0022\u003E\n\u003Cpre\u003E\u003Ccode\u003E\u003Cspan class=\u0022line\u0022\u003E\u003Cspan class=\u0022hljs-built_in\u0022\u003Edotnet\u003C/span\u003E add package MyLittleContentEngine.BlogSite\u003C/span\u003E\n\u003C/code\u003E\u003C/pre\u003E\n\u003C/div\u003E\n\u003C/div\u003E\n\u003C/div\u003E\n\n\u003Cp\u003EThis package includes all the dependencies you need:\u003C/p\u003E\n\u003Cul\u003E\n\u003Cli\u003E\u003Ccode\u003EMyLittleContentEngine\u003C/code\u003E - Core content management functionality\u003C/li\u003E\n\u003Cli\u003E\u003Ccode\u003EMyLittleContentEngine.UI\u003C/code\u003E - UI components for blogs\u003C/li\u003E\n\u003Cli\u003E\u003Ccode\u003EMyLittleContentEngine.MonorailCss\u003C/code\u003E - CSS framework for styling\u003C/li\u003E\n\u003Cli\u003E\u003Ccode\u003EMdazor\u003C/code\u003E - Markdown rendering for Blazor\u003C/li\u003E\n\u003C/ul\u003E\n\u003C/li\u003E\u003Cli class=\u0022mb-10 \u0022\u003E\u003Cspan class=\u0022not-prose -start-3 lg:-start-4 absolute flex items-center font-display text-xs lg:text-base font-bold justify-center mt-0.5 lg:mt-0 w-6 h-6 lg:w-8 lg:h-8 bg-base-100 rounded-full ring-2 ring-base-300 dark:ring-base-800 dark:bg-base-900\u0022\u003E3\u003C/span\u003E\n    \n    \u003Ch2 id=\u0022configure-file-watching-for-development\u0022\u003EConfigure File Watching for Development\u003C/h2\u003E\n\u003Cp\u003EAdd the following to your \u003Ccode\u003E.csproj\u003C/code\u003E file so content changes trigger live reload during development:\u003C/p\u003E\n\u003Cdiv class=\u0022code-highlight-wrapper not-prose\u0022\u003E\n\u003Cdiv class=\u0022standalone-code-container\u0022\u003E\n\u003Cdiv class=\u0022standalone-code-highlight\u0022\u003E\n\u003Cpre\u003E\u003Ccode\u003E\u003Cspan class=\u0022line\u0022\u003E\u003Cspan class=\u0022hljs-tag\u0022\u003E\u0026lt;\u003C/span\u003E\u003Cspan class=\u0022hljs-tag\u0022\u003EItemGroup\u003C/span\u003E\u003Cspan class=\u0022hljs-tag\u0022\u003E\u0026gt;\u003C/span\u003E\u003C/span\u003E\n\u003Cspan class=\u0022line\u0022\u003E    \u003Cspan class=\u0022hljs-tag\u0022\u003E\u0026lt;\u003C/span\u003E\u003Cspan class=\u0022hljs-tag\u0022\u003EWatch\u003C/span\u003E\u003Cspan class=\u0022hljs-tag\u0022\u003E \u003C/span\u003E\u003Cspan class=\u0022hljs-attr\u0022\u003EInclude\u003C/span\u003E\u003Cspan class=\u0022hljs-tag\u0022\u003E=\u003C/span\u003E\u003Cspan class=\u0022hljs-string\u0022\u003E\u0022\u003C/span\u003E\u003Cspan class=\u0022hljs-string\u0022\u003EContent/**/*.*\u003C/span\u003E\u003Cspan class=\u0022hljs-string\u0022\u003E\u0022\u003C/span\u003E\u003Cspan class=\u0022hljs-tag\u0022\u003E/\u0026gt;\u003C/span\u003E\u003C/span\u003E\n\u003Cspan class=\u0022line\u0022\u003E\u003Cspan class=\u0022hljs-tag\u0022\u003E\u0026lt;/\u003C/span\u003E\u003Cspan class=\u0022hljs-tag\u0022\u003EItemGroup\u003C/span\u003E\u003Cspan class=\u0022hljs-tag\u0022\u003E\u0026gt;\u003C/span\u003E\u003C/span\u003E\u003C/code\u003E\u003C/pre\u003E\n\u003C/div\u003E\n\u003C/div\u003E\n\u003C/div\u003E\n\u003C/li\u003E\u003Cli class=\u0022mb-10 \u0022\u003E\u003Cspan class=\u0022not-prose -start-3 lg:-start-4 absolute flex items-center font-display text-xs lg:text-base font-bold justify-center mt-0.5 lg:mt-0 w-6 h-6 lg:w-8 lg:h-8 bg-base-100 rounded-full ring-2 ring-base-300 dark:ring-base-800 dark:bg-base-900\u0022\u003E4\u003C/span\u003E\n    \n    \u003Ch2 id=\u0022configure-the-blogsite\u0022\u003EConfigure the BlogSite\u003C/h2\u003E\n\u003Cp\u003EReplace the content of \u003Ccode\u003EProgram.cs\u003C/code\u003E with the following minimal configuration:\u003C/p\u003E\n\u003Cdiv class=\u0022code-highlight-wrapper not-prose\u0022\u003E\n\u003Cdiv class=\u0022standalone-code-container\u0022\u003E\n\u003Cdiv class=\u0022standalone-code-highlight\u0022\u003E\n\u003Cpre\u003E\u003Ccode\u003E\u003Cspan class=\u0022line\u0022\u003E\u003Cspan class=\u0022hljs-keyword roslyn-keyword\u0022\u003Eusing\u003C/span\u003E \u003Cspan class=\u0022hljs-function roslyn-identifier\u0022\u003EMyLittleContentEngine\u003C/span\u003E\u003Cspan class=\u0022hljs-operator roslyn-operator\u0022\u003E.\u003C/span\u003E\u003Cspan class=\u0022hljs-function roslyn-identifier\u0022\u003EBlogSite\u003C/span\u003E\u003Cspan class=\u0022hljs-punctuation roslyn-punctuation\u0022\u003E;\u003C/span\u003E\u003C/span\u003E\n\u003Cspan class=\u0022line\u0022\u003E  \u003C/span\u003E\n\u003Cspan class=\u0022line\u0022\u003E\u003Cspan class=\u0022hljs-keyword roslyn-keyword\u0022\u003Evar\u003C/span\u003E \u003Cspan class=\u0022hljs-variable roslyn-local-name\u0022\u003Ebuilder\u003C/span\u003E \u003Cspan class=\u0022hljs-operator roslyn-operator\u0022\u003E=\u003C/span\u003E \u003Cspan class=\u0022hljs-function roslyn-identifier\u0022\u003EWebApplication\u003C/span\u003E\u003Cspan class=\u0022hljs-operator roslyn-operator\u0022\u003E.\u003C/span\u003E\u003Cspan class=\u0022hljs-function roslyn-identifier\u0022\u003ECreateBuilder\u003C/span\u003E\u003Cspan class=\u0022hljs-punctuation roslyn-punctuation\u0022\u003E(\u003C/span\u003E\u003Cspan class=\u0022hljs-keyword roslyn-keyword\u0022\u003Eargs\u003C/span\u003E\u003Cspan class=\u0022hljs-punctuation roslyn-punctuation\u0022\u003E)\u003C/span\u003E\u003Cspan class=\u0022hljs-punctuation roslyn-punctuation\u0022\u003E;\u003C/span\u003E\u003C/span\u003E\n\u003Cspan class=\u0022line\u0022\u003E  \u003C/span\u003E\n\u003Cspan class=\u0022line\u0022\u003E\u003Cspan class=\u0022hljs-variable roslyn-local-name\u0022\u003Ebuilder\u003C/span\u003E\u003Cspan class=\u0022hljs-operator roslyn-operator\u0022\u003E.\u003C/span\u003E\u003Cspan class=\u0022hljs-function roslyn-identifier\u0022\u003EServices\u003C/span\u003E\u003Cspan class=\u0022hljs-operator roslyn-operator\u0022\u003E.\u003C/span\u003E\u003Cspan class=\u0022hljs-function roslyn-identifier\u0022\u003EAddBlogSite\u003C/span\u003E\u003Cspan class=\u0022hljs-punctuation roslyn-punctuation\u0022\u003E(\u003C/span\u003E\u003Cspan class=\u0022hljs-variable roslyn-parameter-name\u0022\u003E_\u003C/span\u003E \u003Cspan class=\u0022hljs-operator roslyn-operator\u0022\u003E=\u0026gt;\u003C/span\u003E \u003Cspan class=\u0022hljs-keyword roslyn-keyword\u0022\u003Enew\u003C/span\u003E \u003Cspan class=\u0022hljs-function roslyn-identifier\u0022\u003EBlogSiteOptions\u003C/span\u003E\u003C/span\u003E\n\u003Cspan class=\u0022line\u0022\u003E\u003Cspan class=\u0022hljs-punctuation roslyn-punctuation\u0022\u003E{\u003C/span\u003E\u003C/span\u003E\n\u003Cspan class=\u0022line\u0022\u003E    \u003Cspan class=\u0022hljs-function roslyn-identifier\u0022\u003ESiteTitle\u003C/span\u003E \u003Cspan class=\u0022hljs-operator roslyn-operator\u0022\u003E=\u003C/span\u003E \u003Cspan class=\u0022hljs-string roslyn-string\u0022\u003E\u0022My Blog\u0022\u003C/span\u003E\u003Cspan class=\u0022hljs-punctuation roslyn-punctuation\u0022\u003E,\u003C/span\u003E\u003C/span\u003E\n\u003Cspan class=\u0022line\u0022\u003E    \u003Cspan class=\u0022hljs-function roslyn-identifier\u0022\u003EDescription\u003C/span\u003E \u003Cspan class=\u0022hljs-operator roslyn-operator\u0022\u003E=\u003C/span\u003E \u003Cspan class=\u0022hljs-string roslyn-string\u0022\u003E\u0022A blog about my adventures in coding\u0022\u003C/span\u003E\u003Cspan class=\u0022hljs-punctuation roslyn-punctuation\u0022\u003E,\u003C/span\u003E\u003C/span\u003E\n\u003Cspan class=\u0022line\u0022\u003E\u003Cspan class=\u0022hljs-punctuation roslyn-punctuation\u0022\u003E}\u003C/span\u003E\u003Cspan class=\u0022hljs-punctuation roslyn-punctuation\u0022\u003E)\u003C/span\u003E\u003Cspan class=\u0022hljs-punctuation roslyn-punctuation\u0022\u003E;\u003C/span\u003E\u003C/span\u003E\n\u003Cspan class=\u0022line\u0022\u003E  \u003C/span\u003E\n\u003Cspan class=\u0022line\u0022\u003E\u003Cspan class=\u0022hljs-keyword roslyn-keyword\u0022\u003Evar\u003C/span\u003E \u003Cspan class=\u0022hljs-variable roslyn-local-name\u0022\u003Eapp\u003C/span\u003E \u003Cspan class=\u0022hljs-operator roslyn-operator\u0022\u003E=\u003C/span\u003E \u003Cspan class=\u0022hljs-variable roslyn-local-name\u0022\u003Ebuilder\u003C/span\u003E\u003Cspan class=\u0022hljs-operator roslyn-operator\u0022\u003E.\u003C/span\u003E\u003Cspan class=\u0022hljs-function roslyn-identifier\u0022\u003EBuild\u003C/span\u003E\u003Cspan class=\u0022hljs-punctuation roslyn-punctuation\u0022\u003E(\u003C/span\u003E\u003Cspan class=\u0022hljs-punctuation roslyn-punctuation\u0022\u003E)\u003C/span\u003E\u003Cspan class=\u0022hljs-punctuation roslyn-punctuation\u0022\u003E;\u003C/span\u003E\u003C/span\u003E\n\u003Cspan class=\u0022line\u0022\u003E  \u003C/span\u003E\n\u003Cspan class=\u0022line\u0022\u003E\u003Cspan class=\u0022hljs-variable roslyn-local-name\u0022\u003Eapp\u003C/span\u003E\u003Cspan class=\u0022hljs-operator roslyn-operator\u0022\u003E.\u003C/span\u003E\u003Cspan class=\u0022hljs-function roslyn-identifier\u0022\u003EUseBlogSite\u003C/span\u003E\u003Cspan class=\u0022hljs-punctuation roslyn-punctuation\u0022\u003E(\u003C/span\u003E\u003Cspan class=\u0022hljs-punctuation roslyn-punctuation\u0022\u003E)\u003C/span\u003E\u003Cspan class=\u0022hljs-punctuation roslyn-punctuation\u0022\u003E;\u003C/span\u003E\u003C/span\u003E\n\u003Cspan class=\u0022line\u0022\u003E  \u003C/span\u003E\n\u003Cspan class=\u0022line\u0022\u003E\u003Cspan class=\u0022hljs-keyword roslyn-keyword---control\u0022\u003Eawait\u003C/span\u003E \u003Cspan class=\u0022hljs-variable roslyn-local-name\u0022\u003Eapp\u003C/span\u003E\u003Cspan class=\u0022hljs-operator roslyn-operator\u0022\u003E.\u003C/span\u003E\u003Cspan class=\u0022hljs-function roslyn-identifier\u0022\u003ERunBlogSiteAsync\u003C/span\u003E\u003Cspan class=\u0022hljs-punctuation roslyn-punctuation\u0022\u003E(\u003C/span\u003E\u003Cspan class=\u0022hljs-keyword roslyn-keyword\u0022\u003Eargs\u003C/span\u003E\u003Cspan class=\u0022hljs-punctuation roslyn-punctuation\u0022\u003E)\u003C/span\u003E\u003Cspan class=\u0022hljs-punctuation roslyn-punctuation\u0022\u003E;\u003C/span\u003E\u003C/span\u003E\u003C/code\u003E\u003C/pre\u003E\n\u003C/div\u003E\n\u003C/div\u003E\n\u003C/div\u003E\n\n\u003Cp\u003EThis minimal setup provides a complete blog site with default styling and layout.\u003C/p\u003E\n\u003C/li\u003E\u003Cli class=\u0022mb-10 \u0022\u003E\u003Cspan class=\u0022not-prose -start-3 lg:-start-4 absolute flex items-center font-display text-xs lg:text-base font-bold justify-center mt-0.5 lg:mt-0 w-6 h-6 lg:w-8 lg:h-8 bg-base-100 rounded-full ring-2 ring-base-300 dark:ring-base-800 dark:bg-base-900\u0022\u003E5\u003C/span\u003E\n    \n    \u003Ch2 id=\u0022create-the-content-structure\u0022\u003ECreate the Content Structure\u003C/h2\u003E\n\u003Cp\u003ECreate the blog content directory structure:\u003C/p\u003E\n\u003Cdiv class=\u0022code-highlight-wrapper not-prose\u0022\u003E\n\u003Cdiv class=\u0022standalone-code-container\u0022\u003E\n\u003Cdiv class=\u0022standalone-code-highlight\u0022\u003E\n\u003Cpre\u003E\u003Ccode\u003E\u003Cspan class=\u0022line\u0022\u003E\u003Cspan class=\u0022hljs-built_in\u0022\u003Emkdir\u003C/span\u003E \u003Cspan class=\u0022hljs-params\u0022\u003E-p\u003C/span\u003E Content/Blog\u003C/span\u003E\n\u003C/code\u003E\u003C/pre\u003E\n\u003C/div\u003E\n\u003C/div\u003E\n\u003C/div\u003E\n\n\u003Cp\u003EThe BlogSite package expects your blog posts to be in the \u003Ccode\u003EContent/Blog\u003C/code\u003E directory by default.\u003C/p\u003E\n\u003C/li\u003E\u003Cli class=\u0022mb-10 \u0022\u003E\u003Cspan class=\u0022not-prose -start-3 lg:-start-4 absolute flex items-center font-display text-xs lg:text-base font-bold justify-center mt-0.5 lg:mt-0 w-6 h-6 lg:w-8 lg:h-8 bg-base-100 rounded-full ring-2 ring-base-300 dark:ring-base-800 dark:bg-base-900\u0022\u003E6\u003C/span\u003E\n    \n    \u003Ch2 id=\u0022write-your-first-blog-post\u0022\u003EWrite Your First Blog Post\u003C/h2\u003E\n\u003Cp\u003ECreate your first blog post at \u003Ccode\u003EContent/Blog/2024/01/welcome-to-my-blog.md\u003C/code\u003E:\u003C/p\u003E\n\u003Cdiv class=\u0022code-highlight-wrapper not-prose\u0022\u003E\n\u003Cdiv class=\u0022standalone-code-container\u0022\u003E\n\u003Cdiv class=\u0022standalone-code-highlight\u0022\u003E\n\u003Cpre\u003E\u003Ccode\u003E\u003Cspan class=\u0022line\u0022\u003E\u003Cspan class=\u0022hljs-built_in\u0022\u003Emkdir\u003C/span\u003E \u003Cspan class=\u0022hljs-params\u0022\u003E-p\u003C/span\u003E Content/Blog/2024/01\u003C/span\u003E\n\u003C/code\u003E\u003C/pre\u003E\n\u003C/div\u003E\n\u003C/div\u003E\n\u003C/div\u003E\n\n\u003Cp\u003EI like to put my blog posts in a year/month folder structure, but you can use any structure you want.\u003C/p\u003E\n\u003Cdiv class=\u0022code-highlight-wrapper not-prose\u0022\u003E\n\u003Cdiv class=\u0022standalone-code-container\u0022\u003E\n\u003Cdiv class=\u0022standalone-code-highlight\u0022\u003E\n\u003Cpre\u003E\u003Ccode\u003E---\n\u003Cspan class=\u0022hljs-tag\u0022\u003Et\u003C/span\u003E\u003Cspan class=\u0022hljs-tag\u0022\u003Eitle\u003C/span\u003E\u003Cspan class=\u0022hljs-punctuation\u0022\u003E:\u003C/span\u003E \u003Cspan class=\u0022hljs-string\u0022\u003E\u0022\u003C/span\u003E\u003Cspan class=\u0022hljs-string\u0022\u003EWelcome to My Blog\u003C/span\u003E\u003Cspan class=\u0022hljs-string\u0022\u003E\u0022\u003C/span\u003E\n\u003Cspan class=\u0022hljs-tag\u0022\u003Ed\u003C/span\u003E\u003Cspan class=\u0022hljs-tag\u0022\u003Eescription\u003C/span\u003E\u003Cspan class=\u0022hljs-punctuation\u0022\u003E:\u003C/span\u003E \u003Cspan class=\u0022hljs-string\u0022\u003E\u0022\u003C/span\u003E\u003Cspan class=\u0022hljs-string\u0022\u003EMy first blog post using MyLittleContentEngine\u003C/span\u003E\u003Cspan class=\u0022hljs-string\u0022\u003E\u0022\u003C/span\u003E\n\u003Cspan class=\u0022hljs-tag\u0022\u003Ed\u003C/span\u003E\u003Cspan class=\u0022hljs-tag\u0022\u003Eate\u003C/span\u003E\u003Cspan class=\u0022hljs-punctuation\u0022\u003E:\u003C/span\u003E \u003Cspan class=\u0022hljs-literal\u0022\u003E2024-01-15\u003C/span\u003E\n\u003Cspan class=\u0022hljs-tag\u0022\u003Et\u003C/span\u003E\u003Cspan class=\u0022hljs-tag\u0022\u003Eags\u003C/span\u003E\u003Cspan class=\u0022hljs-punctuation\u0022\u003E:\u003C/span\u003E \u003Cspan class=\u0022hljs-punctuation\u0022\u003E[\u003C/span\u003E\u003Cspan class=\u0022hljs-string\u0022\u003E\u0022\u003C/span\u003E\u003Cspan class=\u0022hljs-string\u0022\u003Eblogging\u003C/span\u003E\u003Cspan class=\u0022hljs-string\u0022\u003E\u0022\u003C/span\u003E\u003Cspan class=\u0022hljs-punctuation\u0022\u003E,\u003C/span\u003E \u003Cspan class=\u0022hljs-string\u0022\u003E\u0022\u003C/span\u003E\u003Cspan class=\u0022hljs-string\u0022\u003Egetting-started\u003C/span\u003E\u003Cspan class=\u0022hljs-string\u0022\u003E\u0022\u003C/span\u003E\u003Cspan class=\u0022hljs-punctuation\u0022\u003E]\u003C/span\u003E\n---\n\n\u003Cspan class=\u0022hljs-punctuation\u0022\u003E#\u003C/span\u003E \u003Cspan class=\u0022hljs-name\u0022\u003EWelcome to My Blog\u003C/span\u003E\n\nThis is my first blog post using MyLittleContentEngine! I\u0027m excited to share my thoughts and experiences.\n\n\u003Cspan class=\u0022hljs-punctuation\u0022\u003E##\u003C/span\u003E \u003Cspan class=\u0022hljs-name\u0022\u003EWhat You Can Expect\u003C/span\u003E\n\n\u003Cspan class=\u0022hljs-punctuation\u0022\u003E-\u003C/span\u003E Regular updates about my coding journey\n\u003Cspan class=\u0022hljs-punctuation\u0022\u003E-\u003C/span\u003E Tips and tricks I\u0027ve learned\n\u003Cspan class=\u0022hljs-punctuation\u0022\u003E-\u003C/span\u003E Project showcases\n\u003Cspan class=\u0022hljs-punctuation\u0022\u003E-\u003C/span\u003E Technical deep-dives\n\nStay tuned for more content!\u003C/code\u003E\u003C/pre\u003E\n\u003C/div\u003E\n\u003C/div\u003E\n\u003C/div\u003E\n\u003C/li\u003E\u003Cli class=\u0022mb-10 \u0022\u003E\u003Cspan class=\u0022not-prose -start-3 lg:-start-4 absolute flex items-center font-display text-xs lg:text-base font-bold justify-center mt-0.5 lg:mt-0 w-6 h-6 lg:w-8 lg:h-8 bg-base-100 rounded-full ring-2 ring-base-300 dark:ring-base-800 dark:bg-base-900\u0022\u003E7\u003C/span\u003E\n    \n    \u003Ch2 id=\u0022customize-your-blog\u0022\u003ECustomize Your Blog\u003C/h2\u003E\n\u003Cp\u003EYou can customize various aspects of your blog by modifying the options in \u003Ccode\u003EProgram.cs\u003C/code\u003E:\u003C/p\u003E\n\u003Cdiv class=\u0022code-highlight-wrapper not-prose\u0022\u003E\n\u003Cdiv class=\u0022standalone-code-container\u0022\u003E\n\u003Cdiv class=\u0022standalone-code-highlight\u0022\u003E\n\u003Cpre\u003E\u003Ccode\u003E\u003Cspan class=\u0022line\u0022\u003E\u003Cspan class=\u0022hljs-keyword roslyn-keyword\u0022\u003Eusing\u003C/span\u003E \u003Cspan class=\u0022hljs-function roslyn-identifier\u0022\u003EMonorailCss\u003C/span\u003E\u003Cspan class=\u0022hljs-punctuation roslyn-punctuation\u0022\u003E;\u003C/span\u003E\u003C/span\u003E\n\u003Cspan class=\u0022line\u0022\u003E\u003Cspan class=\u0022hljs-keyword roslyn-keyword\u0022\u003Eusing\u003C/span\u003E \u003Cspan class=\u0022hljs-function roslyn-identifier\u0022\u003EMyLittleContentEngine\u003C/span\u003E\u003Cspan class=\u0022hljs-operator roslyn-operator\u0022\u003E.\u003C/span\u003E\u003Cspan class=\u0022hljs-function roslyn-identifier\u0022\u003EBlogSite\u003C/span\u003E\u003Cspan class=\u0022hljs-punctuation roslyn-punctuation\u0022\u003E;\u003C/span\u003E\u003C/span\u003E\n\u003Cspan class=\u0022line\u0022\u003E  \u003C/span\u003E\n\u003Cspan class=\u0022line\u0022\u003E\u003Cspan class=\u0022hljs-keyword roslyn-keyword\u0022\u003Evar\u003C/span\u003E \u003Cspan class=\u0022hljs-variable roslyn-local-name\u0022\u003Ebuilder\u003C/span\u003E \u003Cspan class=\u0022hljs-operator roslyn-operator\u0022\u003E=\u003C/span\u003E \u003Cspan class=\u0022hljs-function roslyn-identifier\u0022\u003EWebApplication\u003C/span\u003E\u003Cspan class=\u0022hljs-operator roslyn-operator\u0022\u003E.\u003C/span\u003E\u003Cspan class=\u0022hljs-function roslyn-identifier\u0022\u003ECreateBuilder\u003C/span\u003E\u003Cspan class=\u0022hljs-punctuation roslyn-punctuation\u0022\u003E(\u003C/span\u003E\u003Cspan class=\u0022hljs-keyword roslyn-keyword\u0022\u003Eargs\u003C/span\u003E\u003Cspan class=\u0022hljs-punctuation roslyn-punctuation\u0022\u003E)\u003C/span\u003E\u003Cspan class=\u0022hljs-punctuation roslyn-punctuation\u0022\u003E;\u003C/span\u003E\u003C/span\u003E\n\u003Cspan class=\u0022line\u0022\u003E  \u003C/span\u003E\n\u003Cspan class=\u0022line\u0022\u003E\u003Cspan class=\u0022hljs-variable roslyn-local-name\u0022\u003Ebuilder\u003C/span\u003E\u003Cspan class=\u0022hljs-operator roslyn-operator\u0022\u003E.\u003C/span\u003E\u003Cspan class=\u0022hljs-function roslyn-identifier\u0022\u003EServices\u003C/span\u003E\u003Cspan class=\u0022hljs-operator roslyn-operator\u0022\u003E.\u003C/span\u003E\u003Cspan class=\u0022hljs-function roslyn-identifier\u0022\u003EAddBlogSite\u003C/span\u003E\u003Cspan class=\u0022hljs-punctuation roslyn-punctuation\u0022\u003E(\u003C/span\u003E\u003Cspan class=\u0022hljs-variable roslyn-parameter-name\u0022\u003E_\u003C/span\u003E \u003Cspan class=\u0022hljs-operator roslyn-operator\u0022\u003E=\u0026gt;\u003C/span\u003E \u003Cspan class=\u0022hljs-keyword roslyn-keyword\u0022\u003Enew\u003C/span\u003E \u003Cspan class=\u0022hljs-function roslyn-identifier\u0022\u003EBlogSiteOptions\u003C/span\u003E\u003C/span\u003E\n\u003Cspan class=\u0022line\u0022\u003E\u003Cspan class=\u0022hljs-punctuation roslyn-punctuation\u0022\u003E{\u003C/span\u003E\u003C/span\u003E\n\u003Cspan class=\u0022line\u0022\u003E    \u003Cspan class=\u0022hljs-comment roslyn-comment\u0022\u003E// Basic site information\u003C/span\u003E\u003C/span\u003E\n\u003Cspan class=\u0022line\u0022\u003E    \u003Cspan class=\u0022hljs-function roslyn-identifier\u0022\u003ESiteTitle\u003C/span\u003E \u003Cspan class=\u0022hljs-operator roslyn-operator\u0022\u003E=\u003C/span\u003E \u003Cspan class=\u0022hljs-string roslyn-string\u0022\u003E\u0022My Coding Blog\u0022\u003C/span\u003E\u003Cspan class=\u0022hljs-punctuation roslyn-punctuation\u0022\u003E,\u003C/span\u003E\u003C/span\u003E\n\u003Cspan class=\u0022line\u0022\u003E    \u003Cspan class=\u0022hljs-function roslyn-identifier\u0022\u003EDescription\u003C/span\u003E \u003Cspan class=\u0022hljs-operator roslyn-operator\u0022\u003E=\u003C/span\u003E \u003Cspan class=\u0022hljs-string roslyn-string\u0022\u003E\u0022Adventures in software development\u0022\u003C/span\u003E\u003Cspan class=\u0022hljs-punctuation roslyn-punctuation\u0022\u003E,\u003C/span\u003E\u003C/span\u003E\n\u003Cspan class=\u0022line\u0022\u003E    \u003Cspan class=\u0022hljs-function roslyn-identifier\u0022\u003ECanonicalBaseUrl\u003C/span\u003E \u003Cspan class=\u0022hljs-operator roslyn-operator\u0022\u003E=\u003C/span\u003E \u003Cspan class=\u0022hljs-string roslyn-string\u0022\u003E\u0022https://myblog.example.com\u0022\u003C/span\u003E\u003Cspan class=\u0022hljs-punctuation roslyn-punctuation\u0022\u003E,\u003C/span\u003E\u003C/span\u003E\n\u003Cspan class=\u0022line\u0022\u003E  \u003C/span\u003E\n\u003Cspan class=\u0022line\u0022\u003E    \u003Cspan class=\u0022hljs-comment roslyn-comment\u0022\u003E// Styling and branding\u003C/span\u003E\u003C/span\u003E\n\u003Cspan class=\u0022line\u0022\u003E    \u003Cspan class=\u0022hljs-function roslyn-identifier\u0022\u003EPrimaryHue\u003C/span\u003E \u003Cspan class=\u0022hljs-operator roslyn-operator\u0022\u003E=\u003C/span\u003E \u003Cspan class=\u0022hljs-number roslyn-number\u0022\u003E250\u003C/span\u003E\u003Cspan class=\u0022hljs-punctuation roslyn-punctuation\u0022\u003E,\u003C/span\u003E \u003Cspan class=\u0022hljs-comment roslyn-comment\u0022\u003E// Purple theme (0-360)\u003C/span\u003E\u003C/span\u003E\n\u003Cspan class=\u0022line\u0022\u003E    \u003Cspan class=\u0022hljs-function roslyn-identifier\u0022\u003EBaseColorName\u003C/span\u003E \u003Cspan class=\u0022hljs-operator roslyn-operator\u0022\u003E=\u003C/span\u003E \u003Cspan class=\u0022hljs-function roslyn-identifier\u0022\u003EColorNames\u003C/span\u003E\u003Cspan class=\u0022hljs-operator roslyn-operator\u0022\u003E.\u003C/span\u003E\u003Cspan class=\u0022hljs-function roslyn-identifier\u0022\u003ESlate\u003C/span\u003E\u003Cspan class=\u0022hljs-punctuation roslyn-punctuation\u0022\u003E,\u003C/span\u003E\u003C/span\u003E\n\u003Cspan class=\u0022line\u0022\u003E    \u003Cspan class=\u0022hljs-function roslyn-identifier\u0022\u003EDisplayFontFamily\u003C/span\u003E \u003Cspan class=\u0022hljs-operator roslyn-operator\u0022\u003E=\u003C/span\u003E \u003Cspan class=\u0022hljs-string roslyn-string\u0022\u003E\u0022Inter\u0022\u003C/span\u003E\u003Cspan class=\u0022hljs-punctuation roslyn-punctuation\u0022\u003E,\u003C/span\u003E\u003C/span\u003E\n\u003Cspan class=\u0022line\u0022\u003E    \u003Cspan class=\u0022hljs-function roslyn-identifier\u0022\u003EBodyFontFamily\u003C/span\u003E \u003Cspan class=\u0022hljs-operator roslyn-operator\u0022\u003E=\u003C/span\u003E \u003Cspan class=\u0022hljs-string roslyn-string\u0022\u003E\u0022Inter\u0022\u003C/span\u003E\u003Cspan class=\u0022hljs-punctuation roslyn-punctuation\u0022\u003E,\u003C/span\u003E\u003C/span\u003E\n\u003Cspan class=\u0022line\u0022\u003E  \u003C/span\u003E\n\u003Cspan class=\u0022line\u0022\u003E    \u003Cspan class=\u0022hljs-comment roslyn-comment\u0022\u003E// Blog configuration\u003C/span\u003E\u003C/span\u003E\n\u003Cspan class=\u0022line\u0022\u003E    \u003Cspan class=\u0022hljs-function roslyn-identifier\u0022\u003EAuthorName\u003C/span\u003E \u003Cspan class=\u0022hljs-operator roslyn-operator\u0022\u003E=\u003C/span\u003E \u003Cspan class=\u0022hljs-string roslyn-string\u0022\u003E\u0022Your Name\u0022\u003C/span\u003E\u003Cspan class=\u0022hljs-punctuation roslyn-punctuation\u0022\u003E,\u003C/span\u003E\u003C/span\u003E\n\u003Cspan class=\u0022line\u0022\u003E    \u003Cspan class=\u0022hljs-function roslyn-identifier\u0022\u003EAuthorBio\u003C/span\u003E \u003Cspan class=\u0022hljs-operator roslyn-operator\u0022\u003E=\u003C/span\u003E \u003Cspan class=\u0022hljs-string roslyn-string\u0022\u003E\u0022Software developer passionate about clean code\u0022\u003C/span\u003E\u003Cspan class=\u0022hljs-punctuation roslyn-punctuation\u0022\u003E,\u003C/span\u003E\u003C/span\u003E\n\u003Cspan class=\u0022line\u0022\u003E    \u003Cspan class=\u0022hljs-function roslyn-identifier\u0022\u003EEnableRss\u003C/span\u003E \u003Cspan class=\u0022hljs-operator roslyn-operator\u0022\u003E=\u003C/span\u003E \u003Cspan class=\u0022hljs-keyword roslyn-keyword\u0022\u003Etrue\u003C/span\u003E\u003Cspan class=\u0022hljs-punctuation roslyn-punctuation\u0022\u003E,\u003C/span\u003E\u003C/span\u003E\n\u003Cspan class=\u0022line\u0022\u003E    \u003Cspan class=\u0022hljs-function roslyn-identifier\u0022\u003EEnableSitemap\u003C/span\u003E \u003Cspan class=\u0022hljs-operator roslyn-operator\u0022\u003E=\u003C/span\u003E \u003Cspan class=\u0022hljs-keyword roslyn-keyword\u0022\u003Etrue\u003C/span\u003E\u003Cspan class=\u0022hljs-punctuation roslyn-punctuation\u0022\u003E,\u003C/span\u003E\u003C/span\u003E\n\u003Cspan class=\u0022line\u0022\u003E  \u003C/span\u003E\n\u003Cspan class=\u0022line\u0022\u003E    \u003Cspan class=\u0022hljs-comment roslyn-comment\u0022\u003E// Navigation links\u003C/span\u003E\u003C/span\u003E\n\u003Cspan class=\u0022line\u0022\u003E    \u003Cspan class=\u0022hljs-function roslyn-identifier\u0022\u003EMainSiteLinks\u003C/span\u003E \u003Cspan class=\u0022hljs-operator roslyn-operator\u0022\u003E=\u003C/span\u003E \u003Cspan class=\u0022hljs-punctuation roslyn-punctuation\u0022\u003E[\u003C/span\u003E\u003C/span\u003E\n\u003Cspan class=\u0022line\u0022\u003E        \u003Cspan class=\u0022hljs-keyword roslyn-keyword\u0022\u003Enew\u003C/span\u003E \u003Cspan class=\u0022hljs-function roslyn-identifier\u0022\u003EHeaderLink\u003C/span\u003E\u003Cspan class=\u0022hljs-punctuation roslyn-punctuation\u0022\u003E(\u003C/span\u003E\u003Cspan class=\u0022hljs-string roslyn-string\u0022\u003E\u0022About\u0022\u003C/span\u003E\u003Cspan class=\u0022hljs-punctuation roslyn-punctuation\u0022\u003E,\u003C/span\u003E \u003Cspan class=\u0022hljs-string roslyn-string\u0022\u003E\u0022/about\u0022\u003C/span\u003E\u003Cspan class=\u0022hljs-punctuation roslyn-punctuation\u0022\u003E)\u003C/span\u003E\u003Cspan class=\u0022hljs-punctuation roslyn-punctuation\u0022\u003E,\u003C/span\u003E\u003C/span\u003E\n\u003Cspan class=\u0022line\u0022\u003E        \u003Cspan class=\u0022hljs-keyword roslyn-keyword\u0022\u003Enew\u003C/span\u003E \u003Cspan class=\u0022hljs-function roslyn-identifier\u0022\u003EHeaderLink\u003C/span\u003E\u003Cspan class=\u0022hljs-punctuation roslyn-punctuation\u0022\u003E(\u003C/span\u003E\u003Cspan class=\u0022hljs-string roslyn-string\u0022\u003E\u0022Contact\u0022\u003C/span\u003E\u003Cspan class=\u0022hljs-punctuation roslyn-punctuation\u0022\u003E,\u003C/span\u003E \u003Cspan class=\u0022hljs-string roslyn-string\u0022\u003E\u0022/contact\u0022\u003C/span\u003E\u003Cspan class=\u0022hljs-punctuation roslyn-punctuation\u0022\u003E)\u003C/span\u003E\u003C/span\u003E\n\u003Cspan class=\u0022line\u0022\u003E    \u003Cspan class=\u0022hljs-punctuation roslyn-punctuation\u0022\u003E]\u003C/span\u003E\u003Cspan class=\u0022hljs-punctuation roslyn-punctuation\u0022\u003E,\u003C/span\u003E\u003C/span\u003E\n\u003Cspan class=\u0022line\u0022\u003E  \u003C/span\u003E\n\u003Cspan class=\u0022line\u0022\u003E    \u003Cspan class=\u0022hljs-comment roslyn-comment\u0022\u003E// Advanced customization\u003C/span\u003E\u003C/span\u003E\n\u003Cspan class=\u0022line\u0022\u003E    \u003Cspan class=\u0022hljs-function roslyn-identifier\u0022\u003EExtraStyles\u003C/span\u003E \u003Cspan class=\u0022hljs-operator roslyn-operator\u0022\u003E=\u003C/span\u003E \u003Cspan class=\u0022hljs-string roslyn-string\u0022\u003E\u0022\u0022\u0022\u003C/span\u003E\u003C/span\u003E\n\u003Cspan class=\u0022line\u0022\u003E        .blog-header {\u003C/span\u003E\n\u003Cspan class=\u0022line\u0022\u003E            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\u003C/span\u003E\n\u003Cspan class=\u0022line\u0022\u003E        }\u003C/span\u003E\n\u003Cspan class=\u0022line\u0022\u003E        \u0022\u0022\u0022\u003C/span\u003E\n\u003Cspan class=\u0022line\u0022\u003E\u003Cspan class=\u0022hljs-punctuation roslyn-punctuation\u0022\u003E}\u003C/span\u003E\u003Cspan class=\u0022hljs-punctuation roslyn-punctuation\u0022\u003E)\u003C/span\u003E\u003Cspan class=\u0022hljs-punctuation roslyn-punctuation\u0022\u003E;\u003C/span\u003E\u003C/span\u003E\n\u003Cspan class=\u0022line\u0022\u003E  \u003C/span\u003E\n\u003Cspan class=\u0022line\u0022\u003E\u003Cspan class=\u0022hljs-keyword roslyn-keyword\u0022\u003Evar\u003C/span\u003E \u003Cspan class=\u0022hljs-variable roslyn-local-name\u0022\u003Eapp\u003C/span\u003E \u003Cspan class=\u0022hljs-operator roslyn-operator\u0022\u003E=\u003C/span\u003E \u003Cspan class=\u0022hljs-variable roslyn-local-name\u0022\u003Ebuilder\u003C/span\u003E\u003Cspan class=\u0022hljs-operator roslyn-operator\u0022\u003E.\u003C/span\u003E\u003Cspan class=\u0022hljs-function roslyn-identifier\u0022\u003EBuild\u003C/span\u003E\u003Cspan class=\u0022hljs-punctuation roslyn-punctuation\u0022\u003E(\u003C/span\u003E\u003Cspan class=\u0022hljs-punctuation roslyn-punctuation\u0022\u003E)\u003C/span\u003E\u003Cspan class=\u0022hljs-punctuation roslyn-punctuation\u0022\u003E;\u003C/span\u003E\u003C/span\u003E\n\u003Cspan class=\u0022line\u0022\u003E\u003Cspan class=\u0022hljs-variable roslyn-local-name\u0022\u003Eapp\u003C/span\u003E\u003Cspan class=\u0022hljs-operator roslyn-operator\u0022\u003E.\u003C/span\u003E\u003Cspan class=\u0022hljs-function roslyn-identifier\u0022\u003EUseBlogSite\u003C/span\u003E\u003Cspan class=\u0022hljs-punctuation roslyn-punctuation\u0022\u003E(\u003C/span\u003E\u003Cspan class=\u0022hljs-punctuation roslyn-punctuation\u0022\u003E)\u003C/span\u003E\u003Cspan class=\u0022hljs-punctuation roslyn-punctuation\u0022\u003E;\u003C/span\u003E\u003C/span\u003E\n\u003Cspan class=\u0022line\u0022\u003E\u003Cspan class=\u0022hljs-keyword roslyn-keyword---control\u0022\u003Eawait\u003C/span\u003E \u003Cspan class=\u0022hljs-variable roslyn-local-name\u0022\u003Eapp\u003C/span\u003E\u003Cspan class=\u0022hljs-operator roslyn-operator\u0022\u003E.\u003C/span\u003E\u003Cspan class=\u0022hljs-function roslyn-identifier\u0022\u003ERunBlogSiteAsync\u003C/span\u003E\u003Cspan class=\u0022hljs-punctuation roslyn-punctuation\u0022\u003E(\u003C/span\u003E\u003Cspan class=\u0022hljs-keyword roslyn-keyword\u0022\u003Eargs\u003C/span\u003E\u003Cspan class=\u0022hljs-punctuation roslyn-punctuation\u0022\u003E)\u003C/span\u003E\u003Cspan class=\u0022hljs-punctuation roslyn-punctuation\u0022\u003E;\u003C/span\u003E\u003C/span\u003E\u003C/code\u003E\u003C/pre\u003E\n\u003C/div\u003E\n\u003C/div\u003E\n\u003C/div\u003E\n\u003C/li\u003E\u003Cli class=\u0022mb-10 \u0022\u003E\u003Cspan class=\u0022not-prose -start-3 lg:-start-4 absolute flex items-center font-display text-xs lg:text-base font-bold justify-center mt-0.5 lg:mt-0 w-6 h-6 lg:w-8 lg:h-8 bg-base-100 rounded-full ring-2 ring-base-300 dark:ring-base-800 dark:bg-base-900\u0022\u003E8\u003C/span\u003E\n    \n    \u003Ch2 id=\u0022add-social-media-integration\u0022\u003EAdd Social Media Integration\u003C/h2\u003E\n\u003Cp\u003EFor social media features, you can add social links and project showcases:\u003C/p\u003E\n\u003Cdiv class=\u0022code-highlight-wrapper not-prose\u0022\u003E\n\u003Cdiv class=\u0022standalone-code-container\u0022\u003E\n\u003Cdiv class=\u0022standalone-code-highlight\u0022\u003E\n\u003Cpre\u003E\u003Ccode\u003E\u003Cspan class=\u0022line\u0022\u003E\u003Cspan class=\u0022hljs-function roslyn-identifier\u0022\u003Ebuilder\u003C/span\u003E\u003Cspan class=\u0022hljs-operator roslyn-operator\u0022\u003E.\u003C/span\u003E\u003Cspan class=\u0022hljs-function roslyn-identifier\u0022\u003EServices\u003C/span\u003E\u003Cspan class=\u0022hljs-operator roslyn-operator\u0022\u003E.\u003C/span\u003E\u003Cspan class=\u0022hljs-function roslyn-identifier\u0022\u003EAddBlogSite\u003C/span\u003E\u003Cspan class=\u0022hljs-punctuation roslyn-punctuation\u0022\u003E(\u003C/span\u003E\u003Cspan class=\u0022hljs-variable roslyn-parameter-name\u0022\u003E_\u003C/span\u003E \u003Cspan class=\u0022hljs-operator roslyn-operator\u0022\u003E=\u0026gt;\u003C/span\u003E \u003Cspan class=\u0022hljs-keyword roslyn-keyword\u0022\u003Enew\u003C/span\u003E \u003Cspan class=\u0022hljs-function roslyn-identifier\u0022\u003EBlogSiteOptions\u003C/span\u003E\u003C/span\u003E\n\u003Cspan class=\u0022line\u0022\u003E\u003Cspan class=\u0022hljs-punctuation roslyn-punctuation\u0022\u003E{\u003C/span\u003E\u003C/span\u003E\n\u003Cspan class=\u0022line\u0022\u003E    \u003Cspan class=\u0022hljs-function roslyn-identifier\u0022\u003ESiteTitle\u003C/span\u003E \u003Cspan class=\u0022hljs-operator roslyn-operator\u0022\u003E=\u003C/span\u003E \u003Cspan class=\u0022hljs-string roslyn-string\u0022\u003E\u0022My Coding Blog\u0022\u003C/span\u003E\u003Cspan class=\u0022hljs-punctuation roslyn-punctuation\u0022\u003E,\u003C/span\u003E\u003C/span\u003E\n\u003Cspan class=\u0022line\u0022\u003E    \u003Cspan class=\u0022hljs-function roslyn-identifier\u0022\u003EDescription\u003C/span\u003E \u003Cspan class=\u0022hljs-operator roslyn-operator\u0022\u003E=\u003C/span\u003E \u003Cspan class=\u0022hljs-string roslyn-string\u0022\u003E\u0022Adventures in software development\u0022\u003C/span\u003E\u003Cspan class=\u0022hljs-punctuation roslyn-punctuation\u0022\u003E,\u003C/span\u003E\u003C/span\u003E\n\u003Cspan class=\u0022line\u0022\u003E  \u003C/span\u003E\n\u003Cspan class=\u0022line\u0022\u003E    \u003Cspan class=\u0022hljs-comment roslyn-comment\u0022\u003E// Social media links\u003C/span\u003E\u003C/span\u003E\n\u003Cspan class=\u0022line\u0022\u003E    \u003Cspan class=\u0022hljs-function roslyn-identifier\u0022\u003ESocials\u003C/span\u003E \u003Cspan class=\u0022hljs-operator roslyn-operator\u0022\u003E=\u003C/span\u003E \u003Cspan class=\u0022hljs-punctuation roslyn-punctuation\u0022\u003E[\u003C/span\u003E\u003C/span\u003E\n\u003Cspan class=\u0022line\u0022\u003E        \u003Cspan class=\u0022hljs-keyword roslyn-keyword\u0022\u003Enew\u003C/span\u003E \u003Cspan class=\u0022hljs-function roslyn-identifier\u0022\u003ESocialLink\u003C/span\u003E\u003Cspan class=\u0022hljs-punctuation roslyn-punctuation\u0022\u003E(\u003C/span\u003E\u003C/span\u003E\n\u003Cspan class=\u0022line\u0022\u003E            \u003Cspan class=\u0022hljs-function roslyn-identifier\u0022\u003EIcon\u003C/span\u003E\u003Cspan class=\u0022hljs-punctuation roslyn-punctuation\u0022\u003E:\u003C/span\u003E \u003Cspan class=\u0022hljs-function roslyn-identifier\u0022\u003ESocialIcons\u003C/span\u003E\u003Cspan class=\u0022hljs-operator roslyn-operator\u0022\u003E.\u003C/span\u003E\u003Cspan class=\u0022hljs-function roslyn-identifier\u0022\u003EBlueskyIcon\u003C/span\u003E\u003Cspan class=\u0022hljs-punctuation roslyn-punctuation\u0022\u003E,\u003C/span\u003E\u003C/span\u003E\n\u003Cspan class=\u0022line\u0022\u003E            \u003Cspan class=\u0022hljs-function roslyn-identifier\u0022\u003EUrl\u003C/span\u003E\u003Cspan class=\u0022hljs-punctuation roslyn-punctuation\u0022\u003E:\u003C/span\u003E \u003Cspan class=\u0022hljs-string roslyn-string\u0022\u003E\u0022https://bsky.app/yourusername\u0022\u003C/span\u003E\u003C/span\u003E\n\u003Cspan class=\u0022line\u0022\u003E        \u003Cspan class=\u0022hljs-punctuation roslyn-punctuation\u0022\u003E)\u003C/span\u003E\u003Cspan class=\u0022hljs-punctuation roslyn-punctuation\u0022\u003E,\u003C/span\u003E\u003C/span\u003E\n\u003Cspan class=\u0022line\u0022\u003E        \u003Cspan class=\u0022hljs-keyword roslyn-keyword\u0022\u003Enew\u003C/span\u003E \u003Cspan class=\u0022hljs-function roslyn-identifier\u0022\u003ESocialLink\u003C/span\u003E\u003Cspan class=\u0022hljs-punctuation roslyn-punctuation\u0022\u003E(\u003C/span\u003E\u003C/span\u003E\n\u003Cspan class=\u0022line\u0022\u003E            \u003Cspan class=\u0022hljs-function roslyn-identifier\u0022\u003EIcon\u003C/span\u003E\u003Cspan class=\u0022hljs-punctuation roslyn-punctuation\u0022\u003E:\u003C/span\u003E \u003Cspan class=\u0022hljs-function roslyn-identifier\u0022\u003ESocialIcons\u003C/span\u003E\u003Cspan class=\u0022hljs-operator roslyn-operator\u0022\u003E.\u003C/span\u003E\u003Cspan class=\u0022hljs-function roslyn-identifier\u0022\u003EGithubIcon\u003C/span\u003E\u003Cspan class=\u0022hljs-punctuation roslyn-punctuation\u0022\u003E,\u003C/span\u003E\u003C/span\u003E\n\u003Cspan class=\u0022line\u0022\u003E            \u003Cspan class=\u0022hljs-function roslyn-identifier\u0022\u003EUrl\u003C/span\u003E\u003Cspan class=\u0022hljs-punctuation roslyn-punctuation\u0022\u003E:\u003C/span\u003E \u003Cspan class=\u0022hljs-string roslyn-string\u0022\u003E\u0022https://github.com/yourusername\u0022\u003C/span\u003E\u003C/span\u003E\n\u003Cspan class=\u0022line\u0022\u003E        \u003Cspan class=\u0022hljs-punctuation roslyn-punctuation\u0022\u003E)\u003C/span\u003E\u003C/span\u003E\n\u003Cspan class=\u0022line\u0022\u003E    \u003Cspan class=\u0022hljs-punctuation roslyn-punctuation\u0022\u003E]\u003C/span\u003E\u003Cspan class=\u0022hljs-punctuation roslyn-punctuation\u0022\u003E,\u003C/span\u003E\u003C/span\u003E\n\u003Cspan class=\u0022line\u0022\u003E  \u003C/span\u003E\n\u003Cspan class=\u0022line\u0022\u003E    \u003Cspan class=\u0022hljs-comment roslyn-comment\u0022\u003E// Project showcase\u003C/span\u003E\u003C/span\u003E\n\u003Cspan class=\u0022line\u0022\u003E    \u003Cspan class=\u0022hljs-function roslyn-identifier\u0022\u003EMyWork\u003C/span\u003E \u003Cspan class=\u0022hljs-operator roslyn-operator\u0022\u003E=\u003C/span\u003E \u003Cspan class=\u0022hljs-punctuation roslyn-punctuation\u0022\u003E[\u003C/span\u003E\u003C/span\u003E\n\u003Cspan class=\u0022line\u0022\u003E        \u003Cspan class=\u0022hljs-keyword roslyn-keyword\u0022\u003Enew\u003C/span\u003E \u003Cspan class=\u0022hljs-function roslyn-identifier\u0022\u003EProject\u003C/span\u003E\u003Cspan class=\u0022hljs-punctuation roslyn-punctuation\u0022\u003E(\u003C/span\u003E\u003C/span\u003E\n\u003Cspan class=\u0022line\u0022\u003E            \u003Cspan class=\u0022hljs-function roslyn-identifier\u0022\u003ETitle\u003C/span\u003E\u003Cspan class=\u0022hljs-punctuation roslyn-punctuation\u0022\u003E:\u003C/span\u003E \u003Cspan class=\u0022hljs-string roslyn-string\u0022\u003E\u0022Awesome Library\u0022\u003C/span\u003E\u003Cspan class=\u0022hljs-punctuation roslyn-punctuation\u0022\u003E,\u003C/span\u003E\u003C/span\u003E\n\u003Cspan class=\u0022line\u0022\u003E            \u003Cspan class=\u0022hljs-function roslyn-identifier\u0022\u003EDescription\u003C/span\u003E\u003Cspan class=\u0022hljs-punctuation roslyn-punctuation\u0022\u003E:\u003C/span\u003E \u003Cspan class=\u0022hljs-string roslyn-string\u0022\u003E\u0022A useful library for developers\u0022\u003C/span\u003E\u003Cspan class=\u0022hljs-punctuation roslyn-punctuation\u0022\u003E,\u003C/span\u003E\u003C/span\u003E\n\u003Cspan class=\u0022line\u0022\u003E            \u003Cspan class=\u0022hljs-function roslyn-identifier\u0022\u003EUrl\u003C/span\u003E\u003Cspan class=\u0022hljs-punctuation roslyn-punctuation\u0022\u003E:\u003C/span\u003E \u003Cspan class=\u0022hljs-string roslyn-string\u0022\u003E\u0022https://github.com/yourusername/awesome-library\u0022\u003C/span\u003E\u003C/span\u003E\n\u003Cspan class=\u0022line\u0022\u003E        \u003Cspan class=\u0022hljs-punctuation roslyn-punctuation\u0022\u003E)\u003C/span\u003E\u003Cspan class=\u0022hljs-punctuation roslyn-punctuation\u0022\u003E,\u003C/span\u003E\u003C/span\u003E\n\u003Cspan class=\u0022line\u0022\u003E        \u003Cspan class=\u0022hljs-keyword roslyn-keyword\u0022\u003Enew\u003C/span\u003E \u003Cspan class=\u0022hljs-function roslyn-identifier\u0022\u003EProject\u003C/span\u003E\u003Cspan class=\u0022hljs-punctuation roslyn-punctuation\u0022\u003E(\u003C/span\u003E\u003C/span\u003E\n\u003Cspan class=\u0022line\u0022\u003E            \u003Cspan class=\u0022hljs-function roslyn-identifier\u0022\u003ETitle\u003C/span\u003E\u003Cspan class=\u0022hljs-punctuation roslyn-punctuation\u0022\u003E:\u003C/span\u003E \u003Cspan class=\u0022hljs-string roslyn-string\u0022\u003E\u0022Cool App\u0022\u003C/span\u003E\u003Cspan class=\u0022hljs-punctuation roslyn-punctuation\u0022\u003E,\u003C/span\u003E\u003C/span\u003E\n\u003Cspan class=\u0022line\u0022\u003E            \u003Cspan class=\u0022hljs-function roslyn-identifier\u0022\u003EDescription\u003C/span\u003E\u003Cspan class=\u0022hljs-punctuation roslyn-punctuation\u0022\u003E:\u003C/span\u003E \u003Cspan class=\u0022hljs-string roslyn-string\u0022\u003E\u0022An innovative web application\u0022\u003C/span\u003E\u003Cspan class=\u0022hljs-punctuation roslyn-punctuation\u0022\u003E,\u003C/span\u003E\u003C/span\u003E\n\u003Cspan class=\u0022line\u0022\u003E            \u003Cspan class=\u0022hljs-function roslyn-identifier\u0022\u003EUrl\u003C/span\u003E\u003Cspan class=\u0022hljs-punctuation roslyn-punctuation\u0022\u003E:\u003C/span\u003E \u003Cspan class=\u0022hljs-string roslyn-string\u0022\u003E\u0022https://coolapp.example.com\u0022\u003C/span\u003E\u003C/span\u003E\n\u003Cspan class=\u0022line\u0022\u003E        \u003Cspan class=\u0022hljs-punctuation roslyn-punctuation\u0022\u003E)\u003C/span\u003E\u003C/span\u003E\n\u003Cspan class=\u0022line\u0022\u003E    \u003Cspan class=\u0022hljs-punctuation roslyn-punctuation\u0022\u003E]\u003C/span\u003E\u003Cspan class=\u0022hljs-punctuation roslyn-punctuation\u0022\u003E,\u003C/span\u003E\u003C/span\u003E\n\u003Cspan class=\u0022line\u0022\u003E  \u003C/span\u003E\n\u003Cspan class=\u0022line\u0022\u003E    \u003Cspan class=\u0022hljs-comment roslyn-comment\u0022\u003E// Custom hero content for home page\u003C/span\u003E\u003C/span\u003E\n\u003Cspan class=\u0022line\u0022\u003E    \u003Cspan class=\u0022hljs-function roslyn-identifier\u0022\u003EHeroContent\u003C/span\u003E \u003Cspan class=\u0022hljs-operator roslyn-operator\u0022\u003E=\u003C/span\u003E \u003Cspan class=\u0022hljs-keyword roslyn-keyword\u0022\u003Enew\u003C/span\u003E \u003Cspan class=\u0022hljs-function roslyn-identifier\u0022\u003EHeroContent\u003C/span\u003E\u003Cspan class=\u0022hljs-punctuation roslyn-punctuation\u0022\u003E(\u003C/span\u003E\u003C/span\u003E\n\u003Cspan class=\u0022line\u0022\u003E        \u003Cspan class=\u0022hljs-function roslyn-identifier\u0022\u003ETitle\u003C/span\u003E\u003Cspan class=\u0022hljs-punctuation roslyn-punctuation\u0022\u003E:\u003C/span\u003E \u003Cspan class=\u0022hljs-string roslyn-string\u0022\u003E\u0022Welcome to My Blog\u0022\u003C/span\u003E\u003Cspan class=\u0022hljs-punctuation roslyn-punctuation\u0022\u003E,\u003C/span\u003E\u003C/span\u003E\n\u003Cspan class=\u0022line\u0022\u003E        \u003Cspan class=\u0022hljs-function roslyn-identifier\u0022\u003EDescription\u003C/span\u003E\u003Cspan class=\u0022hljs-punctuation roslyn-punctuation\u0022\u003E:\u003C/span\u003E \u003Cspan class=\u0022hljs-string roslyn-string\u0022\u003E\u0022Sharing my journey in software development\u0022\u003C/span\u003E\u003C/span\u003E\n\u003Cspan class=\u0022line\u0022\u003E    \u003Cspan class=\u0022hljs-punctuation roslyn-punctuation\u0022\u003E)\u003C/span\u003E\u003C/span\u003E\n\u003Cspan class=\u0022line\u0022\u003E\u003Cspan class=\u0022hljs-punctuation roslyn-punctuation\u0022\u003E}\u003C/span\u003E\u003Cspan class=\u0022hljs-punctuation roslyn-punctuation\u0022\u003E)\u003C/span\u003E\u003Cspan class=\u0022hljs-punctuation roslyn-punctuation\u0022\u003E;\u003C/span\u003E\u003C/span\u003E\u003C/code\u003E\u003C/pre\u003E\n\u003C/div\u003E\n\u003C/div\u003E\n\u003C/div\u003E\n\u003C/li\u003E\u003Cli class=\u0022mb-10 \u0022\u003E\u003Cspan class=\u0022not-prose -start-3 lg:-start-4 absolute flex items-center font-display text-xs lg:text-base font-bold justify-center mt-0.5 lg:mt-0 w-6 h-6 lg:w-8 lg:h-8 bg-base-100 rounded-full ring-2 ring-base-300 dark:ring-base-800 dark:bg-base-900\u0022\u003E9\u003C/span\u003E\n    \n    \u003Ch2 id=\u0022add-custom-html-and-fonts\u0022\u003EAdd Custom HTML and Fonts\u003C/h2\u003E\n\u003Cp\u003EFor advanced customization, you can add custom HTML to the head section:\u003C/p\u003E\n\u003Cdiv class=\u0022code-highlight-wrapper not-prose\u0022\u003E\n\u003Cdiv class=\u0022standalone-code-container\u0022\u003E\n\u003Cdiv class=\u0022standalone-code-highlight\u0022\u003E\n\u003Cpre\u003E\u003Ccode\u003E\u003Cspan class=\u0022line\u0022\u003E\u003Cspan class=\u0022hljs-function roslyn-identifier\u0022\u003Ebuilder\u003C/span\u003E\u003Cspan class=\u0022hljs-operator roslyn-operator\u0022\u003E.\u003C/span\u003E\u003Cspan class=\u0022hljs-function roslyn-identifier\u0022\u003EServices\u003C/span\u003E\u003Cspan class=\u0022hljs-operator roslyn-operator\u0022\u003E.\u003C/span\u003E\u003Cspan class=\u0022hljs-function roslyn-identifier\u0022\u003EAddBlogSite\u003C/span\u003E\u003Cspan class=\u0022hljs-punctuation roslyn-punctuation\u0022\u003E(\u003C/span\u003E\u003Cspan class=\u0022hljs-variable roslyn-parameter-name\u0022\u003E_\u003C/span\u003E \u003Cspan class=\u0022hljs-operator roslyn-operator\u0022\u003E=\u0026gt;\u003C/span\u003E \u003Cspan class=\u0022hljs-keyword roslyn-keyword\u0022\u003Enew\u003C/span\u003E \u003Cspan class=\u0022hljs-function roslyn-identifier\u0022\u003EBlogSiteOptions\u003C/span\u003E\u003C/span\u003E\n\u003Cspan class=\u0022line\u0022\u003E\u003Cspan class=\u0022hljs-punctuation roslyn-punctuation\u0022\u003E{\u003C/span\u003E\u003C/span\u003E\n\u003Cspan class=\u0022line\u0022\u003E    \u003Cspan class=\u0022hljs-function roslyn-identifier\u0022\u003ESiteTitle\u003C/span\u003E \u003Cspan class=\u0022hljs-operator roslyn-operator\u0022\u003E=\u003C/span\u003E \u003Cspan class=\u0022hljs-string roslyn-string\u0022\u003E\u0022My Blog\u0022\u003C/span\u003E\u003Cspan class=\u0022hljs-punctuation roslyn-punctuation\u0022\u003E,\u003C/span\u003E\u003C/span\u003E\n\u003Cspan class=\u0022line\u0022\u003E    \u003Cspan class=\u0022hljs-function roslyn-identifier\u0022\u003EDescription\u003C/span\u003E \u003Cspan class=\u0022hljs-operator roslyn-operator\u0022\u003E=\u003C/span\u003E \u003Cspan class=\u0022hljs-string roslyn-string\u0022\u003E\u0022A blog about coding\u0022\u003C/span\u003E\u003Cspan class=\u0022hljs-punctuation roslyn-punctuation\u0022\u003E,\u003C/span\u003E\u003C/span\u003E\n\u003Cspan class=\u0022line\u0022\u003E  \u003C/span\u003E\n\u003Cspan class=\u0022line\u0022\u003E    \u003Cspan class=\u0022hljs-comment roslyn-comment\u0022\u003E// Custom HTML for head section\u003C/span\u003E\u003C/span\u003E\n\u003Cspan class=\u0022line\u0022\u003E    \u003Cspan class=\u0022hljs-function roslyn-identifier\u0022\u003EAdditionalHtmlHeadContent\u003C/span\u003E \u003Cspan class=\u0022hljs-operator roslyn-operator\u0022\u003E=\u003C/span\u003E \u003Cspan class=\u0022hljs-string roslyn-string\u0022\u003E\u0022\u0022\u0022\u003C/span\u003E\u003C/span\u003E\n\u003Cspan class=\u0022line\u0022\u003E        \u0026lt;link rel=\u0022preconnect\u0022 href=\u0022https://fonts.googleapis.com\u0022\u0026gt;\u003C/span\u003E\n\u003Cspan class=\u0022line\u0022\u003E        \u0026lt;link rel=\u0022preconnect\u0022 href=\u0022https://fonts.gstatic.com\u0022 crossorigin\u0026gt;\u003C/span\u003E\n\u003Cspan class=\u0022line\u0022\u003E        \u0026lt;link href=\u0022https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700\u0026amp;display=swap\u0022 rel=\u0022stylesheet\u0022\u0026gt;\u003C/span\u003E\n\u003Cspan class=\u0022line\u0022\u003E        \u0026lt;meta name=\u0022author\u0022 content=\u0022Your Name\u0022\u0026gt;\u003C/span\u003E\n\u003Cspan class=\u0022line\u0022\u003E        \u0022\u0022\u0022\u003C/span\u003E\n\u003Cspan class=\u0022line\u0022\u003E\u003Cspan class=\u0022hljs-punctuation roslyn-punctuation\u0022\u003E}\u003C/span\u003E\u003Cspan class=\u0022hljs-punctuation roslyn-punctuation\u0022\u003E)\u003C/span\u003E\u003Cspan class=\u0022hljs-punctuation roslyn-punctuation\u0022\u003E;\u003C/span\u003E\u003C/span\u003E\u003C/code\u003E\u003C/pre\u003E\n\u003C/div\u003E\n\u003C/div\u003E\n\u003C/div\u003E\n\u003C/li\u003E\u003Cli class=\u0022mb-10 \u0022\u003E\u003Cspan class=\u0022not-prose -start-3 lg:-start-4 absolute flex items-center font-display text-xs lg:text-base font-bold justify-center mt-0.5 lg:mt-0 w-6 h-6 lg:w-8 lg:h-8 bg-base-100 rounded-full ring-2 ring-base-300 dark:ring-base-800 dark:bg-base-900\u0022\u003E10\u003C/span\u003E\n    \n    \u003Ch2 id=\u0022test-your-blog-site\u0022\u003ETest Your Blog Site\u003C/h2\u003E\n\u003Cp\u003ERun your site in development mode:\u003C/p\u003E\n\u003Cdiv class=\u0022code-highlight-wrapper not-prose\u0022\u003E\n\u003Cdiv class=\u0022standalone-code-container\u0022\u003E\n\u003Cdiv class=\u0022standalone-code-highlight\u0022\u003E\n\u003Cpre\u003E\u003Ccode\u003E\u003Cspan class=\u0022line\u0022\u003E\u003Cspan class=\u0022hljs-built_in\u0022\u003Edotnet\u003C/span\u003E watch\u003C/span\u003E\n\u003C/code\u003E\u003C/pre\u003E\n\u003C/div\u003E\n\u003C/div\u003E\n\u003C/div\u003E\n\n\u003Cp\u003ENavigate to \u003Ccode\u003Ehttps://localhost:5001\u003C/code\u003E to see your blog in action!\u003C/p\u003E\n\u003Cp\u003EWhile the page is open, try editing your blog post. You should see the changes reflected immediately without needing to restart the server.\u003C/p\u003E\n\u003C/li\u003E\u003C/ol\u003E\u003C/div\u003E\u003Ch2 id=\u0022what-success-looks-like\u0022\u003EWhat Success Looks Like\u003C/h2\u003E\n\u003Cp\u003EAfter running \u003Ccode\u003Edotnet watch\u003C/code\u003E, navigate to the URL shown in your terminal (typically \u003Ccode\u003Ehttp://localhost:5131\u003C/code\u003E).\nYou\u0027ll see a blog homepage with:\u003C/p\u003E\n\u003Cul\u003E\n\u003Cli\u003EYour post listed with title, date, and description\u003C/li\u003E\n\u003Cli\u003EA sidebar with your site name, author info, and tag list\u003C/li\u003E\n\u003Cli\u003EA header with your site title and any navigation links you configured\u003C/li\u003E\n\u003C/ul\u003E\n\u003Cp\u003EClick through to the post and you\u0027ll see the full Markdown content rendered with your blog layout. Edit your\npost file and save \u2014 the browser refreshes automatically without restarting the server.\u003C/p\u003E\n\u003Ch2 id=\u0022blog-post-front-matter\u0022\u003EBlog Post Front Matter\u003C/h2\u003E\n\u003Cp\u003EYour blog posts support rich metadata in the front matter. The BlogSite package uses \u003Ccode\u003EBlogSiteFrontMatter\u003C/code\u003E which includes:\u003C/p\u003E\n\u003Cdiv class=\u0022code-highlight-wrapper not-prose\u0022\u003E\n\u003Cdiv class=\u0022standalone-code-container\u0022\u003E\n\u003Cdiv class=\u0022standalone-code-highlight\u0022\u003E\n\u003Cpre\u003E\u003Ccode\u003E---\n\u003Cspan class=\u0022hljs-tag\u0022\u003Et\u003C/span\u003E\u003Cspan class=\u0022hljs-tag\u0022\u003Eitle\u003C/span\u003E\u003Cspan class=\u0022hljs-punctuation\u0022\u003E:\u003C/span\u003E \u003Cspan class=\u0022hljs-string\u0022\u003E\u0022\u003C/span\u003E\u003Cspan class=\u0022hljs-string\u0022\u003EMy Post Title\u003C/span\u003E\u003Cspan class=\u0022hljs-string\u0022\u003E\u0022\u003C/span\u003E\n\u003Cspan class=\u0022hljs-tag\u0022\u003Ed\u003C/span\u003E\u003Cspan class=\u0022hljs-tag\u0022\u003Eescription\u003C/span\u003E\u003Cspan class=\u0022hljs-punctuation\u0022\u003E:\u003C/span\u003E \u003Cspan class=\u0022hljs-string\u0022\u003E\u0022\u003C/span\u003E\u003Cspan class=\u0022hljs-string\u0022\u003EA brief description of the post\u003C/span\u003E\u003Cspan class=\u0022hljs-string\u0022\u003E\u0022\u003C/span\u003E\n\u003Cspan class=\u0022hljs-tag\u0022\u003Ea\u003C/span\u003E\u003Cspan class=\u0022hljs-tag\u0022\u003Euthor\u003C/span\u003E\u003Cspan class=\u0022hljs-punctuation\u0022\u003E:\u003C/span\u003E \u003Cspan class=\u0022hljs-string\u0022\u003E\u0022\u003C/span\u003E\u003Cspan class=\u0022hljs-string\u0022\u003EAuthor Name\u003C/span\u003E\u003Cspan class=\u0022hljs-string\u0022\u003E\u0022\u003C/span\u003E\n\u003Cspan class=\u0022hljs-tag\u0022\u003Ed\u003C/span\u003E\u003Cspan class=\u0022hljs-tag\u0022\u003Eate\u003C/span\u003E\u003Cspan class=\u0022hljs-punctuation\u0022\u003E:\u003C/span\u003E \u003Cspan class=\u0022hljs-literal\u0022\u003E2024-01-15\u003C/span\u003E\n\u003Cspan class=\u0022hljs-tag\u0022\u003Et\u003C/span\u003E\u003Cspan class=\u0022hljs-tag\u0022\u003Eags\u003C/span\u003E\u003Cspan class=\u0022hljs-punctuation\u0022\u003E:\u003C/span\u003E \u003Cspan class=\u0022hljs-punctuation\u0022\u003E[\u003C/span\u003E\u003Cspan class=\u0022hljs-string\u0022\u003E\u0022\u003C/span\u003E\u003Cspan class=\u0022hljs-string\u0022\u003Etag1\u003C/span\u003E\u003Cspan class=\u0022hljs-string\u0022\u003E\u0022\u003C/span\u003E\u003Cspan class=\u0022hljs-punctuation\u0022\u003E,\u003C/span\u003E \u003Cspan class=\u0022hljs-string\u0022\u003E\u0022\u003C/span\u003E\u003Cspan class=\u0022hljs-string\u0022\u003Etag2\u003C/span\u003E\u003Cspan class=\u0022hljs-string\u0022\u003E\u0022\u003C/span\u003E\u003Cspan class=\u0022hljs-punctuation\u0022\u003E,\u003C/span\u003E \u003Cspan class=\u0022hljs-string\u0022\u003E\u0022\u003C/span\u003E\u003Cspan class=\u0022hljs-string\u0022\u003Etag3\u003C/span\u003E\u003Cspan class=\u0022hljs-string\u0022\u003E\u0022\u003C/span\u003E\u003Cspan class=\u0022hljs-punctuation\u0022\u003E]\u003C/span\u003E\n\u003Cspan class=\u0022hljs-tag\u0022\u003Es\u003C/span\u003E\u003Cspan class=\u0022hljs-tag\u0022\u003Eeries\u003C/span\u003E\u003Cspan class=\u0022hljs-punctuation\u0022\u003E:\u003C/span\u003E \u003Cspan class=\u0022hljs-string\u0022\u003E\u0022\u003C/span\u003E\u003Cspan class=\u0022hljs-string\u0022\u003Eoptional name of a series that this post is part of\u003C/span\u003E\u003Cspan class=\u0022hljs-string\u0022\u003E\u0022\u003C/span\u003E\n\u003Cspan class=\u0022hljs-tag\u0022\u003Er\u003C/span\u003E\u003Cspan class=\u0022hljs-tag\u0022\u003Eepository\u003C/span\u003E\u003Cspan class=\u0022hljs-punctuation\u0022\u003E:\u003C/span\u003E \u003Cspan class=\u0022hljs-string\u0022\u003E\u0022\u003C/span\u003E\u003Cspan class=\u0022hljs-string\u0022\u003Eoptional repository link\u003C/span\u003E\u003Cspan class=\u0022hljs-string\u0022\u003E\u0022\u003C/span\u003E\n\u003Cspan class=\u0022hljs-tag\u0022\u003Eu\u003C/span\u003E\u003Cspan class=\u0022hljs-tag\u0022\u003Eid\u003C/span\u003E\u003Cspan class=\u0022hljs-punctuation\u0022\u003E:\u003C/span\u003E \u003Cspan class=\u0022hljs-string\u0022\u003E\u0022\u003C/span\u003E\u003Cspan class=\u0022hljs-string\u0022\u003Eunique-identifier-for-xref-links\u003C/span\u003E\u003Cspan class=\u0022hljs-string\u0022\u003E\u0022\u003C/span\u003E\n\u003Cspan class=\u0022hljs-tag\u0022\u003Ei\u003C/span\u003E\u003Cspan class=\u0022hljs-tag\u0022\u003Es_draft\u003C/span\u003E\u003Cspan class=\u0022hljs-punctuation\u0022\u003E:\u003C/span\u003E \u003Cspan class=\u0022hljs-literal\u0022\u003Efalse\u003C/span\u003E\n\u003Cspan class=\u0022hljs-tag\u0022\u003Er\u003C/span\u003E\u003Cspan class=\u0022hljs-tag\u0022\u003Eedirect_url\u003C/span\u003E\u003Cspan class=\u0022hljs-punctuation\u0022\u003E:\u003C/span\u003E \u003Cspan class=\u0022hljs-string\u0022\u003E\u0022\u003C/span\u003E\u003Cspan class=\u0022hljs-string\u0022\u003Eoptional-redirect-target\u003C/span\u003E\u003Cspan class=\u0022hljs-string\u0022\u003E\u0022\u003C/span\u003E\n---\u003C/code\u003E\u003C/pre\u003E\n\u003C/div\u003E\n\u003C/div\u003E\n\u003C/div\u003E\n\u003Ch3 id=\u0022front-matter-properties\u0022\u003EFront Matter Properties\u003C/h3\u003E\n\u003Cul\u003E\n\u003Cli\u003E\u003Cstrong\u003Etitle\u003C/strong\u003E: The title of the blog post (required)\u003C/li\u003E\n\u003Cli\u003E\u003Cstrong\u003Edescription\u003C/strong\u003E: A brief description for SEO and summaries (required)\u003C/li\u003E\n\u003Cli\u003E\u003Cstrong\u003Eauthor\u003C/strong\u003E: Author name for the post\u003C/li\u003E\n\u003Cli\u003E\u003Cstrong\u003Edate\u003C/strong\u003E: Publication date (defaults to current time)\u003C/li\u003E\n\u003Cli\u003E\u003Cstrong\u003Etags\u003C/strong\u003E: Array of tags for categorization\u003C/li\u003E\n\u003Cli\u003E\u003Cstrong\u003Eseries\u003C/strong\u003E: Optional series name for grouping related posts\u003C/li\u003E\n\u003Cli\u003E\u003Cstrong\u003Erepository\u003C/strong\u003E: Optional repository or project link\u003C/li\u003E\n\u003Cli\u003E\u003Cstrong\u003Euid\u003C/strong\u003E: Unique identifier for cross-referencing\u003C/li\u003E\n\u003Cli\u003E\u003Cstrong\u003Eis_draft\u003C/strong\u003E: Set to true to exclude from generation\u003C/li\u003E\n\u003Cli\u003E\u003Cstrong\u003Eredirect_url\u003C/strong\u003E: Optional URL to redirect this page to\u003C/li\u003E\n\u003C/ul\u003E\n\u003Ch2 id=\u0022available-configuration-options\u0022\u003EAvailable Configuration Options\u003C/h2\u003E\n\u003Cp\u003EThe \u003Ccode\u003EBlogSiteOptions\u003C/code\u003E class provides many customization options:\u003C/p\u003E\n\u003Ctable\u003E\n\u003Cthead\u003E\n\u003Ctr\u003E\n\u003Cth\u003EOption\u003C/th\u003E\n\u003Cth\u003EType\u003C/th\u003E\n\u003Cth\u003EDefault\u003C/th\u003E\n\u003Cth\u003EDescription\u003C/th\u003E\n\u003C/tr\u003E\n\u003C/thead\u003E\n\u003Ctbody\u003E\n\u003Ctr\u003E\n\u003Ctd\u003E\u003Ccode\u003ESiteTitle\u003C/code\u003E\u003C/td\u003E\n\u003Ctd\u003Estring\u003C/td\u003E\n\u003Ctd\u003Erequired\u003C/td\u003E\n\u003Ctd\u003EThe title displayed in the header\u003C/td\u003E\n\u003C/tr\u003E\n\u003Ctr\u003E\n\u003Ctd\u003E\u003Ccode\u003EDescription\u003C/code\u003E\u003C/td\u003E\n\u003Ctd\u003Estring\u003C/td\u003E\n\u003Ctd\u003Erequired\u003C/td\u003E\n\u003Ctd\u003ESite description for SEO\u003C/td\u003E\n\u003C/tr\u003E\n\u003Ctr\u003E\n\u003Ctd\u003E\u003Ccode\u003EPrimaryHue\u003C/code\u003E\u003C/td\u003E\n\u003Ctd\u003Eint\u003C/td\u003E\n\u003Ctd\u003E250\u003C/td\u003E\n\u003Ctd\u003EPrimary color hue (0-360)\u003C/td\u003E\n\u003C/tr\u003E\n\u003Ctr\u003E\n\u003Ctd\u003E\u003Ccode\u003EBaseColorName\u003C/code\u003E\u003C/td\u003E\n\u003Ctd\u003Estring\u003C/td\u003E\n\u003Ctd\u003E\u0022Slate\u0022\u003C/td\u003E\n\u003Ctd\u003EBase color palette name\u003C/td\u003E\n\u003C/tr\u003E\n\u003Ctr\u003E\n\u003Ctd\u003E\u003Ccode\u003ECanonicalBaseUrl\u003C/code\u003E\u003C/td\u003E\n\u003Ctd\u003Estring?\u003C/td\u003E\n\u003Ctd\u003Enull\u003C/td\u003E\n\u003Ctd\u003ECanonical URL for SEO and RSS\u003C/td\u003E\n\u003C/tr\u003E\n\u003Ctr\u003E\n\u003Ctd\u003E\u003Ccode\u003EMainSiteLinks\u003C/code\u003E\u003C/td\u003E\n\u003Ctd\u003EHeaderLink[]\u003C/td\u003E\n\u003Ctd\u003E[]\u003C/td\u003E\n\u003Ctd\u003ENavigation links in header/footer\u003C/td\u003E\n\u003C/tr\u003E\n\u003Ctr\u003E\n\u003Ctd\u003E\u003Ccode\u003EContentRootPath\u003C/code\u003E\u003C/td\u003E\n\u003Ctd\u003Estring\u003C/td\u003E\n\u003Ctd\u003E\u0022Content\u0022\u003C/td\u003E\n\u003Ctd\u003EPath to content directory\u003C/td\u003E\n\u003C/tr\u003E\n\u003Ctr\u003E\n\u003Ctd\u003E\u003Ccode\u003EBlogContentPath\u003C/code\u003E\u003C/td\u003E\n\u003Ctd\u003Estring\u003C/td\u003E\n\u003Ctd\u003E\u0022Blog\u0022\u003C/td\u003E\n\u003Ctd\u003EPath to blog content (relative to ContentRootPath)\u003C/td\u003E\n\u003C/tr\u003E\n\u003Ctr\u003E\n\u003Ctd\u003E\u003Ccode\u003EBlogBaseUrl\u003C/code\u003E\u003C/td\u003E\n\u003Ctd\u003Estring\u003C/td\u003E\n\u003Ctd\u003E\u0022/blog\u0022\u003C/td\u003E\n\u003Ctd\u003EBase URL for blog posts\u003C/td\u003E\n\u003C/tr\u003E\n\u003Ctr\u003E\n\u003Ctd\u003E\u003Ccode\u003ETagsPageUrl\u003C/code\u003E\u003C/td\u003E\n\u003Ctd\u003Estring\u003C/td\u003E\n\u003Ctd\u003E\u0022/tags\u0022\u003C/td\u003E\n\u003Ctd\u003EURL for the tags page\u003C/td\u003E\n\u003C/tr\u003E\n\u003Ctr\u003E\n\u003Ctd\u003E\u003Ccode\u003EExtraStyles\u003C/code\u003E\u003C/td\u003E\n\u003Ctd\u003Estring?\u003C/td\u003E\n\u003Ctd\u003Enull\u003C/td\u003E\n\u003Ctd\u003EAdditional CSS styles\u003C/td\u003E\n\u003C/tr\u003E\n\u003Ctr\u003E\n\u003Ctd\u003E\u003Ccode\u003EHeroContent\u003C/code\u003E\u003C/td\u003E\n\u003Ctd\u003EHeroContent?\u003C/td\u003E\n\u003Ctd\u003Enull\u003C/td\u003E\n\u003Ctd\u003ECustom hero content for home page\u003C/td\u003E\n\u003C/tr\u003E\n\u003Ctr\u003E\n\u003Ctd\u003E\u003Ccode\u003EDisplayFontFamily\u003C/code\u003E\u003C/td\u003E\n\u003Ctd\u003Estring?\u003C/td\u003E\n\u003Ctd\u003Enull\u003C/td\u003E\n\u003Ctd\u003ECustom font family for display elements\u003C/td\u003E\n\u003C/tr\u003E\n\u003Ctr\u003E\n\u003Ctd\u003E\u003Ccode\u003EBodyFontFamily\u003C/code\u003E\u003C/td\u003E\n\u003Ctd\u003Estring?\u003C/td\u003E\n\u003Ctd\u003Enull\u003C/td\u003E\n\u003Ctd\u003ECustom font family for body text\u003C/td\u003E\n\u003C/tr\u003E\n\u003Ctr\u003E\n\u003Ctd\u003E\u003Ccode\u003EAdditionalHtmlHeadContent\u003C/code\u003E\u003C/td\u003E\n\u003Ctd\u003Estring?\u003C/td\u003E\n\u003Ctd\u003Enull\u003C/td\u003E\n\u003Ctd\u003ECustom HTML for head section\u003C/td\u003E\n\u003C/tr\u003E\n\u003Ctr\u003E\n\u003Ctd\u003E\u003Ccode\u003EAdditionalRoutingAssemblies\u003C/code\u003E\u003C/td\u003E\n\u003Ctd\u003EAssembly[]\u003C/td\u003E\n\u003Ctd\u003E[]\u003C/td\u003E\n\u003Ctd\u003EList of additional assemblies to scan for routing\u003C/td\u003E\n\u003C/tr\u003E\n\u003Ctr\u003E\n\u003Ctd\u003E\u003Ccode\u003EAuthorName\u003C/code\u003E\u003C/td\u003E\n\u003Ctd\u003Estring?\u003C/td\u003E\n\u003Ctd\u003Enull\u003C/td\u003E\n\u003Ctd\u003EAuthor name for the blog\u003C/td\u003E\n\u003C/tr\u003E\n\u003Ctr\u003E\n\u003Ctd\u003E\u003Ccode\u003EAuthorBio\u003C/code\u003E\u003C/td\u003E\n\u003Ctd\u003Estring?\u003C/td\u003E\n\u003Ctd\u003Enull\u003C/td\u003E\n\u003Ctd\u003EAuthor bio for the blog\u003C/td\u003E\n\u003C/tr\u003E\n\u003Ctr\u003E\n\u003Ctd\u003E\u003Ccode\u003EEnableRss\u003C/code\u003E\u003C/td\u003E\n\u003Ctd\u003Ebool\u003C/td\u003E\n\u003Ctd\u003Etrue\u003C/td\u003E\n\u003Ctd\u003EEnable RSS feed generation\u003C/td\u003E\n\u003C/tr\u003E\n\u003Ctr\u003E\n\u003Ctd\u003E\u003Ccode\u003EEnableSitemap\u003C/code\u003E\u003C/td\u003E\n\u003Ctd\u003Ebool\u003C/td\u003E\n\u003Ctd\u003Etrue\u003C/td\u003E\n\u003Ctd\u003EEnable sitemap generation\u003C/td\u003E\n\u003C/tr\u003E\n\u003Ctr\u003E\n\u003Ctd\u003E\u003Ccode\u003EMyWork\u003C/code\u003E\u003C/td\u003E\n\u003Ctd\u003EProject[]\u003C/td\u003E\n\u003Ctd\u003E[]\u003C/td\u003E\n\u003Ctd\u003EProjects to include in sidebar\u003C/td\u003E\n\u003C/tr\u003E\n\u003Ctr\u003E\n\u003Ctd\u003E\u003Ccode\u003ESocials\u003C/code\u003E\u003C/td\u003E\n\u003Ctd\u003ESocialLink[]\u003C/td\u003E\n\u003Ctd\u003E[]\u003C/td\u003E\n\u003Ctd\u003ESocial media links\u003C/td\u003E\n\u003C/tr\u003E\n\u003Ctr\u003E\n\u003Ctd\u003E\u003Ccode\u003ESolutionPath\u003C/code\u003E\u003C/td\u003E\n\u003Ctd\u003Estring?\u003C/td\u003E\n\u003Ctd\u003Enull\u003C/td\u003E\n\u003Ctd\u003EPath to solution file for API docs\u003C/td\u003E\n\u003C/tr\u003E\n\u003Ctr\u003E\n\u003Ctd\u003E\u003Ccode\u003ESocialMediaImageUrlFactory\u003C/code\u003E\u003C/td\u003E\n\u003Ctd\u003EFunc\u0026lt;MarkdownContentPage\u003Cblogsitefrontmatter\u003E, string\u0026gt;?\u003C/blogsitefrontmatter\u003E\u003C/td\u003E\n\u003Ctd\u003Enull\u003C/td\u003E\n\u003Ctd\u003EFunction to generate social media image URLs\u003C/td\u003E\n\u003C/tr\u003E\n\u003C/tbody\u003E\n\u003C/table\u003E\n\u003Ch2 id=\u0022next-steps\u0022\u003ENext Steps\u003C/h2\u003E\n\u003Cp\u003EThe BlogSite package allows you to get up and running quickly, but there are no promises made\nthat the design or functionality of the site will remain consistent. It\u0027s what drives my personal\nblog, so as my whims change so will the package. Use it for quick proof-of-concepts, demos, or inspiration\nfor your own blog using the \u003Ccode\u003EMyLittleContentEngine\u003C/code\u003E services directly.\u003C/p\u003E\n\u003C/main\u003E\u003Cdiv class=\u0022flex my-12 border-t border-base-200 dark:border-base-700 pt-4 lg:pt-8\u0022\u003E\u003Cdiv class=\u0022flex flex-col items-start  gap-3\u0022\u003E\u003Ca class=\u0022inline-flex gap-0.5 justify-center overflow-hidden text-sm font-medium font-display transition rounded-xl bg-base-200 pt-1.5 pb-1 px-3 lg:pt-2 lg:pb.15 lg:px-4 hover:bg-base-300/75 dark:bg-base-800/40 text-base-800 dark:text-base-400 ring-1 dark:ring-inset ring-base-300/75 dark:ring-base-800 dark:hover:bg-base-800 dark:hover:text-base-300\u0022 aria-label=\u0022Previous: Optimizing CSS and JavaScript for Production\u0022 href=\u0022/MyLittleContentEngine/guides/optimizing-css-and-javascript/\u0022\u003E\u003Cspan class=\u0022-ml-1 rotate-180\u0022\u003E\u003Csvg viewBox=\u00220 0 20 20\u0022 fill=\u0022none\u0022 aria-hidden=\u0022true\u0022 class=\u0022mt-0.5 h-5 w-5\u0022\u003E\u003Cpath stroke=\u0022currentColor\u0022 stroke-linecap=\u0022round\u0022 stroke-linejoin=\u0022round\u0022 d=\u0022m11.5 6.5 3 3.5m0 0-3 3.5m3-3.5h-9\u0022\u003E\u003C/path\u003E\u003C/svg\u003E\u003C/span\u003E Previous\u003C/a\u003E\n            \u003Ca tabindex=\u0022-1\u0022 aria-hidden=\u0022true\u0022 class=\u0022text-sm lg:text-base font-semibold text-base-700 transition hover:text-base-600 dark:text-base-400 dark:hover:text-base-300\u0022 href=\u0022/MyLittleContentEngine/guides/optimizing-css-and-javascript/\u0022\u003EOptimizing CSS and JavaScript for Production\u003C/a\u003E\u003C/div\u003E\u003Cdiv class=\u0022flex flex-col items-end ml-auto gap-3\u0022\u003E\u003Ca class=\u0022inline-flex gap-0.5 justify-center overflow-hidden text-sm font-medium font-display transition rounded-xl bg-base-200 pt-1.5 pb-1 px-3 lg:pt-2 lg:pb.15 lg:px-4 hover:bg-base-300/75 dark:bg-base-800/40 text-base-800 dark:text-base-400 ring-1 dark:ring-inset ring-base-300/75 dark:ring-base-800 dark:hover:bg-base-800 dark:hover:text-base-300\u0022 aria-label=\u0022Next: Using the DocSite Package\u0022 href=\u0022/MyLittleContentEngine/guides/using-docsite/\u0022\u003ENext \u003Cspan class=\u0022-mr-1\u0022\u003E\u003Csvg viewBox=\u00220 0 20 20\u0022 fill=\u0022none\u0022 aria-hidden=\u0022true\u0022 class=\u0022mt-0.5 h-5 w-5\u0022\u003E\u003Cpath stroke=\u0022currentColor\u0022 stroke-linecap=\u0022round\u0022 stroke-linejoin=\u0022round\u0022 d=\u0022m11.5 6.5 3 3.5m0 0-3 3.5m3-3.5h-9\u0022\u003E\u003C/path\u003E\u003C/svg\u003E\u003C/span\u003E\u003C/a\u003E\n            \u003Ca tabindex=\u0022-1\u0022 aria-hidden=\u0022true\u0022 class=\u0022text-sm lg:text-base font-semibold text-base-700 transition hover:text-base-600 dark:text-base-400 dark:hover:text-base-300\u0022 href=\u0022/MyLittleContentEngine/guides/using-docsite/\u0022\u003EUsing the DocSite Package\u003C/a\u003E\u003C/div\u003E\u003C/div\u003E"}}