夸客
夸客
Published on 2022-12-04 / 2 Visits
0
0

搭建在线写文章的环境

搭建好博客站点后,我遇到了怎么写文章最方便的选择问题,总不能每次都 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,下载该包完成后双击安装。
主要变量如下:

image

  • 容器名称 按自己喜好定义就行。
  • 端口设置 不要改变容器端口,本地端口自行选择一个不被占用的就行。
  • 存储空间设置 点击添加文件夹,在本地 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 部分继续下拉点击展开可以看到
    image

2. 设置 codespaces

为了有效使用每个月 60h 的时长,主要就是应用一个类似闲置一定时长自动关机的选项,默认是 30mins 不进行操作关闭 codesapces,可以修改为 10mins,同样是在 GitHub 的 setting 左栏点击Codespaces, 下拉至 Default idle timeout,将默认的 30 修改为 10。特别注意如果连续 30 天不进行任何操作将销毁虚拟机,到时候未提交的修改将丢失。
image

具体怎么设置 Markdown 文件头信息的下次载写吧,戴耳机写的认真没听到老婆召唤被骂了,下次再补充。


Comment