前言

本来不想这么折腾的，但是之前租的阿里云学生服务器要到期了，还不能以学生价续费，于是想换个云服务器续命，但学生服务器各个平台都差不多。

学生服务器的优点就是价格便宜，还能折腾，缺点也很明显，带宽低，搭建博客的访问速度慢，虽然也能用OSS，图床，CDN等改善访问速度慢的问题。

因为我是用markdown语法来做笔记的，之前使用的wordpress不是特别好用和支持，同时又嫌弃访问速度慢，所以原来的博客更新的比较少，后面直接跑去CSDN上更新了。

后来打算使用Python的Flask框架和Layui框架，寄几搭建个博客的，了解WSGI，Jinjia2，BluePrint等，想想还是太麻烦了（懒）。。。

秉承互联网的开源精神，有轮子的绝不造轮子，又看到了其他大佬们精美的博客，最后，敲定了使用hexo来搭建博客。

部署Hexo静态博客

静态博客介绍

静态博客，即通过生成工具（eg：Hexo；Hugo等），直接将作者所书写的博文编译成最终的 html；css；js 等静态文件。作者/博主，只需将生成的文件部署在静态 server 上面即可被在互联网中访问。 用户通过浏览器访问服务器，直接就回获得已编译的静态资源。

优点：

  1. 速度极快，因为当用户访问博客时，只用从服务器（如nginx）调取编译好的静态资源即可，无需实时从数据库查询获取博文、图片、评论、访问量等资源，效率极高，打开网站的速度会非常快速 ！
  2. 作者可以专心生产博文，不用管服务器维护等琐事，基本不需要维护，折腾党除外。
  3. 成本低，市面上有很多开源免费的托管程序（如 gayhub；gitee；coding 等），不用担心高昂的服务器费用。
  4. 很安全，无需担心数据库注入，跨站攻击等网站安全问题。
  5. 你来补充。

缺点：

  1. 硬伤，无法支持原生评论，访问量统计，注册登录等功能。
  2. 操作繁琐，虽然前面提到静态博客不用管理服务器维护；不用担心高昂的服务器费用，但是没有后台管理的它，靠手动编译，如果在原基础上改动过多（美化；增删功能），将难以维护！！！
  3. 上手难， 由于无后台管理功能，那么静态博客对新手菜鸟来说真的是难以使用，不懂 HTML、JS、CSS 根本不用谈使用了，因为你连发布文章都会非常吃力，所以想玩好静态博客，不经历点摸爬滚打，是不可能的。不要跟我说简单，因为你的简单只建立在原生无改动的情况下。
  4. 生成速度（编译速度），不同的静态博客生成器的速度各不相同，一旦静态资源存在大量图片，速度就会有明显的变化，当然对于坚定静态博客的人，这点忽略不计。

Hexo简介

Hexo是一款基于Node.js的静态博客框架，依赖少易于安装使用，可以方便的生成静态网页托管在GitHub和Coding上，是搭建博客的首选框架。大家可以进入hexo官网进行详细查看，因为Hexo的创建者是台湾人，对中文的支持很友好，可以选择中文进行查看。

Hexo搭建步骤

  1. 安装Node.js
  2. 安装Git
  3. 安装Hexo
  4. GitHub创建个人仓库
  5. 生成SSH添加到GitHub
  6. 将hexo部署到GitHub
  7. 设置个人域名
  8. 发布文章

安装Node.js

首先去官网下载Node.js下载地址，npm镜像源下载地址。

安装选项全部默认，一路点击Next。

最后安装好之后，按Win+R打开命令提示符，输入node -v和npm -v，如果出现版本号，那么就安装成功了。

添加国内镜像源

使用阿里的镜像源

1
npm config set registry https://registry.npm.taobao.org

也可以直接安装淘宝版的npm管理器

1
2
npm install -g cnpm --registry=http://registry.npm.taobao.org
cnpm -v    #查看cnpm版本

可以直接使用cnpm代替npm

安装Git

为了把本地的网页文件上传到github上面去，我们需要用到分布式版本控制工具————Git[下载地址]。

安装完成后在命令提示符中输入git --version验证是否安装成功。

新建GitHub仓库

注册GitHub后，选择new repository，输入自己的项目名字，后面一定要加.github.io后缀，README初始化也要勾上。名称一定要和你的github名字完全一样，比如你github名字叫teemos666，那么仓库名字一定要是teemos666.github.io。

然后项目就建成了，点击Settings，向下拉到最后有个GitHub Pages，点击Choose a theme选择一个主题，过一会就能至今访问你的github博客了。

你的博客链接就是teemos666.github.io。

安装Hexo

在合适的地方新建一个文件夹，用来存放自己的博客文件。

在该目录下右键点击Git Bash Here，打开git的控制台窗口，以后我们所有的操作都在git控制台进行，就不要用Windows自带的控制台了。

定位到该目录下，输入npm i hexo-cli -g安装Hexo。可能会有几个报错，无视它就行。

安装完后输入hexo -v验证是否安装成功。

然后就要初始化我们的网站，输入hexo init初始化文件夹，其实就是从GitHub上克隆代码下来，接着输入npm install安装必备的组件。

这样本地的网站配置也弄好啦，输入hexo g生成静态网页，然后输入hexo s打开本地服务器，然后浏览器打开http://localhost:4000/，就可以看到我们的博客啦。

连接Github与本地

首先右键打开git bash，然后输入下面命令：

1
2
git config --global user.name "teemos"
git config --global user.email "zzxxccsung@qq.com"

用户名和邮箱根据你注册github的信息自行修改。

然后生成密钥SSH key：

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

打开github，在头像下面点击settings，再点击SSH and GPG keys，新建一个SSH，名字随便。

git bash中输入

1
cat ~/.ssh/id_rsa.pub

将输出的内容复制到框中，点击确定保存。

输入ssh -T git@github.com，出现你的用户名，那就成功了。

打开博客根目录下的_config.yml文件，这是博客的配置文件，在这里你可以修改与博客相关的各种信息。

修改最后一行的配置：

1
2
3
4
deploy:
  type: git
  repository: git@github.com:teemos666/teemos666.github.io.git
  branch: master

repository修改为你自己的github项目地址

写文章、发布文章

首先在博客根目录下右键打开git bash，安装一个扩展npm i hexo-deployer-git。

然后输入hexo n "article title"，新建一篇文章。

然后打开\source\_posts的目录，可以发现下面多了一个文件夹和一个.md文件，一个用来存放你的图片等数据，另一个就是你的文章文件啦。

编写完markdown文件后，根目录下输入hexo g生成静态网页，然后输入hexo s可以启动本地服务器，浏览器输入localhost:4000可以预览效果，最后输入hexo d上传到github上。这时打开你的github.io主页就能看到发布的文章啦。

hexo-generator-index从2.0.0开始，已经支持文章置顶功能。你可以直接在文章的front-matter区域里添加sticky: 1属性来把这篇文章置顶。数值越大，置顶的优先级越大。

设置个人域名

现在你的个人网站的地址是teemos666.github.io，如果觉得这个网址逼格不太够，这就需要你设置个人域名了，但是需要花钱。

注册一个阿里云账户，在阿里云上买一个域名，我买的是 justwalking.cn，各个后缀的价格不太一样，比如最广泛的.com就比较贵，看个人喜好咯。

你需要先去进行实名认证，然后在域名控制台中，看到你购买的域名。

点解析进去，添加解析，CNAME，解析地址为teemos666.github.io。

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

然后在你的博客文件source中创建一个名为CNAME文件，不要后缀。内容写上你的域名。

域名解析结果如下：

域名解析结果

GitHub设置结果如下：

GitHub设置结果

使用CDN全站加速

每次都需要请求Github远在国外的服务器，并且由于国内高墙的原因，所以访问博客会比较慢或者有时根本打不开，因此需要CDN进行加速。

我也想过使用gitee代替github，毕竟gitee在国内，但是发现最近gitee不能申请pages了，而且也没有GitHub那么方便，于是就放弃了。

CDN的全称是Content Delivery Network，即内容分发网络。CDN是构建在现有网络基础之上的智能虚拟网络，依靠部署在各地的边缘服务器，通过中心平台的负载均衡、内容分发、调度等功能模块，使用户就近获取所需内容，降低网络拥塞，提高用户访问响应速度和命中率。

上面是百度的介绍，啰嗦了一大堆，说白了就是让坐在电脑前的用户就近的获取需要的网络资源，而不用跑去访问遥远的服务器了。既然这么好，那就用呗！国内外都有一些这样的CDN服务提供商，但是大家都知道，访问外面的网络很费劲的。国内的一些CDN提供商也有不少，服务也不错。

我是用的是腾讯云的CDN，因为它新注册每个月送20G的流量，其他的同理。

其实我想用阿里云的，但是腾讯云能白嫖，就先用着腾讯云了。

开通CDN后，到域名管理内添加域名，可能会需要你验证域名的归属，按照提示完成即可，加速区域选择中国境内，加速的区域不同地方不同价格，这个看自己需求。

加速域名填写你的域名，业务类型选择静态加速，源站配置选择自有源，协议选择HTTPS，选择源站域名，填写你的Github Page地址，回源HOST不用管他，自动生成。

添加域名配置

打开域名管理页面，启动HTTP2.0配置，强制跳转http->https。

打开证书管理页面，添加域名的SSL证书。

打开阿里云的DNS解析界面，将域名解析地址teemos666.github.io换成腾讯云CDN提供的CNAME的地址。

至此，CDN全站加速完成。

CDN配置结果

CDN加速前：

CDN加速前

CDN加速后：

CDN加速后

对比两图，加速效果明显。妈妈再也不怕我看不了博客啦~

站点配置

修改站点配置文件 _config.yml

1
2
3
4
5
6
7
8
9
10
11
12
13
# Site
title: Teemos's Blog
subtitle: 'Teemos wants to be an explorer'
description: 'Teemos wants to be an explorer'
keywords: ''
author: Teemos
language: zh-CN
timezone: ''

deploy:
  type: git
  repo: git@github.com:teemos666/teemos666.github.io.git
  branch: master

至此，hexo就配置好了，能满足基本使用了。

  • 使用hexo n "article"写文章

  • 使用hexo g生成静态博客页面

  • 使用hexo s本地浏览博客

  • 使用hexo d推送博客至GitHub

hexo目录结构

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

_config.yml

网站的配置 信息，您可以在此配置大部分的参数。

package.json

应用程序的信息。EJS, Stylus和 Markdown renderer 已默认安装，您可以自由移除。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
package.json{
  "name": "hexo-site",
  "version": "0.0.0",
  "private": true,
  "hexo": {
    "version": ""
  },
  "dependencies": {
    "hexo": "^3.8.0",
    "hexo-generator-archive": "^0.1.5",
    "hexo-generator-category": "^0.1.3",
    "hexo-generator-index": "^0.2.1",
    "hexo-generator-tag": "^0.2.0",
    "hexo-renderer-ejs": "^0.3.1",
    "hexo-renderer-stylus": "^0.3.3",
    "hexo-renderer-marked": "^0.3.2",
    "hexo-server": "^0.3.3"
  }
}

scaffolds

模版文件夹。当您新建文章时，Hexo 会根据 scaffold 来建立文件。

Hexo的模板是指在新建的文章文件中默认填充的内容。例如，如果您修改scaffold/post.md中的Front-matter内容，那么每次新建一篇文章时都会包含这个修改。

source

资源文件夹是存放用户资源的地方。除 _posts 文件夹之外，开头命名为 _ (下划线)的文件 / 文件夹和隐藏的文件将会被忽略。Markdown 和 HTML 文件会被解析并放到 public 文件夹，而其他文件会被拷贝过去。

themes

主题文件夹。Hexo 会根据主题来生成静态页面。

使用主题

使用主题butterfly，主题版本3.7.8

修改站点配置文件_config.yml，把主题改为butterfly

1
theme:  butterfly

把主题文件夹中的_config.yml复制到Hexo根目录里，同时重新命名为_config.butterfly.yml。

以后只需要在_config.butterfly.yml进行配置就行。

Hexo会自动合并主题中的_config.yml和_config.butterfly.yml里的配置，如果存在同名配置，会使用_config.butterfly.yml的配置，其优先度较高。

以下是我的主题的配置：

页面

标签页

  1. 前往你的Hexo 博客的根目录
  2. 输入hexo new page tags
  3. 你会找到source/tags/index.md这个文件
  4. 修改这个文件：记得添加 type: “tags”
1
2
3
4
5
--- 
title: 标签
date: 2018-01-05 00:00:00 
type: "tags" 
---

分类页

  1. 前往你的Hexo 博客的根目录
  2. 输入hexo new page tags
  3. 你会找到source/tags/index.md这个文件
  4. 修改这个文件：记得添加 type: “tags”
1
2
3
4
5
--- 
title: 标签
date: 2018-01-05 00:00:00 
type: "tags" 
---

友情链接

同理，hexo new page link

404页面

本地预览时，访问出错的网站是不会跳到404页面的。

如需本地预览，请访问http://localhost:4000/404.html

主题配置文件中开启：

1
2
# A simple 404 page 
error_404: enable: true subtitle: "页面没有找到" background:

导航菜单

修改主题配置文件

1
2
3
4
5
6
7
menu:
  首页: / || fas fa-home
  时间轴: /archives/ || fas fa-archive
  标签: /tags/ || fas fa-tags
  分类: /categories/ || fas fa-folder-open
  友链: /link/ || fas fa-link
  关于: /about/ || fas fa-heart

代码

修改主题配置文件

代码高亮：

1
highlight_copy:  true

代码换行：

1
code_word_wrap:  true

社交图标

图标网址：Font Awesome

修改主题配置文件

书写格式：图标名：url || 描述性文字

1
2
social:
   fab fa-github: https://github.com/teemos666 || Github

顶部图

修改主题配置文件

1
2
3
4
5
6
7
8
9
# The banner image of home page
index_img:
    https://cdn.jsdelivr.net/gh/techfens/img1@main/bgimg.jpg
# If the banner of page not setting, it will show the top_img
default_top_img:
    https://cdn.jsdelivr.net/gh/techfens/img1@main/bgimg.jpg
# The banner image of archive page
archive_img:
    https://cdn.jsdelivr.net/gh/techfens/img1@main/bgimg.jpg

其它页面（tags/categories/自建页面）和文章页的top_img，请到对应的md页面设置front-matter中的top_img

文章封面

文章的markdown文档上,在Front-matter添加cover,并填上要显示的图片地址。

如果不配置cover,可以设置显示默认的cover.

如果不想在首页显示cover,可以设置为false

修改主题配置文件

1
2
3
4
5
6
7
8
9
10
cover: 
#是否显示文章封面
index_enable: true 
aside_enable: true 
archives_enable: true 
#封面显示的位置
#三个值可配置left , right , both 
position: both 
#当没有设置cover时，默认的封面显示
default_cover: - https://cdn.jsdelivr.net/gh/jerryc127/CDN@latest/cover/default_bg.png - https://cdn.jsdelivr.net/gh/jerryc127/CDN@latest/cover/default_bg2.png - https://cdn.jsdelivr.net/gh/jerryc127/CDN@latest/cover/default_bg3.png

文章页相关配置

文章meta显示

这个选项是用来显示文章的相关信息的。

修改主题配置文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
post_meta: 
    page: 
        date_type: both 
        # created or updated or both主页文章日期是创建日或者更新日或都显示
        date_format: date 
        # date/relative显示日期还是相对日期
        categories: true 
        # true or false主页是否显示分类
        tags: true 
        # true or false主页是否显示标签
        label: true 
        # true or false显示描述性文字
    post: 
        date_type: both 
        # created or updated or both文章页日期是创建日或者更新日或都显示
        date_format: date 
        # date/relative显示日期还是相对日期
        categories: true 
        # true or false文章页是否显示分类
        tags: true 
        # true or false文章页是否显示标签
        label: true
        # true or false 显示描述性文字

文章版权

为你的博客文章展示文章版权和许可协议。

修改主题配置文件

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

由于Hexo 4.1开始，默认对网址进行解码，以至于如果是中文网址，会被解码，可设置decode: true来显示中文网址。

如果有文章（例如：转载文章）不需要显示版权，可以在文章Front-matter单独设置

1
copyright:  false

从3.0.0开始，支持对单独文章设置版权信息，可以在文章Front-matter单独设置

1
2
3
4
copyright _author: xxxx 
copyright_ author _href: https://xxxxxx.com 
copyright_ url: https://xxxxxx.com 
copyright _info: 此文章版权归xxxxx所有，如有转载，请注明来自原作者

文章打赏

在你每篇文章的结尾，可以添加打赏按钮。相关二维码可以自行配置。

对于没有提供二维码的，可配置一张软件的icon图片，然后在link上添加相应的打赏链接。用户点击图片就会跳转到链接去。

打赏图片可以放在sourse/img/下

link可以不写，会默认为图片的链接。

修改主题配置文件

1
2
3
4
5
6
7
8
9
reward: 
	enable: true 
	QR_code: 
		- img: /img/wechatpay.png 
		  link: 
		  text:微信
		- img: /img/alipay.jpg 
		  link: 
		  text:支付宝

TOC文章目录

在文章页，会有一个目录，用于显示TOC。

修改 主题配置文件

1
2
3
4
toc: 
	enable: true 
	number: true 
	style_simple: true

相关文章

相关文章推荐的原理是根据文章tags的比重来推荐

修改 主题配置文件

1
2
3
4
related_post: 
	enable: true 
	limit: 6 #显示推荐文章数目
	date_type: created # or created or updated文章日期显示创建日或者更新日

头像

修改主题配置文件

1
2
3
avatar: 
	img: /img/avatar.png 
	effect: true #头像会一直转圈

图片描述

可开启图片Figcaption描述文字显示

修改主题配置文件

1
photofigcaption:  true

复制相关配置

可配置网站是否可以复制、复制的内容是否添加版权信息

修改主题配置文件

1
2
3
4
5
copy:
  enable: true
  copyright:
    enable: true
    limit_count: 50

Footer设置

博客年份

since是一个来展示你站点起始时间的选项。它位于页面的最底部。

修改主题配置文件

1
2
3
4
footer: 
	owner: 
		enable: true 
		since: 2020

页脚自定义文本

custom_text是一个给你用来在页脚自定义文本的选项。通常你可以在这里写声明文本等。支持HTML。

修改 主题配置文件

1
custom_text:  Teemos wants to be an explorer.<br><a rel="nofollow" href="http://www.beian.miit.gov.cn" target="_blank">粤ICP备19158324号</a>

侧边栏设置

侧边排版

可自行决定哪个项目需要显示，可决定位置，也可以设置不显示侧边栏。

修改 主题配置文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
aside:
  enable: true
  hide: false
  button: true
  mobile: true # display on mobile
  position: right # left or right
  card_author:
    enable: true
    description:
    button:
      enable: true
      icon: fab fa-github
      text: Follow Me
      link: https://github.com/xxxxxx

  card_tags:
	enable: true

访问人数busuanzi (UV 和PV)

访问busuanzi的官方网站查看更多的介绍。

修改 主题配置文件

1
2
3
4
busuanzi: 
	site_uv: true 
	site_pv: true 
	page_pv: true

运行时间

网页已运行时间

修改 主题配置文件

1
2
3
runtimeshow: 
	enable: true 
	publish_date: 6 /17/2021 00 :00:00 ##网页开通时间#格式:月/日/年时间#也可以写成年/月/日时间

网站背景

默认显示白色，可设置图片或者颜色

修改 主题配置文件

1
2
3
4
#图片格式url(http://xxxxxx.com/xxx.jpg) 
#颜色（HEX值/RGB值/颜色单词/渐变色) 
#留空不显示背景
background:

修改主题配置文件

1
2
# footer是否显示图片背景(与top_img一致) 
footer_bg:  true

背景特效

修改主题配置文件

1
2
3
4
5
6
7
canvas_ribbon:
  enable: true
  size: 150
  alpha: 0.6
  zIndex: -1
  click_to_change: true
  mobile: true

页面美化

会改变ol、ul、h1-h5的样式

field配置生效的区域

  • post 只在文章页生效

  • site 在全站生效
    修改 主题配置文件

1
2
3
4
5
beautify:
  enable: true
  field: site # site/post
  title-prefix-icon: '\f0c1'
  title-prefix-icon-color: '#F47466'

网站副标题

可设置主页中显示的网站副标题或者喜欢的座右铭。

修改 主题配置文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
subtitle:
  enable: true
  # Typewriter Effect (打字效果)
  effect: true
  # loop (循環打字)
  loop: true
  # source調用第三方服務
  # source: false 關閉調用
  # source: 1  調用搏天api的隨機語錄（簡體）
  # source: 2  調用一言網的一句話（簡體）
  # source: 3  調用一句網（簡體）
  # source: 4  調用今日詩詞（簡體）
  # subtitle 會先顯示 source , 再顯示 sub 的內容
  source: false
  # 如果有英文逗號' , ',請使用轉義字元 &#44;
  # 如果有英文雙引號' " ',請使用轉義字元 &quot;
  # 開頭不允許轉義字元，如需要，請把整個句子用雙引號包住
  # 如果關閉打字效果，subtitle只會顯示sub的第一行文字
  sub:
    - 醉后不知天在水，满船清梦压星河

页面加载动画preloader

当进入网页时，因为加载速度的问题，可能会导致top_img图片出现断层显示，或者网页加载不全而出现等待时间，开启preloader后，会显示加载动画，等页面加载完，加载动画会消失。

有时候感觉好像没啥用

修改主题配置文件:

1
2
#加载动画Loading Animation 
preloader:  true

字数统计

要为Butterfly配上字数统计特性,你需要如下几个步骤:

打开hexo 工作目录

npm install hexo-wordcount –save

或 yarn add hexo-wordcount

修改主题配置文件:

1
2
3
4
5
6
# wordcount (字數統計)
wordcount:
  enable: true
  post_wordcount: true
  min2read: true
  total_wordcount: true

图片大图查看模式

只能开启一个

fancybox

medium_zoom
修改 主题配置文件

1
2
# fancybox http://fancyapps.com/fancybox/3/ 
fancybox:  true
1
medium_zoom:  true

Snackbar 弹窗

Snackbar 弹窗,根据自己爱好开启

修改 主题配置文件

1
2
3
4
5
snackbar:
  enable: true
  position: top-left
  bg_light: '#49b1f5' # The background color of Toast Notification in light mode
  bg_dark: '#121212' # The background color of Toast Notification in dark mode

Instantpage

当鼠标悬停到链接上超过65 毫秒时，Instantpage 会对该链接进行预加载，可以提升访问速度。

修改配置文件

1
2
3
# https://instant.page/ 
# prefetch (预加载) 
instantpage:  true

公告

1
2
3
card_announcement:
    enable: true
    content: 我的小破站终于搬迁成功啦!

常见问题

md不支持显示相对路径图片

添加图片插件

1
npm install hexo-asset-image --save

修改_config.yml配置文件

1
post_asset_folder:  true

然后新建一篇文章

1
hexo new post abc

这个时候会出现一个abc.md和abc的文件夹，把picture.jpg放入abc文件夹内，引用图片时：

1
![picture](picture.jpg)

问题得到解决，当然也可以使用CDN、OSS等来存储图片，这样速度会相对来说快一点。

常用命令总结

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
hexo init  # 初始化博客

hexo n "文章名称"  # 生成新文章
hexo n [layout] "文章名称"  # 生成layout模板的新文章
hexo clean  # 请理已生成的静态文件
hexo g  # 生成博客网页文件
hexo s  # 启动本地服务器
hexo d  # 上传网页文件到github

#生成静态文件前需要安装插件，pug以及stylus的渲染器
npm install hexo-renderer-pug hexo-renderer-stylus --save
npm install hexo-renderer-marked --save
#上传前需要安装插件
npm install --save hexo-deployer-git

#文章显示图片
post_asset_folder: true
npm install hexo-asset-image --save

时间仓促，本文可能有所纰漏，如有发现，请联系我完善一下。