从零开始搭建个人Hexo博客

最新推荐文章于 2024-06-13 14:48:48 发布

_artoria_

最新推荐文章于 2024-06-13 14:48:48 发布

阅读量2.9k

点赞数 3

分类专栏： Git 个人博客文章标签： hexo nginx git

本文链接：https://blog.csdn.net/UtopiaOfArtoria/article/details/86539130

版权

Git 同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

个人博客

1 篇文章 0 订阅

订阅专栏

从零开始搭建个人Hexo博客

~~最终个人博客搭建成功后的效果图如：我的博客~~ ，阿里云服务器和域名已经过期，无法查看。

购买阿里云服务器和域名

虽然可以把我们的博客系统托管在github上面，但是由于之前我就购买了阿里云服务器，所以就理所当然地直接把博客系统放在自己的云服务器上面了。

首先需要你有一个阿里云账号。你可以在阿里云官网进行注册一个新账号，当然你也可以直接用跟阿里相关的第三方账号如：淘宝账号/支付宝账号/钉钉账号等去登陆阿里云的官网。

然后，服务器和域名购买 >>> 域名的解析 >>> 域名和服务器的绑定可参考阿里云官方帮助文档。由于只能在购买了域名3个月之后才能备案，而且备案需要的手续稍显复杂，前期又不影响使用，这里就不做说明了。

环境配置

Hexo是一个快速、简洁且高效的博客框架。它是使用 Markdown（或其他渲染引擎）解析文章，在几秒内，即可利用靓丽的主题生成静态网页。使用Hexo框架需要预先安装Git和Node.js。

Node.js可从Node.js官网下载地址下载对应平台最新版本的安装包；Git也可从Git官网下载地址下载最新版本的安装包。这些安装包的解压和安装非常简单，不太熟悉的也可自行谷歌或百度相关教程。通过在命令行工具键入如下命令git --version 和node -v能正确显示版本信息说明安装成功。

如我在本地电脑（Windows）和阿里云（Linux）都已经配置好了对应的环境：

环境配置图

本地电脑测试Hexo框架

我们可以在本地电脑上测试Hexo框架的博客效果图。

# 安装hexo必需的依赖包hexo-cli
npm install -g hexo-cli
# 在e盘下初始化一个hexo项目的根目录blog
cd e:
hexo init blog

hexo初始化后blog项目的目录效果图如下：

hexo初始化目录效果图

目录结构解释如下：

名称	作用
node_modules	这是blog项目存放npm依赖包的地方
public	生成的静态文件的存放目录
scaffolds	系统声明了几个默认的标签tag,page等等
source	这是存放blog项目源文件的地方
themes	这是存放blog项目主题的地方
_config.yml	这是blog项目的全站配置文件
package	这是blog项目的hexo依赖版本信息
package-lock	这是blog项目的npm依赖包详细版本信息

这里需要做一些额外说明的是：

源文件目录source，就是以后我们把写好的Markdown格式文章的存放目录。
主题目录themes，hexo允许我们选取自定义的主题。hexo官网主题列表提供了很多可用的主题，我们可以选取自己喜欢的主题，将该主题的源码通过git clone命令下载到该themes目录后，在全站配置文件_config.yml中配置theme属性的值即可启用该主题。
全站配置文件_config.yml，hexo允许我们在该配置文件中配置属性值来修改页面的样式。之所以叫“全站配置文件”，除了这个配置文件基本都是进行全局配置之外，还有一个原因是：还有一个“主题配置文件”与之对应。如hexo默认的主题配置文件就是（./themes/landscape/_config.yml）。基于landscape主题，对该配置文件属性值的修改，可以对局部的样式进行修改。

执行hexo server命令，在浏览器地址栏输入localhost:4000即可看到如下效果。

博客默认首页页面

常用的hexo命令汇总如下：

命令	作用
hexo init [folder]	hexo项目的初始化
hexo new <title>	新建一篇文章—(在./source目录执行)
hexo g	生成静态文件
hexo d	发布静态文件
hexo publish	发布草稿
hexo server	启动服务器
hexo clean	清理缓存文件

注：此时就可以在阿里云服务器上通过上述操作，添加文章，并通过nohup hexo server &命令发布自己的静态博客并暴露成一个服务（如果仅仅是使用hexo server命令发布，命令行工具会一直阻塞，使用Ctrl + C强制停止时客户端就无法访问博客了）。

自动化部署实现

如果每次想添加新文章时，在本地电脑把文章的内容测试通过后，还需要再将文章手动上传到阿里云服务器，最后重新发布。这样操作未免太不人性化了。这里考虑采用的改进方案是：通过git管理我们的blog项目，本地电脑测试通过好，git push推送到云服务器时会通过git提供的钩子post-receive实现项目的自动化部署。

实现的思路示意图大致如下:

自动化部署的架构示意图

云服务器端安装nginx

hexo默认暴露的端口是4000，为改善用户体验，可用nginx的反向代理技术实现“在客户端的浏览器地址栏中只输入域名，即可跳转至博客首页”。同时nginx还具备记录所有访问该博客系统ip地址日志的功能。因此安装nginx很有必要。

# 通过yum命令安装nginx
yum install nginx

# 新建测试nginx是否安装成功的默认主页，并编辑页面内容如下
mkdir -R /home/hexo/
vim index.html
# <!DOCTYPE html>
# <html>
#   <head>
#     <title></title>
#     <meta charset="UTF-8">
#   </head>
#   <body>
#     <p>Nginx running</p>
#   </body>
# </html>

# 进行nginx的配置如下
vim /etc/nginx/nginx.conf
# ...
# server {
#   listen       80 default_server;
#   listen       [::]:80 default_server;
#   server_name  www.zhenye163.cn; #这里需要填写自己的域名
#   root         /home/hexo;
# }
# ...

# 重启nginx服务，使新配置生效
systemctl restart nginx

由于我的域名目前还没有备案，因此在客户端浏览器直接输入我的域名zhenye163.cn时，页面是看不到“Nginx running”字样的。不过可以在云服务器的命令行中，通过curl zhenye163.cn命令测试nginx是否成功安装。

结果图如下时，说明nginx安装成功：

nginx安装成功示意图

云服务器配置blog的远程仓库

# 初始化一个裸仓blog.git
mkdir /home/gitrepo
cd /home/gitrepo
git init --bare blog.git

# 配置一个git的post-receive钩子（钩子脚本内容：设置git的工作目录并检出其内容）
mkdir -p /home/www/blog
vim /home/gitrepo/blog.git/hooks/post-receive
# #!/bin/bash
# git --work-tree=/home/www/blog --git-dir=/home/gitrepo/blog.git checkout -f

# 授予“可执行”权限
chmod +x /home/gitrepo/blog.git/hooks/post-receive

本地电脑配置blog的本地仓库

# 安装相关依赖包
npm install hexo-cli hexo-server hexo-deployer-git -g
# 初始化blog项目
cd e:
hexo init blog
# 在本地仓库的全站配置文件中配置发布方式
cd blog
vim _config.yml
# # URL
# url: http://zhenye163.cn      //个人域名
# # Deployment
# deploy: 
# type: git
# repo: root@zhenye163.cn:/home/gitrepo/blog.git
# branch: master

# 使用hexo命令生成静态文件，并发布到服务器
hexo clean
hexo g
hexo d

修改云服务器的nginx配置

# 重新配置nginx的根目录，并重启nginx服务
vim /etc/nginx/nginx.conf
# server {
#   listen       80 default_server;
#   listen       [::]:80 default_server;
#   server_name  www.zhenye163.cn; #这里需要填写自己的域名
#   root         /home/www/blog;
# }
# ...
systemctl restart nginx

此时，就可以在客户端浏览器的地址栏通过域名（zhenye163.cn）访问博客的主页了。前提是我的域名备案流程走完~~~

原理说明：

在本地电脑中执行了hexo d命令后，本地电脑会把本地静态文件推送到远端仓库。基于blog项目的全站配置文件中repo: root@zhenye163.cn:/home/gitrepo/blog.git的配置项，会推送到远程仓库/home/gitrepo/blog.git中。
又由于远程仓库blog.git配置了钩子blog.git/hooks/post-receive（--work-tree=/home/www/blog），blog.git成功获取到本地电脑推送的文件后，会自动把这些文件发送到home/www/blog。
又由于nginx.conf中配置默认端口80的根目录为root: /home/www/blog。当客户端在浏览器中输入我的域名zhenye163.cn，由于nginx的反向代理，会将云服务器的/home/www/blog/index.html的内容（即博客主页）返回到客户端的浏览器中。

所以我们平时更新自己博客的流程就是：

在命令行git bash的工作目录调整至hexo的根目录（这里就是cd e:/blog/），通过执行hexo new $fileName命令，hexo会帮我们在blog/source/_post生成一个同名的.md文件。
我们可以通过使用VSCode/有道云笔记等等文本编辑器，以markdown的语法编辑该.md文件的内容，即编辑我们的文章内容。
当文章内容确定后，通过执行hexo server命令，访问localhost:4000可以在本地电脑看到博客的渲染效果。
当文章内容和样式都确定后，在通过执行hexo d命令，将本地电脑的静态文件上传到远程服务器上。又由于我们设置好了git的post-receice钩子和nginx的配置。其他所有人就都可以通过域名访问最新的博客主页。

NexT主题样式配置

由于默认的主题landscape实在不太美观，所以一般都会考虑换个博客的主题。这里我推荐的就是NexT主题。

实际换主题以及主要功能实现的相关配置如下：

换成next主题

# 通过git clone命令拉取next主题相关的源代码，并放在themes目录下，克隆成功后，该目录会多一个next文件夹
cd blog/themes
git clone https://github.com/theme-next/hexo-theme-next next

# 编辑全站配置文件，将其中theme属性的值由landscape替换为next
vim ../_config.yml
# # Extensions
#   theme: next

# 保存并退出（:wq）后，重新启动服务器后即可看到效果
hexo clean
hexo g
hexo server

此时本地测试看到的效果如下：

自动化部署的架构示意图

当然，此时的布局也不太美观。具体样式的完善，就是根据不同的配置项去修改全站配置文件blog/_config.yml和next主题配置文件blog/themes/next/_config.yml。

next主题个性化的配置详情可参考hexo的next主题个性化配置教程，这基本是我找到最完整最丰富的配置教程。

在这个教程之外，我还有几点需要补充的就是：

next主题全文检索的实现

# 在该项目的根目录，安装本地全文检索必须的依赖包
cd e:/blog
npm install hexo-generator-searchdb --save

# 修改全站配置文件，并添加如下配置
vim _config.yml
# search:
#   path: search.xml
#   field: post
#   format: html
#   limit: 10000

# 修改next主题配置文件，设置启用全文检索功能
vim themes/next/_config.yml
# local_search:
#   enable: true

保存修改之后，目前的实际效果图如下：

全文检索效果图

next主题留言板的实现

谷歌或百度到可以添加留言板功能的有很多，但真正免费好用的还是Valine。其他的要么就是需要备案，要么就是需要用户登录。

具体实现步骤如下：

首先去leanCloud官网注册账号，并申请一个新应用（我新建的应用名称为blog）,并为该应用配置好安全域名（也就是我们的域名）。此时leanCloud就会免费帮我们存储评论相关的数据记录。

leanCloud配置安全域名

同时要记录好这里的App ID，App Key(这里的AppId,AppKey对于每个应用是唯一的)

记录应用的appId和appKey

然后，对next主题配置文件做如下配置：

# 对next主题进行如下配置：
vim theme/next/_config.yml
# valine:
#   enable: true # 是否起启用valine
#   appid: xxxxxx # leanCloud获取到appid
#   appkey: xxxxxx # leanCloud获取到的appkey
#   notify: false
#   verify: false 
#   placeholder: Just go go # 评论的提示信息
#   avatar: mm 
#   guest_info: nick,mail,link 
#   pageSize: 10 # 每页评论条数

重新启动后的效果图如下：

valine评论效果图

同时，leanCloud还可以对所有的评论，进行管理。这里就是对评论进行简单的增删改查操作。（也就是说，对于一些不友善的评论，我们可以直接在leanCloud里面进行删除）

valine评论管理效果图

next主题还有很多其他的配置项，这里就把全文检索和评论这两个最关键的功能的实现进行说明。至于其他的功能实现，有需要的话可以自行谷歌或百度。

汇总

目前，我的域名还没备案，因此还不能采用nginx + git实现自动部署（客户端直接输入域名时，被重定向到了备案页面）。但实际流程已经实现了（更新博客时，静态文件都能同步上传到阿里云服务器）。

为了博客现在就能访问，我在阿里云服务器上又搭建了一份，并通过nohup hexo server &命令实现博客的发布。此时通过域名+实际端口号的方式（zhenye163.cn:4000）在浏览器中是可以访问的。

还有一点儿需要说明的是，直接通过百度搜索时，目前是搜索不到我的博客的。还是上面说的那个原因—我的域名没有备案，百度不收录~~~，只能通过在浏览器地址栏直接输入网址才能访问。

_artoria_

关注

3
点赞
踩
15

收藏

觉得还不错? 一键收藏
1
评论
从零开始搭建个人Hexo博客

从零开始搭建个人Hexo博客最终个人博客搭建成功后的效果图如：我的博客购买阿里云服务器和域名虽然可以把我们的博客系统托管在github上面，但是由于之前我就购买了阿里云服务器，所以就理所当然地直接把博客系统放在自己的云服务器上面了。首先需要你有一个阿里云账号。你可以在阿里云官网进行注册一个新账号，当然你也可以直接用跟阿里相关的第三方账号如：淘宝账号/支付宝账号/钉钉账号等去登陆阿里云的官网...
复制链接

扫一扫

专栏目录