slate-blog - GitLite

KO | EN

gitlite — search

#android #machine-learning #deep-learning #nodejs #windows #awesome #kubernetes #awesome-list #vue #pytorch #security #mcp #openai #open-source

slate-blog

(★ 132)

A minimal, elegant, and modern blog theme built with Astro.

파일 탐색기

최종 버전 다운로드 (.zip)

- commit-msg
- pre-commit
- extensions.json
- launch.json
- settings.json
- Blog Post.md
- README.md
- remark-modified-time.ts
- remark-reading-time.ts
- avatar.png
- favicon.svg
- og_image.png
- pretty-feed-v3.xsl
- sync-latest-blog.sh
- - config.ts
- - config-helper.ts
  - utils.ts
- - index.ts
- - 404.astro
  - index.astro
  - robots.txt.ts
  - rss.xml.js
- - config.ts
  - global.ts
- env.d.ts
.gitignore
.prettierrc
astro.config.mjs
commitlint.config.js
eslint.config.js
LICENSE.txt
package.json
pnpm-lock.yaml
README-zh_CN.md
README.md
slate.config.ts
tsconfig.json

# 설치 가이드

1. 코드 내려받기

git clone https://github.com/SlateDesign/slate-blog

깃허브에서 프로젝트 코드 전체를 내 컴퓨터로 내려받습니다.

cd slate-blog

방금 내려받은 프로젝트 폴더 안으로 이동합니다.

2. Node.js

쉬움 추천

사전 준비물

Git GitHub에서 프로젝트 코드를 내려받으려면 필요합니다.
Node.js npm 명령어를 쓰려면 Node.js가 설치되어 있어야 합니다. LTS(장기지원) 버전을 추천합니다.

npm run dev

개발/실행 서버를 켭니다.

yarn dev

개발/실행 서버를 켭니다.

pnpm dev

개발/실행 서버를 켭니다.

npm run build

배포용으로 코드를 최적화해서 빌드 파일을 생성합니다.

yarn build

배포용으로 코드를 최적화해서 빌드 파일을 생성합니다.

✅ 명령어 실행 후 터미널에 나타나는 주소(보통 http://localhost:3000 형태)를 브라우저에서 열어보세요.

이 레포의 README에 적힌 실제 명령어를 그대로 가져왔습니다.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# Slate blog

English · [中文](./README-zh_CN.md)

## Why We build it?

We love writing and sharing, and we appreciate well-crafted products. That’s why we created this minimalist theme, focusing on content itself, providing a smooth and pure writing and reading experience. Built on the latest framework, it’s faster, lighter, and more efficient.

It also works seamlessly with [Obsidian](https://obsidian.md/), 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
- Horizontal multi-image layout with automatic column distribution

## 🪜 Framework

- Astro + React + Typescript  
- Tailwindcss + @radix-ui/colors
  - Updated to [Tailwind CSS v4.0](https://tailwindcss.com/blog/tailwindcss-v4) (Jan 10, 2025)
- Docsearch

## 🔨 Usage

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

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

> If you fork the repository and set it to private, you will lose the association with the upstream repository by default. You can sync the latest version of Slate Blog by running `pnpm sync-latest`.

## 🗂 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' \| 'dark', enableUserChange: boolean }` | `{ mode: 'auto', enableUserChange: true }` |
| avatar | Avatar | `string` | - |
| sitemap | Website sitemap configuration | [SitemapOptions](https://docs.astro.build/en/guides/integrations-guide/sitemap/)  | - |
| 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 }` | - |
| socialLinks | Social Links Configuration | `{ icon: [SocialLinkIcon](#SocialLinkIcon), link: string, ariaLabel?: string }` | - |

### SocialLinkIcon

```ts
type SocialLinkIcon =
  | 'dribbble'
  | 'facebook'
  | 'figma'
  | 'github'
  | 'instagram'
  | 'link'
  | 'mail'
  | 'notion'
  | 'rss'
  | 'threads'
  | 'x'
  | 'youtube'
  | { svg: string }
```

### Algolia Application

1. Deploy your site first
2. Apply for an `apiKey` at [algolia](https://docsearch.algolia.com/apply/)
3. After successful application, configure `algolia` in `slate.config.ts`
4. Redeploy your site

### Follow Subscription Authentication

1. Register a [follow](https://follow.is/) account
2. Deploy your site
3. 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`)
4. 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

```md
---
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
  ```md
  :::info
  This is an information prompt
  :::
  ```

#### LaTeX Mathematical Formulas
  - Inline formula: $E = mc^2$
  - Block formula: $$ E = mc^2 $$

#### Support for image captions
  ```md
  ![Image caption](https://raw.githubusercontent.com/SlateDesign/slate-blog/main/image-url)
  ```
  
## 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](https://tailwindcss.com/blog/tailwindcss-v4)
- Added dark mode support
- Fixed known issues

## Blogs using this theme
Here are some blogs built with this theme:
- [Bluepikachu](https://bluepika.life/)
- [Chieh的随笔](https://blog.chieh.nyc.mn/)
- [Feazur](https://blog.feazur.com/)
- [Folay's Blog](https://www.folay.top/)
- [LeeZhian](https://leezhian.com/)
- [nmsisecho](https://astro-example-liard.vercel.app/)
- [Randy's Blog](https://lutaonan.com/)
- [Sulle orme dell'Alfiere Nero](https://sulleormedellalfierenero.pusi77.eu.org/)
- [三墩冰室](https://lmd.gg/)
- [小企鹅爸爸的生活](https://www.penguinpapa.life/)

## Star History

[![Star History Chart](https://api.star-history.com/svg?repos=SlateDesign/slate-blog&type=Date)](https://www.star-history.com/#SlateDesign/slate-blog&Date)