告别传统博客模式，VitePress 让笔记自动生成博客

  大家好，我是木川

自媒体平台那么多，为什么还要搭建自己的博客？

1）在自媒体平台上，你受限于平台的规则和算法，而在博客上，你可以自由地表达自己的想法，不受任何限制

2）搜索引擎优化：博客通常更容易被搜索引擎收录，通过优化关键词和内容，可以吸引更多的流量

3）建立个人品牌：博客是建立和展示个人专业形象和品牌的理想场所。通过持续发布高质量的内容，你可以成为某个领域的意见领袖，吸引一群忠实的读者

为什么选择 VitePress ？

1）不用一直折腾，专心写作。从最早用的 WordPress、Hexo、掘金等，每次都会有新的平台出来，耗费太多精力

2）内容基于 Markdown 编写。自己用 Markdown 写的笔记，就可以生成博客

3）生成的静态文件可以托管在 Github 上，无须购买域名，即可使用 Github 分配的网址进行访问

VitePress 是一款静态站点生成器  (SSG) ，专为构建快速、以内容为中心的网站而设计。简而言之，VitePress 获取用 Markdown 编写的源内容，为其应用主题，并生成可以轻松部署在任何地方的静态 HTML 页面。

本文将介绍通过 VitePress 基于 Markdown 笔记文档生成博客，并部署到 Github 上，以及笔记发生变化时，自动更新博客

最终的效果如下：https://muchuang1024.github.io/

一、创建笔记仓库

为了笔记文档和博客网站分开管理，所以需要单独在创建一个笔记仓库 docs

建议托管在 Github 上面，方便后面的自动更新

1、拉取到本地

在 Github 创建好仓库后，拉取到本地

git clone [email protected]:username/docs.git # 拉取到本地
cd docs # 进入目录

2、添加笔记文档

可以使用 Obsidian 软件管理 Markdown 笔记文档，然后使用 Git 提交

git add . # 添加笔记文档
git commit -m 'ADD 提交' # 提交到本地仓库
git push origin main # 提交到远程仓库

二、创建博客仓库

在 Github 创建好博客仓库 username.github.io，拉取到本地

1、拉取到本地

git clone [email protected]:username/username.github.io.git
cd username.github.io # 进入目录

2、安装 VitePress 依赖

yarn add -D vitepress

3、构建项目

VitePress 附带一个脚手架，可帮助您构建基本项目

npx vitepress init

输入相应设置，自动生成相关代码

4、添加笔记文档

在博客仓库添加子项目：笔记文档仓库 docs

# 添加笔记文档仓库作为子项目
git submodule add -f [email protected]:username/docs.git docs
# 拉取到本地
git submodule update --init --recursive

5、项目目录结构

各个文件含义

.vitepress：VitePress 配置
docs:  笔记仓库
index.md: 首页
node_modules: 安装的依赖
package.json：依赖管理
package-lock.json：安装依赖的版本</