使用vuepress搭建个人博客

前言

之前通过学习接触到vuepress，写了四篇博客：

我对博客网站的认识——wsdchong

vuepress-theme-vdoing使用体验

对vuepress以及vuepress-theme-vdoing的认识

从不懂到了解，现在开始正式实践。准备按四部曲进行。第一步是尝试使用vuepress；

第二步是尝试使用vuepress-theme-vdoing；

第三步是部署到GitHub Pages和Coding Pages上；

最后就是设计自己的博客。

因为vuepress-theme-vdoing功能强大。可以通过Gittalk实现静态博客无后台评论、通过GItHub Actions实现在线编辑；作者还实现了高效免费图床和百度收录；界面也有博客效果、技术文档效果、单页效果；还可以修改主题颜色和样式；这些功能每一个都让我对其充满期待。

我在这里实现第一步

重点参考：

vuepress：源头。官方文档更系统准确。

vuepress-theme-vdoing：一个好的使用者。个人文档更便于理解思考。

文章目录

vuepress实现

步骤1：下载和初始化vuepress。

参考教程：vuepress快速上手。

注意事项：node.js>=8.6；不再推荐全局安装vuepress；推荐使用yarn；

补充yarn的使用：到yarn官网上下载并安装yarn；然后使用yarn --version看是否安装

步骤1：进入文件夹

C:\Users\Administrator>cd C:\Users\Administrator\Desktop\work

步骤2：创建并进入一个新目录

mkdir vuepress-starter && cd vuepress-starter

结果：产生一个新目录并且进入目录

步骤3：使用包管理器进行初始化

yarn init

结果：产生一个package.json文件

步骤4：为vuepress-theme-vdoing进行初始化

npm install vuepress-theme-vdoing -D

+ vuepress-theme-vdoing@1.4.4
added 282 packages from 276 contributors and audited 282 packages in 129.72s

结果：产生一个node_modules文件夹，里面有包。我还以为是直接所有文件夹都好了，然后只需要在docs文件夹写博客就好。

步骤5：为vuepress进行初始化

yarn add -D vuepress

Done in 405.79s.

结果：node_modules文件夹中又增加了一些包。

package.json为

{//前面四个是包管理器产生的；后面是初始化产生的；
  "name": "MyBlog",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "devDependencies": {
    "vuepress": "^1.5.4",
    "vuepress-theme-vdoing": "^1.4.4"
  }
}

步骤6：创建第一篇文档

mkdir docs && echo '# Hello VuePress' > docs/README.md

结果：创建了docs文件夹，里面有个README.md文件，内容是’# Hello VuePress’

步骤7：在package.json中添加

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

步骤8：启动本地服务

yarn docs:dev

结果：报错

error An unexpected error occurred: "C:\\Users\\Administrator\\Desktop\\work\\vuepress-starter\\package.json: Unexpected token { in JSON at position 44".
info If you think this is a bug, please open a bug report with the information provided in "C:\\Users\\Administrator\\Desktop\\work\\vuepress-starter\\yarn-error.log".
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

意思是在json位置142的意外字符串。

然后我删除package.json中是那段script。继续运行yarn docs:dev

error Command "docs:dev" not found.
//意思是没找到这个docs:dev。

然后我运行yarn vuepress dev docs；

error Command "vuepress" not found.
//意思是没发现vuepress

这我就尴尬了。官网真不靠谱。package.json中添加script信息会导致不能运行启动服务。

然后我看vuepress-theme-vdoing的快速上手，结果官网上说安装它的项目，然后启动。但是我不想自己的博客有其他人的痕迹，改其他人的博客工作量会很大。

于是我觉得参考它的博客，然后根据自己对vue的理解进行尝试。

首先是看vuepress-theme-vdoing的博客的package。

{
  "name": "theme-vdoing-blog",
  "version": "1.0.0",
  "scripts": {
    "dev": "vuepress dev docs",
    "build": "vuepress build docs",
    "deploy": "bash deploy.sh",
    "editFm": "node utils/editFrontmatter.js",
    "baiduPush": "node utils/baiduPush.js https://xugaoyi.com && bash baiduPush.sh",
    "publish": "cd theme-vdoing && npm publish && cd ../ && npm update vuepress-theme-vdoing"
  },
  "license": "MIT",
  "devDependencies": {
    "inquirer": "^7.1.0",
    "json2yaml": "^1.1.0",
    "moment": "^2.25.3",
    "vuepress": "1.5.2",
    "vuepress-plugin-baidu-autopush": "^1.0.1",
    "vuepress-plugin-baidu-tongji": "^1.0.1",
    "vuepress-plugin-demo-block": "^0.7.2",
    "vuepress-plugin-one-click-copy": "^1.0.2",
    "vuepress-plugin-thirdparty-search": "^1.0.2",
    "vuepress-plugin-zooming": "^1.1.7",
    "vuepress-theme-vdoing": "^1.4.4",
    "yamljs": "^0.3.0"
  },
  "dependencies": {
    "vuepress-plugin-comment": "^0.7.3"
  }
}

从这个文件中，我发现初始化我们是一样的，不过有三处不同。1dev依赖关系；2scripts；3依赖关系；

我决定除了scripts不复制，把其他复制了，然后npm install;

可行；然后我对比我node_modules中文件的大小和vdoing的大小；发现我的是196M,vdoing是346M；先暂时不纠结这个。

然后我参考vuepress-theme-vdoing的目录结构，同时也在node_modules文件夹中找到了vuepress-theme-vdoing文件夹，看了其中的内容发现和vuepress-theme-vdoing文件夹中theme-vdoing文件夹的内容很像。于是我复制node_modules/vuepress-theme-vdoing文件夹的内容到theme-vdoing文件夹；再次运行npm run dev；还是不行，说没这个脚本。

于是我用vscode打开我的这个项目。在package.json中添加scripts；然后尝试运行发现npm run dev；发现成功了，效果如下：

image-20200914104325845

于是我得出结论：

npm run dev需要在package.json中添加对应的scripts才能使用。

虽然经历了波折，但是还是有好的结局。也加深了自己对vue的理解。而且还歪打正着把第一步和第二步一起做完。

步骤2：部署到GitHub pages和Coding pages

根据我之前的经验：VuePress+Gitee快速搭建个人博客的尝试（成功）以及vdoing作者博客的部署介绍。

过程大致为1运行npm run dev打包出dist；2把项目推动到GitHub和Coding上；3设置Pages；

步骤1：打包。vscode的终端运行npm run dev后文件生成到docs/.vuepress/dist中；

步骤2：推送项目到GitHub和Coding上。

首先在GitHub和Coding上创建仓库。（省略）

然后是将dist的文件上传到GitHub和Coding创建的仓库中；不过考虑到vdoing可以实现自动部署，按理说，不是上传dist这种办法。查看作者的vuepress-theme-vdoing-doc。我得出结论，应该是上传docs的文件以及自动部署的文件。不过前期我先不接触这部分，免得节外生枝，所以先用dist中的做例子，测试部署能否顺利进行。

我之前是用GitHub for Desktop上传的。不过图形界面的Git经常更新，所以有时候出了问题还不好解决。后来就干脆使用SVN。现在又得重新使用Git。

GitHub Pages成功了，但是Coding Pages没成功。不折腾这个了。coding的教程也是无语了。浪费我一时间。又是添加ssh，又是部署。注册账号也麻烦死了。都2020年了。我自个研究gitee的gitee Pages去。

自动部署最后去实现。

步骤3：搭建自己的博客

磕磕碰碰终于开始自己的博客了。走了不少弯路，现在梳理一下，假如我再次使用vuepress-theme-vdoing的话。

步骤1：创建GitHub仓库。首先是在GitHub上创建一个仓库wsdchongblog，然后把仓库拉取到本地；

步骤2：初始化。复制vuepress-theme-vdoing的package.json到本地仓库；然后用vscode打开项目，最后在vscode终端输入npm install；

added 1836 packages from 1406 contributors and audited 1838 packages in 296.567s

步骤3：根据vdoing作者的文档进行配置。

下面补充vdoing的目录结构，以便理解。

├── .github   (可选，GitHub Actions所需文件)
│   ├── workflows
│   │   ├── baiduPush.yml (可选，百度定时自动推送)
│   │   └── ci.yml (可选，自动部署)
├── docs (必须，不要修改文件夹名称)
│   ├── .vuepress （同官方，查看：https://vuepress.vuejs.org/zh/guide/directory-structure.html#目录结构）
│   ├── @pages (可选，自动生成的文件夹，存放分类页、标签页、归档页)
│   ├── _posts (可选，专门存放碎片化博客文章的文件夹)
│   ├── <结构化目录> 
│   └── index.md (首页)
├── theme-vdoing (可选，本地的vdoing主题)
├── utils  (可选，vdoing主题使用的node工具)
│   ├── modules
│   ├── config.yml (可选，批量操作front matter配置)
│   ├── editFrontmatter.js (可选，批量操作front matter工具)
├── baiduPush.sh (可选，百度推送命令脚本)
├── deploy.sh (可选，部署命令脚本)
│
└── package.json

通过这个目录结构可知。docs是必须的。也是配置的主要地方。其次还有实现自动front matter的utils文件夹，可以直接从vdoing复制到自己的项目中；还有自动部署和百度推送的文件也可以复制到自己的项目中；theme-vdoing是可选的，作为本地主题，应该是可以在其中进行二次开发；

修改1：

首先我把theme-vdoing和utils文件夹复制到自己的项目中。自动部署和百度推送的文件暂时不复制。

  • 复制theme-vdoing的原因是使用vdoing的本地主题；
  • 复制util是因为其可以自动front matter

接着创建docs，并把.vuepress文件夹和index.md复制到自己的项目中。

这docs部分就必须自己写了，.vuepress文件夹的config.js、nav.js需要根据自己的情况调整。index.md是配置文件也需要根据自己的情况调整。

这样引用vuepress官网.vuepress目录结构，为了方便理解docs的设计。

├── docs
│   ├── .vuepress (可选的)
│   │   ├── components (可选的)
│   │   ├── theme (可选的)
│   │   │   └── Layout.vue
│   │   ├── public (可选的)
│   │   ├── styles (可选的)
│   │   │   ├── index.styl
│   │   │   └── palette.styl
│   │   ├── templates (可选的, 谨慎配置)
│   │   │   ├── dev.html
│   │   │   └── ssr.html
│   │   ├── config.js (可选的)
│   │   └── enhanceApp.js (可选的)
│   │ 
│   ├── README.md
│   ├── guide
│   │   └── README.md
│   └── config.md
│ 
└── package.json

不过vuepress-theme-vdoing的目录结构有所微调。本地主题没有放在.vuepress/theme中。还好其他的大同小异。

修改2：

梳理好结构后，首先修改.vuepress/config.js。修改的地方有title、base、blogger、footer的信息。

接着修改config/nav.js和index.md。

然后在docs中写文章（果然自动font matter）

最后npm run dev。看看效果。

测试之后发现可以使用。可以在线编辑，可以留言。

  • 静态网站无后台留言系统使用Gitalk实现，在config.js中配置。
  • 在线编辑是通过GitHub Action实现的自动部署。

不过由于我没设置Gitalk和GitHub Action。所以那里会报错。同时也有一些其他的小问题，于是我确定我第三个修改：首先改log、改首页背景图、改GitHub链接、实现评论功能。

修改3：

改log：替换docs/.vuepress/public/img的EB-logo.png和favicon.ico。

改首页背景图、头像、删除features；在docs/.vuepress/config.js修改。

改GitHub链接：在docs/.vuepress/config.js修改。

实现评论功能：参考作者的使用gitalk实现静态博客无后台评论系统。需要先申请GitHub Application来获得ClientID和ClientSecret。然后修改config.js。

实现这些后，这个静态博客的本地内容基本完成。

接下来就是实现在线编辑（自动部署）的功能。

修改4：

首先将自动部署和百度推送的文件复制到自己的项目中，然后修改deploy.sh；

接着获取GitHub的token，把token存储到GitHub仓库的settings/secrets中

最后修改ci.yml和deploy.sh文件。

最终结果

image-20200914203253472

可以npm run dev。

但是npm run build却没有样式。

image-20200914203405774

部署没成功。

image-20200914203448089

暂时弄到这。心累了，最近还有其他事。以后再磨。

更新地址：GitHub

更多内容请关注：CSDN、GitHub、掘金

# git # github
Logo
华为开发者空间

华为开发者空间，是为全球开发者打造的专属开发空间，汇聚了华为优质开发资源及工具，致力于让每一位开发者拥有一台云主机，基于华为根生态开发、创新。

更多推荐

cover

解析openGauss账本数据库

avatar 华为开发者空间
cover

GaussDB高智能--库内AI引擎：模型管理&数据集管理

avatar 华为开发者空间
cover

GaussDB高智能--库内AI引擎：机器学习算法的训练和推理

avatar 华为开发者空间