vuepress进化史

前言

昨天回顾笔记的时候。想起了我一个月前的尝试的vuepress，之前因为部署没成功，没找到原因就闲置了一下。昨天心血来潮，研究了一下。没想到一下子就解决了。

真的是黎明前最黑暗，离成功就差一步。但是也正如人生没有白走的弯路定律一样，过去的失败积累多了，离成功只差一步，当迈开这一步，就飞跃式地成功。

《就业乱世，如何正面应战！【所长】》笔记

使用vuepress-theme-vdoing搭建个人博客

简单回顾一下那个vuepress的问题以及完善一下vuepress的进化史。

亚古兽进化，战斗暴龙兽。

问题解决过程

问题情况：vuepress打包后在本地预览没有样式。

我使用的是vscode打开文件的。在dev模式中可以正常显示，

但是打包后却没有样式。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-iI50V3W9-1603003494254)(vuepress%E8%BF%9B%E5%8C%96%E5%8F%B2.assets/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20201018142258.png)]

问题原因：打包出的文件使用的URL是绝对地址，而vuepress的打包文件夹dist不是这个绝对地址。

解决方法：将文件复制到根目录即可。

最终效果：

https://wsdchong.github.io/wsdchongblog/

其他方法：还有其他方法，但是我没深究。

只是简单了解。以后如果CSDN不能发的时候，再考虑转移阵地。

vuepress进化

静态生成器

首先是实现简单的静态生成器。将markdown文件转化成网页，然后把网页部署到GitHub Pages上。

markdown优点是便捷；传统HTML的写作较为麻烦；用静态生成器连接两种，取长补短。

这是最基本的需求。

自动部署

但是每次都要转化一下再部署会很麻烦，于是自动部署需求就来了。让你用vscode直接npm run deploy自动部署到GitHub pages。

在线编辑

但是每次更新都有运行静态网页生成器太麻烦了，于是在线编辑的需求就产生了。

前提是把博客源码上传到github仓库，并配置好 GitHub Actions 自动部署。配置好之后，每个文章页面底下都会有一个编辑按钮，点击即可跳到github在线编辑，编辑完成后提交就会自动触发GitHub Actions自动部署。

评论模板

光写博客太无聊了，有评论才有意思，但是静态网站没有后台所以不能交互。

使用Gitalk实现静态博客无后台评论系统。弥补了静态网页不能交互的缺点。

百度收录

写好的文章如果不能被人看到是很难受的一件事，加强网站SEO很有必要。

GitHub Actions 定时运行代码：每天定时百度链接推送。让自己的博客被推广。

小细节

初次之外，还有安全和

批量操作front matter工具：使得博客在build后自动生成front matter；

图床：GitHub + jsDelivr + TinyPNG+ PicGo 打造稳定快速、高效免费图床。GItHub上存图片、jsDelivr免费CDN加速、PicGo做图床、TinyPNG压缩上传的图片。简直是一条龙服务。

总结

但是话说回来，CSDN等博客平台太香了。编辑简单，自带浏览。做得远比个人去弄要强得多。

所以这里只能沦为研究。

更新地址：GitHub

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