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

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

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

今天尝试一下部署。

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

文章目录

  • VuePress+Gitee快速搭建个人博客的尝试
    • 部署实现过程
    • 重新认识vuepress
    • 项目修改过程
      • 理论基础摘要
    • 总结

部署实现过程

步骤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、掘金

你可能感兴趣的:(前端学习,github,vue,编程语言)