之前一直都在这里发一些学习日语相关的内容。但是感觉这些可以单独开一个新的网站来总结;
最近比较有时间,就开了一个新的坑;
博客主题用的是:hexo-theme-anzhiyu,真的很酷!
也是花了半个小时,使用hexo,从零搭建了一个博客;
之前没有好好总结,这里就又简单记录了一下搭建的过程,如果你还没有博客,可以跟着我一步一步来搭建一个GithubPages博客!
新博客地址:
源代码:
开了一个新的专门学习日语的博客
一、安装Node.js&Hexo
可以在官网下载Node:
我这里使用的是 fnm 作为版本管理工具;
配置国内源:
1
2 # 国内 淘宝 镜像源
npm config set registry https://registry.npmmirror.com/参考:
也可以把 yarn 安装了:
1 | npm install -g yarn |
随后下载 Hexo-cli 命令行工具:
1 | npm install hexo-cli -g |
参考:
二、初始化Hexo项目
直接通过命令行初始化项目 jp:
1 | # hexo init jp |
安装依赖并测试:
1 | cd jp |
此时访问:
你就能看到你的博客了!
参考文档:
三、更换主题
默认的主题不太好看,可以在 github 上搜索 hexo 的相关主题(一般为 hexo- 开头);
以 hexo-theme-anzhiyu 为例,文档:
首先在你项目的根目录将主题 clone 下来:
1 | git clone -b main https://github.com/anzhiyu-c/hexo-theme-anzhiyu.git themes/anzhiyu |
随后打开 Hexo 根目录下的 config.yml, 找到以下配置项,把主题改为anzhiyu
1 | # Extensions |
然后安装 pug 和 stylus 渲染插件:
1 | npm install hexo-renderer-pug hexo-renderer-stylus --save |
再次执行:
1 | hexo s |
此时再次访问:
你就能看到你新的主题的博客了!
四、自定义配置
拉下来的新的主题,很多内容大概率都不符合你的预期(比如:title、分类等等);
此时你可以参考文档进行个性化的配置:
需要注意的是:
在根目录下存在 _config.yml、各自主题下也有这个文件,优先级为:根目录 > 各自主题配置!
五、撰写新的文章
通过:
1 | hexo new xxx |
即可创建一篇新的博文!
实际上就是在
source/_posts/目录下创建了一个新的*.md文件而已!
可以增加 Post Front-matter 来对文章进行配置!
文章内容就按照 markdown 的格式去写就可以了!
六、发布到Github
本地调试无误后,修改根目录下的 _config.yml:
1 | # Deployment |
安装插件:
1 | npm install hexo-deployer-git --save |
随后,在发布时,通常情况下:
- 首先,通过
hexo g生成静态资源; - 然后使用
hexo d即可部署!
参考:
但是这种方式每次都要在本地生成静态资源,效率太低!
1、使用GitHub Actions自动部署
可以通过 Github Actions,每次 push 代码之后自动提交!
在 .github/workflows/ 目录下创建:
deploy.yml
1 | name: Build & Deploy Blog |
随后在仓库的 Secrets and variables 设置中,添加 Repository secrets:
- key为:
HEXO_DEPLOY_PRI; - 值为:你连接 Github 的私钥!(注意是私钥!)
提交到 dev 分支后即可自动部署!
2、使用新分支保存笔记
同时,生成的内容可能会覆盖原本的笔记(hexo d 会强行覆盖部署分支!):
- 我们只需要 checkout 到另外的一个分支去编写博客,然后部署到 main 分支即可!
例如:
1 | git checkout -b dev |
附录
新博客地址:
源代码: