用Vue写了个博客。
需要安装的Vue插件:store, router, axios
npm run build 后,将dist目录内容copy过来就可以直接用了,但是为了能够发布到GitHub Pages上,还需要做一些改变。
首先Github Pages是一个静态Web服务器,也就是说没有后端,所以相当于本地写一个静态html页面作为博客内容,那么简单的方法是用markdown写完以后,使用VScode的Markdown Preview Enhenced在保存时自动在同级目录下生成对应的html页面。
这一步本来是可以不需要的,完全通过客户端浏览器解析下—__post目录的所有html文件就可以了,然而Github Pages好像不支持HTTP的目录请求(可能我打开方式不对?),所以本地需要收集一些博客页面的标题、摘要描述、tags、最近的修改日期、博客文章的创建日期,然后写到一个表里记录下来。
客户浏览器在创建首页渲染时,create的钩子首先会请求这个meta文件解析出来所有的博客标题、tags、摘要描述,然后渲染整个页面。
用户点击后直接路由到/__post/对应的博客.html即可
在生成的dist目录内要加上.nojekyll 空文件,显式地告诉Github Pages不使用jekyll页面生成器。Hexo这类页面生成器都是需要在本地编译出html再上传到Github的,该博客的行为方式也和Hexo类似。Jekyll因为是github自己的页面生成器,可以在线渲染markdown生成html,所以内部提供了很多方便的接口(如我之前遇到的问题,获取目录下的所有文件)。但是Jekyll缺点是太慢,而且对Latex公式以及markdown的错误容忍度较低,渲染的结果不太好,不如本地渲染后的html好,Markdown Preview Enhenced, yyds(也可能是我打开方式不太对?)。
本地渲染html有一个好处是可以直接将图片转成Base64格式,这样再也不用担心图片丢失文档打开渲染不出来的情况了~,虽然markdown也有渲染base64插入图片的方式,但是会极度影响markdown文件的美观。
这个问题源于Vue默认使用history模式,那么浏览器执行前URL:github.io/home/,执行后URL: github.io/post, 这些相对路径都是在本地浏览器渲染的,服务器并没有感知。然而GitHub是静态页面,返回页面后自动请求URL: github.io/home 向服务器,此时静态服务器/目录下没有/home目录,那么就会返回404了。
解决方法:
为了不影响我整个代码的修改,我采用了第二种方法。
该文件是处理meta信息的二进制的源代码,用Go写的100多行,实际上可以利用pandoc生成html,这样就可以将整个过程自动化了,但是pandoc生成html还要配置很多东西才能生成的非常好看,但是Markdown Preview Enhenced能够自己选择主题,本身就很好看了,所以采用后者。
npm install
npm run serve
npm run build
npm run lint