Hexo博客搭建

本文最后更新于：1 年前

此篇废弃，移步至另一篇从零开始的Hexo博客搭建（一）

现在市面上的博客平台有很多，比方说博客园、简书、CSDN等等，功能完善，专注写作即可，而且还有社区，用户交流也很方便，但是这些平台都或多或少有一定限制，还有各种广告。由此，我们可以自己搭建一个博客网站，但是自己搭建又要买服务器还有域名，还要自己制作网站，而且还要定期进行维护，不光花钱还费时间，不过还有一个办法，就是把博客放到GitHub page上面，这样只要专注写作就行了，不需要定期维护，然后再套上Hexo这个博客框架，可以直接生成一个漂亮的网站，这样搭建一个博客就容易多了。

Hexo简介
Hexo是一款基于Node.js的静态博客框架，依赖少易于安装使用，可以方便的生成静态网页托管在GitHub和Coding上，是搭建博客的首选框架。官网对Hexo的介绍是快速、简洁且高效的博客框架。

环境搭建

安装Node.js

Node.js 为大多数平台提供了官方的安装程序。可以去官网下载 | Node.js下载

安装完成后打开命令行查看是否安装成功：

1
2
node -v
npm -v

安装Git

Git是目前世界上最先进的分布式版本控制系统，我们用它来管理Hexo博客文章，上传到GitHub。去官网下载对应系统的Git安装程序或查看命令行进行安装。

安装Hexo

在Node.js和Git都安装完成之后，安装Hexo，用命令行运行以下命令 npm install -g hexo-cli，之后可以用hexo -v查看版本来检查是否安装成功。

初始化Hexo并设置主题

初始化Hexo

安装 Hexo 完成后，依次执行以下命令，Hexo 将会在指定文件夹中新建所需要的文件，其中<folder>就是你想要作为博客初始化的文件夹。

注意：如果使用cmd命令行操作，会直接在我的文档（如Administrator）下新建这个文件夹进行初始化，如果不想新建在我的文档内，需要先用命令行切换到你想新建的位置下如cd d:，cd hexo-blog，然后再进行下面的初始化操作。如果是使用git bash进行的命令行操作，则可以直接在想要作为博客初始化的文件夹内右键，在弹出的菜单中点击git bash here进行操作即可。

1
2
3
hexo init <folder>
cd <folder>
npm install

hexo init <folder> 中的<folder>是可选项，代表你想要初始化的文件夹，如果不写则默认在你当前打开的文件夹内初始化，比如你在blog文件夹内用Git bash here 打开命令行，再运行hexo init 这个命令，就会直接在blog这个文件夹内初始化，如果加上参数hexo init hexo 则会在blog文件夹内新建一个名为hexo的文件夹，然后在hexo这个文件夹内初始化。

新建完成后，指定文件夹的目录如下：

1
2
3
4
5
6
7
8
.
├── _config.yml
├── package.json
├── scaffolds
├── source
|   ├── _drafts
|   └── _posts
└── themes

这时你可以在这个文件夹下用命令行hexo server来运行博客，在浏览器中访问http://localhost:4000/来查看效果。

默认显示页面如下：

img

更多关于hexo的命令和设置可以去官网查看。

设置主题

Hexo默认的主题是landscape，更多主题可以去官网挑选。

主题的安装方式有两种：

一种是去主题的GitHub项目上下载到本地，然后将主题文件夹复制到站点目录的themes文件夹下。
另一种方式是用命令行安装：

1
2
cd <your-hexo-folder>
git clone https://github.com/iissnan/hexo-theme-next themes/next

虽然两种安装方式不同，但主题的配置方式是一样的，都是在博客的站点目录下的配置文件_config.yml中修改：

1
2
3
4
# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: <主题文件夹的名称>

重点：这里需要注意，站点配置文件和主题配置文件是两个不同的配置文件。假设你的博客站点文件夹名字是blog，那么你的站点配置文件路径就是blog\_config.yml，而主题配置文件的路径则是blog\themes\主题文件夹名\_config.yml，修改配置时注意区分。

部署博客到GithubPages

创建GitHub仓库并添加SHH key

创建仓库

创建仓库之前，你要有一个GitHub账号，如果没有先去注册一个，之后在页面里找到New repository按钮，创建一个和你GitHub用户名一样的仓库，然后进行下一步。

添加SSH key

首先创建一个SSH key ，在命令行运行以下命令，创建过程中需要根据提示按三下回车：

1
ssh-keygen -t rsa -C "你的邮箱地址"

创建完成后在电脑上找到生成的秘钥，比如C:\Users\Administrator\.ssh\id_rsa.pub，打开这个文件，将里面内容复制出来，然后打开GitHub，点击你的头像，在setting中找到SSH and GPG keys 这个选项，然后点击New SSH key把你刚刚复制的内容放进去。

测试是否添加成功。在命令行中依次输入以下命令：

1
2
ssh -T git@github.com
yes

当看到返回You’ve successfully authenticated即为成功。

将本地博客推送到GitHub仓库

安装hexo-deployer-git插件。在命令行运行以下命令：

1
npm install hexo-deployer-git --save

然后打开站点配置文件_config.yml，把文件的最后修改为如下内容：

1
2
3
4
5
6
# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: git
  repo: git@github.com:<你的Github用户名>/<你的Github用户名>.github.io.git
  branch: master

接下来就可以把博客推送到GitHub Pages了，在命令行输入以下命令：

1
2
3
hexo clean
hexo generate
hexo deploy

其中 hexo clean是清除缓存文件和已生成的静态文件，也可以不加。
hexo generate 生成静态文章，可以用缩写 hexo g。
hexo deploy 部署网站，可以用缩写hexo d。

注意deploy时可能要你输入username和password。

返回INFO Deploy done: git即推送成功了，稍等几分钟就可以在浏览器访问http://你的GitHub用户名.github.io

至此，你的Hexo博客就已经搭建在GitHub Pages了。

绑定域名（可选）

略，具体操作看下面的参考链接。

网站设置和主题优化

这里的优化主要针对我用的主题-NexT。

设置网站

在站点配置文件_config.yml中修改：

1
2
3
4
5
6
7
8
# Site
title: 你的博客名称
subtitle: 副标题（可不设置）
description: 描述，通常由于搜索引擎搜索，SEO优化等（可不设置）
keywords: 关键字（可不设置）
author: 作者
language: zh-CN（设置语言）
timezone: 时区（可不设置）

修改永久链接的路径

在站点配置文件_config.yml中修改：

1
2
3
# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
permalink: :year/:month/:title/

跳过渲染某些文件

在站点配置文件_config.yml中修改，为了显示某个自己做的网页，或者为了显示readme说明文件等等：

1
2
3
4
5
6
7
8
9
10
# Directory
skip_render: 
 - README.md
 - test/*
 # 跳过文件夹下所有文件
  - "文件夹名/*"  
 # 跳过子文件夹
  - "文件夹名/子文件夹名/*"
 # 跳过文件夹下所有子文件夹和文件
  - "文件夹名/**"

设置主题风格

在主题配置文件themes/next/_config.yml中修改下面的代码，想用哪个就把那个前面的#去掉，给其他的加上#：

1
2
3
4
5
# Schemes
scheme: Muse
#scheme: Mist
#scheme: Pisces
#scheme: Gemini

修改头像

打开主题配置文件themes/next/_config.yml，找到下面的代码修改：

1
2
3
avatar:
  # Replace the default image and set the url here.
  url: 图片链接

文章信息设置

还是在主题配置文件themes/next/_config.yml里面修改：

1
2
3
4
5
6
7
8
# Post meta display settings
post_meta:
  item_text: true
  created_at: true
  updated_at:
    enable: true
    another_day: true
  categories: true

回到顶部和文章阅读进度

修改主题配置文件themes/next/_config.yml：

1
2
3
4
5
6
back2top:
  enable: true
  # Back to top in sidebar.
  sidebar: false
  # Scroll percent label in b2t button.
  scrollpercent: false

修改网站图标

修改主题配置文件themes/next/_config.yml，把链接改为自己的：

1
2
3
4
5
6
7
favicon:
  small: /images/favicon-16x16-next.png
  medium: /images/favicon-32x32-next.png
  apple_touch_icon: /images/apple-touch-icon-next.png
  safari_pinned_tab: /images/logo.svg
  #android_manifest: /images/manifest.json
  #ms_browserconfig: /images/browserconfig.xml

修改网站页脚信息

修改主题配置文件themes/next/_config.yml，icon图标去上面注释里面给的网站找，然后把图标名字改成你想要的就行（比如user改成heart），powered和theme是设置底部页脚是否显示hexo版本和主题版本的。

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
footer:
  # Specify the date when the site was setup. If not defined, current year will be used.
  #since: 2015

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

  powered:
    # Hexo link (Powered by Hexo).
    enable: true
    # Version info of Hexo after Hexo link (vX.X.X).
    version: true

  theme:
    # Theme & scheme info link (Theme - NexT.scheme).
    enable: true
    # Version info of NexT after scheme info (vX.X.X).
    version: true

更多可修改信息在配置文件中查看。

设置菜单

编辑主题配置文件themes/next/_config.yml，需要哪个就把哪个的注释去掉：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
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

# Enable / Disable menu icons / item badges.
menu_settings:
  icons: true
  badges: false

点击图片查看大图

编辑主题配置文件themes/next/_config.yml，有两种选择，任选其一就行，把false改成true

1
2
3
4
5
6
7
8
# FancyBox is a tool that offers a nice and elegant way to add zooming functionality for images.
# For more information: https://fancyapps.com/fancybox
fancybox: false

# A JavaScript library for zooming images like Medium.
# Do not enable both `fancybox` and `mediumzoom`.
# For more information: https://github.com/francoischalifour/medium-zoom
mediumzoom: false

设置图片懒加载

编辑主题配置文件themes/next/_config.yml

1
lazyload: true

设置动态网页背景

编辑主题配置文件themes/next/_config.yml

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
# JavaScript 3D library.
# Dependencies: https://github.com/theme-next/theme-next-three
three:
  enable: false
  three_waves: false
  canvas_lines: false
  canvas_sphere: false

# Canvas-nest
# Dependencies: https://github.com/theme-next/theme-next-canvas-nest
# For more information: https://github.com/hustcc/canvas-nest.js
canvas_nest:
  enable: false
  onmobile: true # Display on mobile or not
  color: "0,0,255" # RGB values, use `,` to separate
  opacity: 0.5 # The opacity of line: 0~1
  zIndex: -1 # z-index property of the background
  count: 99 # The number of lines

# Canvas-ribbon
# Dependencies: https://github.com/theme-next/theme-next-canvas-ribbon
# For more information: https://github.com/zproo/canvas-ribbon
canvas_ribbon:
  enable: false
  size: 300 # The width of the ribbon
  alpha: 0.6 # The transparency of the ribbon
  zIndex: -1 # The display level of the ribbon

设置网站顶部加载进度条

编辑主题配置文件themes/next/_config.yml

1
2
pace:
  enable: true

自定义网页背景

首先在站点根目录的source\_data文件夹内新建一个名为styles.styl的文件，然后编辑主题配置文件：

1
2
custom_file_path:
  style: source/_data/styles.styl

我们所有自定义的样式都会在styles.styl这个文件里添加。

编辑styles.styl，添加如下代码，把URL里面的地址改为你的背景图片的链接即可：

1
2
3
4
5
6
7
body{
    background:url(/images/bg.jpg);
    background-size:cover;
    background-repeat:no-repeat;
    background-attachment:fixed;
    background-position:center;
}

自定义鼠标样式

还是在styles.styl里编辑，添加下面的代码：

1
2
3
4
5
6
7
// 鼠标样式
  * {
      cursor: url("鼠标图标地址"),auto!important
  }
  :active {
      cursor: url("鼠标图标地址"),auto!important
  }

点击出现爱心效果

在主题文件夹内的/source/js/src下新建文件click-effect.js，接着把下面的内容复制粘贴到click-effect.js文件中。
代码如下：

1
!function(e,t,a){function n(){c(".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: fixed;}.heart:after{top: -5px;}.heart:before{left: -5px;}"),o(),r()}function r(){for(var e=0;e<d.length;e++)d[e].alpha<=0?(t.body.removeChild(d[e].el),d.splice(e,1)):(d[e].y--,d[e].scale+=.004,d[e].alpha-=.013,d[e].el.style.cssText="left:"+d[e].x+"px;top:"+d[e].y+"px;opacity:"+d[e].alpha+";transform:scale("+d[e].scale+","+d[e].scale+") rotate(45deg);background:"+d[e].color+";z-index:99999");requestAnimationFrame(r)}function o(){var t="function"==typeof e.onclick&&e.onclick;e.onclick=function(e){t&&t(),i(e)}}function i(e){var a=t.createElement("div");a.className="heart",d.push({el:a,x:e.clientX-5,y:e.clientY-5,scale:1,alpha:1,color:s()}),t.body.appendChild(a)}function c(e){var a=t.createElement("style");a.type="text/css";try{a.appendChild(t.createTextNode(e))}catch(t){a.styleSheet.cssText=e}t.getElementsByTagName("head")[0].appendChild(a)}function s(){return"rgb("+~~(255*Math.random())+","+~~(255*Math.random())+","+~~(255*Math.random())+")"}var d=[];e.requestAnimationFrame=function(){return e.requestAnimationFrame||e.webkitRequestAnimationFrame||e.mozRequestAnimationFrame||e.oRequestAnimationFrame||e.msRequestAnimationFrame||function(e){setTimeout(e,1e3/60)}}(),n()}(window,document);

在主题文件夹的\layout\_layout.swig文件末尾添加：

1
2
<!-- 页面点击出现小桃心 -->
<script type="text/javascript" src="/js/src/clicklove.js"></script>

添加插件

添加搜索功能

这里搜索功能我用的是本地搜索，也有一些其他的搜索方法，比如Aloglia，使用前需要注册账号，具体操作因为没有实践所以跳过，下面说一下添加本地搜索功能的方法：

  1. 安装 hexo-generator-searchdb，在站点的根目录下执行以下命令：

    1
    npm install hexo-generator-searchdb --save

  2. 编辑站点配置文件_config.yml，新增以下内容到任意位置：

    1
    2
    3
    4
    5
    search:
      path: search.xml
      field: post
      format: html
      limit: 10000

  3. 编辑主题配置文件themes/next/_config.yml，启用本地搜索功能：

    1
    2
    3
    # Local search
    local_search:
      enable: true

添加评论和统计功能

略，没有实际添加这两个功能，想添加的话看下面参考链接。

添加网页看板娘（Live2D）

首先安装Live2D插件，在站点根目录下运行以下命令：

1
npm install --save hexo-helper-live2d

然后选择自己喜欢的模型，复制名字。

Epsilon2.1

img

Gantzert_Felixander

img

haru

img

miku

img

ni-j

img

nico

img

nietzche

img

nipsilon

img

nito

img

shizuku

img

tsumiki

img

wanko

img

z16

img

hibiki

img

koharu

img

haruto

img

Unitychan

img

tororo

img

hijiki

img

将下面的代码添加到站点配置文件_config.yml中，修改<模型名字>（有教程说放在主题配置文件中，但是实际测试放在主题文件中并不好用，不管使用哪个模型网页中都不生效，都显示默认的shizuku这个模型，但是把代码放在站点配置文件中就好用了，不知道是什么原因）

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
33
34
35
36
37
# Live2D
## https://github.com/EYHN/hexo-helper-live2d
live2d:
  # enable: true
  enable: false
  scriptFrom: local # 默认
  pluginRootPath: live2dw/ # 插件在站点上的根目录(相对路径)
  pluginJsPath: lib/ # 脚本文件相对与插件根目录路径
  pluginModelPath: assets/ # 模型文件相对与插件根目录路径
  # scriptFrom: jsdelivr # jsdelivr CDN
  # scriptFrom: unpkg # unpkg CDN
  # scriptFrom: https://cdn.jsdelivr.net/npm/live2d-widget@3.x/lib/L2Dwidget.min.js # 你的自定义 url
  tagMode: false # 标签模式, 是否仅替换 live2d tag标签而非插入到所有页面中
  debug: false # 调试, 是否在控制台输出日志
  model:
    use: live2d-widget-model-<模型名字> # npm-module package name
    # use: wanko # 博客根目录/live2d_models/ 下的目录名
    # use: ./wives/wanko # 相对于博客根目录的路径
    # use: https://cdn.jsdelivr.net/npm/live2d-widget-model-wanko@1.0.5/assets/wanko.model.json # 你的自定义 url
    scale: 1
    hHeadPos: 0.5
    vHeadPos: 0.618
  display:
    superSample: 2
    width: 250
    height: 500
    position: right
    hOffset: 0
    vOffset: -20
  mobile:
    show: false
    scale: 0.5
  react:
    opacity: 0.7
  dialog: 
    enable: true
    hitokoto: true

安装你选择的模型，在命令行运行下面的命令：

1
npm install --save live2d-widget-model-<你选择的模型名字>

然后在命令行运行以下命令，在浏览器里访问localhost:4000查看效果

1
hexo clean && hexo g && hexo s

上面的配置都完成以后就可以开始写博客了。

利用GitHub备份博客源文件并且进行多终端操作

在你换电脑或者重装系统的时候万一不小心把博客的站点文件夹删了或者弄丢了那就什么都没了，所以为了防止发生这样的情况，就可以用GitHub来保存博客的源文件。

用命令行操作

具体操作是在你的GitHub中新建一个仓库或者在你的博客仓库内新建一个分支，个人推荐新建一个仓库，和博客的静态文件分开管理比较好，然后在本地找一个空文件夹，运行下面的命令：

1
git clone git@github.com:你的项目地址

把仓库克隆到本地，然后把你的博客源文件全部复制过来，除了.deploy_git，注意复制过来的文件里面应该有一个叫.gitignore的文件，用来忽略一些不要提交到Git的文件，如果没有可以自己新建一个，在里面加上下面的内容：

1
2
3
4
5
6
7
.DS_Store
Thumbs.db
db.json
*.log
node_modules/
public/
.deploy*/

如果还有其他自己不想提交的文件也可以加到这个文件中。

然后再在命令行中执行以下命令：

1
2
3
git add .
git commit –m "commit message"
git push

可以在网页中查看是否上传成功。

当你换了电脑或者重装系统后想把博客下回来怎么操作？

首先前面的都一样，下载安装node，Git，然后设置git全局邮箱和用户名，设置SHH，安装hexo，然后在任意一个文件夹内，执行git clone git@你的博客源文件仓库地址，进入克隆下来的文件夹，运行下面的命令：

1
2
npm install
npm install hexo-deployer-git --save

然后就可以继续写博客了，写完之后运行hexo g && hexo d，就可以部署到GitHub Pages上了。而且现在可以每次写完博客都把源文件备份一下了：

1
2
3
git add .
git commit –m "commit message"
git push

用GitHub Desktop操作

下载安装GitHub Desktop然后登陆GitHub，把对应的作为保存博客源文件的仓库克隆到本地，然后把除了.deploy_git以外的博客源文件复制进来，注意有没有.gitignore这个文件，没有按上面方法加上，然后再写上备注信息，，提交推送到Git上就行了。

参考链接：

【持续更新】最全Hexo博客搭建+主题优化+插件配置+常用操作+错误分析

hexo史上最全搭建教程

如何使用 Hexo 和 GitHub Pages 搭建这个博客

Hexo中文文档

开始使用-NexT使用文档

Documention | NexT

hexo
hexo

本博客所有文章除特别声明外，均采用 CC BY-SA 4.0 协议 ，转载请注明出处！