关于hexo:Hexo-静态博客指南建站教程上

本文最后公布于我的集体博客 Bambrow’s Blog，采纳 BY-NC-SA 许可协定，转载请注明出处。若有后续更新，将更新于原博客。欢送去我的博客浏览更多文章！

本文具体记录一下站点建设过程，以便查阅。对于具体的细节则不会做过多解释，次要展现步骤。这一篇次要讲述筹备工作、首次部署与主动部署的相干内容。

本文运行环境：

node: v14.4.0
npm: 6.14.7
hexo: 4.2.1
hexo-cli: 3.1.0

筹备工作次要参考了 Hexo 官网文档。

在 Mac 上最不便的办法当然是通过 Homebrew。

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)"

留神，可能在装置之前须要先装置 Command Line Tools for Xcode。间接在终端输出 xcode-select --install 装置。

装置好 Homebrew 后，间接应用以下命令：

brew install git
brew install node

在装置以上两个依赖之前，能够先运行 brew update 来更新 Homebrew。此外，还能够运行 brew doctor 检查一下有没有什么抵触，能够及时处理。也能够把以下语句退出你的 .bash_profile 或者.zshrc，取决于你应用的 shell：

export PATH="/usr/local/bin:$PATH"

装置好后，能够用以下命令查看是否装置胜利，胜利则会返回版本号：

git --version
npm -v

间接应用 npm 装置：

npm install -g hexo-cli

查看一下 hexo 是否装置胜利，会返回以后的 hexo 版本号：

hexo -v

GitHub 就不必多说了。注册实现后，新建私有仓库，名称为 你的 GitHub 用户名.github.io。这个仓库用来寄存渲染好的页面。

此外，咱们再新建一个公有仓库，用来寄存源文件自身。仓库的名字任意取，我取的名字是blog。

这两个仓库最好不要初始化任何货色，也就是 README，.gitignore 和license都不要。这样新建的仓库齐全是空的。

首先运行以下两句进行 Git 配置：

git config --global user.name "GitHub 用户名"
git config --global user.email "GitHub 注册邮箱"

其中把用户名和邮箱替换成你本人的。而后咱们生成密钥文件：

ssh-keygen -t rsa -C "GitHub 注册邮箱"

间接一路回车上来就好，完结后会在 ~/.ssh/ 文件夹里生成 id_rsa 私钥文件与 id_rsa.pub 公钥文件。咱们读取一下公钥的内容并且手动拷贝：

cat ~/.ssh/id_rsa.pub

手动复制显示的内容。随后关上这个页面设置 SSH Key。你也能够在 GitHub 主页点击你的右上角头像，抉择 Settings，而后抉择 SSH and GPG Keys 找到这个界面。点击 New SSH Key，题目能够轻易写，内容就是你方才复制的公钥内容，随后保留。

首先抉择一个你喜爱的中央作为你的博客根目录。

mkdir ~/git/ 你的 GitHub 用户名.github.io

随后依照官网教程，顺次运行：

hexo init ~/git/ 你的 GitHub 用户名.github.io
cd ~/git/ 你的 GitHub 用户名.github.io
npm install

当初博客曾经初始化实现了。应用以下命令：

hexo server

就能够在 http://localhost:4000 看到你的站点了。能够在终端里应用 control+c 关掉本地服务器。上面列举一些罕用的命令，更多命令与参数能够参考这里：

hexo clean 用于革除缓存与动态文件。
hexo new "文章题目" 用于新建文章。
hexo server 用于启动本地服务器查看渲染好的网页，可简写为hexo s。
hexo generate 用于生成动态文件，可简写为hexo g。
hexo deploy 用于部署网站，须要先设置好_config.yml，可简写为hexo d。

设置`_config.yml`

首先，能够参考官网的设置页面，这里只波及一些外围设置。

用你喜爱的编辑器关上根目录下的 _config.yml（留神不是themes 文件夹外面的_config.yml）。

在 Site 上面你能够更改网页的题目、副标题、形容、作者、语言、时区等等。语言这里抉择 zh-CN。在URL 上面能够把 url 改为你的 GitHub Pages 的 URL，https:// 你的 GitHub 用户名.github.io。两头的大部分设置跳过，你也能够参照下面的网页进行批改。

最初，咱们重点关注一下# Deployment。在这里，咱们须要把它改为如下的款式：

deploy:
  type: git
  repo: 你的 GitHub 目录地址
  branch: master

其中 repo 要依据本人的状况批改。你能够在 GitHub 主页点击你的头像，抉择 Your repositories，点击你的 你的 GitHub 用户名.github.io仓库，点击 Code 按钮，而后点击 Use SSH（如果目前显示为 Clone with HTTPS），而后复制框中的内容到这里。

批改好后，保留文件。

咱们须要再装置一个依赖：

npm install hexo-deployer-git --save

随后所有就绪，顺次运行：

hexo clean
hexo g
hexo d

而后你就能够在 https:// 你的 GitHub 用户名.github.io 看到渲染好的网页了。

在这一步里咱们不仅备份了博客的源文件，也实现了批改 push 到 blog 公有仓库后触发 GitHub Actions 实现主动部署。

在终端，本人的 GitHub 用户名.github.io 文件夹内，手动增加近程仓库：

git init
git remote add origin git@github.com:bambrow/blog.git

这里的近程仓库就是你的 blog 仓库。把下面的 git@github.com:bambrow/blog.git 批改成你本人的仓库地址。办法同样是在网页进入 blog 仓库，点击 Code 按钮，而后点击 Use SSH（如果目前显示为 Clone with HTTPS），而后复制框中的内容到这里。

随后咱们编辑一下 .gitignore 文件。能够应用你喜爱的编辑器。一般来讲，.gitignore应该有如下内容：

.DS_Store
Thumbs.db
db.json
*.log
node_modules/
public/
.deploy*/

编辑好之后，先做：

git pull origin master

随后把所有应该备份的文件 push 到 GitHub：

git add .
git commit -m "initial commit"
git push origin master

此时去 GitHub 上查看 blog 仓库，会发现内容曾经更新。

请留神，在做这一步之前，请务必确认本人的 blog 仓库是公有仓库，如果不是，肯定要在设置里将其设置为公有。

之前建设好的密钥文件，有公钥也有私钥。咱们曾经用过了公钥，这次应用私钥。首先读取其内容并手动拷贝：

cat ~/.ssh/id_rsa

手动复制全部内容。随后在网页上关上本人的 blog 仓库，点击 Settings，再点击左侧的 Secrets，随后新建。名称能够随便写，这里举荐HEXO_DEPLOY_KEY；内容则是方才复制的私钥全部内容。随后点击增加。

随后，咱们开始设置工作流。点击你的仓库标签下的 Actions，抉择新建 New workflow。随后抉择 set up a workflow yourself，将 main.yml 的内容替换如下，你也能够自行批改：

# 工作流名称
name: Hexo Blog Deploy

# 只在 push 到 master 分支的时候启动
on:
  push:
    branches:
      - master

# 应用 ubuntu 虚拟机
jobs:
  build:
    runs-on: ubuntu-latest

    # 工作流步骤
    steps:
    - name: Checkout repository master branch
      uses: actions/checkout@master
      with:
        submodules: true

    # 装置 Node.js
    - name: Install node.js
      uses: actions/setup-node@master
      with:
        node-version: "10.x"

    # 装置 Hexo
    - name: Install hexo
      run: |
        npm install hexo-cli -g
        npm install

    # 设置 SSH 密钥，读取 HEXO_DEPLOY_KEY
    - name: Setup private key
      env:
        HEXO_DEPLOY_KEY: ${{secrets.HEXO_DEPLOY_KEY}}
      run: |
        mkdir -p ~/.ssh/
        echo "$HEXO_DEPLOY_KEY" > ~/.ssh/id_rsa
        chmod 600 ~/.ssh/id_rsa
        ssh-keyscan github.com >> ~/.ssh/known_hosts

    # 配置 Git 设置
    - name: Setup git settings
      run: |
        git config --global user.name "GitHub 用户名"
        git config --global user.email "GitHub 邮箱"
    # 更改下面的用户名和邮箱

    # 部署
    - name: Deploy hexo
      run: |
        hexo clean
        hexo generate
        hexo deploy

随后点击 Start commit 完结设置。这样当前只有有新的改变被 push 到 blog 的主分支，就后触发这个工作流，将网页渲染进去，同时也会 push 到 你的 GitHub 用户名.github.io这个仓库里。

Hexo原生的 Markdown 渲染插件反对的 Markdown 语法不够丰盛，比方不反对 GitHub Flavored Markdown、CommonMark、上标下标、脚注等等。因而，咱们在写文章之前，能够把原生的插件 hexo-renderer-marked 改为hexo-renderer-markdown-it。

首先，依据该插件的装置指南，运行以下命令：

npm uninstall hexo-renderer-marked
npm install hexo-renderer-markdown-it

随后在 _config.yml 里增加如下语句（能够增加在 deploy 后面）：

# Markdown-it config
## Docs: https://github.com/celsomiranda/hexo-renderer-markdown-it/wiki
markdown:
  render:
    html: true
    xhtmlOut: false
    breaks: true
    linkify: true
    typographer: true
    quotes: '“”‘’'
  plugins:
    - markdown-it-abbr
    - markdown-it-footnote
    - markdown-it-ins
    - markdown-it-sub
    - markdown-it-sup
  anchors:
    level: 2
    collisionSuffix: 'v'
    permalink: true
    permalinkClass: header-anchor
    permalinkSide: 'left'
    permalinkSymbol: ¶

随后你就能够应用扩大语法了。应用办法能够参看这里和这里，尤其是后一个网页给出了很具体的例子。

如果你感觉脚注字体偏大，能够看我的字体设置文章，看完后就晓得怎么批改了。我集体做了如下设置：

.footnotes {font-size: 75%;}

因为咱们引入了新的插件，所以也要改一下工作流文件，在 装置 Hexo那一步加一些步骤，装置这些依赖。你能够在本地批改 .github/workflows/main.yml 的内容，也能够在 GitHub 的 blog 仓库，点击 Actions，抉择最近的一次部署，点击右侧的省略号中的 View workflow file，而后点击右侧的铅笔按钮进行批改。将新的依赖装置写在 npm install 那一行前面即可。如果你采纳后者，在你将本地新的改变 push 到 GitHub 之前，要记得先做git pull，否则会报错显示近程仓库有新的改变。举荐在本地批改，一步到位。

  run: |
    npm install hexo-cli -g
    npm install
  + npm uninstall hexo-renderer-marked
  + npm install hexo-renderer-markdown-it

本篇文章由一文多发平台 ArtiPub 主动公布

关于hexo:Hexo-静态博客指南建站教程上

筹备工作

装置 Git 与 Node.js

装置 Hexo

注册 GitHub 并新建集体仓库

设置 Git 与密钥文件

开始建站

博客初始化

设置`_config.yml`

首次部署

设置主动部署

将源文件备份至公有仓库

设置 GitHub Actions

装置 Markdown 语法扩大

筹备工作

装置 Git 与 Node.js

装置 Hexo

注册 GitHub 并新建集体仓库

设置 Git 与密钥文件

开始建站

博客初始化

设置_config.yml

首次部署

设置主动部署

将源文件备份至公有仓库

设置 GitHub Actions

装置 Markdown 语法扩大

设置`_config.yml`