Hexo-初始化静态网站

Posted: Categories: Tags: , Symbols: 5.1k Duration ≈ 6 mins.
（1）建立并连接网站仓库；（2）安装必要环境；（3）渲染并发布网站。

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. 远程连接

2.1 SSH鉴权

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

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

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

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

2.2 SSH访问服务器

SSH 访问的基本命令：ssh [username]@[hostname]。通常 Linux 都会包含一个 root 用户，但是主流云服务平台基本都禁用了远程以 root 身份登录，如果云服务平台没有默认创建一个非 root 用户，就需要先在云服务控制台自带的终端上登录服务器并新增一个非 root 用户，之后才能通过本地或其他工具远程登录。

常见的远程连接工具：

（1）Mac 下有：

（2）Win 下有：

（3）跨平台的有：

当通过远程连接至服务器时，如果要在本地与服务器之间传输文件，可以使用 scp 命令：

1
2
3
4
5
6
7
8
9
10
11
12
13
# 本地文件复制到服务器：
scp [本地文件路径] [服务器登录用户名]@[服务器地址]:[服务器文件存储路径]
# 例如将本地用户目录下的 test.txt 复制到服务器 root 用户目录下并重命名为 db.txt：
scp /Users/user/test.txt root@127.0.0.1:/root/db.txt
# 若需要复制的是文件夹，则将命令 scp 改为 scp -r：
scp -r /Users/user/test root@127.0.0.1:/root/db

# 服务器复制到本地：
scp [服务器登录用户名]@[服务器地址]:[服务器文件存储路径] [本地文件路径]
# 例如将服务器 root 用户目录下的 db.txt复制到本地用户目录下并重命名为 test.txt ：
scp root@127.0.0.1:/root/db.txt /Users/user/test.txt
# 若需要复制的是文件夹，则将命令 scp 改为 scp -r：
scp -r root@127.0.0.1:/root/db /Users/user/test

3. 安装必要环境

通常，基于 Hexo 驱动的静态博客，只需要这三个环境就够了：Git、Hexo、Node.JS，其中 Node.JS 主要是使用其内含的包管理器 npm。

npm 国内速度太慢有 3 个解决方案（可先通过 npm config list 查看是否已有相关设置）：

  • 安装 cnpm，后续命令都替换为 cnpm；
  • 设置 npm 代理（例如：npm config set proxy="http://127.0.0.1:8080"）；
  • 设置国内镜像源（例如淘宝源：npm config set registry https://registry.npm.taobao.org），可通过 npm config get registry 查询所有源地址；

  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 g 和 hexo 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。

8. 多语言支持

参考文献