Abstract
  1. 安装 git
  2. 安装 Node.js
  3. 安装 Hexo 框架
  4. 创建 Hexo 项目
    1. 创建本地项目文件夹
    2. 修改 deploy
    3. 更换主题
    4. 安装主题
    5. 启用主题
    6. 验证主题
    7. 主题设定
    8. 上传本地项目
    9. 域名绑定
    10. 404、关于、标签
    11. 插件
      1. 几个常用的插件：
  5. 其他
  6. 结束语
Keywords Hexo  建站 
Citation Yao Qing-sheng.Hexo 建站过程总结.FUTURE & CIVILIZATION Natural/Social Philosophy & Infomation Sciences,20191122. https://yaoqs.github.io/20191122/hexo-jian-zhan-guo-cheng-zong-jie/

Hexo 建站过程总结

Hexo 是一个基于 Node.js 快速、简洁且高效的博客框架，可以将 Markdown 文件快速的生成静态网页，托管在 GitHub Pages 上。

Hexo 和 WordPress 有很大的不同，个人觉得 Hexo 更加方便快捷，没有 WorldPress 那么臃肿和繁琐，不需要主机空间，不需要数据库。所有的数据都是保存成 html 静态的页面。而且可以放在 GitHub 上面挂载，自己只需要购买一个域名就可以了，甚至连域名都不需要购买，用 GitHub 自己提供的域名也是不错的 ——XXX.github.io。

安装 git

无需赘言。安装完成后在命令行窗口输入：git --version，出现版本号则说明安装成功。

安装 Node.js

安装完之后，打开 Git Bash，输入：npm -v
同样的，出现版本号则说明安装成功。

安装 Hexo 框架

在 Git Bash 中输入： npm install -g hexo-cli

如无法安装可使用替代命令：cnpm install -g hexo-cli

创建 Hexo 项目

创建本地项目文件夹

假设创建一个名为 hexo 的项目，项目目录就放在：E:\ 目录下，所以我们在 E:\ 目录下创建一个 hexo 目录。现在这个项目的全路径是：E:\hexo

1
2
3
4
5
6
打开 Git Bash
进入该目录： cd E:\hexo
然后执行 hexo init
最后执行 npm install
安装完成后 E:\hexo 中应该有这几个文件 node_modules scaffolds source themes_config.yml package.json
启动服务 hexo server

在浏览器中访问： http://localhost:4000/ 即可看到 Hexo 页面。

修改 deploy

这里需要在 GitHub 上面申请一个 Git Pages。

接下来打开根目录 hexo_config.yml，找到最下面的 deploy。这是我的 deploy，你只需把我的用户名改为你的即可：

1
2
3
4
deploy:
    type: git
    repo: git@github.com:yaoqs/yaoqs.github.io.git
    branch: master

更换主题

Hexo 自带的主题真的感觉很一般，在 Hexo 社区中有很多优秀的主题可以选择，知乎中有很多的推荐。

NexT 的主题，这个主题提供的文档很全面，对新人很友好。下面以这个主题为例，优化博客。也可以使用自定义主题。

安装主题

让 Git Bash 保持在 E:\hexo 目录下，然后输入命令：git clone https://github.com/iissnan/hexo-theme-next themes/next

启用主题

打开根目录下的 _config.yml (这个文件主要是用于站点全局的配置)，找到 theme 字段，并且将值改成 next。注意，theme： 和 next 之间是有一个空格的。即 theme: next

验证主题

验证之前， 我们使用 hexo clean 来清除 Hexo 的缓存。

首先启动 Hexo 本地站点，并开启调试模式（即加上 --debug），整个命令是 hexo s --debug。

当命令行提示出：INFO Hexo is running at http://0.0.0.0:4000/. Press Ctrl+C to stop.
此时就可以使用浏览器访问 http://localhost:4000，检查站点是否正确运行。

主题设定

上传本地项目

首先要生成自己 git 本地的私钥和公钥，并将公钥放到自己的 GitHub 上面。

要把本地的静态博客同步到 Github，我们还需要先安装两个跟部署相关的 hexo 插件：继续在 Git Bash 中输入：

1
2
cnpm install hexo -server --save
cnpm install hexo-deployer-git --save
1
2
3
4
5
6
打开 Git Bash
cd E:\hexo
hexo clean //清除项目缓存
hexo g // hexo generate的缩写
hexo s // hexo server的缩写
hexo d // hexo deploy的缩写

更多的命令可以参考 Hexo 的官方文档 https://hexo.io/zh-cn/docs/

域名绑定

首先我们要一个 CNAME 文件，把该文件放在 E:\hexo\source 目录下，以后一些需要放在根目录的资源文件都可以放这里。在 GitHub 页面也可以建立这个文件。然后在文件里输入你要绑定的域名，比如说 romition.com。

接着我们要到 DNSPOD 或者万网上面设置域名解析。

设置 CNAME 为自己 github 上面的地址 比如 XXXXXX.github.io. 注意这里最后面有个点设置 A 为 103.245.222.133

404、关于、标签

在新的站点搭建好后，404、关于、标签 这三项内容一般需要自定义设置。在项目根目录下 (E:\hexo) 下启动 Git Bash 。

  • 新增一个 404 页面：hexo new page 404
  • 新增一个 关于 页面：hexo new page about
  • 新增一个 标签 页面：hexo new page tags

插件

和 WordPress 一样，Hexo 也是有很多插件可以使用的。

  • 插件官网：https://hexo.io/plugins/
  • 安装插件：npm install 插件名 --save
  • 卸载插件：npm uninstall 插件名
  • 更新插件和博客框架（需要在根目录下）：npm update

几个常用的插件：

  • 支持 RSS：npm install hexo-generator-feed --save

  • Markdown 解析和渲染的插件

    • hexo-renderer-marked： Hexo 默认的 Markdown 的渲染器，GitHub 地址：hexojs/hexo-renderer-marked，安装方式：npm install hexo-renderer-marked —save
    • hexo-renderer-kramed：基于 hexo-renderer-marked 二次开发的渲染器，完善了对 Mathjax 的支持，仍然不支持插件的扩展，不支持 emoji 表情。GitHub 地址：sun11/hexo-renderer-kramed，安装方式：npm install hexo-renderer-kramed --save
    • hexo-renderer-pandoc：与 hexo-renderer-marked 类似，GitHub 地址：wzpan/hexo-renderer-pandoc，安装方式：npm install hexo-renderer-pandoc --save。
    • hexo-renderer-markdown-it：https://www.jianshu.com/p/588ab3d22eb8 支持 Mathjax 语法（支持不太好），支持 Markdown 以及 CommonMark 语法，渲染速度比 hexo-renderer-marked 快，支持插件配置，支持标题带安全的 id 信息，支持脚注（上标，下标，下划线）。 GitHub 地址：hexojs/hexo-renderer-markdown-it，安装方式：npm i hexo-renderer-markdown-it —save
    • hexo-renderer-markdown-it-plus：支持 Katex 插件并默认启用，默认启用插件列表：markdown-it-emoji，markdown-it-sub，markdown-it-sup，markdown-it-deflist，markdown-it-abbr，markdown-it-footnote，markdown-it-ins，markdown-it-mark，@iktakahiro/markdown-it-katex，markdown-it-toc-and-anchor。 GitHub 地址：CHENXCHEN/hexo-renderer-markdown-it-plus，安装方式：npm i hexo-renderer-markdown-it-plus —save

  • 生成站点地图：npm install hexo-generator-sitemap --save

  • 生成百度站点地图：npm install hexo-generator-baidu-sitemap --save

  • HTML 压缩：npm install hexo-html-minifier --save

  • 搜索 npm install hexo-generator-search --save
    在 Hexo 根目录下的 _config.yml 文件中，新增以下的配置项：

    1
    2
    3
    search:
        path: search.xml
        field: post

  • 文章字数统计插件 npm i --save hexo-wordcount

  • 代码高亮 npm i -S hexo-prism-plugin --save
    修改 Hexo 根目录下 _config.yml 文件中 highlight.enable 的值为 false，并新增 prism 插件相关的配置

  • hexo-generator-json-feed 生成 json 格式的文件而不是 xml 用以保存 feed 数据

  • 短链生成 npm install hexo-abbrlink --save
    自动生成短链例如 abbrlink: 18338（据说此种格式有利于 SEO 优化）。如有必要可直接修改 Front-matter（文章信息头）进行自定义 abbrlink: 我的文章 - my-posts-12138，尽量使用字母和数字，空格用 - 替代，提升链接可读性。

  • 文章置顶先 npm uninstall hexo-generator-index --save
    再 npm install hexo-generator-index-pin-top --save
    在 Front-matter 插入 top:100，数字越大文章在首页的位置越靠前。

  • 文章加密 npm install --save hexo-blog-encrypt
    在文章信息头插入
    password: mikemessi abstract: 有东西被加密了，请输入密码查看.
    message: 您好，这里需要密码.
    解密后部分元素可能无法正常显示或者表现，见详细配置

  • 文章隐藏 npm install hexo-hide-posts --save
    默认 hidden: true 用于隐藏，hidden 可自定义为自己喜欢的名字。

  • 生成 feed 订阅（RSS） npm install hexo-generator-feed --save
    默认只获取文章摘要或者前 140 个字符

  • 站点地图 sitemap
    自动生成 sitemap.xml ，可提交给搜索引擎（百度拉胯，谷歌和雅虎收录极快，Bing 也还行）。搜索 site:loafing.cn 查看被收录情况。

  • 不跟踪外链 npm i hexo-filter-nofollow --save
    对 SEO 友好。 可排除自定义域名。

  • 自动提交链接至搜索引擎 npm install --save hexo-submit-urls-to-search-engine
    提交效果不错，但百度放出页面的速度依旧感人，谷歌、必应、雅虎的收录速度很快。

  • 首选网页 canonical npm install --save hexo-auto-canonical
    SEO 友好，为重复网址或重复网页 / 类似网页指定规范网址。加进主题的 \themes\cards\layout_partial\head\index.ejs

    1
    <%- autoCanonical(config, page) %>

    比如我这里无论是 http://127.0.0.1:4000/tags/ 、https://coding.loafing.cn/tags/ 还是 https://blog.loafing.cn/tags/ 都自动在网页源码的 </head> 标签之前加入 < link rel=“canonical” href="https://loafing.cn/tags/ " > 有利于将搜索结果全部引导至首选域名。参考：整合重复网址 - Google Search Console

  • 可视化编辑 npm install --save hexo-admin

  • hexo 搭建静态博客 (五)—— 其他一些 DIY

  • 音乐播放 aplayer npm install --save hexo-tag-aplayer

    1
    {% meting "7635339557" "tencent" "playlist" "order:random" "preload:none"%}

  • 视频播放 dplayer npm install hexo-tag-dplayer --save
    比 video 标签好用。功能强大，支持字幕引入。

    1
    {% dplayer "url=https://lyfclub.herokuapp.com/videos/%E5%88%98%E4%BA%A6%E8%8F%B2.mp4"  "pic=https://wxt.sinaimg.cn/thumb300/006UN1LVgy1gfauot0mgvj30go0byt97.jpg?tags=%5B%5D" "loop=yes" "theme=#FADFA3" "autoplay=false" %}

  • 豆瓣电影 / 读书 / 音乐卡片 npm install hexo-douban-card --save

    1
    2
    3
    {% douban movie 24745500 %}
    {% douban book 30376420 %}
    {% douban music 35099703 %}

  • pdf npm install --save hexo-pdf

    1
    2
    3
    {% pdf http://7xov2f.com1.z0.glb.clouddn.com/bash_freshman.pdf %}
    {% pdf ./bash_freshman.pdf %}
    {% pdf https://drive.google.com/file/d/0B6qSwdwPxPRdTEliX0dhQ2JfUEU/preview %}

  • 代码压缩 npm install hexo-neat --save
    只压缩 html 就够了吧，去除多余空格和换行。

    1
    2
    3
    4
    neat_enable: true
    neat_html:
      enable: true
      exclude:

    实测：用手机总共生成 153 个文件，hexo g 的时间从压缩前的 4.43 秒增至 9.95 秒，生成的文件大小从 4.02 MB 缩至 3.62 MB。耗费少许生成静态文件的时间，提高页面渲染速度，值得😌
    不知道怎样排除 /tags/ 标签 / 和按日期归档这类没多大必要压缩的页面 html 文件，浪费时间🤔

  • 文字上方注释 Ruby
    相关介绍见：https://wikipedia.org/wiki/Ruby_character
    之前用的 Ruby Character 过于古早，手机安装成功但电脑上使用有问题，弃疗。加上我已经卸载 hexo 默认的 markdown 渲染器，改用 hexo-renderer-markdown-it（具体使用方法这里不阐述，太长），正好可以试试 markdown-it-ruby

    npm install markdown-it-ruby --save

    站点根目录配置引入插件

    1
    2
    3
    4
    markdown:
      # xxxxxx其它配置项
      plugins:
         - markdown-it-ruby

    用法：

    1
    2
    3
    {特朗普|川建国} → 特朗普
    {特朗普|chuān jiàn guó} → 特朗普
    {超電磁砲|レールガン} → 超電磁砲

    如果自己的输入法输入带声调符号的拼音有困难，还可以使用 hexo-pinyin-ruby-marks。

    npm install hexo-pinyin-ruby-marks

    1
    {% pinyin 初音未来|chu1 yin1 wei4 lai2 %} → 初音未来

  • 文字遮盖效果 Spoiler npm install hexo-spoiler --save
    预览效果站点根目录配置填写

    1
    2
    3
    4
    spoiler:
        style: blur # 或者box
        color: black # 仅当 style 为 box 时起效
        p: false # 没懂啥意思，不管它
    1
    2
    3
    4
    5
    6
    {% spoiler option:value text... %}

    {% spoiler 默认配置效果 %} → 默认配置效果
    {% spoiler style:blur 糊里糊涂 %} → 糊里糊涂
    {% spoiler style:box 黑不溜秋 %} → 黑不溜秋
    {% spoiler style:box color:red 红光闪闪 %} → 红光闪闪

    可见 box 颜色遮盖条的高度跟文字尺寸不匹配，显得尴尬，还是用 blur 吧😌

  • 分栏 npm install hexo-tag-common
    具体使用说明：Tabs-NexT

    有效节省空间 预览

  • 数据可视化工具 Chartjs

    支持混合重叠，轻便简洁，效果很漂亮，但静态页面改起来好像不太方便😌

  • 盘古之白 npm install hexo-pangu

    送给所有中英混输必须加空格的强迫症患者。

  • 死链检查 npm install hexo-broken-links-checker --save-dev
    npx hexo check-links

    WARN The following links are broken:

    • https://

    默认配置就够了，偶尔用一次。

  • Instagram 分享 npm install hexo-tag-instagram --save

    1
    {% instagram false https://www.instagram.com/p/B2vyQrxHuIN/ 100% %}

  • 二维码 qrcode npm i hexo-tag-qrcode

    1
    2
    3
    {% qrcode "自定义内容" %} 👉
    # 完整写法
    {% qrcode "hello, world" alt:"hello, world" title:"hello, world" hello world %}

  • 悬浮注释 hint npm install hexo-tag-hint --save

    1
    2
    3
    {% hint '这里是正文' '这里是注释 :D' %}
    <br> # 换行判定好像有问题，必须手动加 br 标签
    {% hint 'I\'m Groot' 'I\'m Groot' %}

    这里是正文 I’m Groot
    碰到单引号 ’ 需要反斜杠 \ 转义

  • 动态终端代码演示 npm install @heowc/hexo-tag-gdemo
    介绍及效果预览

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    {% gdemo_terminal command [最小高度] [窗口标题] [延迟时间] [提示字符] [唯一id] [高亮语言] %}
    content
    {% endgdemo_terminal %}

    {% gdemo_terminal 'node ./demo' '250px' 'bash' '500' '$' 'demo-teriminal' %}
    Hello World!
    {% endgdemo_terminal %}

    用 ; 隔开代码

    {% gdemo_terminal 'cd /usr/bin;./node ./demo' '250px' 'bash' '500' '$' 'demo-teriminal' %}
    Hello World!
    {% endgdemo_terminal %}

    {% gdemo_editor '250px' 'bash' '500' 'demo-editor' %}
    function greet(){
    console.log("Hello World!");
    }

    greet();
    {% endgdemo_editor %}

「推荐」本站用到的 hexo 插件

其他

搜索引擎通过一种程序 robot（又称 spider），自动访问互联网上的网页并获取网页信息。我们可以在博客中创建一个纯文本文件 robots.txt，在这个文件中声明该网站中不想被 robot 访问的部分，这样，博客的部分内容就可以不被搜索引擎收录了，或者指定搜索引擎只收录指定的内容。

在根目录（E:\hexo\source） 目录下，新增一个 robot.txt 文件。

robot.txt 文件内容：

1
2
3
4
5
6
7
8
User-Agent: *
Allow: /
Disallow: /background
Disallow: /css
Disallow: /img
Disallow: /js
Sitemap: http://romition.com/sitemap.xml
Sitemap: http://romition.com/baidusitemap.xml

结束语

在搭建过程中可能会遇到各种各样的问题，那么 Google 会是最好的老师。这次写的很简单，在以后我我会逐步完善。

References

*Corresponding Author: Yao Qing-sheng <Email: 350788415@qq.com> BY-NC-SA .

  1. Yao Qing-sheng.Hexo 建站过程总结.FUTURE & CIVILIZATION.Natural/Social Philosophy & Infomation Sciences,20191122.https://yaoqs.github.io/20191122/hexo-jian-zhan-guo-cheng-zong-jie/
  2. 版权声明：本文为「LordYao」的原创文章，遵循 CC 4.0 BY-NC-SA 版权协议，转载请附上原文出处链接及本声明。
    原文链接： https://yaoqs.github.io/20191122/hexo-jian-zhan-guo-cheng-zong-jie/