hexo是什么?
hexo是一个基于node.js的前端框架,可以根据模板(主题)和指定目录的文本内容,生成一系列完备的静态文件,包含index.html和js及css等文件,也就是想要的可访问静态文件博客了。
光生成静态文件还不行,生成的静态文件得有可访问的服务器用来部署文件,这样才算联网了,可以到处访问;另外得有一个地方来托管原始文件及hexo基于它生成的静态文件,这样文件能存储且保持同步;然后最好还有CI/CD功能,能够本地上传后自动触发部署。
有一个完美的并且免费的服务能够满足上述需求,那就是github Pages了。
github能够存放原始文件和hexo基于原始文件生成的博客文件,注意区分这是两个不同的项目仓库。github免费提供的Pages服务,可以用来部署静态网页,并且提供类似 https://xxxx.github.io/xxxx.github.io的通用域名供用户访问,这里xxxx指的是你的github用户名,注意xxxx.github.io这个仓库名是要求固定的格式,该仓库对应存放hexo生成的博客静态文件。另外,github有actions服务,配置好后,当xxxx.github.io有文件变更提交后,会自动触发流水线,在Pages中部署好最新的内容,简直完美。
说下具体的操作
首先我们down下来我们的原始博客项目,这里暂且给它一个项目名叫blog。然后在使用npm install安装,blog项目是基于hexo生成的,有hexo相关的依赖,安装完成后就可以使用hexo的命令来操作了。接下来我们就可以在文件目录中编写自己博客或者文章了。然后依次执行以下命令生成文件,并启动项目:
hexo clean
hexo g
hexo s
这时我们可以本地看一下效果,没问题后推送新生成的文件到xxxx.github.io中:
hexo d
github Actions服务会自动帮你部署好,在https://xxxx.github.io/xxxx.github.io 中就可以看到你刚发布的新内容了。
这个时候,有的人有疑问了。明明是两个项目,一个是blog,一个是xxxx.github.io,新增文章文件是在blog里面,使用hexo d命令后,怎么会推送文件到xxxx.github.io呢.这是因为blog是基于hexo生成的,里面有一系列的配置,其中根目录的_config.yml中,需要配置xxxx.github.io仓库的详细信息,这样两个项目就关联起来了。
总结几点细节
- hexo怎么生成基础的blog项目,怎么配置,怎么更换主题,看hexo使用手册,介绍很详细
- hexo是基于node.js的,本地需要安装node.js
- 存在blog和xxxx.github.io两个代码仓库,blog和xxxx是示例名称
- blog项目存放原始文件,是基于hexo innit初始化得到的,博客及文章的源文件是存放在这个项目中
- xxxx.github.io是使用hexo g基于blog项目的文件生成的,最终用来部署和访问的
- _config.yml配置xxxx.github.io的目录时需要注意,目录不对,会导致js和css文件加载失败,页面丢失样式,而且很奇快的是,配置好使得https://xxxx.github.io/xxxx.github.io能正常显示时,在其他地方可能访问不正常,例如cloudflare Pages,需要根据实际情况调整
- 使用github Pages服务部署网站,xxxx.github.io仓库不能是private
- hexo g生成静态文件后,需要hexo d将文件推送到xxxx.github.io仓库中,否则xxxx.github.io仓库中不会显示任何文件
另外一套方案
还有另一套可以完美可以替换github Pages的服务,就是cloudflare Pages,它甚至更好。毕竟免费,有cloudflare的域名,有CDN加速,有DNS解析,而且有免费SSL。
下一篇来介绍hexo + github + cloudflare Pages。