博客搭建(基于hexo)

准备工作

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

博客框架选择

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

文档 | Hexo

博客主题选择

butterfly

其他主题介绍

Fluid

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

Ayer

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

主题对比

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

Bamboo

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

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

服务器

这里不给相关链接，因为不想被理解是打广告的，服务器可以买，也可以不买，不买的话使用 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的仓库克隆到我们的计算机上，然后编辑里面的文件，结束后我们于服务器上同步内容
如我的仓库：

创建文件夹

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

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: truesince: 2021custom_text: you are my friendcopyright: true # Copyright of theme and frameworkICP:enable: false  # 是否启用ICPurl: http://www.beian.miit.gov.cn/  # 点击后的链接地址text: 某ICP备xxxx  # 备案号icon:    # 图标
NSP:enable: false   # 是否启用NSPurl: http://www.beian.gov.cn/  # 点击后的链接地址text: 某公网安备 xxxxx号    # 公安备案号icon: https://blog.imashimaro.com/images/20200805012127.png  # 图标

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

#footer-wrapif 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-infospan= _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.icpa(href=theme.ICP.url)if theme.ICP.iconimg.icp-icon(src=url_for(theme.ICP.icon))span=theme.ICP.textif theme.NSP.enable.icpa(href=theme.NSP.url)if theme.NSP.iconimg.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 部分（默认页面加载部分）

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

以下是我的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: gitrepo: //填仓库地址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 cleanhexo ghexo 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

博客搭建(基于hexo)相关推荐

个人博客搭建记录 Hexo+Butterfly+Github Page+Coding
1.前言其实一直有搭建博客的想法,但直到今天才开通了第一个博客,还是利用上假期的闲工夫.在大佬们博文的帮助下,小站初具模样,这里对他们致以万分感谢.下面就搭建过程进行简单记录.点击前往我的小站
个人博客搭建笔记----hexo根目录下的_config.yml配置解释
我们在使用hexo初始化一个项目的时候,在根目录下会有一个配置文件_config.yml,这个文件配置了所写博客里面的内容,我们从根目录的该文件来说明每个配置的作用 # Hexo Configurat ...
Hexo结合Stun静态博客搭建从入门到入土
摘要安装npm,安装hexo相关依赖,安装主题stun 修改hexo配置,修改stun配置,部署到github,gitee实现静态访问给博客加上全局搜索,访问量统计 hexo博客编写模板 tips ...
hexo个人博客搭建
title: hexo个人博客搭建 date: 2020-10-14 21:06:50 tags: 随笔 copyright: false hexo个人博客搭建过程安装软件 git nodejs t ...
基于github和hexo搭建博客本地hexo博客搭建
正常都应该讲一讲为什么搭建博客,不过既然您能看见这篇文章,就说明你想搭建一个自己的博客,无论自己记录自己的东西,或是为了显得高大上.那就不废话了,进入正题. 其实教大家搭建博客的文章很多,讲的都不错, ...
Hexo搭建博客教程-基于Butterfly主题
title: Hexo搭建博客教程 tags: Hexo 博客教程 categories: Hexo keywords: 'Hexo,博客教程' description: Hexo搭建博客,以及主题b ...
免费个人博客：使用hexo+github搭建详细教程
前言使用github pages服务搭建博客的好处有: 全是静态文件,访问速度快: 免费方便,不用花一分钱就可以搭建一个自由的个人博客,不需要服务器不需要后台: 可以随意绑定自己的域名,不仔细看的话 ...
手把手教从零开始在GitHub上使用Hexo搭建博客教程(二)-Hexo参数设置
前言前文手把手教从零开始在GitHub上使用Hexo搭建博客教程(一)-附GitHub注册及配置介绍了github注册.git相关设置以及hexo基本操作. 本文主要介绍一下hexo的常用参数设置. ...
【个人博客】Hexo个人博客搭建与配置详细教程 + Fluid主题 + Gitee发布
文章目录一.环境准备 1.1 安装 NodeJs 1.2 安装 Git 1.3 安装 Hexo 二.Gitee仓库搭建 2.1 Gitee账号注册 2.2 仓库搭建三.Hexo博客搭建 3.1 基 ...

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

加载网页只显示文字

相关链接(有用)

博客搭建(基于hexo)相关推荐

最新文章

热门文章