利用 Hexo + Github Pages 搭建博客

时间 2020-07-03

标签利用 hexo github pages 搭建博客栏目 Git 繁體版

原文原文链接

概述

个人博客
本文总结一下 Hexo 搭建博客的主要流程，可以在往后快速恢复博客环境。css

Hexo 的官方文档写的已经很全面了，本文仅将一些注意点列出。
欢迎加入前端交流群：749539640
安装 Hexo 的文档参考：html

Hexo 文档

前提

安装 Hexo 以前，你的电脑上须要有前端

Node.js
Git

若是是 Mac 用户，您在编译时可能会遇到问题，请先到 App Store 安装 Xcode，Xcode 完成后，启动并进入 Preferences -> Download -> Command Line Tools -> Install 安装命令行工具node

安装 Hexo

全局安装 hexo-cli：git

npm install -g hexo-cli

若是遇到权限的问题，可使用以下命令：github

sudo chown -R $(whoami) /usr/local/lib/node_modules/

设置 /usr/local/lib/node_modules/ 文件夹属于当前用户。web

此外，若是你要使用 root 权限安装的话，可使用 sudo -s 切为 root 用户进行相关操做。这么作的话，会将一些文件夹的默认属组设置为 root 了，不推荐。npm

npm 权限问题：gulp

建站

hexo init MyBlog
cd MyBlog
npm install

执行完毕以后，博客其实已经 OK 了：canvas

hexo g
hexo s

执行上面命令便可本地预览博客内容了。

部署

官宣-站点配置文件内容中介绍了不少字段的用途

Hexo 提供快速一键部署，将博客部署到 GIthub Pages。

安装 hexo-deployer-git：

$ cd MyBlog
$ npm install hexo-deployer-git --save

修改站点配置文件中的配置：

# npm install hexo-deployer-git --save
deploy:
- type: git
  repo: git@github.com:Michael728/michael728.github.io.git
  branch: master

执行部署：

hexo d

经常使用命令

hexo 经常使用指令

hexo version # 显示hexo版本
hexo new <title> # 建立新文章
hexo g/generate # 生成静态文件
hexo clean # 清除缓存文件和已生成的静态文件（public）
hexo server # 启动本地服务器
hexo d/deploy # 部署网站
hexo list <type> # 列出网站资料

npm 经常使用指令

npm install 模块名 -g --save # g全局安装 save安装包信息将加入到dependencies（生产阶段的依赖）
npm install gulp@3.9.1 # 指定版本
npm install # 该命令能够根据dependencies配置安装全部的依赖包
npm update [-g] 模块名
npm outdated 模块名 # 检查模块是否过期
npm ls -g # 查看全局安装的模块
npm uninstall 模块名
npm info hexo-cli # 查看hexo-cli模块的信息

Hexo 写做技巧

Note

语法：

{% note [class] [no-icon] %}
这里写你须要写的内容
{% endnote %}

// 注意上面的class和no-icon属性是能够选择的
[class]   : default | primary | success | info | warning | danger.
[no-icon] : Disable icon in note.

示例：

{% note success no-icon %}
success形式的类别
{% endnote %}

效果：
<p class="note note-success">success形式的类别</p>

这里使用 no-icon 表示不显示图标，可选，默认会带有图标。

使用主题自带 FontAwesome 图标

源码：

- <i class="fa fa-pencil"></i> 铅笔
- <i class="fa fa-cloud-upload"></i> 上传
- <i class="fa fa-download"></i> 下载

效果：

铅笔
上传
下载

文本居中

源码：

{% cq %}
人生乃是一面镜子，
从镜子里认识本身，
我要称之为头等大事，
也只是咱们追求的目的！
{% endcq %}

效果：

人生乃是一面镜子，
从镜子里认识本身，
我要称之为头等大事，
也只是咱们追求的目的！

主题自带 label 标签

首先在主题 _config.xml 配置：

# Label tag.
label: true

源码：

{% label primary@primary内容 %}

效果：
label primary@primary内容

Hexo 其余知识

图床

因为一直使用的是「微博图床」，渣浪微博和简书开启了图片防盗链，请你们在博客中加入如下标签来绕过：

<meta name="referrer" content="never" />

Next 主题只须要在 themes/next/layout/_partials/head/head.swig 中添加上面一行内容便可。

Next 主题

theme-next/hexo-theme-next

安装 Next

$ cd MyBlog
$ git clone https://github.com/theme-next/hexo-theme-next themes/next

Next 扩展都安装在themes/next/source/lib文件夹下

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

启动 Next 主题

编辑站点配置文件 _config.yml：

theme: next # 启用next主题

主题设置

next-开始使用

设置语言

站点配置文件：

language: zh-CN # 最新版中，再也不使用zh-Hans

设置菜单

编辑主题配置文件：

menu:
  home: / || home
  #about: /about/ || user
  #tags: /tags/ || tags
  #categories: /categories/ || th
  archives: /archives/ || archive
  #schedule: /schedule/ || calendar
  #sitemap: /sitemap.xml || sitemap
  #commonweal: /404/ || heartbeat

菜单内容的设置格式是：item name: link || icon。其中 `item name 是一个名称，这个名称并不直接显示在页面上，她将用于匹配图标以及翻译。

设置菜单项的显示文本。在第一步中设置的菜单的名称并不直接用于界面上的展现。Hexo 在生成的时候将使用这个名称查找对应的语言翻译，并提取显示文本。这些翻译文本放置在 NexT 主题目录下的 languages/{language}.yml （{language} 为你所使用的语言）。

icon 使用的是 fontawesome 图标，严格区分大小写。

设置头像

将准备好的头像放置在主题目录下的 source/images/ 中。

avatar:
  # In theme directory (source/images): /images/avatar.gif
  # In site directory (source/uploads): /uploads/avatar.gif
  # You can also use other linking images.
  url: /images/logo.jpg

百度统计

登陆百度统计，定位到站点的代码获取页面
复制 hm.js? 后面那串统计脚本 id，如：
编辑主题配置文件，修改字段 baidu_analytics 字段，值设置成你的百度统计脚本 id

阅读次数

使用 LeanCloud

参考这个为NexT主题添加文章阅读量统计功能

leancloud_visitors:
  enable: true # 启用了 valine，因此这里能够置为 false
  app_id: xxx
  app_key: xxx

设置 RSS

主题配置文件中，rss 字段设为空，启用，设为 false 则不启用。启用的话，须要安装插键：

npm install hexo-generator-feed --save

添加标签页面

新建页面 hexo new page tags
设置页面类型，编辑刚新建的页面，将页面的类型设置为 tags ，主题将自动为这个页面显示标签云

title: 标签
date: 2014-12-22 12:39:04
type: "tags"
---

若是有集成评论服务，页面也会带有评论。若须要关闭的话，请添加字段 comments 并将值设置为 false，如：

title: 标签
date: 2014-12-22 12:39:04
type: "tags"
comments: false
---

修改菜单，在菜单中添加连接。编辑主题配置文件，添加 tags 到 menu 中

标签示例：

title: 标签测试文章
tags:
  - Testing
  - Another Tag

请参阅 Hexo 的分类与标签文档，了解如何为文章添加标签或者分类

补充：

categories:
- Diary
tags:
- PS3
- Games

分类方法的分歧
若是您有过使用WordPress的经验，就很容易误解Hexo的分类方式。WordPress支持对一篇文章设置多个分类，并且这些分类能够是同级的，也能够是父子分类。可是Hexo不支持指定多个同级分类。下面的指定方法：

categories:
- Diary
- Life

会使分类Life成为Diary的子分类，而不是并列分类。所以，有必要为您的文章选择尽量准确的分类。

并列分类，了解一下：

categories:
- [Linux]
- [Tools]

并列+子分类，再了解一下：

categories:
- [Linux, Hexo]
- [Tools, PHP]

一样的方法，添加分类页面：

$ hexo new page categories

设置字体

设置字体可参考:官宣-字体

设置代码高亮主题

代码高亮预览

# Code Highlight theme
# Available value: normal | night | night eighties | night blue | night bright
# https://github.com/chriskempson/tomorrow-theme
highlight_theme: night eighties

侧边栏社交连接

主题配置文件：

social:
  GitHub: https://github.com/Michael728 || github
  微博: https://weibo.com/1838446070/profile?topnav=1&wvr=6 || weibo
  博客园: https://www.cnblogs.com/michael-xiang/ || globe
  知乎: https://www.zhihu.com/people/michaelXoX || globe
  Twitter: https://twitter.com/728_michael || twitter
  Telegram: https://t.me/michaelxiang || telegram

图标名称是 Font Awesome 图标的名字（没必要带 fa- 前缀）。 enable 选项用于控制是否显示图标，你能够设置成 false 来去掉图标

social_icons:
  enable: true
  icons_only: false
  transition: false

开启打赏功能

只须要主题配置文件中填入微信和支付宝收款二维码图片地址便可开启该功能：

reward_settings:
  # If true, reward would be displayed in every article by default.
  # You can show or hide reward in a specific article throuth `reward: true | false` in Front-matter.
  enable: true
  animation: false
  comment: 我知道是不会有人点的，但万一有人想不开呢👇

reward:
  wechatpay: /images/wechatpay.jpg
  alipay: /images/alipay.png

友情连接

# Blog rolls
links_icon: link
links_title: 关注列表 #Links
links_layout: block
#links_layout: inline
links:
  #Title: http://example.com
  Blog List: https://michael728.github.io/2018/09/16/blog-interesting/
  ZeeCoder: https://zcheng.ren/posts/
  ehlxr: https://ehlxr.me/
  卡瓦邦噶: https://www.kawabangga.com/
  David Dai: https://blog.stdioa.com/
  建站日志: https://michael728.github.io/2016/09/03/blog-logfile/

站点创建时间

订阅微信公众号

# Wechat Subscriber
wechat_subscriber:
  enabled: true
  qcode: /uploads/wechat-qcode.jpg
  description: 欢迎您扫一扫上面的微信公众号，订阅个人博客！

设置动画效果

主题配置文件设置。比较在意速度，能够关闭动画。

# Use velocity to animate everything.
motion:
  enable: true
  async: false
  transition:
    # Transition variants:
    # fadeIn | fadeOut | flipXIn | flipXOut | flipYIn | flipYOut | flipBounceXIn | flipBounceXOut | flipBounceYIn | flipBounceYOut
    # swoopIn | swoopOut | whirlIn | whirlOut | shrinkIn | shrinkOut | expandIn | expandOut
    # bounceIn | bounceOut | bounceUpIn | bounceUpOut | bounceDownIn | bounceDownOut | bounceLeftIn | bounceLeftOut | bounceRightIn | bounceRightOut
    # slideUpIn | slideUpOut | slideDownIn | slideDownOut | slideLeftIn | slideLeftOut | slideRightIn | slideRightOut
    # slideUpBigIn | slideUpBigOut | slideDownBigIn | slideDownBigOut | slideLeftBigIn | slideLeftBigOut | slideRightBigIn | slideRightBigOut
    # perspectiveUpIn | perspectiveUpOut | perspectiveDownIn | perspectiveDownOut | perspectiveLeftIn | perspectiveLeftOut | perspectiveRightIn | perspectiveRightOut
    post_block: fadeIn
    post_header: slideDownIn
    post_body: slideDownIn
    coll_header: slideLeftIn
    # Only for Pisces | Gemini.
    sidebar: slideUpIn

设置背景动画

编辑主题配置文件，搜索 canvas_nest 或 three_waves，根据您的需求设置值为 true 或者 false 便可

我只启用了 canvas_nest

canvas_nest: //cdn.jsdelivr.net/gh/theme-next/theme-next-canvas-nest@1.0.0/canvas-nest.min.js
  canvas_nest_nomobile: //cdn.jsdelivr.net/gh/theme-next/theme-next-canvas-nest@1/canvas-nest-nomobile.min.js

搜索--Local Search

$ npm install hexo-generator-searchdb --save

站点配置文件，新增以下内容：

search:
  path: search.xml
  field: post
  format: html
  limit: 10000

编辑主题配置文件，启用本地搜索：

# Local search
local_search:
  enable: true

不蒜子统计

编辑主题配置文件中的 busuanzi_count 的配置项：

busuanzi_count:
  enable: true
  total_visitors: true
  total_visitors_icon: user
  total_views: true
  total_views_icon: eye
  # 文章阅读次数，关闭，避免与leanclound_visitors冲突
  post_views: false
  post_views_icon: eye

fancybox

fancyBox is a tool that offers a nice and elegant way to add zooming functionality for images, html content and multi-media on your webpages

检查_config.yml 中是否开启了 fancybox
找到 vendors，把 fancybox 和 fancybox_css 设置成推荐值

参考：

[文章里面的图片点击没有反应，也没有放大效果 [solved]](https://github.com/theme-next...

内容分享

theme-next-needmoreshare2：

cd themes/next
git clone https://github.com/theme-next/theme-next-needmoreshare2 source/lib/needsharebutton

主题配置文件配置：

needmoreshare2:
  enable: true
  postbottom:
    enable: true
    options:
      iconStyle: box
      boxForm: horizontal
      position: bottomCenter
      networks: Weibo,Wechat,Douban,QQZone,Twitter,Facebook
  float:
    enable: false
    options:
      iconStyle: box
      boxForm: horizontal
      position: middleRight
      networks: Weibo,Wechat,Douban,QQZone,Twitter,Facebook

Next 评论配置很简单，支持很丰富。

front matter 中设置 comments: false，当前页就不会显示评论框了。

Disqus 评论启用，可是得网络畅通才能看到：

disqus:
  enable: true
  shortname: xxx
  count: true

编辑主题配置文件，将 disqus 下的 enable 设定为 true，同时提供您的 shortname。count 用于指定是否显示评论数量

vline

Valine这个评论系统也是用到了 leancloud

点击登陆或注册Leancloud;
建立应用(若是已经建立了博客应用，就不用再建立了)
获取 APP ID 和 APP KEY: 刚刚建立的应用 > 设置 > 应用 KEY

valine:
  enable: false # When enable is set to be true, leancloud_visitors is recommended to be closed for the re-initialization problem within different leancloud adk version.
  appid:  xxx # your leancloud application appid
  appkey:  xxx # your leancloud application appkey
  notify: true # mail notifier , https://github.com/xCss/Valine/wiki https://valine.js.org/notify.html
  verify: true # Verification code
  placeholder: ヾﾉ≧∀≦)o来啊，快活啊!  # comment box placeholder
  avatar: identicon # wavatar retro gravatar style https://github.com/xCss/Valine/wiki/avatar-setting-for-valine
  guest_info: nick,mail,link # custom comment header
  pageSize: 10 # pagination size
  visitor: true # leancloud-counter-security is not supported for now. When visitor is set to be true, appid and appkey are recommended to be the same as leancloud_visitors' for counter compatibility. Article reading statistic https://valine.js.org/visitor.html

visitor 文章访问量统计。
recordIP，默认是 fasle，是否记录评论者IP
valine 配置项查看

头像设置，能够用你对应的邮箱设置 Gravatar，这样你评论时，就是注册时使用的邮箱了。

邮件提醒，进入Leancloud>选择你的评论所存放的应用>设置>邮件模板，按下图设置好用于重置密码的邮件主题>而后保存:

<p>Hi, {{username}}</p>
<p>
你在 {{appname}} 的评论收到了新的回复，请点击查看：
</p>
<p><a href="https://michael728.github.io/" style="display: inline-block; padding: 10px 20px; border-radius: 4px; background-color: #3090e4; color: #fff; text-decoration: none;">立刻查看</a></p>

参考：

hexo next 新增阅读排行页面

参考这两个教程：

在Hexo博客中加入豆瓣读书页面

hexo-douban 能够实现生成豆瓣读书、电影、游戏的页面。具体的使用方法能够看项目的主页或者这篇文章

在Hexo博客中加入豆瓣读书页面

hexo clean && hexo douban -bm && hexo g &&hexo deploy

看板娘

EYHN/hexo-helper-live2d Hexo 博客照着配置就行
live2d-看板娘预览
用Live2D让看板喵入住你的Hexo博客吧(^o^)/~
给博客添加能动的看板娘(Live2D)-关于模型的二三事 Hexo 博客看板娘配置进阶
博客园添加Live2d看板娘博客园增长看板娘