Hexo个人博客搭建教程

1 搭建前准备

1.1 环境配置

需要安装git、node，最后安装hexo

1.1.1 安装Git：

首先看电脑是否已经安装了git

1
$ git

若提示not founded则进行安装

1
2
3
4
5
#未安装homebrew则先安装homebrew
$ /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)"

#安装git
$ brew install git

查看git版本

1
$ git --version

显示如下则安装成功

1
2
fanziqi@macbook-pro blog % git --version
git version 2.21.0 (Apple Git-122)

1.1.2 安装node

点击访问 node官网 下载安装

查看node版本

1
$ git --version

1.1.3 安装并配置Hexo

安装hexo

1
$ sudo npm install -g hexo-cli

创建blog文件夹

1
2
3
4
5
6
7
8
# 此目录可以任意更改
$ mkdir blog
# 进入blog文件夹
$ cd blog
# init初始化hexo
$ hexo init
开启本地服务
# hexo s

若出现

1
2
INFO  Start processing
INFO  Hexo is running at http://localhost:4000 . Press Ctrl+C to stop.

则在浏览器输入 http://localhost:4000 即可看到本地运行的博客首页

1.2 注册并创建仓库

这里讲解两个仓库

1.2.1 GitHub仓库

进入GitHub官网注册一个账号，并记住用户名，下一步要用到

新建一个仓库，点击new repository

进入这一步，仓库名字必须是用户名.github.io，然后点击创建

配置ssh key

1
$ cd .ssh

新建ssh key

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

出现

1
2
Generating public/private rsa key pair.
Enter file in which to save the key (/Users/fanziqi/.ssh/id_rsa):

则输入ssh的名字，比如GitHub，然后回车

再连续按两次回车，最终会生成一个文件在用户目录下，打开用户目录，找到.ssh\刚刚起的名字.pub文件，打开并复制里面的内容，打开你的github主页，进入个人设置 -> SSH and GPG keys -> New SSH key：

粘贴到key里面，title任意，点击保存。

测试是否成功

1
$ ssh -T git@github.com

提示 Are you sure you want to continue connecting (yes/no)?输入yes，提示

1
You’ve successfully authenticated, but GitHub does not provide shell access.

则配置成功

1.2.2 Coding仓库

由于GitHub服务器在国外，访问速度非常慢。所以建议使用国内的Coding

进入coding官网，点击免费注册

注册成功后新建一个代码托管项目，名称是用户名，并勾选readme

进入代码仓库，点击左下角项目设置—项目与成员—功能开关—打开持续部署

进入项目—持续部署—静态网站

填好名称后并保存

经测试，coding使用ssh公钥无法上传代码，则通过普通的输入用户名密码的方法上传。

1.3 关联到仓库

在创建的blog文件夹里找到_config.yml文件并打开，在文档最后找到

1
2
3
deploy:
  type: git
  repo:

将其修改为

1
2
3
4
5
6
7
8
9
deploy:
  type: git
  repo: 
    github:
      git@github.com:你的GitHub账号/你的GitHub账号.github.io.git
    coding:
      https://e.coding.net/你的coding账号/你的coding账号/你的coding账号.git
      #git@e.coding.net:fanis/fanis/fanis.git 此方法暂时不好用
  branch: master

然后执行

1
2
3
4
5
6
#产生静态网页
$ hexo g
# 部署到GitHub/coding上
$ hexo d

#也可使用hexo g && hexo d

进入http://你的名字.github.io/或http://coding静态网站中的一串代码.coding-pages.com/即可看到hexo博客

1.4 绑定个人域名

如果想使用自己购买的域名进行访问，则需要将个人域名cname解析到你的名字.github.io/或coding静态网站中的一串代码.coding-pages.com/上

1.4.1 域名配置

我的域名购买于阿里云，别的域名注册商大同小异。

打开域名解析页面

天价一个CNAME类型的解析，解析到coding或GitHub上

然后在blog/source/文件夹下创建一个名为CNAME文件，不要后缀。写上你的域名。

注意⚠️国内访问GitHub很慢，如果想达到分流的效果在解析的时候GitHub解析线路选择境外，coding选择境内，即可实现国外用户访问GitHub而国内用户访问coding。

1.4.2 GitHub设置

登录GitHub，进入之前创建的仓库，点击settings，设置Custom domain，输入你的域名

1.4.3 coding设置

进入项目，点击持续部署下的静态网站，设置之前创建的静态网站，下拉找到自定义域名，绑定自己的域名，并获取证书

1.4.4 配置CNAME文件

在blog/source/中创建一个名为CNAME文件，不要后缀。写上你的域名。

最后重新生成静态网站并上传，就可以通过访问自己的域名来访问GitHub/coding上的blog了

1
2
3
$ hexo clean
$ hexo g
$ hexo d

2 使用博客

2.1 基本配置

hexo最主要的配置是_config.yml这个文件，详细可参考官方的配置描述。这里举几个常用的例子

1
2
3
4
# Site
title:  #网页标题
author: #作者名字
language: zh-CN #修改网页语言为英文
1
2
3
# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: https://你的网站

2.2 更换主题

默认的主题很丑，hexo官方主题页这里的主题都可以更换。我选的是butterfly主题，界面美观功能强大。

2.2.1 安装主题

1
2
$ cd blog
$ git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly

应用主题

修改站點配置文件_config.yml，把主題改為butterfly

1
theme: butterfly

安装pub渲染器

1
$ sudo npm install hexo-renderer-pug hexo-renderer-stylus --save

2.2.2 配置主题

为了主題的平滑升級, Butterfly 使用了 data files 特性。

推薦把主題默認的配置文件_config.yml複製到 Hexo 工作目錄下的source/_data/butterfly.yml，如果source/_data的目錄不存在那就創建一個。

打开source/_data/butterfly.yml

首先汉化导航栏，更改将第一段代码更改为

1
2
3
4
5
6
7
8
9
10
11
menu:
  首页: / || fas fa-home
  时间轴: /archives/ || fas fa-archive
  标签: /tags/ || fas fa-tags
  分类: /categories/ || fas fa-folder-open
  菜单||fas fa-list:
    - 音乐 || /music/ || fas fa-music
    - 电影 || /movies/ || fas fa-video
  留言板: /messageboard/ || fa fa-paper-plane
  友链: /link/ || fas fa-link
  关于: /about/ || fas fa-heart

创建标签页

1
$ hexo new page tags

找到source/tags/index.md这个文件，修改为

1
2
3
4
5
---
title: 标签
date: 2018-01-05 00:00:00
type: "tags"
---

创建分类页

1
$ hexo new page categories

找到source/categories/index.md这个文件，修改为

1
2
3
4
5
---
title: 分类
date: 2018-01-05 00:00:00
type: "categories"
---

创建友情链接页

1
$ hexo new page link

找到source/link/index.md这个文件，修改为

1
2
3
4
5
---
title: 友情链接
date: 2018-01-05 00:00:00
type: "link"
---

添加友情链接

在Hexo博客目錄中的source/_data，創建一個文件link.yml

内容如下

1
2
3
4
5
6
7
8
9
10
11
12
13
class:
  class_name: 友情链接
  link_list:
    1:
      name: ZSTU #这里举一个例子
      link: http://www.zstu.edu.cn/
      avatar: http://www.zstu.edu.cn//avatar.png
      descr: 浙江理工大学官网
#    2:
#      name: xxxxxx
#      link: https://www.xxxxxxcn/
#      avatar: https://xxxxx/avatar.png
#      descr: xxxxxxx

注：class_name和class_desc支持html格式書寫，如不需要，也可以留空。

音乐页使用插件hexo-tag-aplayer，电影页使用插件hexo-douban，请自行查看网页上的使用说明，这里不再赘述。

404页面

1
2
3
4
5
# A simple 404 page
error_404:
  enable: true
  subtitle: "頁面沒有找到"
  background:

代码

代码高亮主题

Butterfly 支持6種代碼高亮樣式：

  • default
  • darker
  • pale night
  • light
  • ocean
  • mac

修改highlight_theme: light即可

default：

default

darker：darker

pale night：pale night

light：light

ocean：ocean

mac：mac

代码复制功能

1
highlight_copy: true

代碼框展開/關閉

在默認情況下，代碼框自動展開，可設置是否所有代碼框都關閉狀態，點擊>可展開代碼

  • true 全部代碼框不展開，需點擊>打開
  • false 代碼狂展開，有>點擊按鈕
  • none 不顯示>按鈕
1
highlight_shrink: true #代碼框不展開，需點擊 '>' 打開

社交图标

1
2
3
4
5
6
# social settings (社交圖標設置)
# formal:
#   icon: link || the description
social:
  fab fa-github: https://github.com/fanziqi614 || Github
  fas fa-envelope: mailto:fzq614@qq.com || Email

这会展示在主页头像下面

顶部图

1
2
3
4
5
# the banner image of home page 将路径填到这里
index_img:

# if the banner of page not setting,it will show the top_img
default_top_img: https://i.loli.net/2020/05/01/IuWi8QbHvzjlOPw.jpg

文档封面

修改position即可改变封面位置

1
2
3
4
5
6
7
8
9
10
11
cover:
  # display the cover or not (是否顯示文章封面)
  index_enable: true
  aside_enable: true
  archives_enable: true
  # the position of cover in home page (封面顯示的位置)
  # left/right/both
  position: left
  # When cover is not set, the default cover is displayed (當沒有設置cover時，默認的封面顯示)
  default_cover: 
#    - https://i.loli.net/2020/05/01/gkihqEjXxJ5UZ1C.jpg

文章版权

1
2
3
4
5
post_copyright:
  enable: true
  decode: false
  license: CC BY-NC-SA 4.0
  license_url: https://creativecommons.org/licenses/by-nc-sa/4.0/

打赏功能

在文末显示

在/blog/themes/butterfly/source/下创建wechat.jpg和alipay.jpg收款码图片

然后更改butterfly代码

1
2
3
4
5
6
7
8
9
10
# Sponsor/reward
reward:
  enable: true
  QR_code:
    - img: /img/wechat.jpg
      link:
      text: wechat
    - img: /img/alipay.jpg
      link:
      text: alipay

头像

在/blog/themes/butterfly/source/下创建avatar.png作为头像

1
2
3
vatar:
  img: /img/avatar.png
  effect: true # 頭像會一直轉圈

评论系统

我选择的是valine评论系统，更加美观大方，易于管理。

进入https://leancloud.cn/，注册账号实名认证验证邮箱，创建应用

在设置中记下应用keys

填到下面的对应位置，并修改enable为true

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
# valine
# https://valine.js.org
valine:
  enable: true # if you want use valine,please set this value is true
  appId:  # leancloud application app id
  appKey:  # leancloud application app key
  pageSize: 10 # comment list page size
  avatar: monsterid # gravatar style https://valine.js.org/#/avatar
  lang: zh-CN # i18n: zh-CN/zh-TW/en/ja
  placeholder: Please leave your footprints # valine comment input placeholder(like: Please leave your footprints )
  guest_info: nick #valine comment header info (nick/mail/link)
  recordIP: true # Record reviewer IP
  serverURLs: # This configuration is suitable for domestic custom domain name users, overseas version will be automatically detected (no need to manually fill in)
  bg: # valine background
  emojiCDN: # emoji CDN
  enableQQ: false # enable the Nickname box to automatically get QQ Nickname and QQ Avatar
  requiredFields: nick # required fields (nick/mail)
  count: true # dispaly comment count in top_img

注意⚠️guest_info:和requiredFields:一定要对应，否则无法发送评论。

侧边栏设置

可自行设置应用的开关

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
aside:
  enable: true
  mobile: true # 手機頁面（ 顯示寬度 < 768px ）是否顯示aside內容
  position: right # left or right
  card_author:
    enable: true
    description:
  card_announcement:
    enable: true
    content: This is my Blog
  card_recent_post:
    enable: true
    limit: 5 # if set 0 will show all
  card_categories:
    enable: true
    limit: 8 # if set 0 will show all
    expand: none # none/true/false
  card_tags:
    enable: true
    limit: 40 # if set 0 will show all
    color: false
  card_archives:
    enable: true
    type: monthly # yearly or monthly
    format: MMMM YYYY # eg: YYYY年MM月
    order: -1 # Sort of order. 1, asc for ascending; -1, desc for descending
    limit: 8 # if set 0 will show all
  card_webinfo: true

动画效果

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
# Background effects (背景特效)
# --------------------------------------

# canvas_ribbon (靜止彩帶背景)
# See: https://github.com/hustcc/ribbon.js
canvas_ribbon:
  enable: false
  size: 150
  alpha: 0.6
  zIndex: -1
  click_to_change: true
  mobile: true

# Dynamic ribbon (動態彩帶)
canvas_ribbon_piao:
  enable: true
  mobile: false

# canvas_nest
# https://github.com/hustcc/canvas-nest.js
canvas_nest:
  enable: false
  color: '0,0,255' #color of lines, default: '0,0,0'; RGB values: (R,G,B).(note: use ',' to separate.)
  opacity: 0.7 # the opacity of line (0~1), default: 0.5.
  zIndex: -1 # z-index property of the background, default: -1.
  count: 99 # the number of lines, default: 99.
  mobile: false

2.3 创建新博客

在_config.yml配置文件中，修改为 post_asset_folder: true， 然后新建一篇文章

1
$ hexo new post "文件名"

这个时候source下会出现一个.md文件和 同名文件夹

用typora等md编辑器即可编辑，图片放在同名文件夹中。

打开md文件，Front-matter 是檔案最上方以 —- 分隔的區域，用於指定個別檔案的變數。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
---
title:
date:
updated:
tags:
categories:
keywords:
description:
top_img:
comments：
cover:  
toc:  
toc_number:
auto_open:
copyright:
mathjax:
katex:
aplayer：
highlight_shrink：
---

参数用法：

文章写在Front-matter下方

写好后

1
$ hexo g %% hexo d

即可在网站上看到

3 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
26
27
28
29
hexo n "我的博客" == hexo new "我的博客" #新建⽂章
hexo p == hexo publish
hexo g == hexo generate#⽣成
hexo s == hexo server #启动服务预览
hexo d == hexo deploy#部署

hexo server #Hexo 会监视⽂件变动并⾃动更新，您⽆须重启服务器。
hexo server -s #静态模式
hexo server -p 5000 #更改端⼝
hexo server -i 192.168.1.1 #⾃定义 IP
hexo clean #清除缓存 ⽹⻚正常情况下可以忽略此条命令
hexo g #⽣成静态⽹⻚
hexo d #开始部署

hexo generate #使⽤ Hexo ⽣成静态⽂件快速⽽且简单
hexo generate --watch #监视⽂件变动

两个命令的作⽤是相同的
hexo generate --deploy
hexo deploy --generate

hexo new "postName" #新建⽂章
hexo new page "pageName" #新建⻚⾯
hexo generate #⽣成静态⻚⾯⾄public⽬录
hexo server #开启预览访问端⼝（默认端⼝4000，'ctrl + c'关闭server）
hexo deploy #将.deploy⽬录部署到GitHub
hexo new [layout] <title>
hexo new photo "My Gallery"
hexo new "Hello World" --lang tw

祝建站成功～