Add docs on CI/CD infrastructure (#376)

* docs: Add our CI/CD infra

* docs: Add translation to CI/CD

* docs: remove explicit heading IDs

* docs: CI/CD: Add explicit heading IDs in English

* Miscellaneous changes

Signed-off-by: Josh-Cena <sidachen2003@gmail.com>

Co-authored-by: Josh-Cena <sidachen2003@gmail.com>

Author: yechs

docs/infra/CI-CD.md

@@ -0,0 +1,67 @@
+---
+id: CI-CD
+title: 持续集成/持续部署
+license: Creative Commons Attribution 4.0 International License
+---
+
+## CI/CD 是什么 {#what-is-cicd}
+
+CI/CD 是 [Continuous Integration](https://en.wikipedia.org/wiki/Continuous_integration) / [Continuous Delivery](https://en.wikipedia.org/wiki/Continuous_delivery)（持续集成/持续交付），或是 [Continuous Deployment](https://en.wikipedia.org/wiki/Continuous_deployment)（持续部署）的缩写。
+
+它们是一整套软件工程的哲学，用于在一个大的合作项目中保证所有人的代码提交都可以被频繁以及高效地合并进代码的 base branch（通常为 main 或 master），并使得软件可以持续地处于稳定、可以被编译以及发布的状态。
+
+<!-- TODO -->
+
+## 我们为什么使用 CI/CD {#why-do-we-use-cicd}
+
+在 C 社的项目中，我们通过大量运用自动化构建 (Automated Build) 与自动化测试 (Automated Testing) 来保证：
+
+1. 每一次代码提交 (commit) 中产生的错误都会被快速地发现，避免错误被引入生产系统中
+2. 整个项目的代码风格（格式、命名、规则等）保持一致，增加代码的可读性
+
+此外，我们还通过自动依赖更新 (Automated Dependency Update) 来保证代码中的依赖随时处于最新版本，尽可能快速地修复依赖包引入的安全漏洞。
+
+<!-- TODO -->
+
+## 我们使用了哪些 CI/CD 工具 {#what-cicd-toolsets-do-we-use}
+
+在一个网站项目中，你的每一个 PR 通常都会经历这些工具的验证：
+
+### Circle CI {#circle-ci}
+
+- Circle CI 与 GitHub Actions 具有相近的作用，都可以基于 docker 运行一系列自定义的 jobs
+- 且两者对于开源的仓库都提供每月一部分免费的运行时间
+- Circle CI 的配置文件一般位于仓库中的 `.circleci` 目录下。可以使用你的 GitHub 帐号登录 [circleci.com](https://app.circleci.com) 后访问所有的运行历史。
+- 被用于检查编译是否通过，并对主分支中的提交进行自动化部署
+
+### GitHub Actions {#github-actions}
+
+- GitHub Actions 的配置文件一般位于仓库中的 `.github/workflows` 目录下。可以通过每个仓库中的 Actions 页面访问所有的运行历史。
+- 因为是在 GitHub 被微软收购之后才推出的，所以在我们的项目中使用的不是很多
+- 目前主要被用来检查一些语法和代码风格上的问题（比如 ESLint 与 Prettier）
+
+### Netlify {#netlify}
+
+- 是一个自动编译并搭建静态网站预览的工具。配置后，Netlify 会在 PR 下添加一条包含预览网站地址的留言，使审核者能够预览这个 PR 引入的改变
+- 由于免费版的 Netlify 只允许每个项目拥有一个管理员，需要更改项目配置的请联系
+  - [Computerization-website](https://github.com/Computerization/Computerization-website) 的管理员是 [@yechs](https://github.com/yechs)
+  - [Enspire](https://github.com/Computerization/Enspire) 的管理员是 [@Josh-Cena](https://github.com/Josh-Cena)
+
+### LGTM {#lgtm}
+
+- 一个自动的对代码质量进行打分的工具
+- （老实说用处不是很大，看看就好）
+
+### WIP {#wip}
+
+- **W**ork **I**n **P**rogress 的缩写，表示一个 PR 还未完成，不应被合并
+- 对于仍处于未完成状态的 Pull Request，可以在标题中标注 `[WIP]`，WIP 会避免这些 PR 被合并进入主分支。
+- **注**：现在 GitHub 自己的 draft PR 功能已经非常完善了。对于仍然处于 WIP 状态的 PR，应当考虑[标注其为 draft PR](https://github.blog/changelog/2020-04-08-convert-pull-request-to-draft/)。
+
+### Dependabot {#dependabot}
+
+- 此外，我们还通过 dependabot 来自动更新依赖
+- 它是一个被 GitHub 收购了的工具，会在你的依赖项目出现新版本之后开 PR 来更新这些依赖项目的版本
+  - **注**：因为 dependabot 往往会提交大量的 PR，因此也会给项目的提交记录带来大量的噪音
+- Dependabot 还被用于依赖项目中漏洞的发现与自动修复
+- 它的配置文件通常位于 `.github/dependabot.yml`。可以在项目的 Insights 页面中的 Dependency graph 查看 dependabot 的当前状态。如果你是项目管理员的话，在项目的 Security 页面中也能看到 dependabot 的安全漏洞警告。

i18n/en/docusaurus-plugin-content-docs/current/infra/CI-CD.md

@@ -0,0 +1,67 @@
+---
+id: CI-CD
+title: CI/CD
+license: Creative Commons Attribution 4.0 International License
+---
+
+## What is CI/CD
+
+CI/CD is the abbereviation for [Continuous Integration](https://en.wikipedia.org/wiki/Continuous_integration) / [Continuous Delivery](https://en.wikipedia.org/wiki/Continuous_delivery) (alternatively, [Continuous Deployment](https://en.wikipedia.org/wiki/Continuous_deployment)).
+
+They are a system of software engineering philosophy and is used in large collaborative projects to ensure that everyone's commits could be frequently and efficiently merged into the base branch (usually `main` or `master`). It also keeps the software main branch in a stable, compilable state so that it can be released whenever necessary.
+
+<!-- TODO -->
+
+## Why do we use CI/CD
+
+Throughout Computerization's projects, we've extensively made use of Automated Build and Automated Testing to ensure that
+
+1. Bugs introduced in each new commits are found out quickly before they are merged, so as to avoid breaking the production system
+2. The code styles (format, naming, conventions) are consistent, making the codes more readable
+
+Besides, we also make use of Automated Dependency Update to keep all dependencies in our codebase at the newest version, so we can fix security vulnerabilities introduced by dependencies as soon as possible.
+
+<!-- TODO -->
+
+## What CI/CD toolsets do we use
+
+In a typical web project, each of your PR will be examined by the following tools:
+
+### Circle CI
+
+- Circle CI and GitHub Actions serves a similar function. Both can be used to run a series of custom jobs within docker containers.
+- Worth mentioning, both of them offers some amount of free credits to open source projects
+- The configuration file for Circle CI is usually located under the `.circleci` directory in the repo. You can log into [circleci.com](https://app.circleci.com) via your GitHub account to have access to all the historical build statuses and logs.
+- In our existing projects, it is used to check whether the build passes/fails, and to automatically deploy commits in main/master branch/
+
+### GitHub Actions
+
+- The configuration file for GitHub Actions is usually located under `.github/workflows` directory in the repo. You can visit the "Actions" tab in each repo to have access to all the historical buil statuses and logs.
+- Since it is released only after Microsoft acquired GitHub, it is not used as much as Circle CI in some of our old projects
+- It is now used to check syntax and enforce format/code conventions (e.g. through eslint and prettier)
+
+### Netlify
+
+- It is a tool used to automatically build and preview static websites. With some configuration, it will comment the preview address under PRs, so that reviewers can preview the changes introduced by the PR.
+- Since the free plan of Netlify allows only one member in each organization, you should contact these people if you want to change the configurations
+  - [Computerization-website](https://github.com/Computerization/Computerization-website) ==> [@yechs](https://github.com/yechs)
+  - [Enspire](https://github.com/Computerization/Enspire) ==> [@Josh-Cena](https://github.com/Josh-Cena)
+
+### LGTM
+
+- A tool that automatically grades your code quality
+- (honestly it's not as useful as others, so just take it as a reference)
+
+### WIP
+
+- Short for **W**ork **I**n **P**rogress. Used to indicate that a PR is still under development and should not be merged.
+- For unfinished Pull Requests, one can add `[WIP]` in the title, and WIP will prevent these PRs from being merged.
+- **Note**: Now that GitHub's built-in draft PR functionality is much more usable, you should consider [marking the PR as draft](https://github.blog/changelog/2020-04-08-convert-pull-request-to-draft/) instead.
+
+### Dependabot
+
+- In addition, we use dependabot to automatically update the dependencies.
+- It is a tool now acquired by (and integrated into) GitHub. It'll open PRs to update your project dependencies when they are outdated
+  - **Note**：Since dependabot usually opens large amounts of PRs, it'll also bring huge amounts of noise to the project's commit history
+- It is also used to automatically detect and fix vulnerabilities introduced by dependencies.
+- The configuration file is usually located in `.github/dependabot.yml`. You can visit the dependency graph in repo's "Insights" tab to check the current status of dependabot. If you are the repo administrator, you can also view dependaboit vulnerability alert under the repo's "Security" tab.

sidebars.js

@@ -15,5 +15,6 @@ module.exports = {
       'syllabus',
     ],
     Enspire: ['enspire/what-is-enspire', 'enspire/techstack'],
+    Infrastructure: ['infra/CI-CD'],
   },
 };