博客搭建(基于hexo)

准备工作

博客框架：Hexo
- 博客主题：Fluid, Ayer, butterfly
主机：阿里云轻量级应用服务器
- 配置：2核2G 60GB
图床：阿里云OSS
- 软件：oss-browser(阿里云OSS适配)
写作工具：Typora
- 图床软件：PicGo
博客备份：Github，Gitee，Onedrive

博客框架选择

我采用的是Hexo作为我的博客框架，理由是：响应快速、内存占用小、文章格式统一（都使用markdown格式）、迁移能力强

文档 | Hexo

博客主题选择

butterfly

butterfly是一款功能齐全的hexo主题，界面优美，更新频率比其他主题更多，并且对手机端浏览较为友好
缺点是在服务器上生成页面速度相对于其他主题很慢，并且在web上打开页面也比其他主题稍慢，但是可以接受

其他主题介绍

Fluid

Fluid是一款响应速度很快的主题，界面简洁美观，支持文章自动摘要（这部分做的很不错），博客应有的基础功能都具备了

Fluid 具有很全面的使用文档，就像是一个配置了说明书的产品，可以很轻松的使用这个主题
配置指南 | Hexo Fluid (fluid-dev.com)

Ayer

Ayer 是一款简洁的主题，响应速度快，但不如Fluid，选择该主题的原因是：界面优雅，菜单栏设计在侧面，主题配置十分简单，很快就能配置好文件，博客所需的基本都具备

Ayer相对于某些主题而言，对于国内用户提供了Gitee 的镜像下载
hexo-theme-ayer: 一个安静且优雅的Hexo主题-Ayer (gitee.com)

主题对比

两个主题都有共同的优点，那就是响应速度快，简洁明了，配置简单
Fluid缺点：使用移动端进行网页浏览时，菜单栏点击展开后会占据半个屏幕，让人很不适应；没有Gitee的镜像，对于大陆内地的用户不是很友好
Ayer缺点：主题有一段时间没有更新了，对于文章的摘要过于简单，只有自动摘要只能截取标题

Bamboo

如果对上面我使用的主题不太满意，觉得版式太过简单或者可定制程度低，你可以使用主题 bamboo
yuang01/hexo-theme-bamboo: Hexo博客主题，功能强大，简洁 (github.com)

优点：美观，速度快，具有很多可以使用的功能，可定制程度较高，具有Gitee镜像，最近一直在更新（现在是2021-12-10）

hexo-theme-bamboo: hexo博客主题--bamboo https://yuang01.gitee.io

缺点：与其他hexo主题相比十分臃肿，尽管作者对主题的配置有了很详细的说明和解释，但是复杂的主题配置文件需要花费很长时间去定制，并且由于主题迭代速度快，导致了主题配置文件需要根据不同版本进行细微的调整，另外，使用该主题文件上传hexo博客文件夹到GitHub时，仓库可能会提示代码危险，可能是主题的作者代码不规范，毕竟这只是一个人维护的主题
建议：这个主题有他自己的优点，主要取决于使用者是否喜欢花里胡哨的界面，因此我不推荐使用该主题，毕竟没必要将大量的时间浪费到博客主题的配置上，除非你想向你的好友炫耀你的主题

服务器

这里不给相关链接，因为不想被理解是打广告的，服务器可以买，也可以不买，不买的话使用 Github page 或者Gitee page 都可搭建自己的博客，这里不再多述

我使用的是阿里云的轻量级应用服务器，打折后3年内99元每年，2核 2G内存使用起来是绰绰有余的，无论是使用hexo还是wordpress

轻量级应用服务器的特点是可以很便捷的搭建应用，就像我可以很方便的在上面搭建主题，因为阿里云提供了相关软件的安装

开始搭建

镜像选择

在轻量级应用服务器上安装 Node.js ，最好一开始购买机器初始化时就选择这个镜像，否则重置系统后再次安装，可能会无法通过阿里云网页服务器控制平台查看到内存的使用情况，按照阿里云的文档重新下载内存监视软件可能会不成功

安装Hexo

连接服务器，安装Hexo
所有必备的应用程序安装完成后，即可使用 npm 安装 Hexo。

$ npm install -g hexo-cli

安装以后，可以使用以下两种方式执行 Hexo：
1. npx hexo <command>
2. 将 Hexo 所在的目录下的 node_modules 添加到环境变量之中即可直接使用 hexo <command>：

echo 'PATH="$PATH:./node_modules/.bin"' >> ~/.profile

创建文件夹

建立仓库

安装完 Hexo 后，我们需要新建一个文件夹来容纳我们的博客所需的一切文件，在此之前，我们需要先建立一个GitHub或Gitee仓库，并且将其克隆到我们的服务器上
克隆仓库到服务器上的目的是因为可以很方便的将我们的hexo整体给搬到仓库中，可以更好的备份以及以后的迁移，并且当我们可以将包含Hexo的仓库克隆到我们的计算机上，然后编辑里面的文件，结束后我们于服务器上同步内容
如我的仓库：

image-20211210014541894-16390719449702

创建文件夹

切换到已克隆的仓库内，使用如下命令创建文件夹：

hexo init <folder>  //folder为你所创建文件夹的名称，是博客的根文件夹，许多操作都是在这个文件夹中进行操作的

创建文件夹的过程实际上是从GitHub上面克隆仓库并且重新命名的过程，所以加载速度会比较慢，网上有其他方法，通过切换源的方法来加速文件夹创建过程，这里不再多述
文件夹建立后，在文件夹内生成了许多文件，在这里我将介绍几个比较重要的
- _config.yml 是整个Hexo框架的配置文件
- config.xxx.yml xxx代表了hexo主题的名称，这是主题的配置文件，在主题内部也有一个名为 _config.yml 的文件，他的功能和 _config.xxx.yml 文件一样，但是位于hexo根目录下的 _config.xxx.yml 文件具有更高的优先级，当加载主题时会优先调用 _config.xxx.yml 文件
- source 这个文件夹中包含了文章，分类，标签的页面和文件夹，当然最开始时这个文件夹中几乎是空的，在后来会慢慢变充实
- themes 主题文件夹，里面存放了你下载的主题
- public 这是生成的网页文件， nginx 指向的就是这个文件

主题(butterfly)

安装主题

安装主题有两种方式
- npm i hexo-theme-butterfly
  - 此方法只支持Hexo在5.0.0版本以上 通过 npm 安装并不会在 themes 里生成主题文件夹，而是在 node_modules 里生成 修改hexo根目录下(hexo init 命令所创建的文件夹下)的站点配置文件_config.yml
- git 克隆主题到themes文件夹中，推荐使用这个方法，容易管理
下图是我的主题文件夹内容：

为了集中管理主题，可以将主题的配置文件复制改名到博客的根目录下，改名为 _config.xxx.yml (xxx是主题名字)，这样只需要配置博客根目录下的配置文件，而不用配置主题目录下的文件

主题配置

添加备案信息

首先在主题的配置文件中找到 Footer Settings,并且添加如下信息

# Footer Settings
# --------------------------------------
footer:
  owner:
    enable: true
    since: 2021
  custom_text: you are my friend
  copyright: true # Copyright of theme and framework

ICP:
  enable: false  # 是否启用ICP
  url: http://www.beian.miit.gov.cn/  # 点击后的链接地址
  text: 某ICP备xxxx  # 备案号
  icon:    # 图标
NSP:
  enable: false   # 是否启用NSP
  url: http://www.beian.gov.cn/  # 点击后的链接地址
  text: 某公网安备 xxxxx号    # 公安备案号
  icon: https://blog.imashimaro.com/images/20200805012127.png  # 图标

然后在博客根目录下打开 themes/butterfly/layout/includes/footer.pug 文件，修改成以下代码

#footer-wrap
  if theme.footer.owner.enable
    - var now = new Date()
    - var nowYear = now.getFullYear()
    if theme.footer.owner.since && theme.footer.owner.since != nowYear
      .copyright!= `&copy;${theme.footer.owner.since} - ${nowYear} By ${config.author}`
    else
      .copyright!= `&copy;${nowYear} By ${config.author}`
  if theme.footer.copyright
    .framework-info
      span= _p('footer.framework') + ' '
      a(href='https://hexo.io')= 'Hexo'
      span.footer-separator |
      span= _p('footer.theme') + ' '
      a(href='https://github.com/jerryc127/hexo-theme-butterfly')= 'Butterfly'
  if theme.footer.custom_text
    .footer_custom_text!=`${theme.footer.custom_text}`
  if theme.ICP.enable
    .icp
      a(href=theme.ICP.url)
        if theme.ICP.icon
          img.icp-icon(src=url_for(theme.ICP.icon))
        span=theme.ICP.text
  if theme.NSP.enable
    .icp
      a(href=theme.NSP.url)
        if theme.NSP.icon
          img.icp-icon(src=url_for(theme.NSP.icon))
        span=theme.NSP.text

文章设置

写法	解释
title	【必需】文章标题
date	【必需】文章创建日期
updated	【可选】文章更新日期
tags	【可选】文章标籤
categories	【可选】文章分类
keywords	【可选】文章关键字
description	【可选】文章描述
top_img	【可选】文章顶部图片
cover	【可选】文章缩略图(如果没有设置top_img,文章页顶部将显示缩略图，可设为false/图片地址/留空)
comments	【可选】显示文章评论模块(默认 true)
toc	【可选】显示文章TOC(默认为设置中toc的enable配置)
toc_number	【可选】显示toc_number(默认为设置中toc的number配置)
copyright	【可选】显示文章版权模块(默认为设置中post_copyright的enable配置)
copyright_author	【可选】文章版权模块的`文章作者`
copyright_author_href	【可选】文章版权模块的`文章作者`链接
copyright_url	【可选】文章版权模块的`文章连结`链接
copyright_info	【可选】文章版权模块的`版权声明`文字
mathjax	【可选】显示mathjax(当设置mathjax的per_page: false时，才需要配置，默认 false)
katex	【可选】显示katex(当设置katex的per_page: false时，才需要配置，默认 false)
aplayer	【可选】在需要的页面加载aplayer的js和css,请参考文章下面的`音乐` 配置
highlight_shrink	【可选】配置代码框是否展开(true/false)(默认为设置中highlight_shrink的配置)
aside	【可选】显示侧边栏 (默认 true)

常用文章设置

---
title:
date:
tags:
categories:
top_img:
cover:
---

分类和标签

只有文章支持分类和标签，您可以在 Front-matter 中设置。在其他系统中，分类和标签听起来很接近，但是在 Hexo 中两者有着明显的差别：分类具有顺序性和层次性，也就是说 Foo, Bar 不等于 Bar, Foo；而标签没有顺序和层次。

categories:
- Diary
tags:
- PS3
- Games

分类方法的分歧

如果您有过使用 WordPress 的经验，就很容易误解 Hexo 的分类方式。WordPress 支持对一篇文章设置多个分类，而且这些分类可以是同级的，也可以是父子分类。但是 Hexo 不支持指定多个同级分类。下面的指定方法：
categories:
  - Diary
  - Life
会使分类Life成为Diary的子分类，而不是并列分类。因此，有必要为您的文章选择尽可能准确的分类。

如果你需要为文章添加多个分类，可以尝试以下 list 中的方法。
categories:
- [Diary, PlayStation]
- [Diary, Games]
- [Life]
此时这篇文章同时包括三个分类： PlayStation 和 Games 分别都是父分类 Diary 的子分类，同时 Life 是一个没有子分类的分类。

配置 _config.yml

接下来配置Hexo的配置文件 _config.yml ，这个文件在博客文件夹的根目录下
修改语言为 zh_CN，修改主题名，注意，主题名一定要与themes文件夹中的主题名成一样，否则之后的操作会报错

其他的可以按照个人喜好修改，如网站的标题，副标题等
这里不教学Hexo+github page的使用，有兴趣的可以在网上搜索

安装 Nginx

Nginx安装

yum install -y nginx

配置Nginx

nginx -t

使用vim打开nginx.conf文件

注意：有时该配置文件会不同于下面显示的，请参考网上其他教程从官网下载

vim /etc/nginx/nginx.conf

修改用户：

修改 http 部分（默认页面加载部分）

屏幕截图 2021-12-10 114501

修改 https 部分（需要先下载SSL证书）

屏幕截图 2021-12-10 115453

以下是我的nginx配置文件

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

# Load dynamic modules. See /usr/share/doc/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       80 default_server;
        listen       [::]:80 default_server;
        server_name  001.social;
        root         /root/story/blog/public;

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

        location / {
            index index.html;
        }

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

        error_page 500 502 503 504 /50x.html;
            location = /50x.html {
        }
    }

    server {
        listen       443 ssl http2 default_server;
        listen       [::]:443 ssl http2 default_server;
        server_name  001.social;
        root         /root/story/blog/public;

        ssl_certificate cert/6712194_001.social.pem;
        ssl_certificate_key cert/6712194_001.social.key;
        ssl_session_cache shared:SSL:1m;
        ssl_session_timeout  10m;
        ssl_ciphers PROFILE=SYSTEM;
        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 {
        }
    }

}

启动Nginx

systemctl start nginx.service

重启Nginx

systemctl restart nginx.service

注意，有时候加载网页发现出现nginx 404 not found 是因为：
- 更改了nginx配置文件内容但是没有刷新，需要重启nginx
- nginx配置文件使用了错误的网页页面文件夹地址，在hexo中，地址为博客根目录下的 public 文件夹位置
- 给博客文件夹赋权 chmod 777 folder

生成网页

hexo clean	//该命令执行后清除public文件夹

hexo g -d  //该命令首先生成静态文件，然后立即部署

如果想先预览一下网页，可以使用 hexo s 命令，默认访问端口是4000，这时候我们需要开启服务器的4000端口否则无法访问
打开阿里云轻量级应用服务器，配置防火墙用来开放端口

注意：无论是使用 hexo g -d 还是 hexo s 首先都最好先执行hexo clean

其他配置要求

关于git

在某些服务器中预先不会有git命令，或者重装系统后需要重新安装git命令

Git安装

我使用的云主机是centos8系统的，之前也用过ubuntu18系统，但是感觉效果不怎的，可能试的次数比较少吧
先检查是否有git

git --version

没有则安装，旧的卸载重装

＃卸载旧的git
yum remove git
# 安装依赖库
yum install curl-devel expat-devel gettext-devel openssl-devel zlib-devel
# 将git下载安装到/usr/local/src目录
cd /usr/local/src
wget http://ftp.ntu.edu.tw/software/scm/git/git-2.26.0.tar.gz
tar -zvxf git-2.26.0.tar.gz
# 进入目录
cd git-2.26.0
# 编译执行
make prefix=/usr/local/git all
# 安装 git 到 /usr/local/git 目录下
make prefix=/usr/local/git install

配置Git环境变量

打开环境变量配置文件进行配置

vim /etc/profile

#添加以下内容
PATH=$PATH:/usr/local/git/bin   # git 的目录
export PATH

# 使配置的环境变量生效
source /etc/profile

验证git安装成功

git --version

云主机与GitHub交换SSH密匙

Git初始化

# 设置github昵称
git config --global user.name 'mxrmiss'
# 设置github邮箱
git config --global user.email 'heroli520@outlook.com'

git status 无法显示中文

git config --global core.quotepath false

创建ssh密匙

ssh-keygen -t rsa -C "GitHub 邮箱"

输出 id_rsa.pub 内容并复制到GitHub中的setting页面上

cat id_rsa.pub

ssh -T git@github.com 输入此命令，显示successful表示成功

博客与github page挂钩

在github上新建一个仓库，仓库名为自己的 github名.github.io
在自己的博客目录下的站点配置文件_config.yml中进行配置，在文件的末尾找到并进行修改：
```
deploy:
	type: git
	repo: //填仓库地址
	branch： master  //填写上传页面的分支
```
安装git部署插件
```
npm install hexo-deployer-git --save
```

关于node.js

对于某些非轻量级应用服务器需要对node.js进行更详细的设置

node.js下载

cd /opt
wget https://npm.taobao.org/mirrors/node/latest-v15.x/node-v15.0.1-linux-x64.tar.xz  # 下载二进制安装包

node.js部署

cd /opt
tar xf node-v10.16.0-linux-x64.tar.xz 
ln -s node-v10.16.0-linux-x64 nodejs
nodejs -> node-v10.16.0-linux-x64

版本信息

cd /opt/nodejs/bin
./node -v
会看到 v10.16.0

创建软连接

ln -s /opt/nodejs/bin/node /usr/local/bin/node
ln -s /opt/nodejs/bin/npm  /usr/local/bin/npm

# 验证
node -v

关于 hexo

有些服务器安装hexo需要进行更多的配置

安装hexo

npm install hexo-cli -g

采用软连接的方式将hexo添加入全局变量

ln -s /opt/nodejs/lib/node_modules/hexo-cli/bin/hexo /usr/local/bin/hexo

当安装hexo报错

解决错误：

Missing write access to /usr/local/lib/node_modules是没有写权限, npm官方给出的解决方案是新建一个有权限的文件夹, 在这个新文件夹中安装npm包. 这个方法不适用于Microsoft Windows系统.
在用户的根目录创建文件夹(名字不一定要是.npm-global, 可以自己起):

mkdir ~/.npm-global

设置npm全局包的安装路径:

npm config set prefix '~/.npm-global'

在用户的根目录下查看有没有.profile文件, 如果没有就创建, 然后用文本编辑器打开, 加上以下一行, 保存:

export PATH=~/.npm-global/bin:$PATH

回到终端运行以下命令, 让配置生效:

source /etc/profile

然后全局安装npm包就可以了.

参考链接

将 Hexo 所在的目录下的 node_modules 添加到环境变量之中即可直接使用 hexo ：

echo 'PATH="$PATH:./node_modules/.bin"' >> ~/.profile

一些错误解决

hexo发生error:spawn failed错误的解决方法

原文链接
问题原因：由于git进行push或者hexo d 的时候改变了一些 .deploy_git 文件下的内容

# 出现错误
error:spawn failed...
#解决方法
1. 删除blog文件夹中的 .deploy_git 文件夹
2. 输入 git config --global core.autocrlf false
3. 
	hexo clean
	hexo g
	hexo d

git add 博客文件提示博客主题是仓库

当我们对博客进行同步的时候，我们会使用git add 命令来添加同步文件，但是会提示hexo主题文件是一个仓库，不允许仓库里面套仓库上传，除非将里面的仓库也一起同步
解决办法：按照提示，清除缓存，但是不要将主题仓库设置为同步

加载网页只显示文字

当我们加载网页的时候，我们可能会发现网页没有任何背景以及图片，只显示文字，这时候我们就应该在博客配置文件或者主题配置文件中关闭 强制使用HTTPS 这一选项，使用
GitHub page也是如此


Hexo官网	hexo-theme-ayer: gitee
Hexo文档	hexo-theme-bamboo: gitee
Hexo主题	hexo-theme-fluid: gitee
Hexo 部署到 GitHub Pages	hexo-theme-butterfly: gitee
	hexo-theme-ayer: github
博客园，CSDN等平台利用Github绑定域名	hexo-theme-bamboo: github
typora+阿里云图床+印象笔记+OneDrive	hexo-theme-fluid: github
图标网站：Font Awesome	hexo-theme-butterfly:github

Soul Blog

Deep into the soul of the blog

博客搭建(基于hexo)

准备工作

博客框架选择

博客主题选择

butterfly

其他主题介绍

Fluid

Ayer

主题对比

Bamboo

服务器

开始搭建

镜像选择

安装Hexo

创建文件夹

建立仓库

创建文件夹

主题(butterfly)

安装主题

主题配置

添加备案信息

文章设置

配置 _config.yml

安装 Nginx

生成网页

其他配置要求

关于git

Git安装

配置Git环境变量

云主机与GitHub交换SSH密匙

博客与github page挂钩

关于node.js

关于 hexo

安装hexo

当安装hexo报错

一些错误解决

hexo发生error:spawn failed错误的解决方法

git add 博客文件提示博客主题是仓库

加载网页只显示文字

相关链接(有用)

公告