从 docsify 转战 vuePress2.0,我经历了什么?(一)

782 阅读1分钟

前段时间,docsify 的cdn崩了,我翻了一下很久之前的笔记,打开贼慢不说,样式全没了。于是下定决心找个时间看看有什么好的文档工具重新弄一个,虽然都是几年前的笔记文档,但毕竟这些笔记见证了我的成长,不能丢。最终选定了vuePress2,下面将记录使用 vuePress2 的详细过程。

vuepress官方文档v2.vuepress.vuejs.org/zh/

使用 vuepress2.0 打造静态博客网站(一)

一. 初始化项目

1. 建立一个git仓库并clone下来

2. 进入新目录

cd book

3. 初始化项目

npm init
// 一直按回车即可

npm install -D vuepress@next

4. 使用vscode(用什么编辑器随便你)打开项目,在 package.json 中添加以下

{
  "scripts": {
    "dev": "vuepress dev docs",
    "build": "vuepress build docs",
  }
}

可以看到npm脚本中已经有我们刚刚添加的运行命令.

5. 在根目录新建文件 .gitignore,把以下三行代码复制进去并保存

node_modules
.temp
.cache

对比上面两个步骤的图片,git忽略了依赖包的文件后瞬间减少了.

6. 在根目录新建文件夹 docs

7. 在 docs 文件夹下新建文件 README.md, 在文件中随便写点什么

8. 运行命令 npm run dev或点击左下角快捷运行

至此,基础框架已经搭建完成,接下来可以配置vuepress并开始写博客了.

线上预览: zerojs的个人博客

传送门

本项目源码地址
docsify教程 by zerojs
vuepress官方文档
docsify官方文档