搭建好博客站点后,我遇到了怎么写文章最方便的选择问题,总不能每次都 new post 命令吧,而且有时候不在安装了编辑器的电脑旁或者随意记录些文字。现有的 Markdown 编辑器很多写完后没法直接推送到 GitHub 仓库,需要拷贝到相应的 post 文件夹或者本地直接在 post 文件夹中编辑,遇到其他不带电脑的场景或者更换电脑等等就很麻烦,而且文件头的创建时间等等信息也没法自动生成。所以我的目光投向了可以和 GitHub 联动的代码编辑器,vscode 当然是首选了,而且还有网页 online 版,甚至可以本地部署服务,不要太完美。最后选择了 GitHub codespaces,记录下过程。
第一种方式(最后未采用)
利用 Code Server 自建,这个项目是 GitHub 上的开源项目。项目主要功能是:
Run VS Code on any machine anywhere and access it in the browser.
项目提供多种安装方式,可以选择云端 Linux 主机部署,或者 docker 部署。我刚好有一台群晖 218+ 可可以使用 docker。接下来简要记录下主要的步骤(其实最后没有采用这种方式)。
1. 群晖中 docker 镜像下载和配置
首先,在群晖的套件中心确认安装 docker 插件并启用。然后打开 docker 应用后在 注册表 搜索 code-server ,排名第一的是 Linuxserver/code-serer,下载该包完成后双击安装。
主要变量如下:
- 容器名称 按自己喜好定义就行。
- 端口设置 不要改变容器端口,本地端口自行选择一个不被占用的就行。
- 存储空间设置 点击添加文件夹,在本地 nas 上新建或者选择一个文件夹来存储 docker 容器中的 home 文件(所谓 home 文件一般指系统默认分配给用户的存储位置)。
这一项不是必须的,如果不需要在 nas 文件管理器中访问 docker 中的文件就不必要配置这一环节,直接点击下一步启动就可以了。
如果配置的话,选择或新建好本地的文件夹后,装载路径,即 docker 中对应文件夹的位置,设为 /config 即可,因为容器默认的用户 home 文件就是 /config ,后续很多文件默认存储到这个位置。 - 启动 完成上一步后点击下一步就到了启动界面,这个环节里列出了前面所有的配置,可以检查下是否需要修改,不需要的话点击完成便可以看到容器启动了。
2. 本地或远程访问本地搭建的 “vs code”
2.1. 本地访问
在浏览器中直接输入群晖的 IP 地址:本地端口号。访问成功后输入配置容器时环境变量参数配置中PASSWORD的值即可进入网页版的 vs code 编辑器。
2.2. 远程访问
远程访问根据自己的环境有多种方式可以选择,一种有公网 IP 的,相对来说使用 ddns 参考网上访问 nas 的文章配置好容器对应的本地端口就可以访问了;另一种没有公网 IP 的,主要使用内网穿透,反向代理的方法,再使用自有域名访问,我采用了 cloudflare zerotrust 中 access 的隧道功能,绑定自有域名进行访问,具体采用那种方式网上一堆文章,没什么区别和需要特别注意的,我就不详细记录了。
3. 配置和使用网页版 vs code
本来打算打算利用 cloudflare 的隧道功能使用自有域名访问自家网页版的 vs code 服务该多爽啊,可以实测发现,访问速度真的太慢了,根本没法使用,可能使用花生壳/向日葵等内网穿透服务的体验可能更好吧,但是……我发现了更好的,直接放弃了自行搭建的选项,那就是GitHub Codespaces,简直就是多平台/多场景编辑代码,或者写文章(如果网站通过 Cloudflare Pages 托管在 GitHub 上的话,虽然属牛刀小用)的福音啊,流水线一条龙,简直不要太完美。接下来简要的介绍下我对 Codespaces 的理解以及用它来写博客的优点。
更完美的选择:GitHub Codespaces
首先,:bell: 免费!:bell: 免费!是免费的,不免费用不起呀 :sweat:,而且速度稳定。
Codespaces官方中文译名 代码空间
托管在云中的开发环境。
可通过将配置文件提交到存储库(通常称为“配置即代码”)来为 GitHub Codespaces 自定义项目,这将为项目的所有用户创建可重复的 codespace 配置。每个 codespace 都在由 GitHub 托管的虚拟机上运行。
可以根据需要的资源选择要使用的计算机类型。 有各种类型的计算机可供选择,从 2 核处理器、4 GB RAM 和 32 GB 存储开始。
可以从浏览器、Visual Studio Code、JetBrains Gateway 应用程序或使用 GitHub CLI 连接到 codespaces。
我自己的理解的理解就是一个云上虚拟机,但为什么这个云上服务器完美满足随时随地、一条流水线写文章的要求呢?
- 与桌面 vscode 几乎完全没有区别(至少在 Markdown 写作方面)。
- 与 GitHub 完全同步,设置一次,全平台使用。
- 随写随存、随时提交,防死机防换机换开发环境就是不防断网 :neutral_face:
- 最重要的 :bulb:,免费 120h*core 每个月,一般写作完全够用,Pro 会员有 180h*core。
- 通过 Snippets 和快捷键设置实现快速插入 frontmatter 信息,诸如文章创建时间自动插入、类别或标签等必要信息能无脑选择现有的分类和标签(都有忘记自己到底怎么分类和标签的时候:smile:)
1. 创建 codespaces
在桌面版 vscode 或 online 版中 remote explorer 菜单选择创建按照步骤登录选择自己的库即可,稍等配置生成后就直接是 vscode 界面了。注意以下几个事项即可:
- 不要选择大于 2 核的服务器,因为每个月免费时长是120h=时间维度 X 核的数量,所以如果选择 4 核就是每月免费 30h,2 核才是免费 60h。
- 停机后不计入时长的,只有开机后环境配置运行时间才计入使用时长,存储空间从写文章角度 15g 每个月完全够不必计较。
- 要看使用了多长时间可以登录自己的 GitHub 点击 setting,在设置页面左栏菜单点击 Billing and plans,下拉可以在 Usage this month 部分继续下拉点击展开可以看到
2. 设置 codespaces
为了有效使用每个月 60h 的时长,主要就是应用一个类似闲置一定时长自动关机的选项,默认是 30mins 不进行操作关闭 codesapces,可以修改为 10mins,同样是在 GitHub 的 setting 左栏点击Codespaces, 下拉至 Default idle timeout,将默认的 30 修改为 10。特别注意如果连续 30 天不进行任何操作将销毁虚拟机,到时候未提交的修改将丢失。
具体怎么设置 Markdown 文件头信息的下次载写吧,戴耳机写的认真没听到老婆召唤被骂了,下次再补充。