Hexo搭建静态博客

发表于 2018-03-04 分类于教程阅读次数：本文字数： 2.8k 阅读时长 ≈ 3 分钟

前言

自从看了阮一峰老师搭建博客的文章，便萌生了白嫖的想法。Github Pages 提供了静态页面展示功能，用来搭建博客再合适不过，尽管 Github 日常被墙。了解到 Jekyll 需要安装 Ruby，而 Hexo 是用 Nodejs，目前我对 Nodejs 比较感兴趣，所以就决定使用Hexo，感谢 visugar 的Hexo 教程，我参照此教程搭建了本博客，主题使用的是Icarus，目前已改用NexT，第一篇文章就简单记录一下使用 Hexo 来搭建博客的步骤。

资源链接

安装前提

安装Node.js，建议安装 LTS（长期支持）版本，在安装过程中记得勾选npm包管理工具。

安装好之后，在 CMD 或 Powershell 中输入以下命令进行验证，报错请自行百度。
1
2
$ node -v
$ npm -v
Git

安装好之后，在 cmd 中输入以下命令进行验证。
1
$ git --version

安装 Hexo

安装 Hexo，-g 参数表示全局安装。

1	$ npm install -g hexo-cli

建站

安装 Hexo 完成后，请执行下列命令，Hexo 将会在指定文件夹中新建所需要的文件。如果没有设置 folder ，Hexo 默认在目前的文件夹建立网站。

1
2
3

$ hexo init <folder>
$ cd <folder>
$ npm install

Hexo 和主题 NexT 的部分按照官方文档一步步来即可。

Github 配置

步骤如下所示，详情参见Github Pages

在 Github](https://github.com)上注册一个账户
创建一个名称为username .github.io 的仓库，其中username 为你的用户名
目前 Github pages 要求个人项目必须部署在 master 分支，所以用第三方 CI 部署在 gh-pages 是不行的，需要修改 CI 配置
如果已有 SSH 公钥放入 Github 中，可跳至第 6 步；在 Git bash 中配置用户名和邮件地址
1
2
$ git config --global user.name "username"
$ git config --global user.email "mail@example.com"
创建 SSH
1
$ ssh-keygen -t rsa -C "mail@example.com"
在C:\Users\"username"\.ssh中打开 id_rsa.pub，将其添加到 github 的 SSH Keys 中
1
$ ssh -T git@github.com
验证是否成功
打开 Hexo 建站的文件夹，修改_config.yml文件的配置，"username"替换为你的 GitHub 用户名
1
2
3
4
deploy:
type: git
repo: git@github.com:"username"/"username".github.io.git
branch: master

启动服务

在 Hexo 建站的文件夹中启动 git bash，分别执行

1	$ hexo server

打开浏览器，访问 http://localhost:4000/即可访问博客。

部署

执行一次命令，安装部署工具

1	$ npm install hexo-deployer-git --save

之后部署到 github，只需要执行

1	$ hexo g -d

部署完成后，访问https://"username".github.io/即可。

VSCode编辑体验

在 Hexo 3.0 及以上的版本中可以在_config.yml中设置资源文件夹

1	post_asset_folder: true

这样就可以通过这种方式引用图片到Markdown中

1	{% asset_img xxx %}

Paste Image插件

安装插件，修改一下设置，这样，复制好的图片，直接用 Ctrl+Alt+V 键粘贴图片到Markdown中

1 2	"pasteImage.path": "${currentFileNameWithoutExt}/", "pasteImage.insertPattern": "{% asset_img ${imageFileName} %}"

Markdown Preview Enhanced

未测试，可能会有问题

安装插件，按 Ctrl+Shift+P 找到 Markdown Preview Enhanced: Extend Parser，打开parser.js，修改onWillParseMarkdown方法

onWillParseMarkdown: function(markdown) {
  return new Promise((resolve, reject)=> {
    markdown = markdown.replace(
      /{%s*asset_imgs*(.*)s*%}/g,
      (whole, content) => (`![](${content})`)
    )
    return resolve(markdown)
  })
},

Github Actions

增加一个文件 \.github\workflows\ci.yml

name: ci

on:
  push:
    branches: [ source ]

jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    steps:
    - name: Checkout
      uses: actions/checkout@master

    - name: Build and Deploy
      uses: JamesIves/github-pages-deploy-action@master
      env:
        ACCESS_TOKEN: ${{ secrets.ACCESS_TOKEN }}
        BASE_BRANCH: source
        BRANCH: master
        FOLDER: public
        BUILD_SCRIPT: npm i -g hexo && npm install && hexo generate

同时将Hexo文件夹本身Push到source分支，即可自动构建到master分支，部署博客。

或者发布到私有项目，再用hexo-deployer-git实现一键部署到公有项目。

后记

😂 话说朋友圈都不看的人，还写什么博客。