首页 > 其他分享> 文章详细

博客搭建(基于hexo)

2022-01-09 22:31:21 阅读：310 来源： 互联网

标签：git Hexo hexo 主题博客 theme 文件夹搭建

准备工作

博客框架：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

ICode9

博客搭建(基于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 博客文件提示博客主题是仓库

加载网页只显示文字

相关链接(有用)