- 开了一个新的专门学习日语的博客
- 一、安装Node.js&Hexo
- 二、初始化Hexo项目
- 三、更换主题
- 四、自定义配置
- 五、撰写新的文章
- 六、发布到Github
- 1、使用GitHub Actions自动部署
- 2、使用新分支保存笔记
- 附录
之前一直都在这里发一些学习日语相关的内容。但是感觉这些可以单独开一个新的网站来总结；
最近比较有时间，就开了一个新的坑；
博客主题用的是：hexo-theme-anzhiyu，真的很酷！
也是花了半个小时，使用hexo，从零搭建了一个博客；
之前没有好好总结，这里就又简单记录了一下搭建的过程，如果你还没有博客，可以跟着我一步一步来搭建一个GithubPages博客！
新博客地址：
源代码：
开了一个新的专门学习日语的博客
一、安装Node.js&Hexo
可以在官网下载Node：
我这里使用的是 fnm 作为版本管理工具；
配置国内源：
# 国内 淘宝 镜像源 npm config set registry https://registry.npmmirror.com/参考：
也可以把 yarn 安装了：
npm install -g yarn
# 国内 淘宝 镜像源
yarn config set registry https://registry.npmmirror.com/随后下载 Hexo-cli 命令行工具：
npm install hexo-cli -g参考：
二、初始化Hexo项目
直接通过命令行初始化项目 jp：
# hexo init jp
INFO Cloning hexo-starter https://github.com/hexojs/hexo-starter.git
INFO Install dependencies
......
INFO Start blogging with Hexo!安装依赖并测试：
cd jp
npm i
hexo s # 本地调试此时访问：
你就能看到你的博客了！
参考文档：
三、更换主题
默认的主题不太好看，可以在 github 上搜索 hexo 的相关主题（一般为 hexo- 开头）；
以 hexo-theme-anzhiyu 为例，文档：
首先在你项目的根目录将主题 clone 下来：
git clone -b main https://github.com/anzhiyu-c/hexo-theme-anzhiyu.git themes/anzhiyu随后打开 Hexo 根目录下的 config.yml, 找到以下配置项，把主题改为anzhiyu
# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: anzhiyu然后安装 pug 和 stylus 渲染插件：
npm install hexo-renderer-pug hexo-renderer-stylus --save再次执行：
hexo s此时再次访问：
你就能看到你新的主题的博客了！
四、自定义配置
拉下来的新的主题，很多内容大概率都不符合你的预期（比如：title、分类等等）；
此时你可以参考文档进行个性化的配置：
需要注意的是：
在根目录下存在 _config.yml、各自主题下也有这个文件，优先级为：根目录 > 各自主题配置！
五、撰写新的文章
通过：
hexo new xxx即可创建一篇新的博文！
实际上就是在
source/_posts/目录下创建了一个新的*.md文件而已！
可以增加 Post Front-matter 来对文章进行配置！
文章内容就按照 markdown 的格式去写就可以了！
六、发布到Github
本地调试无误后，修改根目录下的 _config.yml：
# Deployment
## Docs: https://hexo.io/docs/one-command-deployment
deploy:
type: 'git'
repo: git@github.com:jasonkayzk/jp.git # 替换为你的仓库地址
branch: main # 部署分支 安装插件：
npm install hexo-deployer-git --save随后，在发布时，通常情况下：
- 首先，通过
hexo g生成静态资源； - 然后使用
hexo d即可部署！
参考：
但是这种方式每次都要在本地生成静态资源，效率太低！
1、使用GitHub Actions自动部署
可以通过 Github Actions，每次 push 代码之后自动提交！
在 .github/workflows/ 目录下创建：
deploy.yml
name: Build & Deploy Blog
on:
workflow_dispatch:
push:
branches:
- dev
jobs:
build:
runs-on: ubuntu-latest
strategy:
matrix:
node_version: [18]
steps:
- name: Checkout source
uses: actions/checkout@v3
with:
ref: dev
- name: Cache dependencies
uses: actions/cache@v3
with:
path: |
node_modules
public
key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
restore-keys: |
${{ runner.os }}-node-
- name: Use Node.js ${{ matrix.node_version }}
uses: actions/setup-node@v3
with:
version: ${{ matrix.node_version }}
- name: Add SSH key
uses: webfactory/ssh-agent@v0.7.0
with:
ssh-private-key: ${{ secrets.hexo_deploy_pri }}
- name: Setup hexo
run: |
git config --global user.email "jasonkayzk@gmail.com"
git config --global user.name "jasonkayzk"
npm install hexo-cli -g
npm install
- name: Hexo deploy
env:
GIT_SSH_COMMAND: ssh -o StrictHostKeyChecking=no
run: |
hexo clean
hexo g
hexo d随后在仓库的 Secrets and variables 设置中，添加 Repository secrets：
- key为：
HEXO_DEPLOY_PRI； - 值为：你连接 Github 的私钥！（注意是私钥！）
提交到 dev 分支后即可自动部署！
2、使用新分支保存笔记
同时，生成的内容可能会覆盖原本的笔记（hexo d 会强行覆盖部署分支！）：
- 我们只需要 checkout 到另外的一个分支去编写博客，然后部署到 main 分支即可！
例如：
git checkout -b dev
git push附录
新博客地址：
源代码：