网页更新方法

个人备忘录

前提

• 已经在github有一个仓库来托管个人网站。
• 仓库内有fork其他人的网站配置文件，或者自己上传了网站配置文件。
• 已经在github配置好Actions，可以自动生成网页。
• 已经安装VS Code

这里有一些可供参考的文件：
Github官方中文文档合集：Github doc

另外，请参考本网站文章Github入门资料整理

整体流程

• 步骤1. 将github仓库克隆到本地。
• 步骤2. 按需求修改文件，追加文件等。
• 步骤3. （可跳过）在本地预览效果，看网站显示效果是否满意。在本地预览效果需要使用 Ruby 或 Jekyll。
• 步骤4. 合并 ‘push’，将更新内容追加到仓库。

步骤1. 将github仓库克隆到本地

1. 复制所需github仓库的HTTPS。
2. 点击‘Clone Repository in container volume…’。或者 Ctrl+Shift+P 然后输入”clone” 并选择Clone repository。
3. 输入复制的HTTPS。等待几秒钟。完成复制。

VSCode 会记录之前打开过的仓库，如果之前克隆过本仓库，之后直接点击即可打开，无需每次重新克隆。

可选步骤：环境配置 (Dev Containers)

如果是其他非个人电脑，为了避免在本地安装 Ruby 或 Jekyll 等复杂的运行环境，我们使用 Docker 容器环境。

因为本仓库已经包含 .devcontainer 文件，当我们执行完步骤1之后，
VS Code 会识别到 .devcontainer 文件夹，通常会在右下角弹窗问你：“是否在容器中重新打开？”
如果你忽略了它：依然是在本地文件系统操作。
如果你点击了它：VS Code 会启动 Docker，并把你的开发环境“隔离”到容器里。

如果你本地已经安装并配置好了 Ruby 和 Jekyll 环境，可以直接在本地终端操作(比如BC1ee的个人电脑)；如果你是第一次参与维护或不想在电脑上配置复杂的运行环境，建议使用 VS Code 的 Dev Containers 模式，它会自动为你准备好一切。

步骤2. 按需求修改文件，追加文件

可以直接在 VS Code 中对文件进行修改和编辑。

步骤3: 在本地环境中观察静态网站效果

打开vscode的终端，确认目前的目录在该仓库的根目录。

在vscode的终端输入

bundle exec jekyll serve

等待几秒中，终端会提示一个链接，点击终端提示的网站地址。

步骤4: 将分支合并PUSH推送到Github

当你完成修改并确认预览无误后：

1. 初次使用配置（仅需操作一次）：在终端输入你的信息，以便 GitHub 记录是谁做的修改。

    $ git config --global user.name "BC1ee"
    $ git config --global user.email bc1ee@example.com
   

2. 暂存更改：点击左侧 Source Control (源代码管理) 图标。在 Changes 栏点击 + 号 (Stage All Changes)。

3. 填写说明：在顶部的消息框输入本次更新的内容。注意：必须填写 Message 才能提交。

4. 提交并上传：点击 Commit 提交到本地。

5. 推送同步：点击 Sync Changes 或在菜单中选择 Push。