Bootstrap

Hexo入门采坑总结

Hexo的静态页面感觉比WordPress,TypeEcho 这些动态博客相比快好多,但是入门还是遇到了一些坑。

安装

中文官网
https://hexo.io/zh-cn/

npm安装
npm install hexo-cli -g

新建项目

hexo init blog
cd blog
npm install
hexo server

更换主题

找到主题的Github仓库,clone到本地,修改项目配置文件_config.yml中的theme属性和主题文件夹同名。

Hexo的主题一般是个人开发的静态网站,再上传社区,所以有些主题的国际化并没有做的很好,单纯修改language属性并没有作用,很多单词是硬编码在模板中,需要通过全局搜索替换使其真正国际化

Markdown插入图片

  1. 使用图床,然后使用网络图片Url,用这种方式在访问的时候不会占用服务器带宽,但是管理图片的上传图片比较麻烦。

  2. 使用Base64编码字符串,也比较麻烦,需要转码工具。

  3. 使用Markdown原生语法,借助hexo-asset-image插件,设置_config.yml文件中的post_asset_folder属性为true,让每次创建的md文件都附带一个同名文件夹用以存放资源文件,然后将图片放到资源文件夹中,用md语法引入

    ![test](xxx/test.png)

    这里用了hexo-asset-image版本为1.0.0+,发现图片路径经过编译后是/.com/xxx/test.png其实是1.0.0版本有问题,用0.0.1旧版本后一切正常

环境

我还是习惯用JetBrain的全家桶,WebStorm写blog,加上Markdown Navigator的JetBrain插件,方便对md文件格式化以及快速生成文本配合用jb自带的部署功能配置remote host,加上自动上传功能,能够很方便的实时更新线上网站,写前端和php挺舒服的。

其他

  • hexo server 这条命令能够在本地开启hexo服务端,可以监听md文件的变化,但是发现并不能监测_config.yml文件的变化,而且在修改配置文件之后不重启server还有可能变量不存在错误
  • 对在md文件头部去掉的category,在目录页不会马上更新,不知是否是缓存的问题
;