Blog House

Overview

Blog House is a static blog generator based on the web frontend framework SvelteKit, which is built on Svelte. It features a SSG (Static Site Generator) + SPA (Single Page Application) hybrid mode. When a user opens the website for the first time, the static HTML display page is downloaded directly, and then SvelteKit runtime is automatically loaded. It can anticipate user actions and automatically preload the corresponding webpage data. When a user clicks on an article, SvelteKit immediately renders the webpage in SPA mode, instead of downloading HTML like traditional SSG blogs, greatly improving user experience. It also provides features such as Algolia integration for search functionality, Utterance integration for a commenting system, extended Markdown syntax for adding blocks with images and links, automatic image optimization, and support for RSS, SEO, and sitemap generation.

Features

• SSG + SPA hybrid mode: Combines the benefits of Static Site Generation and Single Page Application for improved performance and user experience.
• Algolia integration: Provides a search functionality powered by Algolia, with automatic indexing and synchronization.
• Utterance integration: Offers a commenting system using Utterance, allowing users to comment using their GitHub accounts.
• Extended Markdown syntax: Supports additional Markdown syntax for adding informative blocks with images and links.
• Automatic image optimization: Optimizes all images in the blog by converting them to AVIF, WebP, and progressive JPEG formats, and lazy loading them using the <picture> element.
• RSS, SEO, and sitemap support: Automatically generates RSS feeds, sitemaps, and provides SEO-friendly features.

Installation

To install Blog House, follow these steps:

1. Fork the repository and make any desired modifications in the “config” folder’s configuration files.
2. Refer to the “darkyzhou-blog” branch for detailed instructions on configuring the project.
3. For more information, refer to the author’s personal blog “Darky’s Blog” for a live demo.

Summary

Blog House is a static blog generator that leverages the SvelteKit web framework to create a hybrid SSG + SPA mode, combining the benefits of both approaches. It offers features such as Algolia integration for search functionality, Utterance integration for comments, extended Markdown syntax support, automatic image optimization, and support for RSS, SEO, and sitemap generation. By providing these features, Blog House aims to enhance the user experience and simplify the process of creating and managing a static blog.