醉后不知天在水，满船清梦压星河

0%

GitHub Pages + Hexo + Next：博客搭建、功能设置及美化

发表于 分类于
本文字数： 4.8k 阅读时长 ≈ 4 分钟

使用Hexo博客框架搭建自己的个人博客，并部署到个人的GitHub上，选用NexT主题，添加一些使用小功能并进行界面的美化。

Hexo

Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown（或其他渲染引擎）解析文章，在几秒内，即可利用靓丽的主题生成静态网页。

搭建博客框架

搭建流程参照官网中文说明文档：

https://hexo.io/zh-cn/docs/

部署

将搭建在本地的博客通过GitHub Pages部署在个人的GitHub中。从而能通过 <你的 GitHub 用户名>.github.io 域名访问博客

参考教程：

https://www.jianshu.com/p/05289a4bc8b2
https://www.cnblogs.com/jackyroc/p/7681938.html

Next 主题

部署完成后，即可对博客做一些细节上的优化，增添小工具以及美化界面

参考教程：

https://zhuanlan.zhihu.com/p/30836436
https://io-oi.me/tech/hexo-next-optimization/

字体调节

Next主题默认字体为 font-size-medium = 1em ，有点大。通常来讲，Next主题控制字体大小的文件是在主题文件夹中的 source\css_variables 目录下的 base.styl 文件中，修改如下文件 ：

// Font size
$font-size-base           = (hexo-config('font.enable') and hexo-config('font.global.size') is a 'unit') ? unit(hexo-config('font.global.size'), em) : 1em;
$font-size-smallest       = .75em;
$font-size-smaller        = .8125em;
$font-size-small          = .875em;
$font-size-medium         = 1em;
$font-size-large          = 1.125em;
$font-size-larger         = 1.25em;
$font-size-largest        = 1.375em;

把 1em 改为 0.875em 即可:

// Font size
$font-size-base           = (hexo-config('font.enable') and hexo-config('font.global.size') is a 'unit') ? unit(hexo-config('font.global.size'), em) : .875em;
$font-size-smallest       = .75em;
$font-size-smaller        = .8125em;
$font-size-small          = .875em;
$font-size-medium         = 1em;
$font-size-large          = 1.125em;
$font-size-larger         = 1.25em;
$font-size-largest        = 1.375em;

插入本地图片

资源（Asset）代表 source 文件夹中除了文章以外的所有文件，例如图片、CSS、JS 文件等。比方说，如果你的Hexo项目中只有少量图片，那最简单的方法就是将它们放在 source/images 文件夹中。然后通过类似于 ![](/images/image.jpg) 的方法访问它们。

添加❤脚注

更改主题配置文件：

icon:
  # Icon name in Font Awesome. See: https://fontawesome.com/v4.7.0/icons/
  # `heart` is recommended with animation in red (#ff0000).
  name: heart #user
  # If you want to animate the icon, set it to true.
  animated: true
  # Change the color of icon, using Hex Code.
  # color: "#808080"
  color: "#ff0000"

搜索引擎优化

标题优化

给标题增加详细信息,更改 index.swig 文件 your-hexo-site\themes\next\layout: 

{% block title %}{{ title }}{%- if theme.index_with_subtitle and subtitle %} - {{ subtitle }}{%- endif %}{% endblock %}

	{% block title %}{{ title }}{%- if theme.index_with_subtitle and subtitle %} - {{ subtitle }}{%- endif %} - {{ theme.keywords }} - {{ config.title }}{{ theme.description }}{% endblock %}

修改链接

HEXO默认的文章链接形式为 domain/year/month/day/postname ，默认就是一个四级url，并且可能造成url过长，对搜索引擎是十分不友好的，我们可以改成 domain/postname 的形式。编辑站点 _config.yml 文件，修改其中的 permalink 字段改为 permalink: :title.html 即可。

permalink: :year/:month/:day/:title/
permalink: :title/

参考:

http://www.ehcoo.com/seo.html

SOE配置

参考：

https://www.jianshu.com/p/86557c34b671
https://blog.junyu.io/posts/0008-blog-seo.html

首页阅读全文设置

  1. 在文章中手动加入 <!--more--> 进行截断
  2. 通过在配置文件中加入代码，自动截断（但实验失败）。

字数统计及阅读时长

安装 hexo-wordcount 失败后采用下面方法：

npm install hexo-symbols-count-time --save

在配置文件加入设置：

symbols_count_time:  
  symbols: true  
  time: true  
  total_symbols: true  
  total_time: true

阅读次数统计

主题配置文件设置：

busuanzi_count:
  enable: true
  total_visitors: true
  total_visitors_icon: user
  total_views: true
  total_views_icon: eye
  post_views: true
  post_views_icon: eye

评论功能

Next主题已经集成了GitTalk,直接使用即可。首先，注册GitHub OAuth Apps，生成client_id 和 client_secret 。再修改主题配置文件：

gitalk:
  enable: true
  github_id: troublemeeter # GitHub repo owner
  repo: troublemeeter.github.io # Repository name to store issues
  client_id: # GitHub Application Client ID
  client_secret: # GitHub Application Client Secret
  admin_user: troublemeeter # GitHub repo owner and collaborators, only these guys can initialize gitHub issues
  distraction_free_mode: true # Facebook-like distraction free mode
  # Gitalk's display language depends on user's browser or system environment
  # If you want everyone visiting your site to see a uniform language, you can set a force language value
  # Available values: en | es-ES | fr | ru | zh-CN | zh-TW
  language:

指定页面不添加评论功能，在文章头部设置 comments: false：

---
title: 标签
date: 2019-12-10 00:21:09
type: "tags"
comments: false
---

参考教程：

https://mrluyc.github.io/2019/07/30/HexoNexT%E9%9B%86%E6%88%90Gitalk/

数学公式支持

安装 hexo-math：

$ npm install hexo-math --save

在配置文件加入设置：

math:
  engine: 'mathjax' # or 'katex'
  mathjax:
    # src: custom_mathjax_source
    config:
      # MathJax config

在Next主题配置文件更改设置为：

# Math Formulas Render Support
math:
  # Default (true) will load mathjax / katex script on demand.
  # That is it only render those page which has `mathjax: true` in Front-matter.
  # If you set it to false, it will load mathjax / katex srcipt EVERY PAGE.
  per_page: true
  # hexo-renderer-pandoc (or hexo-renderer-kramed) required for full MathJax support.
  mathjax:
    enable: true
    # See: https://mhchem.github.io/MathJax-mhchem/
    mhchem: false

在需要加载mathjax的文件的头部加入mathjax: true：

---
title: transformer
date: 2019-12-10 17:50:42
tags:
mathjax: true
---

代码高亮

不喜欢五颜六色，所以暂时未处理。

迁移

https://blog.csdn.net/White_Idiot/article/details/80685990

迁移完后，相关命令：新建Markdown文章，编辑文章

hexo new "post-name"

将相关更改推送到hexo分支

git add
git commit -m "..."
git push origin hexo

将静态文件推送到master分支

hexo clean # 如果配置文件没有更改，忽略该命令
hexo g -d

打赏功能

制作好微信收款码和支付宝收款码，保存至themes/next/source/images。并修改主题配置文件如下：

# Reward (Donate)
# Front-matter variable (unsupport animation).
reward_settings:
  # If true, reward will be displayed in every article by default.
  enable: true
  animation: true
  comment: 🤣~疯狂暗示~🤣

效果如下，不信试一试~

🤣~疯狂暗示~🤣