hexo+github搭建博客

Hexo部分

安装

$ npm install -g hexo-cli

安装hexo后，在指定文件夹下建立博客目录(hexo init命令会自动执行npn install命令)

$ hexo init <folder>
$ cd <folder>

生成的目录结构如下：

.
├── _config.yml
├── package.json
├── scaffolds
├── source
|   ├── _drafts
|   └── _posts
└── themes

主题

以hexo-theme-next主题为例，在博客根目录下执行：

git clone https://github.com/iissnan/hexo-theme-next themes/next

修改站点配置文件，修改theme字段为next

theme: next

指令

init

新建一个网站。如果没有设置 folder ，Hexo 默认在目前的文件夹建立网站。

$ hexo init [folder]

new

新建一篇文章

$ hexo new <title>

generate

生成静态文件

$ hexo generate

可简写为

$ hexo g

server

启动服务器，默认访问网址为： http://localhost:4000/

$ hexo server

deploy

$ hexo deploy

clean

清除缓存文件 (db.json) 和已生成的静态文件 (public)。在某些情况（尤其是更换主题后），如果发现对站点的更改无论如何也不生效，可能需要运行该命令。

$ hexo clean

部署

以部署到GitHub为例，首先安装hexo-deployer-git，

$ npm install hexo-deployer-git --save

修改配置文件：

deploy:
  type: git
  repo: https://github.com/yaeljiao/yaeljiao.github.io.git
  branch: master

其他技巧

设置阅读全文

Hexo官方推荐在文章中添加``进行手动截断

侧边栏

修改字段 sidebar.display ，支持的选项有：

• post - 默认行为，在文章页面（拥有目录列表）时显示
• always - 在所有页面中都显示
• hide - 在所有页面中都隐藏（可以手动展开）
• remove - 完全移除

hexo图片的引用问题

​ 对于文章中的图片引用，我认为使用图床是最佳的方案，无奈公司内网屏蔽了一切跟网盘有关的网站，所以只能从本地引用静态资源了。之前的做法是在_post同级目录下创建一个img文件夹，在Markdown编辑器中以相对路径的方式引用是没有问题的。但是问题是，使用hexo g生成的时候，hexo并没有把img内的图片正常的路径转换。于是在网上找了找相关的解决办法，如下：

1. 确认_config.yml 下的post_asset_folder:true。这样每次hexo new新的文章时，hexo会自动建立一个与文章同名的文件见，所有的静态资源可以放在这个同名文件夹下。
2. 安装hexo-asset-image插件，给图片自动提供一个绝对路径（该具体原理并没有深究）

参考：

hexo博客图片问题

hexo-asset-image