我在网上有家了

发表于 2023/05/08 更新于 2024/08/21

作者 顾宇浩

次浏览 10 分钟阅读

虽然很早就知道 Github Pages 这个东西了，但是本科的时候一直没去弄，因为感觉自己很菜折腾不来，而且认为 Github Pages 只不过是个静态网站，没有后端，功能很有限。但是随着时间推移，越来越发现作为一个计算机人，有个自己的主页还是很重要的，要不然在网上介绍自己的时候就是一个字符串 ID 而已，即使只是个网站，也可以起到分享一些数据、展示自己工作的作用。~~（也是因为这几天科研不顺利，想的点子放弃了，突然就空出了好几天的时间）~~

虽然很明白博客的广告效应，但是我一直是很不想写博客的，因为我一直认为为人是要为自己说的话负责的，而我总感觉的水平还不到显摆的程度，不能误人子弟，而只是东拼西凑地抄其它文章的内容的话又没什么意义（东西都记在脑子里，谁还去记笔记），总之就是没什么东西写。另一方面也是因为懒，写了几篇之后发现要完整的一篇像样的原创博客还是很花时间的，从描述想法到实验结果基本上有半篇学术论文的工作量了，确实要很多精力，一想到没什么人看（甚至自己可能都不看），就没什么动力了。

那为啥现在又开始了呢？首先这个网站的定位不全是博客，而是“个人主页”，我想做成一个个人信息的展板，同时用来分享自己的一些工作成果（比如我自己开发的 Unity 游戏），如果这些成果不放在网页上，可能压根不会有人去主动下载并试用。另一方面是受了一个叫曌曦潆的家伙的启发，这家伙真是个怪人，把微信公众号当成朋友圈来用，天天发一些莫名其妙的东西，我看了之后大受启发： “原来文章还能这么写！” 给我减轻了很大的心理负担。

所以，我这个家网站的建站宗旨就是：拓展、简洁、随意，下面就记录一下建家的过程吧。

其实写这篇文章的主要目的就是用来测试 jekyii 的效果的 🤣。

建家过程

决定用 Github Pages 建家，梳理了自己的需求：
- 个人简历
- 写点博客
- 作品分享
  - 支持 Unity 编译出的 WebGL 游戏
  - 支持使用 Ant Design 开发的前端静态网站
然后开始阅读 Github 的官方文档。
官方文档里介绍了可以给 Github Pages 加入主题
试了一下官方的 Architect 主题，感觉效果还不错，但是功能稍微弱了一些。
然后看了吴坎师兄的博客，感觉很牛，起码知道了原来 Github Pages 还可以做到这种程度，于是开始按自己的宗旨开始搜索模板。
找到了 Chirpy
其实根本就不难找，相比于其它主题，这个 Chirpy 有几千个星（看来很火），而且很符合我对“简洁”的要求，左看右看，感觉功能还挺强的，给了一揽子解决方案，于是决定就用它了！
配置启动
因为我对这个网站的定位不全是个博客，所以就没用官方的 Starter 模板，只是把里面文件拷出来传到这个仓库里，自己慢慢改。
首先是配置 _config.yml，需要填写其中的 url、avatar、timezone、lang。
可惜只能加 Twitter 的链接，不知道改的话要不要修改 Chirpy 的源代码，真的不想自己折腾。
评论用的是 giscus，说实话头一回知道这么个东西，还真挺有意思嘿！
刚开始的时候，因为我这个网站不只是博客，还会有一些代码啥的，所以我就想把这个主页的仓库改成私有了。为了做公开和私有文件的隔离，我在 master 分支之外建了一个 deploy 分支。master 分支是正常的开发分支，而 deploy 分支专用于部署，上面只有公开文件，每当发布的时候，从 master 分支合并到 deploy 分支，然后再 push 到 Github。直到后来我发现这么做除了给自己找麻烦外完全没有意义 —— 只要让 Jekyll 把私有的文件不输出不就好了吗！（我真是傻）
不过 Chirpy 文档里说非 PRO 用户必须把仓库设为公有，不知道等我学生认证到期了要不要再改回来，反正感觉是个雷。
Unity 游戏测试
添加了一个示例游戏，效果还不错！
修改 favicon
https://chirpy.cotes.page/posts/customize-the-favicon/
定制左侧边栏
很简单，直接照 _tab 里的文件改就行了。
设置主页为个人简历
比较困难，有人已经在 Github 上问过了：https://github.com/cotes2020/jekyll-theme-chirpy/issues/115
小折腾了一会后，决定放弃，因为可能要改得很深入，而且我可以在分享的时候直接加上建立的后缀嘛：https://yhgu2000.githu.io/resume
启用访问统计
TODO https://chirpy.cotes.page/posts/enable-google-pv/#configure-chirpy-to-display-page-view

怎么写博客

正文的标题最高只能到 ##，如果使用 # 就不会显示在右侧的目录里。

头信息

文章前可以加上一段头信息，指明分类、标签等，这里是完整的功能：

  
---
title: TITLE
date: YYYY-MM-DD HH:MM:SS +/-TTTT
categories: [TOP_CATEGORIE, SUB_CATEGORIE]
tags: [TAG]
author: <author_id> # 多位作者用 [<author1_id>, <author2_id>]，不写默认用第一个作者
toc: false # 关闭目录
comments: false # 关闭评论
math: true
mermaid: true # 数学公式和流程图要显式开启
media_subpath: /img/path/ # 可以给文章里的图片加上公共前缀（很实用！）
image: # 给文章加上封面图，比例不是 1.91:1 的话会被裁剪，最好是 1200x630 的
  path: /path/to/image # 会受 img_path 影响
  alt: image alternative text
  lqip: /path/to/lqip-file # 低质量图片，用于加载时的占位
pin: true # 置顶在主页上
---

categories、tags 都可以用中文

作者必须要在 _data/authors.yml 里注册

图片

图片可以指明大小、位置、阴影，并且添加标题，以及使用 .light 和 .dark 让图片适应不同的主题。

我的头像

使用 .normal 后图片就不再会居中了

视频

还可以嵌入视频，不过只支持 YouTube 和 Twitch，不过可以直接用 B 站的嵌入代码：

为了让视频居中，只需要在元素外面套一个 <div style="display:flex;justify-content:center;"> </div> 就行了，最好再加上一个 margin:20px 以空出间距。

视频的 iframe 可以使用 style="width:640px;height:480px" 的属性，设置为 480p 的分辨率，以免画面太小。

绶带

shields.io 这个网站可以生成各种绶带，有好多种风格，比如：

图标在这个网站上面找：https://simpleicons.org

博客

测试

本文由作者按照 CC BY 4.0 进行授权

建家过程

怎么写博客

头信息

图片

视频

绶带

热门标签