Blog House
基于 SvelteKit 框架的静态博客生成器 Static Site Generator based on SvelteKit
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.
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.
- Svelte
Svelte is a modern front-end framework that compiles your code at build time, resulting in smaller and faster applications. It uses a reactive approach to update the DOM, allowing for high performance and a smoother user experience.
- Vite
Vite is a build tool that aims to provide a faster and leaner development experience for modern web projects
- UnoCSS
UnoCSS is an instant, on-demand atomic CSS engine that generates utility classes at build time. It's highly customizable, extremely fast, and compatible with Tailwind CSS utilities while offering additional features like attributify mode and pure CSS icons.
- Blog
Blog websites feature posts written by one or more authors, organized by categories and tags, with a section for comments and archives sorted by date or topic. Additional features may include search bar, social media sharing, subscription or RSS feed, about and contact pages, and visual content.