vuepress进化史

前言

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

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

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

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

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

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

文章目录

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

静态博客网站——vuepress功能进化相关推荐

在win10子系统ubuntu平台下使用jekyll和github pages搭建自己的静态博客网站
前言总喜欢在自己闲得无聊的时候,折腾一些东西.最近喜欢上了markdown的方便简洁,就想借助jekyll和github pages来搭建一个静态博客网站,然后只需要跟平时写代码一样,上传自己的.m ...
Hexo+Kaze+Gitee Pages 搭建静态博客网站
前言建网站本身是一个很大的工程,涉及前端页面的搭建,网站数据的存储,还要购置服务器资源,甚至是后期的维护,过程相当繁琐. 不过如果仅仅是想搭建个人的网站,写写博客,想要美观,又不想操心太多和写博客无 ...
11个最流行的静态(博客)网站生成工具
11个最流行的静态(博客)网站生成工具最近特别流行使用静态网站搭建博客,本博客就是host在GitHub Pages的静态网站.静态网站非常适合专注于内容的网站,例如,博客.那你可能会问,为什么不用 ...
vuepress侧边栏配置_VuePress搭建静态博客网站
VuePress是什么仅从单词上来看就是vue和press,press除了按压的意思外,还有报刊杂志和出版社等意思,所以可以理解为由vue驱动的出版工具.换个说法就是静态博客编写工具.后六字应该都不 ...
使用 hugo oss 搭建个人博客网站
系列文章目录文章目录系列文章目录前言一.下载hugo 二.oss 三.域名四.创建博客上传五.发布,上传文章前言本文主要详解如何用最低的成本搭建个人博客网站原本我是直接用的githu ...
GitHub Pages + Hexo搭建个人博客网站，史上最全教程
文章目录一.准备工作 1. GitHub账号 2. 安装Git 3. 安装NodeJS 二.创建仓库三.安装Hexo 四.更换主题 1. NexT 主题 2. Fluid主题五.创建文章六.个 ...
博客网站软件需求分析说明书-软件工程作业
1.导言 1.1编写目的该文档描述了个人博客网站的功能和性能的要求,将作为对该项目在概要设计阶段的设计输入. 本文档的预期读者包括: 1.设计开发人员 2.项日管理人员 3.测试人员 4.用户 1. ...
（附源码）Node.js自我展示博客网站毕业设计 231547
自我展示博客网站的设计与实现摘要个人博客网站是当今网络的热点,个人博客技术的出现使得每个人可以零成本.零维护地创建自己的网络媒体,Blog站点所形成的网状结构促成了不同于以往社区的Blog文化, ...
（附源码）Node.js自我展示博客网站毕业设计231547
自我展示博客网站的设计与实现摘要个人博客网站是当今网络的热点,个人博客技术的出现使得每个人可以零成本.零维护地创建自己的网络媒体,Blog站点所形成的网状结构促成了不同于以往社区的Blog文化, ...

静态博客网站——vuepress功能进化