Hexo+GitHubPages搭建博客的疑难问题

发表于 | 分类于 | 阅读次数:

首先，这篇文章并不是一个搭建博客的教程，这里主要说说Hexo+gitpages搭建博客过程中需要注意的的问题。

命令格式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
hexo new "postName" #新建文章
hexo new page "pageName" #新建页面
hexo generate #生成静态页面至public目录
hexo server #开启预览访问端口（默认端口4000，'ctrl + c'关闭server）
hexo deploy #将.deploy目录部署到GitHub
hexo help  # 查看帮助
hexo version  #查看Hexo的版本
hexo deploy -g  #生成加部署
hexo server -g  #生成加预览
命令的简写
hexo n == hexo new
hexo g == hexo generate
hexo s == hexo server
hexo d == hexo deploy

部署三部曲

1
2
3
hexo c
hexo g
hexo d

目录简要说明

1
2
3
4
public --------------> 包含发布后的文件
source --------------> 包含发布前的文件，文章在这里写
themes --------------> 主题放在这里
_config.yml ---------> 主配置文件

引用自己文章和页面

  • 引用自己文章

    1
    {% post_link welcome %}

  • 引用自己根目录的页面

    1
    [查看let在for中的应用demo](/demo/es6/let/let在for中的应用.html)

配置说明

  • 博客信息、发表文章、博客主题等设置，在根目录下的_config.yml中设置
  • 主题内部有_config.yml，可设置Scheme等
  • 配置文件_config.yml请确认您使用空格进行缩进，并确认冒号后有加上一个空格

文字设置题目、分类、标签

在Markdown文件的开头添加，你的文章头部都应该包含

1
2
3
4
5
---
title: 你的题目
tags: 你的标签
category: 你的分类
---

category设置注意事项

Hexo默认生成的目录为year/month/day/title/可以修改为category/title/，
在主配置文件中修改permalink即可

1
2
#permalink: :year/:month/:day/:title/
permalink: :category/:title/

另外category的名称建议不要用js、css、images等

Hexo渲染时排除部分文件或目录

主配置文件_config文件中提供了skip_render过滤配置

注意

只有source目录下的文件才会发布到public（能够在网络上访问到），因此Hexo只渲染source目录下的文件。skip_render参数设置的路径是相对于source目录的路径。

设置排除项

假设source目录下的文件如以下目录树所示

1
2
3
4
5
6
7
8
9
10
11
12
├─ demo
|  ├─ js-view-size
|  |  ├─ 1.html
|  |  └┈ 2.html
|  ├─ other
|  |  ├─ 3.html
|  |  ├─ 4.html
|  |  └┈ 5.md
|  ├─ 6.html
|  └┈ 7.md
├─ sohu.html
└┈ google.html

排除单个文件

  • 排除sohu.html

    1
    skip_render: 'sohu.html'

  • 排除3.html

    1
    skip_render: 'demo/other/3.html'
排除多个文件
  • 排除sohu.html和google.html
    1
    2
    3
    skip_render:
      - 'sohu.html'
      - 'google.html'

或者

1
skip_render: '*.html'

排除source/demo/other目录中的所有html文件
1
skip_render: 'demo/other/*.html'
排除baidu.html和google.html以及整个source/demo目录
1
2
3
skip_render:
  - '*.html'
  - 'demo/**'

发布到Git

1
2
3
4
deploy:
  type: git
  repo: 仓库地址
  branch: master

安装 hexo-deployer-git，否则会报 ERROR Deployer not found: git 的错误。
仓库地址建议用SSH地址，报错请换http尝试

绑定域名

  • 购买域名
  • 添加域名解析：
    添加两条 CHAME 值（主机记录分别为 www 和 @），内容为你的博客在 GitHub 上的地址：
  • 在GitHubPage中的配置，反应到本地就是，在你本地的Hexo项目根目录下找到 source 目录，在 source 根目录下创建CNAME文件注：没有后缀）里面写入你要绑定的域名如：flyoob.com保存退出即可，注意不要忘了 git push 一次，把这个文件同步到 GitHub。

给github添加README

众所周知hexo会把文件夹内的所有md文件解析成html，而github的readme只支持MD格式。（所以想在这里直接插html绕过限制的就只能说残念了）
网上之前很多方法，不过都没有说到点子上，因为即使把README.MD文件放到source或者theme对应的source文件夹下，再加上layout:false，hexo还是会把文件解析掉。
另外有一种不怎么优雅的解决方法是把’README.MD’的后缀去掉，改成’README’,不过这样的话github只能支持部分解析，不会当做一个完整的MD文件来处理，样式上和期待值有差别。正确的解决方法其实很简单：

把’README.MD’文件的后缀名改成”MDOWN”然后扔到blog/source文件夹下即可，这样hexo不会解析，github也会将其作为MD文件解析

文章添加代码块有注释时的高亮

建议对应代码块语法选择相应的注释符号。比如html用<!-- -->,css用/* */，否则可能会出现代码不高亮或者高亮有问题的情况。

MarkDown里 table 的语法

MD写法：

1
2
3
4
5
| 链接 | 结果 | 原因 |
|:-----|:---:|----------:|
|文本内容| **`是`** |同协议同域名同端口|
|文本内容| **`是`** |同协议同域名同端口|
|文本内容| **`是`** |同协议同域名同端口|

输入结果：

链接 结果 原因
文本内容 是 同协议同域名同端口
文本内容 是 同协议同域名同端口
文本内容 是 同协议同域名同端口

网站优化

Hexo博客优化
Hexo博客压缩优化
不过不如gulp来个压缩合并直接有效

参考文章

Hexo技巧收集-不定期更新
Hexo 博客部署到 GitHub
Hexo博客搭建时遇到的一些问题
Hexo配置教程
为NexT主题添加文章阅读量统计功能
自定义 Hexo 博客代码块

文档

NexT开始使用
Hexo配置