某讯云的服务器又要到期了,而且备案年审也挺烦的。索性就弄个免费博客吧。
背景:
hexo 是一个博客框架,网站实际我们的静态网站托管在 github.io 上面。我们在本地配置好 hexo 后,在本地写文章然后编译出静态网页,然后将网页发布到 github.io 就能访问了。
环境:
操作系统: win10 (如果可以,还是推荐使用 Unix 操作系统来部署, hexo-admin 对 windows 的路径和编码的支持很差)
node 版本: v12.18.2
hexo 版本
$ hexo version
INFO Validating config
hexo: 5.4.0
hexo-cli: 4.3.0
os: win32 10.0.19043
node: 12.18.2
v8: 7.8.279.23-node.39
uv: 1.38.0
zlib: 1.2.11
brotli: 1.0.7
ares: 1.16.0
modules: 72
nghttp2: 1.41.0
napi: 6
llhttp: 2.0.4
http_parser: 2.9.3
openssl: 1.1.1g
cldr: 37.0
icu: 67.1
tz: 2019c
unicode: 13.0
依赖:
1、Nodejs
2、github 账号
步骤概述:
1、在 github 创建一个仓库用于托管博客 (比如我的仓库名为: hudeyongs.github.io), 创建好仓库后(约10分钟的样子,就能通过 hudeyong.github.io 访问我们的博客了,hexo 就是为这个博客创建内容/ 管理的。)
2、安装 hexo
3、安装 hexo-admin (主要是方便上传图片、图形界面管理文章也很方便)
4、发布上线
5、(可选)rss 订阅
6、(可选)配置独立域名
7、(可选) ssl 证书
8、(可选) 评论
9、其他
详细步骤:
1、在 github 创建一个博客仓库 (因为我已经创建好了,所以提示重名了)
2、安装 hexo。上面的步骤弄完了,约十分钟(视情况而定)就能通过 hudeyongs.github.io 打开博客了 (当然博客什么内容也没有)
# npm 是 nodejs 的包管理器,需要先安装 nodejs 和 npm, ubuntu 使用 sudo apt-get -y install nodejs npm 进行安装
$ npm install -g hexo
$ cd /f/Workspaces/hexo/ # 这个目录自己根据需要创建
$ hexo init # 初始化
$ hexo g # 生成静态页
$ hexo s # 运行
然后在本地浏览器输入 http://localhost:4000 , 就能看到我们的博客了。
3、安装 hexo-admin
npm install hexo-admin --save
图片的本地路径和预览问题在 windows (类 Unix 操作系统应该没有这个问题),修改 /node_modules/hexo_admin/api.js 的 389 行左右的两处代码来解决。
// filename = path.join(imagePath, filename) // 一处: 原代码
filename = imagePath+"/"+ filename // 一处改后代码
var outpath = path.join(hexo.source_dir, filename)
var dataURI = req.body.data.slice('data:image/png;base64,'.length)
var buf = new Buffer(dataURI, 'base64')
hexo.log.d(`saving image to ${outpath}`)
fs.writeFile(outpath, buf, function (err) {
if (err) {
console.log(err)
}
hexo.source.process().then(function () {
res.done({
// src: path.join(hexo.config.root + filename), // 二处: 原代码
src: filename, // 二处改后代码
msg: msg
})
});
})
});
修改之后路径正确了,但是预览仍然不是实时的,需要多敲一个空格才能显示,据说作者是有意为之,后面有时间再看下源码改成本地实时展示比较好.
4、实际上你可以在 git_bash 或者 cmd 中,切换到 hexo_space 站点根目录中通过 hexo g -d 发布。我这里配置使用界面上的 deploy 按钮发布.
a、在 hexo_space 目录下新建一个文件: deploy.cmd (如果是类 Unix 操作系统就是 shell 脚本,自行搜索下), 内容为:
hexo clean
hexo g -d
b、修改配置文件(_config.yml),指定我的发布脚本
admin:
deployCommand: './deploy.cmd' # 注意这个前面的缩进是两个空格
重启 hexo ( ctrl+c 掉之前那个 hexo -s 进程)
虽然已经发布成功了,但是这个提示应该是编码的问题 (希望知道的小伙伴告知一下,当前 使用 ubuntu 虚拟机来绕过各种 windows 带来的问题也算是一种解决方案 - -)
5、rss 订阅,如果你需要可以跳过这个
1.安装插件:npm install hexo-generator-feed
2.在主目录blog下的配置文件_config.yml的末尾添加以下内容:
6、独立域名配置(可选)。我想当然的以为别名只要做个 CNAME 将独立域名指向 xxx.github.io 就可以了。实际上:还需要在 souce 文件夹下建一个名为 CNAME 的文件,其内容为独立域名(比如我的独立域名是 blog.hudeyong.com)
# Extensions
## Plugins: http://hexo.io/plugins/
#RSS订阅
plugin: hexo-generator-feed
#Feed Atom
feed:
type: atom
path: atom.xml
limit: 20
7、ssl 证书
采用的 https://www.cloudflare.com/zh-cn/ 的解决方案(免费)
8、评论用的是 https://valine.js.org/ (免费)
9、其他
默认主题我很喜欢。大家都一致性认为自带的主题很 LOW (lanscape), 我但是觉得这个是我最满意的主题,因为它足够经典(大气),其次是组件两栏布局我很喜欢。
主题: 默认的 landscape 主题在 node_module 下,文件夹 hexo_theme_landscape 就是,我将这个文件夹复制到 /theme/下来了,并改名为 landscape2, 可以可以方便的对主题进行定制修改(比如我去掉了底部的分享,本来还是将页内搜索功能弄下,最后试了一下没成功,作罢。)修改主题需要在 _config.yml 中修改 theme 的值。
关于站点的名字、描述等都在 _config.yml 中修改。
还要其他若干的小细节都没有记下来,实际上有一天通过搜索引擎找到我的这篇文章时,可能信息已经和你的 hexo 版本不兼容了。
TODO:
1、favicon 图标设置
2、站内搜索
参考了很多网站,非常感谢无私将自己踩坑记录方便后面的人少踩坑的人:
http://blog.haoji.me/build-blog-website-by-hexo-github.html?from=xa
https://blog.csdn.net/nineya_com/article/details/103384546
https://hexo.io/zh-cn/