基于Hexo搭建静态博客

时间：2022-12-25 22:04:37

关于静态博客

通常来讲，建立个人博客有2种方式：
第一，直接在第三方博客平台注册博客空间，如：博客园，简书，CSDN等，这种方式建立的博客，所有数据都存放在博客平台。
第二，自建博客系统，这种方式就是自己实现与博客平台相同的功能，需要涉及多个部分，如：购买云主机，注册域名，CDN，图床等。

自建博客系统也分为2种方式：
其一，使用传统方式建立博客系统，整个系统包含多个组件，如：数据库，管理后台，前台博客展示，有诸多非常优秀的开源方案可以选择，如：Wordpress，Halo等等。由于前端博客页面是动态从数据库查询数据来渲染展示的，可以把这种传统的博客称之为动态博客。即：所有博客相关的数据都保存在数据库中，对数据库是强依赖。
其二，采用静态博客框架将静态文件（如：Markdown语法格式的文件）转换为HTML文件，这样可以直接将这些动态生成的HTML文件布署到Web服务器即可，不需要依赖数据库，当然也不需要管理后台，所有博客文章都是静态文件。目前已经有许多优秀的静态博客框架，如：Hugo，Hexo等等。把这种无需依赖数据库系统，也不需要管理后台建立的博客称为静态博客。

当然，所谓“动态博客”和“静态博客”，他们各有利弊。相比较而演，动态博客的使用门槛低，只需要关注写博客本身即可。而静态博客的搭建需要一定的编程技能基础，但是定制非常灵活，数据管理和备份也非常方便。

环境准备

先安装好Node.js，并配置使用淘宝镜像源。

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

安装Hexo

执行如下命令安装Hexo：

npm install -g hexo-cli

初始化

执行如下命令初始化博客：

# 初始化一个名称为iblog的博客目录，将来所有关于博客的参数设置，以及写博客文章都在该目录下进行
hexo init iblog
cd iblog
npm install

完成上述操作后，在博客文件夹下将会看到如下目录结构：

.
├── _config.yml
├── package.json
├── scaffolds
├── source
|   ├── _drafts
|   └── _posts
└── themes

themes目录保存主题相关的文件，所有安装的主题都保存在该目录下。
source目录保存博客文章静态文件，其中 _drafts保存草稿，_posts保存正式文章，这可以在新建资源时指定类型。
_config.yml是博客的全局配置文件（注：通常主题也会有一个名为 _config.yml的配置文件）。

至此，一个静态博客的基本基本雏形已经完成了，接下来则需要对博客进行主题配置，并开始写博客文章了。

配置主题

主题决定了博客的展示样式和支持的功能。

安装hexo-theme-3-hexo主题。
主题详细配置：3-hexo使用说明 。

写博客

在博客根目录下执行如下命令新建一篇博客：

hexo new post "这是第一篇静态博客文章"

生成静态页面

写好文章后，在博客根目录下执行如下命令生成静态页面：

hexo generate

执行完上述命令之后，将会在博客根目录下生成一个名为 public的目录，该目录保存着动态生成的HTML文件，将 public目录下的内容托管到nginx即可访问。

在本地写博客时，可以在博客根目录下执行 hexo server命令，启动本地Web服务进行查看。

一些常用的插件

  • hexo-deployer-rsync ：通过rsync将本地生成的静态文件上传到服务器指定目录，执行命令 hexo deploy时调用该插件
  • hexo-deployer-git：将本地生成的静态文件上传到指定git仓库，执行命令hexo deploy时调用该插件

如何搭建博客编辑环境

静态博客本质上只是一个文本文件，所以理论上只需要一个文本编辑器即可。但是为了方便调试，最好还是在新的主机上安装如下环境，会给写博客带来比较好的体验。

  • 安装Node.js并配置使用国内镜像源（本站点使用的Node版本为v16.15.1）
  • 安装Hexo框架
  • 安装一个顺手的Markdown编辑器
  • 安装Git客户端（将本地写的博客文章保存到远程Git仓库）

每次写新的博客文章时，从git仓库拉取最新的博客数据，在博客根目录下执行如下命令安装依赖：

npm install

在博客根目录下执行如下命令创建一篇新的博客文章：

hexo new post "博客文章标题"

编辑博客文章并保存

在博客根目录下执行命令：

# 简写：hexo s
hexo server

在本地启动Hexo框架服务器进行调试预览。

将新写的博客文章提交到git仓库。

最后在博客根目录下执行如下命令将最新的博客文章发布到Web服务器（本质：重新生成静态文件，并上传到Web服务器目录）。

# 简写：hexo d
hexo deploy

Hexo常用命令

# 初始化博客目录
hexo init 博客名称

# 新建博客文章：执行该命令后将会在博客根目录/source/_posts路径下新建一个markdown文件
# 编辑该markdown文件即可
hexo new post '文章标题'

# 将markdown文件转换为html页面（保存到博客根目录/public路径），将来布署到web服务器的是这些转换后的html页面
hexo generate
或
hexo g

# 启动本地Web服务器，默认启动在4000端口，打开浏览器即可看到整个博客站点的所有文章
hexo server
或
hexo s

# 将博客根目录/public路径下转换生成的html页面上传到指定主机
# 这个功能需要先在博客根目录/_config.yml文件配置布署参数，如下示例将通过rsync将文件上传到指定服务器目录
# deploy:
#  type: rsync
#  host: 192.168.10.122
#  user: zhangsan
#  root: /data/www/html
hexo deploy
或
hexo d

# 清空博客根目录/public路径下的所有数据
hexo clean

可以将上述命令写一个脚本中，方便调用。

如下脚本示例可用于一键布署最新博客站点（deploy.sh）：

#!/bin/bash
hexo clean
hexo g
hexo d

相关文章