VuePress+Gitee快速搭建个人博客的尝试
title: VuePress+Gitee快速搭建个人博客的尝试 date: 2020-09-14 18:39:27 permalink: /pages/73b740/ categories:
- blog tags:
- 博客 — vuepress author: name: wsdchong link: https://github.com/wsdchong
昨天在 GitHub 上看见了 VuePress 项目，还尝试一下，不过只是运行了一下，没有部署和修改。vuepress-theme-vdoing 使用体验、我对博客网站的认识——wsdchong
今天尝试一下部署。
# VuePress+Gitee 快速搭建个人博客的尝试
昨天在 GitHub 上看见了 VuePress 项目，还尝试一下，不过只是运行了一下，没有部署和修改。vuepress-theme-vdoing 使用体验、我对博客网站的认识——wsdchong
今天尝试一下部署。
借鉴不安分的猿人的VuePress +Gitee 快速搭建个人博客
[toc]
# 部署实现过程
步骤 1：本地博客快速搭建。下载项目，安装依赖（npm install）、运行项目（npm run dev）、构建项目（npm run build）。昨天已经做过一遍了。所以不赘述了。
步骤 2：将代码推送到码云上。a.创建公开仓库 vuepress-test。
b.在 docs.vuepress\config.js 中添加一行代码。build 打包项目，打包项目在 docs/dist 中。
base：'/vuepress-test/'
c.上传项目。选拉取 vuepress-test，将 build 出的文件导入 vuepress-test 文件中，然后上传。我使用的是 SVN 更新。使用 SVN 更新自己的文档——wsdchong
d.设置 Gitee Pages。在 gitee 的 vuepress-test 仓库，选择服务-Gitee Pages。然后直接启动。等待部署。
最终访问：http://wsdchong.gitee.io/vuepress-test
成功。
# 重新认识 vuepress
其实我对 vuepress 项目感兴趣是因为我用过 WordPress。看到这个 vuepress 的名字的时候我就下意识的认为这是一个使用 vue 框架的 CMS。碰巧我不怎么喜欢 WordPress，对 vue 十分有好感。所以昨天就看了看 GitHub 上的vuepress-theme-vdoing。还写了vuepress-theme-vdoing 使用体验、我对博客网站的认识——wsdchong。
今天早上看到VuePress +Gitee 快速搭建个人博客，于是打算尝试一下 vuepress，在尝试的过程中查找资料，我在 CSDN 的链接中还找到了 vuepress-theme-antdocs 和 vuepress-creator 的作者。我还以为他是 vue-theme-vdoing 的作者，但是他们的 GitHub 不同。最后我在vuepress-theme-vdoing的文档库中发现原来还有个vuepress。兜兜转转最后找到了组织。
vuepress：vue 驱动的静态网站生成器。以 markdown 为中心的项目结构，以最少的配置帮助你专注写作。
# 项目修改过程
既然可以运行又可以部署，那么就可以尝试修改内容了。
我准备尝试的部分是修改。
首先是预期效果。首先参考三个人的博客：Evan's blog、lingze's blog、restlessMan。
Evan's blog：是 vuepress-theme-vdoing 的作者。
lingze's blog：是 vuepress-theme-vdoing 的使用者。内容精简。
restlessMan：是我参考的那篇文章的 vuepress 博客。
然后是参考文档。一个是 vuepress 的官方文档，一个是 vuepress-theme-vdoing 的文档
vuepress：源头。官方文档更系统准确。
vuepress-theme-vdoing：一个好的使用者。个人文档更便于理解思考。
# 理论基础摘要
对 vuepress 以及 vuepress-theme-vdoing 的认识
vuepress 的定位：一款 vue 框架的静态网页生成器。
vuepress 的优越性：简洁、vue 驱动、高性能。
结构：第一部分是静态网站生成器，另一部分是默认主题 docs。
设计理念：插件化、约定大于配置；
vdoing 的定位：vuepress 的一个主题。
优势：
- 批量操作 front matter 工具；
- 自动部署：可以一键部署到 GitHub pages 和 Coding Pages 上；用 npm run deploy 即可一键部署。
- 评论模块的搭建：使用 Gitalk 实现静态博客无后台评论系统。弥补了静态网页不能交互的缺点。
- 图床：GitHub + jsDelivr + TinyPNG+ PicGo 打造稳定快速、高效免费图床。GItHub 上存图片、jsDelivr 免费 CDN 加速、PicGo 做图床、TinyPNG 压缩上传的图片。简直是一条龙服务。
- 百度收录：GitHub Actions 定时运行代码：每天定时百度链接推送。让自己的博客被推广。
- 在线编辑：前提是把博客源码上传到 github 仓库，并配置好 GitHub Actions 自动部署。配置好之后，每个文章页面底下都会有一个编辑按钮，点击即可跳到 github 在线编辑，编辑完成后提交就会自动触发 GitHub Actions 自动部署。
# 总结
暂时先这样。明天尝试使用 vuepress、将 vuepress 部署到 GitHub Pages 和 Coding Pages、使用 vuepress-theme-vdoing 主题、布局自己的博客。
更新地址：GitHub