代码骑士的旷野时光
代码骑士的旷野时光
网名
“代码骑士”的三重含义:
一是以代码为主要形容角色 —— 如同闯关骑士般在浩瀚的代码世界里闯荡。
二是以骑士为主要形容角色 —— 以“代码”二字象征通过文字、图片与视频的形式记录生活中骑行时的所见所闻与奇闻轶事。
三是从工作+生活两个角度切入 —— 代码即代表工作,骑士即代表生活。
“旷野时光”体现了丰富的户外生活,如vlog拍摄 、摩旅、钓鱼、户外爬山等。
起号文案
1 | 👋 用户【代码骑士】已登录 |
结语
(ps:生活vlog 宇见美好 正在筹备中~)
1 | vlog名备选: |
常用图标
1 | ❤️(爱心) |
常用文案
骑上小铁马,城市逃亡计划!🚴♂️💨
烦恼留在城市,带上好心情出发✌️
骑到没人的地方放声大唱,反正没人听见😝
👨🏻💻 记录生活,记录工作,记录学习 ✨
💻工作敲代码,周末待chill mark💫
双关含义
- Chill(放松)+ Mark(标记/代码中的注释符号),暗指“周末放松”和“代码标记”。
- “Weekdays code, weekends ChillMark.”
1 | - 「// TODO: 拍VLOG记录生活// 进度:1% (刚买相机)// 预计完成时间:未知😂」 |
1 | **「⚡️ # 正在启动「崔宇烁」VLOG系统… |
Git Commits提交规范
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(可选):表示提交影响的范围或模块,例如
login
、utils
等。 - 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小时搭建个人网站
1. 前言
拥有自己的个人网站一直是我的一个目标。
在网上看了很多方法之后,我最终选择了 GitHub Pages + Hexo 这条技术栈,原因有两点:
- 完全免费。
- 现成框架,搭建方便。
整个搭建过程快的话半小时就可以搞定。Windows/Linux/macOS 通用。
搭建完成后大概是这样子的:司宇啊的博客
2. 准备环境
准备一个 GitHub 账号并新建一个仓库,仓库名称为 <username>.github.io
。
<username>
是你的 GitHub 注册用户名,<useremail>
是你的 GitHub 注册邮箱。
如果是初次使用 git,需要先配置用户名和邮箱信息:
1 | git config --global user.name "<username>" |
生成 ssh 密钥文件:
1 | ssh-keygen -t rsa -C "<useremail>" |
默认不设置密码,直接回车就行。
复制自己电脑目录下生成的 .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/。
如果成功的话可以看见官方的默认页面:
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 | name: Pages |
执行以下命令保存提交并推送到远程仓库:
1 | git add . |
推送会触发 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 主题为例讲解怎样更换主题:
- 首先在站点目录下打开终端
- 执行
npm install hexo-theme-next
安装主题包 - 执行
cp node_modules/hexo-theme-next/_config.yml _config.next.yml
检出主题配置文件 - 打开站点配置文件 _config.yml,找到
theme
字段,并将其值更改为next
- (可选)找到
language
字段,并将其值更改为zh-CN
(在 hexo-theme-next/languages 目录下可查看主题支持的语言) - 在切换主题之后, 我们最好使用
hexo clean && hexo s
命令来清除 Hexo 的缓存再预览
在更换了主题之后界面美观了许多,终于可以舒舒服服地写文章啦~
但是很不好意思,倘若你的文章里有 LATEX 公式或者想用 Markdown 格式插入图片,你会发现无法显示……
作为一名技术宅,文章里怎么可能不用公式不用图片嘛,这两个坑必须解决了!
2. 公式
打开主题配置文件 _config.next.yml 并找到 math
字段,修改为:
1 | 解释 |
说一下,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 | 解释 |
这样的目录结构(目录名和文章名一致)中,在文章源代码里只要用 
就可以插入图片了~
网上也有其他方法,但这种方法不仅最后部署时能正确显示图片,在本地预览 Markdown 时也能正确显示图片。
4. 更多
音乐:可以去网易云音乐官网生成外链
关于 Hexo 框架的更多信息请参考:Hexo
关于 NexT 主题 的更多信息请参考:NexT - Theme for Hexo
编辑于 2025-03-28 15:38