Hexo-搭建教程

[up主专用，视频内嵌代码贴在这]

搭建Hexo博客：Hexo + GitHub Pages + Cloudflare Pages

1.安装 Node

  1. 打开Node官网，下载和自己系统相配的Node的安装程序，否则会出现安装问题。下载地址：https://nodejs.org/en

  2. 下载后安装，安装的目录可以使用默认目录C:/Program Files/nodejs/

  3. 安装完成后，检查是否安装成功。在键盘按下win + R键，输入CMD，然后回车，打开CMD窗口，执行node -v命令，看到版本信息，则说明安装成功。

  4. 修改npm源。npm下载各种模块，默认是从国处服务器下载，速度较慢，建议配置成华为云镜像源。打开CMD窗口，运行如下命令:

    1
    npm config set registry https://mirrors.huaweicloud.com/repository/npm/

    此时可能会报错，使用下列命令解除PowerShell 禁止运行脚本的执行策略。

    1
    2
    Set-ExecutionPolicy RemoteSigned -Scope CurrentUser
    # 选Y

2.安装 Git

  1. 进入官网下载适合你当前系统的 Git：https://git-scm.com/downloads
  2. 下载后傻瓜式安装Git即可，安装的目录最好使用默认目录C:/Program Files/Git
  3. 点击电脑左下角开始即可看见
    • Git CMD 是windows 命令行的指令风格
    • Git Bash 是linux系统的指令风格（建议使用）
    • Git GUI是图形化界面（新手学习不建议使用）

3.配置 Git 密钥并连接至 Github

常用 Git 命令

1
2
3
git config -l  //查看所有配置
git config --system --list //查看系统配置
git config --global --list //查看用户（全局）配置

3.1. 配置用户名和邮箱

1
2
git config --global user.name 你的用户名
git config --global user.email 你的邮箱

通过git config -l 检查是否配置成功。

3.2. 配置公钥连接 Github

  1. 执行以下命令生成 ssh 公钥，此公钥用于你的计算机连接 Github

    1
    ssh-keygen -t rsa -C 你的邮箱

    提示Enter file in which to save the key一路回车.

    之后打开C盘下用户文件夹下的.ssh的文件夹，会看到以下文件

    • id_rsa私钥
    • id_rsa.pub公钥

    用记事本打开上述图片中的公钥id_rsa.pub，复制里面的内容，然后开始在github中配置ssh密钥。

  2. 将 SSH KEY 配置到 GitHub
    进入github，点击右上角头像 选择settings，进入设置页后选择 SSH and GPG keys，名字随便起，公钥填到Key那一栏。

  3. 测试连接，输入以下命令

    1
    ssh -T git@github.com

    第一次连接会提示Are you sure you want to continue connecting (yes/no/[fingerprint])?，输入yes即可

    出现连接到账户的信息，说明已经大功告成，至此完成了环境准备工作。

3.3. 创建GitHub.io仓库

  1. 点击右上角的+按钮，选择New repository，创建一个<用户名>.github.io的仓库。
  2. 仓库名字的格式必须为：<用户名>.github.io (注意：前缀必须为用户名，此为预览博客需要，后期可修改仓库名)
  3. 可见性必须选择 Public 方便第一次部署检查问题，点击 Creat repository 进行创建即可

4.初始化 Hexo 博客

  1. 创建一个文件夹来保存博客源码（我这里选的路径为C:\Users\Niiuu），在文件夹内右键鼠标，选择Open Git Bash here`

  2. 在Git BASH输入如下命令安装 Hexo

    1
    npm install -g hexo-cli && hexo -v

  3. 安装完后输入hexo -v验证是否安装成功。

  4. 初始化 Hexo 项目安装相关依赖。

    1
    2
    3
    hexo init hexo-blog
    cd hexo-blog
    npm i

  5. 初始化项目后，blog-demo有如下结构：

    • node_modules：依赖包
    • scaffolds：生成文章的一些模板
    • source：用来存放你的文章
    • themes：主题
    • .npmignore：发布时忽略的文件（可忽略）
    • _config.landscape.yml：主题的配置文件
    • config.yml：博客的配置文件
    • package.json：项目名称、描述、版本、运行和开发等信

  6. 输入hexo cl && hexo s启动项目

  7. 打开浏览器，输入地址：http://localhost:4000/ ，看到博客已经构建成功了。

5.将静态博客挂载到 GitHub Pages

  1. 安装 hexo-deployer-git

    1
    npm install hexo-deployer-git --save

  2. 修改_config.yml文件

    在hexo-blog目录下的_config.yml，就是整个Hexo框架的配置文件了。可以在里面修改大部分的配置。详细可参考官方的配置描述。

    修改最后一行的配置，将repository修改为你自己的github项目地址即可，还有分支要改为main代表主分支（注意缩进）。

    1
    2
    3
    4
    5
    6
    # Deployment
    ## Docs: https://hexo.io/docs/one-command-deployment
    deploy:
      type: git
      repository: git@github.com:aceneil/aceneil.github.io.git
      branch: main

  3. 修改好配置后，运行如下命令，将代码部署到 GitHub（Hexo三连）。

    1
    2
    3
    4
    5
    6
    7
    // Git BASH终端
    hexo clean && hexo generate && hexo deploy  

    // 或者

    // VSCODE终端
    hexo cl; hexo g; hexo d
  • hexo clean：删除之前生成的文件，可以用hexo cl缩写。
  • hexo generate：生成静态文章，可以用hexo g缩写
  • hexo deploy：部署文章，可以用hexo d缩写

6.Github Action 自动部署

每次部署 Hexo 都需要运行指令三件套，随着文章越来越多，编译的时间也随之越来越长，通过 Github Action，我们只需要在每次完成博客的编写或修改以后，将改动直接 push 到远程仓库，之后的编译部署的工作统统交给 CI 来完成即可。

  1. 获取Github Token

    访问 Github->头像（右上角）->Settings->Developer Settings->Personal access tokens->generate new token,创建的 Token 名称随意，时间选永久，勾选 repo 项 和 workflows 项。**(token 只会显示这一次，之后将无法查看)**

  2. 添加 GitHub Secret

    打开你的 blog 仓库页面,点击 Settings → 左侧菜单 Secrets and variables → Actions,点击 New repository secret，新增以下三个变量

    1
    2
    3
    BLOG_TOKEN	# Github Token
    USER_NAME	# Github 的账户名
    EMAIL	# Github 的 E-Mail

  3. 配置Github Action

    依次新建[博客根目录]/.github/workflows/autodeploy.yml。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    name: 自动部署

    on:
      push:
        branches:
          - main
      release:
        types:
          - published

    jobs:
      deploy:
        runs-on: ubuntu-latest
        steps:
        - name: 检查分支
          uses: actions/checkout@v2
          with:
            ref: main

        - name: 安装 Node
          uses: actions/setup-node@v1
          with:
            node-version: "22.x"

        - name: 安装 Hexo
          run: |
            export TZ='Asia/Shanghai'
            npm install hexo-cli -g

        - name: 缓存 Hexo
          uses: actions/cache@v3
          id: cache
          with:
            path: node_modules
            key: ${{runner.OS}}-${{hashFiles('**/package-lock.json')}}

        - name: 安装依赖
          if: steps.cache.outputs.cache-hit != 'true'
          run: |
            npm install --save

        - name: 生成静态文件
          run: |
            hexo clean
            hexo generate

        - name: 部署 
          run: |
            cd ./public
            git init
            git config --global user.name '${{ secrets.USER_NAME }}'
            git config --global user.email '${{ secrets.EMAIL }}'
            git add .
            git commit -m "${{ github.event.head_commit.message }} $(date +"%Z %Y-%m-%d %A %H:%M:%S") Updated By Github Actions"
            git push --force --quiet "https://${{ secrets.USER_NAME }}:${{ secrets.BLOG_TOKEN }}@github.com/${{ secrets.USER_NAME }}/${{ secrets.USER_NAME }}.github.io.git" master:main  # GitHub 配置

  4. 添加屏蔽项

    [博客根目录]/.gitignore

    1
    2
    3
    4
    5
    6
    7
    8
    9
    .DS_Store
    Thumbs.db
    db.json
    *.log
    node_modules/
    public/
    .deploy*/
    .deploy_git*/
    .idea

  5. 创建个新的仓库存放博客源码

    hexo-source-repository

  6. 重新设置远程仓库和分支

    • 首次推送时

      1
      2
      3
      4
      5
      6
      7
      8
      # 博客根目录打开git
      git init #初始化
      git remote add origin git@github.com:aceneil/hexo-source-repository.git #ssh地址
      git checkout -b main	# 切换分支
      # 运行 git 提交指令
      git add .
      git commit -m "Blog initialization."
      git push origin main

    • 非首次推送

      1
      2
      3
      4
      5
      6
      git remote rm origin # 删除原有仓库链接
      git remote add origin git@github.com:aceneil/hexo-source-repository.git #ssh地址
      git checkout -b main
      git add .
      git commit -m "Blog initialization."
      git push origin main

7.将静态博客挂载到 Cloudflare Pages

1.打开并登入cloudflare.com ，计算（Workers）-> Workers和Pages -> Pages -> 导入现有Git储存库

2.连接或登入github，选择~.github.io的库，默认保存并部署即可。

3.完成部署后，选择自定义域，自行设置。blog.balabla.com

8.将静态博客挂载到 Vercel

1.打开登入vercel.com，Add New...->Continue with GitHub->选择~.github.io的库

2.设置Domains，Add Domain自己配置下。hexo.balabla.com

3.cf开启小云朵，但更新较慢要一段时间以后才能显示。

9.将静态的博客转为私有库

1.打开博客所在的库

2.Settings->Change repositroy visbility->Private