之前一直都在这里发一些学习日语相关的内容。但是感觉这些可以单独开一个新的网站来总结;
最近比较有时间,就开了一个新的坑;
博客主题用的是: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
附录
新博客地址:
源代码: