hexo

发表于 | 更新于 | 分类于 | 阅读次数：
本文字数： 18k | 阅读时长 ≈ 16 分钟

安装Node.js

https://nodejs.org/en/

安装Git

https://git-scm.com/

安装Hexo

1
2
//全局安装
$ npm install -g hexo-cli

存放位置

1
C:\Users\libingshen\AppData\Roaming\npm\node_modules

验证安装是否成功

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
C:\Users\libingshen>node --version
v10.15.0

C:\Users\libingshen>npm --version
6.4.1

C:\Users\libingshen>git --version
git version 2.16.2.windows.1

C:\Users\libingshen>hexo --version
hexo-cli: 1.1.0
os: Windows_NT 10.0.17134 win32 x64
http_parser: 2.8.0
node: 10.15.0
v8: 6.8.275.32-node.45
uv: 1.23.2
zlib: 1.2.11
ares: 1.15.0
modules: 64
nghttp2: 1.34.0
napi: 3
openssl: 1.1.0j
icu: 62.1
unicode: 11.0
cldr: 33.1
tz: 2018e

Hexo博客初始化

1
2
3
4
5
6
7
8
9
10
11
$ cd D:\mytest\myhexo
$ hexo init

//安装依赖
$ npm install

//或者hexo generate生成静态页
$ hexo g 

//或者hexo server，启动服务器，可以在http://localhost:4000/ 查看
$ hexo s

Hexo博客部署到GitHub

本地客户端与GitHub建立授权连接生成公私钥

1
ssh-keygen -t rsa -C "782125244@qq.com"

公私钥存放位置

1
C:\Users\libingshen\.ssh

将公钥内容上传到GitHub

GitHub创建仓库作为hexo博客的站点

hexo配置GitHub连接

安装 hexo-deployer-git

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

修改配置D:\mytest\myhexo_config.yml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
#配置GitHub博客站址访问路径
# URL这里要是没有配置，GitHub样式显示不出来
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: https://shenlibing.github.io/myhexo/
root: /myhexo
permalink: :year/:month/:day/:title/
permalink_defaults:


#博客推送到GitHub地址配置
# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: git
  repo: https://github.com/shenlibing/myhexo.git
  branch: [master]

配置GitHub Pages

![](http://images.bingbing.tech/配置GitHub page.png)

备份博客源文件

hexo部署到GitHub只上传.deploy_git文件夹的内容，并不会上传_posts文件夹下的博客源文件

1
2
3
D:\mytest\myhexo\.deploy_git

D:\mytest\myhexo\source\_posts

解决：

将_posts文件夹作为git仓库，上传到GitHub，使得其作为另一个分支

创建并切换到新分支

1
2
3
libingshen@DESKTOP-7V287SK MINGW64 /d/mytest/myhexo/source/_posts (master)
$ git checkout -b src
Switched to a new branch 'src'

将新分支推送到GitHub

1
2
3
git add .
git commit -m 'add_v1:-新增hello-world笔记初始化'
git push origin src

将博客源文件分支设为推送的默认分支，git push推送直接推送到src分支

补充：

删除本地分支

1
$ git branch -d src

删除远程分支

1
$ git push origin -d src

切换分支

1
$ git checkout master

查看提交日志

1
$ git log --oneline

拓展

更换hexo主题

下载

https://github.com/theme-next/hexo-theme-next

解压放到D:\mytest\myhexo\themes

修改D:\mytest\myhexo\_config.yml配置文件

1
2
3
4
# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: hexo-theme-next-master

修改站点语言

编辑D:\mytest\myhexo\_config.yml文件

1
2
3
4
5
6
7
8
# Site
title: 小兵兵
subtitle:
description:
keywords:
author: shenlibing
language: zh-CN
timezone:

开启搜索、字数统计和阅读时长统计

安装依赖hexo-symbols-count-time、hexo-generator-searchdb，安装依赖不成功时先删除D:\mytest\myhexo\node_modules文件夹，重新安装依赖

1
2
3
4

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

npm install hexo-generator-searchdb --save

配置主题样式文件

进入D:\mytest\myhexo\themes\hexo-theme-next-master\文件夹，编辑_config.yml文件

1
2
3
4
5
6
7
8
9
10
11
12
# Local search
# Dependencies: https://github.com/theme-next/hexo-generator-searchdb
local_search:
  enable: true

# Dependencies: https://github.com/theme-next/hexo-symbols-count-time
symbols_count_time:
  separated_meta: true
  item_text_post: true
  item_text_total: false
  awl: 4
  wpm: 275

配置站点文件

编辑D:\mytest\myhexo\_config.yml文件

1
2
3
4
5
6
7
8
9
10
11
12
13
#阅读时长和本文字数
symbols_count_time:
  symbols: true
  time: true
  total_symbols: true
  total_time: true

#搜索功能
search:
  path: search.xml
  field: post
  format: html
  limit: 10000

添加分类和标签

1
2
3
$ hexo new page categories

$ hexo new page tags

编辑D:\mytest\myhexo\source\categories\index.md

1
2
3
4
5
6

---
title: categories
date: 2019-01-22 16:37:58
type: "categories"   #这部分是新添加的
---

编辑D:\mytest\myhexo\source\tags\index.md

1
2
3
4
5
6

---
title: tags
date: 2019-01-22 16:38:40
type: "tags" #新添加的内容
---

修改菜单，添加categories和tags到menu中

1
2
3
4
5
6
7
8
9
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

新增文章，添加categories、tags

1
2
3
4
5
6
7
8
9
10
11
12

---
title: hexo博客搭建
date: 2019-01-23 09:07:30
categories: 日常记录
tags: 
  - hexo
  - git
  - github
  - node
  - markdown
---

更换页面菜单布局位置

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

配置文章浏览量

注册

https://leancloud.cn/

创建应用

创建Class

配置web安全域名

获取app_id、app_key

编辑D:\mytest\myhexo\themes\hexo-theme-next-master\_config.yml配置文件，填app_id、

app_key;security设置为false

1
2
3
4
5
6
7
8
9
10
11
12

# Show number of visitors to each article.
# You can visit https://leancloud.cn get AppID and AppKey.
leancloud_visitors:
  enable: true
  app_id: BedsOkBLOBR4nM4W52xTcBhb-gzGzoHsz #<app_id>
  app_key: EEaRfb6dCMaS38laDCkSYhM9 #<app_key>
  # Dependencies: https://github.com/theme-next/hexo-leancloud-counter-security
  # If you don't care about security in leancloud counter and just want to use it directly
  # (without hexo-leancloud-counter-security plugin), set `security` to `false`.
  security: false
  betterPerformance: false

插入本地图片

安装依赖

1
npm install hexo-asset-image --save

编辑D:\mytest\myhexo\_config.yml配置文件

1
post_asset_folder: true

命令hexo new post test来生成博文时，/source/_post文件夹中除了test.md外，还有一个同名test文件夹

typora插入本地图片

typora设置

文件–偏好设置–图片插入

1558400020100

编辑–图片工具–设置图片根目录

1
typora-root-url: hexo/

设置动态背景

进入D:\mytest\myhexo\themes\hexo-theme-next-master\layout\文件夹，编辑_layout.swig文件，在</body>之前添加

1
<script type="text/javascript" src="//cdn.bootcss.com/canvas-nest.js/1.0.0/canvas-nest.min.js"></script>

添加Fork me on GitHub

进入D:\mytest\myhexo\themes\hexo-theme-next-master\layout\文件夹，编辑_layout.swig文件，在
<div class="headband"></div>下面添加选择的图标样式代码

1
<a href="https://github.com/shenlibing/" class="github-corner" aria-label="View source on GitHub"><svg width="80" height="80" viewBox="0 0 250 250" style="fill:#151513; color:#fff; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style>

添加友情链接

方式一
进入D:\mytest\myhexo\themes\hexo-theme-next-master\layout\_partials文件夹，在footer.swig文件末尾追加

1
2
3
4
5
6
<div>友情链接：
 <a class="theme-link"  href="http://collect.w3ctrain.com/"> 前端收藏夹 </a><span>&nbsp;&nbsp;</span>
 <a class="theme-link" href="http://www.alloyteam.com/nav/"> Web前端导航 </a><span>&nbsp;&nbsp;</span>
 <a class="theme-link"  href="http://www.runoob.com/"> 菜鸟教程 </a><span>&nbsp;&nbsp;</span>
 <a class="theme-link" href="https://mccxj.github.io/"> 小毛的胡思乱想 </a><span>&nbsp;&nbsp;</span>
</div>

方式二
进入D:\mytest\myhexo\themes\hexo-theme-next-master文件夹，编辑_config.yml文件

1
2
3
4
5
6
7
8
9
10
11
# Blog rolls
links_icon: link
links_title: Links
links_layout: block
#links_layout: inline
#links:
  #Title: http://example.com
links:
  美团技术团队: https://tech.meituan.com/
  百度FEX: http://fex.baidu.com/
  淘宝FED: http://taobaofed.org/

设置阅读全文

进入D:\mytest\myhexo\themes\hexo-theme-next-master文件夹，编辑_config.yml文件

1
2
3
4
5
# Automatically Excerpt. Not recommend.
# Use <!-- more --> in the post to control excerpt accurately.
auto_excerpt:
  enable: true
  length: 150

添加评论

选择gitalk

需要 GitHub Application，如果没有 点击这里申请，Authorization callback URL 填写当前使用插件页面的域名。

1565523375504

获取client_id和client_secret

1565523495363

进入D:\mytest\myhexo文件夹，编辑_config.yml文件

  • clientID String

    Required. GitHub Application Client ID.

  • clientSecret String

    Required. GitHub Application Client Secret.

  • repo String

    Required. GitHub repository.

  • owner String

    Required. GitHub repository owner. Can be personal user or organization.

  • admin Array

    Required. GitHub repository owner and collaborators. (Users who having write access to this repository)

1
2
3
4
5
6
7
8
9
10
11
# Gitalk
# Demo: https://gitalk.github.io
# Reference: https://asdfv1929.github.io/2018/01/20/gitalk/, https://liujunzhou.top/2018/8/10/gitalk-error/
gitalk:
  enable: true
  github_id:  shenlibing # Github repo owner
  repo:  myhexo # Repository name to store issues.
  client_id:  # Github Application Client ID
  client_secret:  # Github Application Client Secret
  admin_user:  shenlibing # GitHub repo owner and collaborators, only these guys can initialize github issues
  distraction_free_mode: true # Facebook-like distraction free mode

开启打赏

进入D:\mytest\myhexo文件夹，编辑_config.yml文件

1
2
3
4
5
6
7
8
9
# Reward
# If true, reward would be displayed in every article by default.
# And you can show or hide one article specially through add page variable `reward: true/false`.
reward:
  enable: true
  #comment: Donate comment here
  wechatpay: /images/wechat.jpg
  alipay: /images/alipay.jpg
  #bitcoin: /images/bitcoin.jpg

部署到云服务器

拷贝本机的公钥id_rsa.pub内容到云服务器authorized_keys上

1566487275647

1566487437888

进入D:\mytest\myhexo文件夹，编辑_config.yml文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
# url: https://shenlibing.github.io/
url: http://bingbing.tech/
root: /
permalink: :year/:month/:day/:title/
permalink_defaults:



# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: git
  # repo: https://github.com/shenlibing/shenlibing.github.io.git #https://bitbucket.org/JohnSmith/johnsmith.bitbucket.io
  repo: root@192.168.1.101:/root/project/hexo.git
#https://bitbucket.org/JohnSmith/johnsmith.bitbucket.io
#  repo: ssh://root@192.168.1.101:22/root/project/hexo.git
  branch: [master] #published

服务器创建裸仓库

1
[root@izm5eac6bnsz8uq175jkvez project]# git init --bare hexo.git

配置钩子

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
[root@izm5eac6bnsz8uq175jkvez hooks]# pwd
/root/project/hexo.git/hooks
[root@izm5eac6bnsz8uq175jkvez hooks]# chmod 744 post-receive
[root@izm5eac6bnsz8uq175jkvez hooks]# ll
total 44
-rwxr-xr-x 1 root root  452 Aug 13 16:59 applypatch-msg.sample
-rwxr-xr-x 1 root root  896 Aug 13 16:59 commit-msg.sample
-rwxr--r-- 1 root root  357 Aug 14 17:50 post-receive
-rwxr-xr-x 1 root root  189 Aug 13 16:59 post-update.sample
-rwxr-xr-x 1 root root  398 Aug 13 16:59 pre-applypatch.sample
-rwxr-xr-x 1 root root 1704 Aug 13 16:59 pre-commit.sample
-rwxr-xr-x 1 root root 1239 Aug 13 16:59 prepare-commit-msg.sample
-rw-r--r-- 1 root root 1348 Aug 13 16:59 pre-push.sample
-rwxr-xr-x 1 root root 4951 Aug 13 16:59 pre-rebase.sample
-rwxr-xr-x 1 root root 3611 Aug 13 16:59 update.sample

[root@izm5eac6bnsz8uq175jkvez hooks]# cat post-receive 
#!/bin/bash -l
#GIT_REPO=<到hexo.git的目录>
#TMP_GIT_CLONE=<到临时blog的目录>
#PUBLIC_WWW=<到blog服务的目录/public/blog>


GIT_REPO=/root/project/hexo.git
TMP_GIT_CLONE=/tmp/blog
PUBLIC_WWW=/opt/module/website/blog
rm -rf ${TMP_GIT_CLONE}
git clone ${GIT_REPO} ${TMP_GIT_CLONE}
rm -rf ${PUBLIC_WWW}/*
cp -rf ${TMP_GIT_CLONE}/* ${PUBLIC_WWW}
[root@izm5eac6bnsz8uq175jkvez hooks]#

修改Nginx配置文件

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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
[root@izm5eac6bnsz8uq175jkvez blog]# whereis nginx
nginx: /usr/sbin/nginx /usr/lib64/nginx /etc/nginx /usr/share/nginx /usr/share/man/man8/nginx.8.gz /usr/share/man/man3/nginx.3pm.gz
[root@izm5eac6bnsz8uq175jkvez blog]# cd /etc/nginx/
[root@izm5eac6bnsz8uq175jkvez nginx]# ll
total 72
drwxr-xr-x 2 root root 4096 May 10 16:14 conf.d
drwxr-xr-x 2 root root 4096 May 10 16:14 default.d
-rw-r--r-- 1 root root 1077 May 10 16:10 fastcgi.conf
-rw-r--r-- 1 root root 1077 May 10 16:10 fastcgi.conf.default
-rw-r--r-- 1 root root 1007 May 10 16:10 fastcgi_params
-rw-r--r-- 1 root root 1007 May 10 16:10 fastcgi_params.default
-rw-r--r-- 1 root root 2837 May 10 16:10 koi-utf
-rw-r--r-- 1 root root 2223 May 10 16:10 koi-win
-rw-r--r-- 1 root root 3957 May 10 16:10 mime.types
-rw-r--r-- 1 root root 3957 May 10 16:10 mime.types.default
-rw-r--r-- 1 root root 3051 Aug 15 20:29 nginx.conf
-rw-r--r-- 1 root root 2467 Aug 13 11:05 nginx.conf.bak
-rw-r--r-- 1 root root 2656 May 10 16:10 nginx.conf.default
-rw-r--r-- 1 root root  636 May 10 16:10 scgi_params
-rw-r--r-- 1 root root  636 May 10 16:10 scgi_params.default
-rw-r--r-- 1 root root  664 May 10 16:10 uwsgi_params
-rw-r--r-- 1 root root  664 May 10 16:10 uwsgi_params.default
-rw-r--r-- 1 root root 3610 May 10 16:10 win-utf
[root@izm5eac6bnsz8uq175jkvez nginx]# cat nginx.conf
# For more information on configuration, see:
#   * Official English Documentation: http://nginx.org/en/docs/
#   * Official Russian Documentation: http://nginx.org/ru/docs/

user nginx;
worker_processes auto;
error_log /var/log/nginx/error.log;
pid /run/nginx.pid;

# Load dynamic modules. See /usr/share/nginx/README.dynamic.
include /usr/share/nginx/modules/*.conf;

events {
    worker_connections 1024;
}

http {
    log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                      '$status $body_bytes_sent "$http_referer" '
                      '"$http_user_agent" "$http_x_forwarded_for"';

    access_log  /var/log/nginx/access.log  main;

    sendfile            on;
    tcp_nopush          on;
    tcp_nodelay         on;
    keepalive_timeout   65;
    types_hash_max_size 2048;

    include             /etc/nginx/mime.types;
    default_type        application/octet-stream;

    # Load modular configuration files from the /etc/nginx/conf.d directory.
    # See http://nginx.org/en/docs/ngx_core_module.html#include
    # for more information.
    include /etc/nginx/conf.d/*.conf;

    server {
        listen       8000 default_server;
        listen       [::]:80 default_server;
        server_name  _;
        root         /usr/share/nginx/html;

        # Load configuration files for the default server block.
        include /etc/nginx/default.d/*.conf;

        location / {
        }

        error_page 404 /404.html;
            location = /40x.html {
        }

        error_page 500 502 503 504 /50x.html;
            location = /50x.html {
        }
    }
	
	server {
		listen      80;     #端口
#		server_name bingbing.tech;     #域名或IP
		root        /opt/module/website/blog;      #站点根目录
		charset     utf-8;              #文件编码
		index       index.html index.htm;    #首页
		error_page  404     /404.html;   #404页面
		error_page  500 502 503 504     /50x.html;   #服务端错误页面
		#url访问匹配路径，可以添加多个
		location / {
			index       index.html index.htm;
			root        /opt/module/website/blog;   #这里可以是绝对路径或者相对路径，基于站点根目录
		}
	}	

# Settings for a TLS enabled server.
#
#    server {
#        listen       443 ssl http2 default_server;
#        listen       [::]:443 ssl http2 default_server;
#        server_name  _;
#        root         /usr/share/nginx/html;
#
#        ssl_certificate "/etc/pki/nginx/server.crt";
#        ssl_certificate_key "/etc/pki/nginx/private/server.key";
#        ssl_session_cache shared:SSL:1m;
#        ssl_session_timeout  10m;
#        ssl_ciphers HIGH:!aNULL:!MD5;
#        ssl_prefer_server_ciphers on;
#
#        # Load configuration files for the default server block.
#        include /etc/nginx/default.d/*.conf;
#
#        location / {
#        }
#
#        error_page 404 /404.html;
#            location = /40x.html {
#        }
#
#        error_page 500 502 503 504 /50x.html;
#            location = /50x.html {
#        }
#    }

}

使用GitHub图床

创建个存放图片的仓库blogphoto

1566488757682

替换typora生成的图片路径

替换脚本

1566887719606

使用七牛云图床

如何配置域名的 CNAME

新建存储空间

1566886751984

绑定域名

1566886801933

1566886929698

域名添加CANME记录

1566887033458

1566887080368

上传图片、外链访问

1566887280796

1566887371693

替换脚本

1566887735100

优化URL

安装依赖

1
npm install hexo-abbrlink --save

编辑D:\mytest\myhexo\_config.yml配置文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
# url: https://shenlibing.github.io/
url: http://bingbing.tech/
root: /
# permalink: :year/:month/:day/:title/
# permalink_defaults:


#插件hexo-abbrlink
# permalink: :title/
permalink: archives/:abbrlink.html
abbrlink:
  alg: crc32 # 算法：crc16(default) and crc32
  rep: hex # 进制：dec(default) and hex

常见错误

错误一：

故障现象：xml转移错误，导致搜索不出结果

1565313673086

故障原因：

1565313744375

解决：

1565313905828

参考：

【持续更新】Github Pages + Hexo 博客搭建，Next主题个性化修改

Hexo+NexT 打造一个炫酷博客

hexo史上最全搭建教程

用 Typora 写 Hexo 博客 | zhangnew

使用Typora+Hexo+Google Drive打造自己的云笔记 | 情起·而深

我的云端硬盘 - Google 云端硬盘