hexo 博客搭建教程

一、安装 node

点击此处 下载 node 长期维护版并安装,安装完成后在 cmd 中输入 node -v 验证。

二、安装 git

点击此处 下载 git 并安装,安装完成后在 cmd 中输入 git 验证。

三、git ssh 配置

  1. 打开 git bash;
  2. 输入 ssh-keygen -t rsa -C "邮箱",其中邮箱中填写注册 git 时所使用的邮箱;
  3. 打开 Github 设置,进入 SSH and GPG keys 页面,填写信息,其中 Title 为自定义 key 的名称,key 为 电脑中的密钥,具体位置在 C:/Users/Administrator/.ssh/id_rsa.pub 中,将复制粘贴即可。

四、安装 hexo

  1. 在本地博客文件夹(打算写博客的文件夹)下打开 cmd ;
  2. 输入 npm install hexo-cli -g
  3. 安装好后输入 hexo init xxx 进行初始化,其中 xxx 为你的博客名称。
  4. 进入博客目录,输入 npm install 安装依赖;
  5. 输入 hexo s 将博客在本地运行起来,网页链接为 localhost:4000

六、使用 pages

  1. 打开 GitHub;
  2. 创建博客仓库,命名为 username.GitHub.io ,其中 username 为你 GitHub 账号的名称;

五、发布博客

  1. 在博客目录( hexo 的安装目录 )中打开 _config.yml
  2. deploy: 项下填写 type: gitrepo: xxx 以及 branch: main,其中 xxx GitHub 中博客仓库的链接并保存;
    !(deploy信息)[deploy信息.png#pic_center]
  3. url 站点信息改为自己的仓库链接并保存;
    !(url信息)[url信息.png]
  4. 通过 cmd(博客目录下)安装部署代码的插件:npm install hexo-deployer-git --save;
  5. 通过 cmd 配置 GitHub 信息:git config --global user.email "你的邮箱"git config --global user.name "用户名"
  6. 部署 hexo :hexo ghexo d,在跳转的页面输入账号密码;
  7. 访问 https://xxx.github.io/ 验证,其中 xxx 为你的账户名,即该链接为你的博客仓库名。

六、改换主题

  1. 在 hexo 官网中浏览不同主题,选选择目标并下载,一般推荐 next 主题;
  2. 将下载后的主题放在 themes 目录下;
  3. 在站点配置文件(即 hexo 的 _config.yml) 中修改 theme主题名,比如 next 主题为 next
  4. 依据需求修改主题配置文件 _config.yml ,该文件在主题目录中,非站点配置文件。

七、Latex

此步骤用于有写公式需求的用户,参考链接

1. 检查主题是否支持 Mathjax

打开主题 Readme ,查看是否有 Mathjax 字段,若有则依照说明开启 Mathjax 支持,不需后续步骤;若无则进行后续步骤。

2. 在 themes/Your-Theme-Name/layout/ 下新建文件 mathjax.ejs

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<% if (theme.mathjax.enable){ %>
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
tex2jax: {
inlineMath: [ ['$','$'], ["\\(","\\)"] ],
processEscapes: true
}
});
</script>

<script type="text/x-mathjax-config">
MathJax.Hub.Config({
tex2jax: {
skipTags: ['script', 'noscript', 'style', 'textarea', 'pre', 'code']
}
});
</script>

<script type="text/x-mathjax-config">
MathJax.Hub.Queue(function() {
var all = MathJax.Hub.getAllJax(), i;
for(i=0; i < all.length; i += 1) {
all[i].SourceElement().parentNode.className += ' has-jax';
}
});
</script>

<script type="text/javascript" src="<%- theme.mathjax.cdn %>"></script>
<% } %>

3. 在主题配置文件末尾添加:

1
2
3
4
# MathJax Support
mathjax:
enable: true
cdn: https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.6/MathJax.js?config=TeX-AMS-MML_HTMLorMML

4. 修改 themes/Your-Theme-Name/layout/post.ejs

在文件的 <main> 标签块中加入:

1
2
3
<% if (page.mathjax == true){ %>
<%- partial('mathjax') %>
<% } %>

5. 在需要写公式的文章头部添加字段启用:

mathjax: true

6. 卸载 hexo-math

npm uninstall hexo-math;

7. 替换渲染,使用 pandoc 版本:

1
2
npm uninstall hexo-renderer-marked --save
npm install hexo-renderer-pandoc --save

或使用 kramed 版本:

1
2
npm uninstall hexo-renderer-marked --save
npm install hexo-renderer-kramed --save

八、搜索引擎收录、提交

由于 Github Pages 反爬虫的特性,因此若想让自己的博客能够被搜索引擎检索,就需要将站点录入,下面以 Next 主题为例。

1. Google:需要登录

  • 用谷歌搜索 site:https://your_website.xxx
  • 在网站前缀中输入你的网页,验证资源
  • 选择 HTML 标记,点击复制
  • Blog/themes/next/layout/_partials/head.swig 文件顶部原有 标签下添加你复制的 标签
  • 使用 hexo 对你的博客进行部署,即:
    1
    2
    3
    hexo clean
    hexo g
    hexo d
  • 回到网页点击验证,因为网络同步的问题,此步骤可能需要延迟进行

2. baidu:需要登录

  • 进入 https://ziyuan.baidu.com/
  • 点击用户中心->站点管理->添加网站
  • 填写相关信息,使用 HTML 方法进行验证
  • 后续步骤同 Google

3. Bing:需要登录

  • 进入 https://www.bing.com/webmasters
  • Bing 可以使用 Google 收录,按提示操作即可

4. 生成站点地图

  • 安装插件:
    1
    2
    npm install hexo-generator-baidu-sitemap --save
    npm install hexo-generator-sitemap --save
  • 修改站点配置文件,添加以下内容:
    1
    2
    3
    4
    sitemap:
    path: sitemap.xml
    baidusitemap:
    path: baidusitemap.xml
  • 在 source 目录下创建 robots.txt 文件,内容如下:
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    User-agent: *
    Allow: /
    Allow: /archives/
    Allow: /categories/
    Allow: /tags/

    Disallow: /vendors/
    Disallow: /js/
    Disallow: /css/
    Disallow: /fonts/
    Disallow: /vendors/
    Disallow: /fancybox/

    Sitemap: https://你的域名/sitemap.xml
    Sitemap: https://你的域名/baidusitemap.xml
  • 使用 hexo 对你的博客进行部署,即:
    1
    2
    3
    hexo clean
    hexo g
    hexo d

5. 百度主动推送(此步骤与下个步骤冲突)

  • 安装插件:npm install hexo-baidu-url-submit --save
  • 登录百度搜索资源平台->普通收录->资源提交->API 提交,再推送接口中复制 token (在调用地址的最后面)
  • 在站点配置文件中添加:
    1
    2
    3
    4
    5
    baidu_url_submit:
    count: 100 # 提交最新的多少个链
    host: your_website # 在百度站长平台中添加的域名
    token: your_token # 秘钥
    path: baidu_urls.txt
  • 在站点配置文件中添加新的 deployer ,注意多个 deployer 需要用短横线配置
    1
    2
    deploy:
    - type: baidu_url_submitter # 百度
  • 使用 hexo 对你的博客进行部署,即:
    1
    2
    3
    hexo clean
    hexo g
    hexo d

6. 主动推送(此步骤包含百度主动推送)

  • 安装插件:npm install hexo-submit-urls-to-search-engine --save
  • 在站点配置文件中添加:
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    hexo_submit_urls_to_search_engine:
    # 提交最新的 n 个链接
    count: 10
    # 提交修改时间在 n 秒内的链接,单位秒。例如:
    # 有两个文件 a.txt 和 b.txt ,分别对应 https://yoursite.com/a.txt 和 https://yoursite.com/b.txt
    # 其更新时间距当前分别为 800s 和 1000s ( period 字段设为 900 )
    # 则 https://yoursite.com/a.txt 会被提交,https://yoursite.com/b.txt 不会
    period: 900
    # 提交链接的条件,可选值:count | period 。不同取值的含义如下:
    # count:应用上述的 count 配置项
    # period:应用上述的 period 配置项
    submit_condition: count
    # 是否向 Google 提交,可选值:1 | 0 ( 0:否; 1:是)
    google: 0
    # 是否向 Bing 提交,可选值:1 | 0 ( 0:否; 1:是)
    bing: 1
    # 是否向 Baidu 提交,可选值:1 | 0 ( 0:否; 1:是)
    baidu: 1
    # 文本文档的地址,要推送的链接会保存在此文本文档里
    txt_path: submit_urls.txt
    # 在百度站长平台中注册的域名
    baidu_host: https://yoursite.com/
    # 百度自动推送 API 的 token (获取方式见插件文档: https://cjh0613.github.io/blog/20200603HexoSubmitUrlsToSearchEngine.html )
    baidu_token: xxxxx
    # 在必应站长平台中注册的域名
    bing_host: https://yoursite.com/
    # 必应自动推送 API 的 token (获取方式见插件文档: https://cjh0613.github.io/blog/20200603HexoSubmitUrlsToSearchEngine.html )
    bing_token: xxxxx
    # 在谷歌站长平台中注册的域名
    google_host: https://yoursite.com/
    # 存放 google key 的 json 文件,放于网站根目录
    google_key_file: google_key.json
  • 在站点配置文件中添加新的 deployer ,注意多个 deployer 需要用短横线配置
    1
    2
    3
    4
    deploy:
    - type: cjh_baidu_url_submitter # baidu
    - type: cjh_google_url_submitter # Google
    - type: cjh_bing_url_submitter # Bing
  • 使用 hexo 对你的博客进行部署,即:
    1
    2
    3
    hexo clean
    hexo g
    hexo d

九、其他功能

1. 本地搜索

  • 安装插件:npm install hexo-generator-search --save
  • 修改主题配置文件:
    1
    2
    3
    # Local search
    local_search:
    enable: true
  • 修改站点配置文件:
    1
    2
    3
    4
    search:
    path: search.xml # 生成的搜索文件的路径
    field: post # 搜索文件的范围
    content: true # 是否搜索文章内容

十、问题及解决

1. Next 主题换页符号非正常显示

  • 打开 Blog\themes\next\layout\_partials\pagination.swig
  • <i class="fa fa-angle-left"></i> 替换为 <
  • <i class="fa fa-angle-right"></i> 替换为 >

2. TypeError: Cannot read property 'count' of undefined

  • 这是因为本文第八节中步骤 5、6 不兼容,推荐使用步骤 6 ,因此需要将步骤 5 的操作都删除
  • 还需命令:npm remove hexo-baidu-url-submit

十一、相关链接

  1. hexo
  2. next
  3. GitHub
  4. 我的博客