用 Typora 写博客：零基础发布全流程

1.1 安装 Typora#

到官网 https://typora.io 下载安装，Windows / macOS 都有。Typora 是「所见即所得」编辑器，左边写右边预览，非常直观。

1.2 把项目代码拿到本地#

你需要把博客的源代码下载到电脑上。二选一：

方式 A：用命令行（推荐，最简单）

打开终端（macOS 的「终端」App，或 Windows 的「命令提示符」/ PowerShell），输入：

1
git clone https://github.com/nianming404/nianming_blog.git

完成后，你的电脑上会出现一个名为 nianming_blog 的文件夹，博客源码就在里面。

如果提示没有 git 命令，先去 https://git-scm.com 安装 Git 再试。

方式 B：用 GitHub Desktop（图形界面）

1. 下载安装 https://desktop.github.com；
2. 登录 GitHub 账号；
3. 「File → Clone repository」→ 选择这个仓库 → 选一个本地位置保存。

1.3 安装项目依赖 + 启动本地预览#

在终端里进入项目文件夹（可以用 cd 加空格，然后直接把文件夹拖进终端窗口，回车）：

1
cd 你的项目文件夹路径
2
npm install
3
npm run dev

看到类似 Local: http://localhost:4321 的输出，说明成功了。别关这个终端窗口。

打开浏览器访问 http://localhost:4321，你会看到博客首页。

npm install 只需在第一次运行时安装一次。以后每次写作，先 npm run dev 即可。

2.1 新建文件（文件名 = 网址）#

用 Typora 在下面这个文件夹里新建一个 .md 文件：

1
src/content/posts/

文件名规则很重要：用英文小写字母 + 短横线，不要有空格和中文。

2.2 填写文章信息（Frontmatter）#

在文件最顶端，复制下面这段固定格式，把信息换成你自己的：

1
---
2
title: 我的第一篇文章
3
description: 一句话介绍这篇文章写了什么，会显示在首页和搜索引擎里。
4
pubDate: 2026-08-04
5
tags: [生活, 前端]
6
author: 念铭
7
draft: false
8
---

各个字段的意思：

Typora 小技巧：菜单「偏好设置 → Markdown → Markdown 扩展语法」可打开 YAML Front Matter 高亮，让开头这段更好看。

2.3 编辑正文（常用语法）#

下面这些就是够用的全部写法：

1
## 小标题
2

3
普通段落直接打字。**加粗**用两个星号，*斜体* 用一个星号，`行内代码` 用反引号。
4

5
### 更小的标题（三级）
6

7
引用别人的话，用大于号：
8
> Python 写起来很舒服。
9

10
列表：
11
- 第一项
12
- 第二项
13

14
有序列表：
15
1. 第一步
16
2. 第二步
17

18
[链接文字](https://example.com)

标题层级注意：文章里用 ##（二级标题）作为大标题、###（三级）作为小标题。用 #（一级标题）会破坏排版，而且只有 ##/### 会出现在侧边「目录」里。

2.4 代码块（一定要标语言）#

在代码块语言标记里写上语言名（js python bash yaml 等），才会有漂亮的语法高亮：

1
```python
2
print("hello")
3
```

2.5 Mermaid 流程图（Typora 可直接预览）#

Typora 原生支持 Mermaid。在代码块语言标记写 mermaid，Typora 里就能实时看到图，发布后博客也会自动渲染（支持亮/暗主题切换）：

2.6 图片（最容易踩的坑）#

这个博客的图片有个固定规矩：图片文件要放到 public/ 文件夹里，然后在文章里用 /文件名 开头（以斜杠开头的绝对路径）引用。

逐步来做：

1. 把图片文件（PNG / JPG / SVG）放进 public/ 文件夹；
2. 在 Typora 里引用它：
   • 方法一：Typora 菜单「偏好设置 → 图像 → 插入图片时复制到指定路径」选项目里的 public 文件夹，并勾选「使用相对路径/绝对路径」；
   • 方法二（最保险）：直接手动写，图片叫 demo.png 就写：

1
![图片说明](/demo.png)

常见错误：用了 ./image.png（点开头）或没斜杠的路径 → 发布后图片显示不出来。记住：一律用 /文件名 开头的写法。

2.7 写完保存#

用 Typora 的 Ctrl+S / Cmd+S 保存即可。此时回到刚才开着的浏览器（http://localhost:4321），刷新页面，新文章应该已经出现在首页（按时间倒序）。

如果文章 draft: true，本地预览能看到，但发布后不会出现。正式发布前记得改成 false（或直接删除这一行）。

3.1 在终端里按顺序执行#

还是那个终端窗口。先进入项目文件夹（如果换过窗口），然后：

1
git status

看到红色/绿色文件名，说明你的改动待提交。接着：

1
git add .
2
git commit -m "feat: 发布新文章《我的第一篇文章》"
3
git push

• git add .：把本次所有改动收集起来；
• git commit：像保存一个「存档点」，-m 后面是备注；
• git push：把存档上传到云端。

第一次 push 会要求输入 GitHub 用户名和密码/令牌（Token），用电脑上的 GitHub 账号即可。

3.2 等待自动部署#

推送完成后（Cloudflare Pages 已接好），云端会自动开始构建你的网站。一般过 1~3 分钟，刷新正式网址，文章就上线了。

以后每次发布新文章，重复：写好 → 保存 → 跑三步 git 命令，就完事了。