Blog-01：Hexo个人博客搭建

Hexo

• 什么是Hexo？

简介：Hexo 是一个快速、简洁且高效的博客框架。想要详细的了解 Hexo ，去官网学习。Hexo 使用 Markdown（或其他渲染引擎）解析文章，在几秒内，即可利用靓丽的主题生成静态网页。

安装前提

• 检查是否安装 homebrew

mac@bogon ~ % brew -v
Homebrew 3.6.21-28-ge6548a8
Homebrew/homebrew-core (git revision 5434c8344e8; last commit 2023-02-09)
Homebrew/homebrew-cask (git revision 15c2c1fa53; last commit 2023-02-09)
mac@bogon ~ % 

如果顺利显示版本号，说明homebrew已经安装。否则，输入以下命令进行安装：

mac@bogon ~ % ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

• 安装过程如果出现下面的问题

curl: (7) Failed to connect to raw.githubusercontent.com port 443: Connection refused

解决:

mac@bogon ~ % /usr/bin/ruby -e "$(curl -fsSL https://cdn.jsdelivr.net/gh/ineo6/homebrew-install/install)"

• 安装 Node.js

mac@bogon ~ % brew install node
mac@bogon ~ % node -v
v18.14.2

3. 安装Git
   Mac系统默认已经安装好了，所以不需要再安装

安装Hexo

如果您的电脑中已经安装上述必备程序，那么恭喜您！你可以直接前往安装 Hexo 步骤。

• 使用npm完成 hexo 安装

mac@bogon ~ % npm install -g hexo-cli
mac@bogon ~ % hexo -v

hexo-cli: 4.1.0
os: Darwin 21.6.0 darwin x64
node: 12.16.1
v8: 7.8.279.23-node.31
uv: 1.34.0
zlib: 1.2.11
brotli: 1.0.7
ares: 1.15.0
modules: 72
nghttp2: 1.40.0
napi: 5
llhttp: 2.0.4
http_parser: 2.9.3
openssl: 1.1.1d
cldr: 35.1
icu: 64.2
tz: 2019c
unicode: 12.1
mac@bogon ~ % 

建站

• 桌面新建 Blog 文件夹，打开终端，cd到 Blog 下，执行:

mac@bogon ~ % cd /Users/mac/Desktop/Blog 
mac@bogon Blog % hexo init

INFO  Cloning hexo-starter https://github.com/hexojs/hexo-starter.git
INFO  Install dependencies
npm notice 
npm notice New major version of npm available! 7.3.0 -> 9.5.1
npm notice Changelog: https://github.com/npm/cli/releases/tag/v9.5.1
npm notice Run npm install -g npm@9.5.1 to update!
npm notice 
INFO  Start blogging with Hexo!
mac@bogon Blog % 

【目录文件】：

_config.landscape.yml：网站本地配置信息
_config.yml：网站的配置信息，可以在此配置大部分的参数
source–posts：存放 md 文件
themes：主题文件夹，常用主题 会放入这里
public：Markdown 和 HTML 文件会被解析并放到 public 文件夹，而其他文件会被拷贝过去

hexo 测试

• 生成静态页面

mac@bogon Blog % hexo g

会在根目录 Blog\ 下生成 public 文件夹，里面包含相应的 html 页面。

• 启动服务器

mac@bogon Blog % hexo s

打开浏览器，输入网址: http://localhost:4000 ，即可看到hexo生成的静态页面。

• 停止服务器

Ctrl + C

主题

hexo提供了很多主题可以参考，下面以 hexo-theme-casual 主题为例

• 安装主题插件

hexo-theme-redefine

无

hexo-theme-casual

mac@bogon Blog % $ npm install --save hexo-renderer-jade hexo-renderer-scss hexo-generator-feed hexo-generator-sitemap hexo-browsersync hexo-generator-archive hexo-generator-search

hexo-theme-snippet

mac@bogon Blog % $ npm i hexo-renderer-ejs hexo-renderer-less hexo-deployer-git -S

hexo-theme-butterfly

mac@bogon Blog % $ git clone -b dev https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly
mac@bogon Blog % $ npm install hexo-renderer-pug hexo-renderer-stylus

• 下载主题

进入主题的 github 下载页，点击 code -> clone，复制 https 下载链接，进入 博库Blog目录，运行下面的命令：

mac@bogon Blog % cd /Users/mac/Desktop/Blog 
mac@bogon Blog % cd themes 
mac@bogon themes % git clone https://github.com/littlewin-wang/hexo-theme-casual.git

【注】：主题存放的目录是 Blog/themes，为了方便管理，每一个下载的主题都建一个单独的目录，我这个主题的目录是 hexo-theme-casual，可以下载多个主题:

• 主题应用

找到 博客Blog 目录下的配置文件 _config.yml，找到 Extensions 模块，修改 theme 字段：

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: hexo-theme-casual

• 启动本地服务器

mac@bogon Blog % hexo s

INFO  Validating config
INFO  Start processing
INFO  Hexo is running at http://localhost:4000/ . Press Ctrl+C to stop.
[Browsersync] Access URLs:
 ----------------------------------
          UI: http://localhost:3001
 ----------------------------------
 UI External: http://localhost:3001
 ----------------------------------

• 查看效果

通过 http://localhost:4000/ 查看修改后的效果

• 主题更新

这一步不是必须的，如果主题有优化，我们需要在本地同步更新一下

mac@bogon Blog % /Users/mac/Desktop/Blog/themes/casual 
mac@bogon Blog % git pull

其他命令

• 清除旧的内容

hexo clean

• 生成静态发布页面

hexo g

• 发布页面

hexo d