Hexo制作静态网页网站（1）- 环境的搭建和基本配置

Hexo 环境安装

需要安装的环境

• Node.js
• Hexo
• Hexo theme

参考的环境版本

# 建议选择 LTS 版本，过高的版本 hexo 还没有进行兼容
node.js: 14.17.3 ~ 18.12.0
# node.js 包管理工具
npm: 6.14.13 ~ 8.19.2
# Hexo bolg 的核心 node module 包
Hexo: 5.4.0 ~ 6.3.0
# Hexo 的管理工具包
hexo-cli: 4.3.0 ~ latest

Node.js 的安装与配置

安装与环境检查

• 下载官网安装包
  node.js官网
• 检查系统 PATH 环境变量
  进入命令行控制器，如：cmd，使用 node -v 检查是否返回版本信息，比如：v18.12.0

npm 包管理工具的配置

针对国外 npm 服务器可能存在的限速问题，可以使用国内镜像源优化。当然也可以安装 cnpm，但不推荐，防止出现稀奇古怪的问题。

可使用如下命令配置使用国内镜像源

npm config set registry nmp_mirror_url

常见的国内镜像源：

# 淘宝
https://registry.npmmirror.com
# 华为云
https://mirrors.huaweicloud.com/repository/npm/
# 腾讯云
http://mirrors.cloud.tencent.com/npm/

npm 常用命令管理项目包

# 安装包模块
# -g 指定全局安装
npm install name [-g]
# 指定包模块的安装版本
npm install name@version
# 移除安装的包模块
npm uninstall name

Hexo 的安装

Hexo 是基于 node.js 实现的bolg的创建和管理工具，基于网页layout组件模块拼接和渲染构建网页，生成静态网站资源。具体细节可参考Hexo官网。

Hexo 安装方法

# 全局安装
npm install hexo-cli -g
# 局部安装
npm install hexo
# 可使用如下方式在项目内局部运行 hexo 命令
npx hexo <command>
# 或者将项目局部的Hexo安装位置的node_module配置到PATH

Hexo 的简单使用

Hexo 的核心是基于 post 和 page 的 layout 模板实现构建静态网站的基本结构和内容主题。post 代表实时发布的博客模式，page 一般对应于单独的网页如：tag、about、archive 等的实现。

可供参考简单使用的流程如下：

1. 创建并初始化项目

hexo init blog_name
cd bolg_name

2. 创建新的 post

hexo new "My New Post"
bash

3. 基于 `layout` 创建页面

```bash
# 基于 page layout
# 可修改主题实现自定义 layout
hexo new page "My New Page"

4. 渲染所有页面资源，生成静态网站资源

hexo generate
# 可简写为
hexo g

5. 本地部署网站和调试

hexo server
# 可简写为
hexo s

6. 部署到远程服务器

hexo deploy

部署需要编的辑配置文件信息 _config.yml。

deploy:
# 托管类型
- type: git
# 仓库地址
  repo:
- type: heroku
  repo:

以部署到 git 的静态网页托管服务为例,需要安装 hexo-deployer-git 的 node_module 包。

npm install hexo-deployer-git --save

Hexo theme 的安装

可以在官方hexo theme中挑选喜欢的主题，同时支持学习自己定制主题（可以上传自己的主题），hexo 可使用 ejs 作为模板渲染语言。接下来，可能会出文章介绍。

安装方法，以 steller 主题为例：

# 为本项目安装
npm install hexo-theme-stellar

配置使用主题，需要修改配置文件_config.yml。

theme: stellar

接下来，将结合 steller 主题介绍 hexo 主题的使用和配置方法。