博客搭建 ​

本篇将只涉及完整的博客搭建流程，具体配置相关的内容将会在后面篇章更新！

虽然可能某些读者可能有过类似的搭建经验，但是，我还是强烈建议这部分内容按照我的流程来做！

初始化GitHub仓库 ​

最开始写博客搭建教程时，vitepress的版本还是1.0.0-beta.6，而现在官网已经更新到1.0.0-rc.20，导致之前很多内容失效， 故本篇教程也以官网最新版本为准来搭建。

为什么选择最新版本？

首先以1.0.0-beta.6版本为例，当时的脚手架并没有现在的好用，并且现在初始化项目的主题配色大改了。

首先打开GitHub Desktop客户端，然后新建仓库（快捷键：Ctrl+N），操作如下图： 创建完成后，需要将创建的仓库同步至远程仓库，步骤如下：

初始化博客 ​

远程仓库初始化同步完成后，按住Ctrl+Shift+A在VS Code打开项目，打开项目后按下Ctrl+~打开命令行终端。
这里我们首先安装yarn，为什么不使用npm？众所周知，npm有些源在国内很难下载的，所以强烈建议用yarn，在终端执行以下命令：

npm i -g yarn
# 安装完成后使用
yarn -v  # 查看yarn版本

yarn安装完成后，开始初始化项目，首先安装vitepress依赖，执行命令：

yarn add -D vitepress

等待依赖下载完成后，此时的项目目录结构如下：

.
|-- node_modules    
|-- .gitattributes    
|-- .gitignore 
|-- package.json  
|-- README.md       
`-- yarn.lock

使用脚手架初始化项目，执行命令：

yarn vitepress init

然后就是选择配置，有三个地方需要注意（下面高亮部分）：

• 配置文件的默认目录需由./改为./docs；
• 如果不想用TypeScript开发组件，就选No；
• 第三处高亮，建议选Yes，因为后期可能需要的插件之类的东西只有npm源。

┌  Welcome to VitePress!
│
◇  Where should VitePress initialize the config?
│  ./docs
│
◇  Site title:
│  My Muri Life
│
◇  Site description:
│  我的个人博客
│
◇  Theme:
│  Default Theme
│
◇  Use TypeScript for config and theme files?
│  Yes
│
◇  Add VitePress npm scripts to package.json?
│  Yes
│
└  Done! Now run yarn run docs:dev and start writing.

项目初始化完成后，需要修改.gitignore文件，修改如下：

node_modules/
docs/.vitepress/dist
docs/.vitepress/cache
yarn-debug.log*
yarn-error.log*

# Editor directories and files
.vscode

修改完成后，本地运行项目，执行命名：

yarn docs:dev

# 成功运行后在终端会显示如下信息
vitepress v1.0.0-rc.20

➜  Local:   http://localhost:5173/
➜  Network: use --host to expose
➜  press h to show help

在浏览器访问http://localhost:5173/，会看见如下页面：

同步代码 ​

打开GitHub Desktop客户端，执行如下操作：

部署到线上 ​

打开Vercel的登录页面，点击Continue with GitHub，然后授权登录，登录后进入Dashboard页面 依次点击Overview => Add New => Project，如下图： 按上述选完后，进入新页面，然后点击我们刚创建的项目后的Import，如图： 导入项目后，直接点击deploy按钮，如下图： 部署完成后，会生成快照，点击就可直接访问，如下图：

域名解析 ​

增加Vercel的域名解析，如下图： 除了Vercel的域名解析，还需在域名服务提供商处增加对应解析记录，以GoDaddy为例（其它也一样，都是CNAME记录），如下图： 添加成功后，一般1~3分钟就可通过域名访问了。
还有俩点需要说明：

• 此处我用的是三级域名，如果你是用的二级域名，一般还需要增加A记录解析，Vercel会给出解析记录，在域名服务提供商处添加即可；
• 若想重定向，比如想将www.muri.life重定向到muri.life，可以像下图这样配置：

到此，一个线上博客就搭建完成了，后续的配置更新、新增博文等等，只需要在GitHub Desktop客户端同步代码就能更新部署到线上。