基于Hexo搭建静态博客

发布时间 2023-03-22 19:08:09作者: nuccch

关于静态博客

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

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

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

环境准备

先安装好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