司宇的博客

💪 世上无难事,只要肯登攀!💪

下班后个人计划

🏃 周一 & 周二

活动:跑步训练
路线:家 → 玉龙湖(往返约1.5小时)

🎣 周三

活动:钓鱼
装备清单

  • 钓竿/鱼饵/折叠椅
  • 水杯
  • 防晒帽/驱蚊喷雾
    备注:提前查看天气情况

📚 周四

主题:自主学习与创作
可选项目

  1. Hexo博客

    • 学习主题自定义技巧
    • 撰写技术/生活类文章
    • 部署更新到GitHub Pages
  2. 小红书账号运营

    • 文案创作(预留3个备选标题)
    • 图片筛选与调色
    • 短视频剪辑(剪映)

🎮 周五

活动:自由安排
推荐选项

  • 朋友聚会/电影/游戏
  • 尝试新餐馆探店
  • 整理本周照片存档

📌 注意事项

  1. 每日22:00前结束活动
  2. 提前准备次日所需物品
  3. 灵活调整计划(如遇雨天可改为室内健身)

代码骑士的旷野时光

网名

“代码骑士”的三重含义:

一是以代码为主要形容角色 —— 如同闯关骑士般在浩瀚的代码世界里闯荡。

二是以骑士为主要形容角色 —— 以“代码”二字象征通过文字、图片与视频的形式记录生活中骑行时的所见所闻与奇闻轶事。

三是从工作+生活两个角度切入 —— 代码即代表工作,骑士即代表生活。

“旷野时光”体现了丰富的户外生活,如vlog拍摄 、摩旅、钓鱼、户外爬山等。

起号文案

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
👋 用户【代码骑士】已登录
📌 职业:JavaScript驯兽师 / Bug修理员 / 浏览器心理学专家(俗称前端开发)
🏍️ 副业:风与自由的代理商
⛰️ 爱好:Git Push 到山顶
🎣 隐藏技能:
▸ 上班:面向AI开发
▸ 下班:面向油箱开发
▸ 工作日:劝按钮对齐
▸ 节假日:劝鱼上钩
⚠️ 模块依赖:Error 404: GirlFriend not found
⏳ 人生进度:▰▰▱▱▱▱▱▱▱ 26%


系统提示:
✅ 代码能跑就是胜利
✅ 山能登顶就是成功
❌ 用60秒自由落体还清所有人生焦虑

💻 野生程序员已上线,请多指教!
🚀 启动完毕,欢迎点赞、关注、订阅!

#个人生活vlog #程序员日常 #摩托车骑行 #钓鱼爱好者 #爬山户外

(配图建议:电脑+登山杖/头盔的对比照,或者山顶写代码的摆拍)

结语

(ps:生活vlog 宇见美好 正在筹备中~)

1
2
3
4
5
6
7
8
9
vlog名备选:
「宇见美好」(谐音“遇见美好”)
「宇行迹」(谐音“旅行记”,短而有力)
「代码与风」(直接点明程序员+户外主题)
「宇你同行」(与你同行 + 宇)→ 强调陪伴感,适合生活化内容
「Bug与远方」
「404 Ride Found」(404 Not Found + 骑行,幽默向)
「Debug The World」(边写代码边探索世界)
「Git Push 到山顶」(程序员指令 + 爬山)

常用图标

1
2
3
4
5
❤️(爱心)
🔄(加载中)
💾(存档/进度)
⚠️(警告)
❌(失败状态)

常用文案

骑上小铁马,城市逃亡计划!🚴‍♂️💨

烦恼留在城市,带上好心情出发✌️

骑到没人的地方放声大唱,反正没人听见😝

👨🏻‍💻 记录生活,记录工作,记录学习 ✨

💻工作敲代码,周末待chill mark💫

双关含义

  • Chill(放松)+ Mark(标记/代码中的注释符号),暗指“周末放松”和“代码标记”。
  • “Weekdays code, weekends ChillMark.”
1
2
3
4
5
6
- 「// TODO: 拍VLOG记录生活// 进度:1% (刚买相机)// 预计完成时间:未知😂」
- **「📌 人生待办事项:
- [x] 学会写代码
- [x] 买摩托车
- [ ] 找到女朋友
// Error: 第三个任务优先级过低…」**
1
2
3
4
5
6
7
8
9
10
**「⚡️ # 正在启动「崔宇烁」VLOG系统…

✅ 模块加载:

- 程序员模式 ✔️
- 骑行狂魔 ✔️
- 钓鱼菜鸟 ✔️
- 爬山新手 ✔️
🚀 启动完毕,欢迎订阅!」**

Conventional Commits 是一种用于 Git 提交信息格式化的约定,旨在使提交信息更加规范和一致,便于自动化工具进行处理和分析。

提交信息格式

Conventional Commits 的基本格式如下:

1
<type>(<scope>): <subject>
  • type:表示提交的类型,常见的类型包括:
描述
feat 新增一个功能(feature)
fix 修复一个Bug
docs 文档变更、更新
style 代码格式化(不影响功能,例如空格、分号等格式修正)
refactor 代码重构,不影响功能
perf 改善性能
test 添加或更新测试
build 变更项目构建或外部依赖(例如scopes: webpack、gulp、npm等)
ci 更改持续集成软件的配置文件和package中的scripts命令,例如scopes: Travis, Circle等
chore 变更构建流程或辅助工具
revert 代码回退,回滚到之前的提交
  • scope(可选):表示提交影响的范围或模块,例如 loginutils 等。
  • subject:简要描述提交的内容。

示例

以下是使用 Conventional Commits 规范的一些示例:

  • 引入新功能(feat)

    1
    feat(user-module): 添加用户注册功能
  • 修复 bug(fix)

    1
    fix(auth): 修复登录验证逻辑错误
  • 代码重构(refactor)

    1
    refactor(api): 简化数据获取逻辑
  • 文档更新(docs)

    1
    docs(readme): 更新贡献指南
  • 代码格式化(style)

    1
    style(button): 统一按钮样式
  • 测试(test)

    1
    test(cart): 添加购物车功能测试用例

1. 前言

拥有自己的个人网站一直是我的一个目标。

在网上看了很多方法之后,我最终选择了 GitHub Pages + Hexo 这条技术栈,原因有两点:

  • 完全免费。
  • 现成框架,搭建方便。

整个搭建过程快的话半小时就可以搞定。Windows/Linux/macOS 通用。

搭建完成后大概是这样子的:司宇啊的博客

2. 准备环境

准备一个 GitHub 账号并新建一个仓库,仓库名称为 <username>.github.io

<username>是你的 GitHub 注册用户名,<useremail>是你的 GitHub 注册邮箱。

安装 Node.jsGit

如果是初次使用 git,需要先配置用户名和邮箱信息:

1
2
git config --global user.name "<username>"
git config --global user.email "<useremail>"

生成 ssh 密钥文件:

1
ssh-keygen -t rsa -C "<useremail>"

默认不设置密码,直接回车就行。

SSH key

复制自己电脑目录下生成的 .ssh/id_rsa.pub 文件的全部内容。

打开 GitHub 的 SSH 设置页面:SSH and GPG keys,New SSH key,Title 任取,粘贴刚刚复制的字符串到 Key,然后 Add SSH key。

3. 安装 Hexo

Hexo 是一个轻量级博客框架。

打开终端执行npm install hexo-cli -g安装 Hexo。

选定一个目录作为存放站点源文件的上级目录,在该目录下执行hexo init "<site>",这里的<site>是自己取的站点目录名称。

初始化完成后执行cd "<site>" 然后 npm install进入站点目录并安装依赖。

到这一步,本地博客算是搭建好了,执行hexo s启动本地服务器测试一下。默认情况下,网址是:http://localhost:4000/

如果成功的话可以看见官方的默认页面:

本地hexo登录页

4. 部署网站

首先在站点目录下找到并打开站点配置文件 _config.yml ,找到 url 字段的值,修改为https://<username>.github.io

如果你不希望将站点源码也上传到 GitHub 的话,那么请参考一键部署文档,但是这种方法有一个缺点,就是不能同步对站点源码进行版本管理且每次修改完需要手动部署。下述方法利用 GitHub Actions 同步对站点源码进行版本管理并实现自动部署。

首先在站点目录内git init,将站点源码纳入 git 版本控制系统中成为本地仓库。注意修改默认主分支名称git branch -m master main。然后将 GitHub 仓库 <username>.github.io 设为默认远程仓库。

在远程仓库中前往 Settings > Pages > Source,并将 Source 改为 GitHub Actions。

在本地仓库中建立 .github/workflows/pages.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
name: Pages

on:
push:
branches:
- main # default branch

jobs:
build:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
with:
token: ${{ secrets.GITHUB_TOKEN }}
submodules: recursive
- name: Use Node.js 20
uses: actions/setup-node@v4
with:
node-version: "20"
- name: Cache NPM dependencies
uses: actions/cache@v4
with:
path: node_modules
key: ${{ runner.OS }}-npm-cache
restore-keys: |
${{ runner.OS }}-npm-cache
- name: Install Dependencies
run: npm install
- name: Build
run: npm run build
- name: Upload Pages artifact
uses: actions/upload-pages-artifact@v3
with:
path: ./public
deploy:
needs: build
permissions:
pages: write
id-token: write
environment:
name: github-pages
url: ${{ steps.deployment.outputs.page_url }}
runs-on: ubuntu-latest
steps:
- name: Deploy to GitHub Pages
id: deployment
uses: actions/deploy-pages@v4

执行以下命令保存提交并推送到远程仓库:

1
2
3
git add .
git commit -m "初始化仓库"
git push -u origin main

推送会触发 Actions,可以在远程仓库的 Actions 页面查看自动部署进度,一般几十秒就完成了。

打开浏览器输入你的网站地址:https://<username>.github.io/,就可以看到你的网站已经上线了,大功告成!

如有任何问题,请参阅GitHub Pages 部署文档

5. 撰写文章

1
hexo n "HelloWorld"

n 是 new 的缩写,表示新建一篇文章。

可以看到在 source/_posts 目录下多了一个 HelloWorld.md 文件,这就是一篇文章的源文件了。写完之后保存、提交即可。

文章使用 Markdown 写成,关于 Markdown 可参考:Markdown 教程 | 菜鸟教程

要删除文章的话,直接把源文件删除即可(确保至少有一篇文章存在,否则可能出错)。

另外,如果想要把文章发布到知乎平台上的话,直接导入 Markdown 到知乎文章编辑器解析会有些问题,我写了个 Hexo 插件: hexo-console-zhihu 方便导入 Hexo Markdown posts 到知乎。

6. 优化网站

1. 主题

Hexo 有许多好看的主题,这里以我用的 NexT 主题为例讲解怎样更换主题:

  1. 首先在站点目录下打开终端
  2. 执行npm install hexo-theme-next安装主题包
  3. 执行cp node_modules/hexo-theme-next/_config.yml _config.next.yml检出主题配置文件
  4. 打开站点配置文件 _config.yml,找到 theme 字段,并将其值更改为 next
  5. (可选)找到 language 字段,并将其值更改为 zh-CN(在 hexo-theme-next/languages 目录下可查看主题支持的语言)
  6. 在切换主题之后, 我们最好使用 hexo clean && hexo s 命令来清除 Hexo 的缓存再预览

在更换了主题之后界面美观了许多,终于可以舒舒服服地写文章啦~

但是很不好意思,倘若你的文章里有 LATEX 公式或者想用 Markdown 格式插入图片,你会发现无法显示……

作为一名技术宅,文章里怎么可能不用公式不用图片嘛,这两个坑必须解决了!

2. 公式

打开主题配置文件 _config.next.yml 并找到 math 字段,修改为:

1
2
3
4
5
6
7
解释

math:
every_page: true

mathjax:
enable: true

说一下,every_page 默认是 false,需要单独在每篇文章的 front-matter 里设置mathjax: true。这里为了图方便,全面开启 mathjax 渲染功能,速度会稍微降低一点点。

至此,LATEX 公式插入问题解决!

3. 图片

打开站点配置文件 _config.yml,找到 post_asset_folder 字段,并将其值更改为 true ,这样新建文章的同时 Hexo 会自动在同目录下新建一个以文章名命名的空目录以方便存放该文章要用到的资源。

安装一个我自己写的 Markdown 格式插入图片的插件:

1
npm install hexo-markdown-image

假设在

1
2
3
4
5
6
7
解释

+---HelloWorld
| +-- 1.png
| +-- 2.png
| +-- 3.png
+---HelloWorld.md

这样的目录结构(目录名和文章名一致)中,在文章源代码里只要用 ![](HelloWorld/1.png) 就可以插入图片了~

网上也有其他方法,但这种方法不仅最后部署时能正确显示图片,在本地预览 Markdown 时也能正确显示图片。

4. 更多

音乐:可以去网易云音乐官网生成外链

关于 Hexo 框架的更多信息请参考:Hexo

关于 NexT 主题 的更多信息请参考:NexT - Theme for Hexo

编辑于 2025-03-28 15:38


title: Hello,World!

欢迎来到 Hexo!这是你的第一篇文章。查看 文档 获取更多信息。如果在使用 Hexo 时遇到任何问题,你可以在 故障排除 中找到答案,或者在 GitHub 上向我提问。

快速开始

创建新文章

1
2
3
$ hexo new "我的新文章"

$ hexo n "我的新文章"

更多信息:写作

运行服务器

1
$ hexo server

更多信息:服务器

生成静态文件

1
$ hexo generate

更多信息:生成

部署到远程站点

1
$ hexo deploy

更多信息:部署

0%