hexo搭建博客

hexo介绍

对于一个大学生来说，hexo具有的以下优势让我选择它

1. 一条指令即可部署到 GitHub Pages，不需要服务器即可完成
2. 中文社区有足够的资料完成
3. 有朋友【欢迎大家骚扰他】同时使用这个框架搭建博客
4. …

在开始部署之前，有一些点需要说明

如果你希望通过github的action实现更新，而不是自己本地编译然后push的话，配置环境可以省略
但不建议这么做，因为初次上手，需要通过可视化的界面熟悉整个操作和原理。

hexo环境部署

环境要求：

Git Node.js

配置npm/Node.js环境

搜索Node.js下载安装即可，如果是大佬的话可以尝试配置npm的全局路径和缓存路径
提供一个参考的博客​[1]

# 终端输入修改npm的配置
# 查看当前下载地址
npm config get registry
# 设置淘宝镜像的地址
npm config set registry https://registry.npmmirror.com/

安装hexo

npm install hexo-cli -g

博客搭建

创建博客

# 自定义blogName参数
blogName=""
hexo init $blogName1
cd $blogName
npm install
hexo g # generate生成的缩写
hexo s # server服务器的缩写
# 浏览器访问 localhost:4000，即可看到 Hexo 的基础界面。

部署github上

1. 在 myblog​ 文件夹中运行以下命令安装自动部署工具：

npm install hexo-deployer-git --save

2. 配置连接远程库

修稿_config.yml

deploy:
  type: git
  repository: https://github.com/userName/usreName.github.io
  branch: main
# userName和blogName都可以自定义

终端报错

按照要求添加git config –global –add safe.directory xxx
xxx是git仓库的路径

3. 生成并上传博客

hexo g   # 生成静态文件
hexo d   # 上传到 GitHub

4. 配置ssh工具

git remote set-url origin git@github.com:userName/bolgName.github.io.git

这里需要配置ssh密钥，请参考这篇教程

由于网络问题导致github网络连接失败

git remote -v 查看连接方式
git remote set-url origin git@github.com:lovedreamms/ComputerSystem.git 切换为ssh连接

坑：ssh: connect to host github.com port 22: Connection refused - 知乎 (zhihu.com)

文件夹讲解

.gitignore文件

.DS_Store
Thumbs.db
db.json
*.log
node_modules/
public/
.deploy*/
_multiconfig.yml
*.code-workspace
.history

scaffolds模板文件夹

​hexo new "page_title"​ 在主页新建一个小页面

​hexo new page "page_title"​ 新建一个在模板文件夹中文件名为page的小页面

​hexo new draft "draft_title" ​模板可自行添加，建议直接在文件夹中操作

通过github的action实现远程自动更新

github作为服务器可以做一些自动化的工作来帮助我们简化工作

思路如下：把整个文件夹作为私有库hexoBlog上传到github上，建立如下action，当main分支有新的push时，执行编译操作，上传到blogName.github.io公开仓库中，完成自动更新

1. 配置action文件

在.github中新建路径workflows文件夹，在workflows文件夹中新建hexo-deploy.yml，需要修改的参数为userName​和blogName​

name: deploying Hexo project to GitHub pages
on:
  push:
    branches:
      - master # master 分支有 push 行为时就触发这个 action

jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v3
        with:
          fetch-depth: 0

      - name: Build and Deploy
        uses: theme-keep/hexo-deploy-github-pages-action@master # 使用专门部署 Hexo 到 GitHub pages 的 action
        env:
          PERSONAL_TOKEN: ${{ secrets.HEXOBLOG }} # secret 名
          PUBLISH_REPOSITORY: userName/blogName.github.io # 公共仓库，格式：GitHub 用户名/仓库名
          BRANCH: gh-pages # 分支，填 gh-pages 就行
          PUBLISH_DIR: ./public # 部署 public 目录下的文件

在_config.yml文件中需要配置deploy，需要修改的参数为userName​,blogName​和密钥。

deploy:
  type: git
  repository: https://密钥@github.com/userName/bolgName.github.io.git,gh-pages
  branch: main

接下来就是新建secrets/密钥/token，见博客​[2]
一定要复制好密钥

在action文件中github为了安全，防止密钥泄露，使用${{ secrets.HEXOBLOG }}​访问密钥，所以我们需要在blogName仓库中配置，在仓库的Settings中选择Secrets and variables中的action选择新建，名称为hexoBlog，值为新建的密钥。

然后你可以尝试新建一个界面然后push上去，然后等待新的博客生成。

额外分享

B站视频

可以通过加入如下类似如下块(B站可以直接复制)，在hexo博客中插入B站视频

<div style="width: 50vw; height: 50vh;">
    <iframe 
        src="//player.bilibili.com/player.html?isOutside=true&aid=113756805794277&bvid=BV1uV6qYcEUb&cid=27656390422&p=1" 
        style="width: 100%; height: 100%; border: none;" 
        scrolling="no" 
        frameborder="no" 
        framespacing="0" 
        allowfullscreen="true">
    </iframe>
</div>

分类与标签的区别

• 分类：用于大主题的划分，如“技术”、“生活”等。
• 标签：用于描述具体内容，如“Python编程”、“旅行攻略”等。

自定义icon[3]

使用自定义域名访问博客​[4]

统计博客阅读量​[5]

感谢大家能看到这里，也欢迎大家访问我的hexo博客：lovedreamms.icu

资源链接-hexo搭建博客

[1]

Hexo教程 | 包含评论系统

[2]

Github Actions生成 secrets-CSDN博客

[3]

内置社交图标

[4]

Hexo 使用自定义域名访问博客

[5]

​Hexo-fluid主题设置统计博客阅读量

‍

‍

‍