VuePress+Gitee快速搭建个人博客的尝试（成功）

VuePress+Gitee快速搭建个人博客的尝试

昨天在GitHub上看见了VuePress项目，还尝试一下，不过只是运行了一下，没有部署和修改。vuepress-theme-vdoing使用体验、我对博客网站的认识——wsdchong

今天尝试一下部署。

借鉴不安分的猿人的VuePress +Gitee 快速搭建个人博客

部署实现过程

步骤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

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