About Slate Blog

Jan 21 ·

2 Min Read

Why We build it?

We love writing and sharing, and we also appreciate great internet products. So we created this minimalist blogging product, focusing on content itself, providing a smooth and pure writing and reading experience, and built on the latest technology framework to make it faster and lighter.

It also works seamlessly with Obsidian, helping you turn your notes into published posts effortlessly.

✨ Features

Minimalist design theme
Mobile-first responsive layout
Light and dark mode support
Quick setup with zero configuration required
Draft mode with local preview and automatic production filtering
Built-in RSS feed with Follow authentication
Integrated Algolia search functionality
Comprehensive SEO optimization for better search rankings

🪜 Framework

Astro + React + Typescript
Tailwindcss + @radix-ui/colors
- Updated to Tailwind CSS v4.0 (Jan 10, 2025)
Docsearch

🔨 Usage

# Start local server
npm run dev
# or
yarn dev
# or
pnpm dev

# Build
npm run build
# or
yarn build
# or
pnpm build

🗂 Directory Structure

- plugins/            # Custom plugins
- src/
  ├── assets/         # Asset files
  ├── components/     # Components
  ├── content/        # Content collections
  ├── helpers/        # Business logic
  ├── pages/          # Pages
  └── typings/        # Common types

Articles are stored in the src/content/post directory, supporting markdown and mdx formats. The filename is the path name. For example, src/content/post/my-first-post.md => https://your-blog.com/blog/my-first-post.

Configuration

Theme configuration is done through slate.config.ts in the root directory.

Option	Description	Type	Default
site	Final deployment link	`string`	-
title	Website title	`string`	-
description	Website description	`string`	-
lang	Language	`string`	`zh-CN`
theme	Theme	`{ mode: ‘auto'	'light'
avatar	Avatar	`string`	-
sitemap	Website sitemap configuration	SitemapOptions	-
readTime	Show reading time	`boolean`	`false`
lastModified	Show last modified time	`boolean`	`false`
algolia	Docsearch configuration	`{ appId: string, apiKey: string, indexName: string }`	-
follow	Follow subscription authentication configuration	`{ feedId: string, userId: string }`	-
footer	Website footer configuration	`{ copyright: string }`	-

Algolia Application

Deploy your site first
Apply for an apiKey at algolia
After successful application, configure algolia in slate.config.ts
Redeploy

Follow Subscription Authentication

Register a follow account
Deploy your site
Click the + button on follow, select RSS subscription, and enter the rss link (usually [site]/rss.xml, where site is the value of site in slate.config.ts)
Redeploy

Article Frontmatter Description

Option	Description	Type	Required
title	Article title	`string`	Yes
description	Article description	`string`	No
tags	Article tags	`string[]`	No
draft	Whether it’s a draft. When not provided or `false`, `pubDate` must be provided; drafts are only visible in local preview	`boolean`	No
pubDate	Article publication date	`date`	No, required when `draft` is `false`

For more details, check the src/content/config.ts file

Example

---
title: 40 questions
description: This repo maintains revisons and translations to the list of 40 questions I ask myself each year and each decade.
tags:
  - Life
  - Thinking
  - Writing
pubDate: 2025-01-06
---

Markdown Syntax Support

In addition to standard Markdown syntax, the following extended syntax is supported:

Basic Syntax

Headers, lists, blockquotes, code blocks and other basic syntax
Tables
Links and images
Bold, italic, and ~~strikethrough~~ text

Extended Syntax

Container syntax

Using ::: markers

:::info
This is an information prompt
:::

The result will be displayed as:

This is an information prompt

LaTeX Mathematical Formulas

Inline formula: $E = mc^2$
Block formula: $E = mc^2$

Support for image captions

![Image caption](image-url)

The result will be displayed as:

Updates

Version 1.3.0

Support Social Links
Optimize RSS article detail generation.
Add a script to synchronize the latest slate-blog version

Version 1.2.0

Support i18n (English and Chinese)
Fixed known issues

Version 1.1.1

Fixed known issues

Version 1.1.0

Upgraded to support Tailwind CSS v4.0
Added dark mode support
Fixed known issues

From Slate Blog

Last edited Mar 20