Hexo-初始化静态网站

Hexo-初始化静态网站

1. 建立静态网站仓库

首先在 GitHub 上用账号名新建一个仓库,名称为 [username].github.io,要注意是用户名而不是昵称。创建好了之后就已经可以通过 [username].github.io 访问。需要注意的是,这个仓库仅用来存储最终部署后的文件,而非平时写的文章。

假设在 本地仓库 存储博客配置和文章,Hexo 在部署时会生成 HTML 静态网页并 Push 到 Page 仓库,开启了 Page 服务的仓库会在每次收到 Push 后自动把 HTML 部署并发布成公网网页。

实际上 GitHub 限制的是每个账号只能拥有一个 账号 Page[username].github.io),但一个账号可以拥有多个 项目 Page,不过开启项目 Page 的前提是必须先开启账号 Page。


2. 连接SSH

自 2021/07/31 开始,GitHub 将逐步弃用 HTTP + 密码鉴权,全面转向 SSH / GPG 鉴权。

  • GPG 面向密钥持有者,需要自行维护一个仅可下发一次的随机、无规则的密钥,为了避免被盗用通常存放在设备的环境变量中,比较适合构建机、跳板机等。
  • SSH 则面向信任设备,只要在设备生成本地 SSH,并将公钥绑定在目标平台,即可在通信时自动鉴权。

SSH 和 GPG 各有优劣,以 SSH 为例。

  1. 查看本地是否存在目录 ~/.ssh,若存在则可跳过该步骤。
    • 执行命令生成密钥:ssh-keygen -t rsa -C "[comments]",其中 [comments] 只是一段注释说明,通常会用邮箱。
    • 回车执行后根据提示输入 SSH 密钥的密码,可以不加密。
    • 根据提示选择保存密钥的路径和文件名,默认为 id_rsa,如果需要生成多个,可以指定不同文件名。
    • 目录下将生成对应的私钥 [keyname] 和公钥 [keyname].pub
  2. GitHub -> Settings -> SSH and GPG keys 中点击 New SSH key 新建一个部署密钥,把公钥的内容复制到 Key栏并保存,Title 可随意输入。
  3. 本地终端验证密钥,执行命令:shh -T git@github.com,若显示 Hi XXX! You've successfully authenticated... 则连接成功。

在 Hexo 站点配置文件中指定 Push 仓库使用 SSH 鉴权方式:

1
2
3
4
5
6
7
deploy:
- type: git
## HTTP 鉴权已弃用
# repository: https://github.com/[username]/[username].github.io.git
## SSH 鉴权
repository: git@github.com:[username]/[username].github.io.git
branch: main

3. 安装必要环境

通常,基于 Hexo 驱动的静态博客,只需要这三个环境就够了:GitHexoNode.JS,其中 Node.JS 主要是使用其内含的包管理器 npm,通过这个管理器可以为博客部署很多有意思的插件。另外有个小提示,如果在国内使用感觉网速太慢的话,可以用 cnpm 命令替换。

  1. Git 下载地址:Git 下载

  2. Node.JS下载地址:Node.JS 下载

  3. 终端安装 Hexo 命令(在安装完 Node.JS 之后):

    1
    npm install -g hexo-cli

    如果安装结果出现红字报错无权限的情况,可以尝试以下两个命令其中一个:

    1
    2
    3
    4
    5
    # 尝试1:
    sudo npm install -g hexo-cli

    # 尝试2:
    sudo npm install --unsafe-perm --verbose -g hexo
  4. 检查环境安装情况:

    1
    2
    3
    4
    5
    6
    7
    8
    # Git 环境检查:
    git --version

    # Node.JS 环境检查:
    node -v

    # Hexo 环境检查:
    hexo --Version

    如果均能输出对应版本号即表示环境配置成功。


4. 初始化本地静态博客页

Hexo 环境安装完以后,就可以在本地建立管理目录了。在终端进入想要作为博客维护目录的路径,并执行以下命令初始化:

1
hexo init

执行完之后,目录下应该会出现几个文件及文件夹:

  • node_modules: 模块目录,包含了博客基础和自定义功能所需的组件。
  • public: 生成的最终部署到网页上所需的 HTML 文件。
  • scaffolds: 网站页面模板,用于在新建不同类型文件时,自动应用模板。
  • source: 网站内所有页面读取的根目录,包括文章、分类、标签、资源等等。
  • themes: 网站的主题,目录内可以包括各种不同的主题,并且可以在网站配置文件内随时更换。

Hexo 目录初始化完毕后,通过命令:

1
npm install

可以一键式安装所有必须的组件,为了能通过 Hexo 部署到 GitHub 上去,还要再额外安装 Git Deploy 组件:

1
npm install hexo-deployer-git --save

另附几个常用组件(可能已预装,可以通过 npm list 先查看已安装列表):

  • SiteMap 生成器:npm install hexo-generator-sitemap --save
  • 本地搜索:npm install hexo-generator-searchdb --save
  • 字数及阅读时间统计:npm install hexo-word-counter --save

5. 常用Hexo命令

常用的 Hexo 命令大致有如下数条:

  • hexo init [folder]: 初始化本地项目,可指定路径 folder,或默认为当前目录。
  • hexo generate / hexo g: 生成本地静态文件。
  • hexo server / hexo s: 启动本地服务器,启动后可在 localhost:4000 查看页面效果(如果 4000 端口被占用,可以通过修改 Hexo 的 Server 端口更换)。
  • hexo deploy / hexo d: 部署到 Github(或其他代码托管网站),由根目录下的 _config.yml 文件设定。
  • hexo clean: 清理缓存文件。
  • hexo new [layout] <title>: 新建文件(夹),可指定文件类型 layout,或默认由 _config.yml 中的 default_layout 决定。必填项 title 用于指定文章标题,若参数值中含有空格,需使用英文双引号包括。
  • hexo --safe: 安全模式,禁用加载插件和脚本,可在安装新插件遇到问题时启用。
  • hexo --debug: 调试模式,用于将消息详细记录到终端和 debug.log 文件。
  • hexo --silent: 静默模式,用于静默输出到终端。
  • hexo g -d / hexo d -g: 表示自动按顺序执行 hexo ghexo d

6. 部署博客基本功能

到上一步为止,博客是已经建立完基础功能了,但此时本地博客和 GitHub 上的静态托管还没有建立联系,想要在本地维护的博客能同步到 GitHub 仓库上,使得外网能通过 xxx.github.io 网页形式访问,还需要配置一下站点配置文件 _config.yml

1
2
3
4
5
6
# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
type: git
repository:
branch: master

在其中的 repository 后面填写自己的 Page 仓库 地址,修改完保存并三连部署,即可部署到 Page 仓库 上并通过公网访问。

另外还可以预先安装站点地图和百度站点地图生成插件:

1
2
3
$ npm install --save hexo-generator-sitemap

$ npm install --save hexo-generator-baidu-sitemap

并在站点配置文件中进行如下配置:

1
2
3
4
5
# 自动生成sitemap
sitemap:
path: sitemap.xml
baidusitemap:
path: baidusitemap.xml

这样在部署后就会自动在网站根目录下生成对应的文件,可通过 网站地址/sitemap.xml网站地址/baidusitemap.xml 访问。


7. 修改文章URL格式

默认情况下,文章的 URL 路径通常都是类似于:XXX/2018/07/22/aaa/bbb,不利于维护。Hexo 允许自定义 URL 格式配置:

1
2
3
4
5
6
7
8
9
# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
# 实际域名,如果有自定义域名则修改为自定义域名
url: XXXXX
# 文章的根目录,相对于 source 目录的地址
root: /
# 文章的链接格式,":xxx" 带有冒号表示从文章的 Front-Matter 中获取的值,"xxx" 没有冒号表示硬编的字符串
permalink: :year/:month/:day/:title/
permalink_defaults:

假如一篇文章的文件名为 demo.md,文章内的 Front-Matter 为:

1
2
3
4
5
6
---
title: 文章标题(文件名为demo.md)
from: test
categories:
tags:
---
  • 如果设置 permalink: post/:title/,则生成的文章链接为:url/post/demo
  • 如果设置 permalink: :from/:title/,则生成的文章链接为:url/test/demo

参考文献