GitHub Pages是发布去中心化应用程序（dapp）的最佳平台，不仅适用于开发环境，也适用于生产环境。GitHub Pages是一个为开源项目提供的免费服务，允许直接从GitHub仓库发布基于HTML/CSS/JS的静态网站。
所有的dapp都应当是开源的，所有的应用程序都不例外。GitHub Pages的另一个好处是它仅支持静态网站——只在客户端运行，没有可以运行代码的后端或服务器端渲染。对于合约来说，这个限制实际上是一个优点，因为去中心化应用程序永远不应该依赖于后端服务，即中心化的服务。
GitHub Pages的最后一个重要特性是它依赖于Git仓库，这提供了许多社区治理功能。例如，一组维护人员可以共享网站部署权限，因为他们都对仓库有一定的访问权限。社区的协作者可以提交pull request，这些请求也可以被合并。
最后，如果社区中的任何人对dapp的治理方式不满意，他们可以随时fork初始的GitHub仓库，创建自己的独立客户端，并且也可以在GitHub Pages上发布。
部署到GitHub Pages
在本地的web应用程序，它只是前端部分。dapp的后端部分是智能合约。
首先，创建一个新的仓库，然后逐部提交代码。也可以一次性提交所有代码，但某些部分必须以特殊方式处理。
复制GitHub仓库的URL，返回到IDE中初始化Git仓库。在快速设置页面上可以找到命令：
echo "# first_contract_front_end" >> README.md git init git add README.md git commit -m "first commit" git branch -M main git remote add origin https://github.com/markokhman/first_contract_front_end.git git push -u origin main
从这里开始：
git init
Git仓库已初始化，并且有.gitignore文件。
现在添加所有内容：
git add .
提交一个初始提交：
git commit -m "Initial commit"
现在调用远程origin，即之前从GitHub仓库复制的链接：
git remote add origin https://github.com/markokhman/first_contract_front_end.git
然后进行第一次推送，包括初始代码：
git push origin master
回到GitHub谈谈GitHub Pages的工作原理。我有一个用户名和一个仓库名，这些是GitHub Pages托管网站的基础。我的用户名markokhman将被用作子域名，然后添加github.io作为域名，接着是仓库名：
markokhman.github.io/first_contract_front_end/
创建新清单文件
创建自己的清单文件并将其放在public文件夹下：进入main.tsx文件，创建一个新的清单文件，将其放在public文件夹下，并命名为tonconnect-manifest.json。
其结构是URL：
"url": "https://join.toncompany.org"
然后是名称：
"name": "TON&Co. Tutorial"
接着是图标URL。当前链接如下所示：
"iconUrl": "https://markokhman.github.io/first_contract_front_end/icon.png"
这是新的清单文件：
{ "url": "https://join.toncompany.org", "name": "TON&Co. Tutorial", "iconUrl": "https://markokhman.github.io/first_contract_front_end/icon.png" }
现在我们回到main.tsx文件并在这里组合一个适当的URL：
const manifestUrl = "https://markokhman.github.io/first_contract_front_end/tonconnect-manifest.json"
准备Vite进行构建
做的最后一件事是让vite进行正确的构建步骤。vite配置有一个基础路径：
// https://vitejs.dev/config/ export default defineConfig({ plugins: [react(), nodePolyfills()], base: "/", });
这个基础路径不是根路径，有另一个基础路径：first_contract_front_end。GitHub的规则：仓库名必须是基础路径。所以将其作为项目的基础路径：
// https://vitejs.dev/config/ export default defineConfig({ plugins: [react(), nodePolyfills()], base: "/first_contract_front_end/", });
创建GitHub工作流
到此为止，现有代码已经准备就绪，但还需要做一件事。首先运行：
yarn build
构建可在浏览器中执行的可服务文件，包括所有的TypeScript等内容。它无法直接在浏览器中运行，所以需要构建它。在dist文件夹中存在有index.html以及所有路径，有所有的文件，都是打包好的。
但是我不希望每次将更改推送到仓库时都运行yarn build，dist文件夹的内容甚至被“gitignore”了。在GitHub中，一个仓库分支被认为是包含GitHub Pages网站内容的分支，可以创建一个仅包含必要文件夹内容的分支，将这个分支直接连接到刚刚描述的URL。
对以上的流程可以进行优化，每次从本地机器向GitHub推送任何更改时都会自动准备好，从而自动创建GitHub Pages并包含dist文件夹的所有当前内容。为此，GitHub有另一个很实用的功能——工作流。
现在创建一个工作流，设置为每次推送到仓库时，它都会为我们自动完成任务。在项目根文件夹中创建一个新文件夹名为.github。在它里面，再创建一个文件夹名为workflows。这些是标准名称，不能更改它们。在workflows文件夹中创建一个名为deploy的文件，扩展名为*.yml。在其中粘贴以下代码：
name: Deploy on: push: branches: - master jobs: build: name: Build runs-on: ubuntu-latest steps: - name: Checkout repo uses: actions/checkout@v2 - name: Setup Node uses: actions/setup-node@v1 with: node-version: 16 - name: Install dependencies uses: bahmutov/npm-install@v1 - name: Build project run: npm run build - name: Upload production-ready build files uses: actions/upload-artifact@v2 with: name: production-files path: ./dist deploy: name: Deploy needs: build runs-on: ubuntu-latest if: github.ref == 'refs/heads/master' steps: - name: Download artifact uses: actions/download-artifact@v2 with: name: production-files path: ./dist - name: Deploy to GitHub Pages uses: peaceiris/actions-gh-pages@v3 with: github_token: ${{ secrets.GITHUB_TOKEN }} publish_dir: ./dist
这个名为deploy的工作流将在任何推送到master分支时触发。在build中指定它运行的环境，设置运行时的node版本，可以npm-install一些东西。最终结果将是一个dist构建文件夹，就像刚刚在本地一样。
下一个是deploy。这里提供了有关如何下载dist文件夹的工件并将它们部署到GitHub Pages的流程。deploy将创建一个新的GitHub Pages分支。
用git status命令检查git状态，看到有一个文件更新了——vite.config.ts。检查清单文件：移动到tonconnect-manifest.json，使用git add .命令添加所有内容并提交它：
git commit -m "Workflow"
移到GitHub仓库设置，Actions > General，确保工作流权限设置为“读和写”；否则无法创建文件夹。
推送代码
下一步是推送提交的内容。返回文件夹，使用命令：
git push origin master
进入GitHub仓库的Actions标签，查看你的工作流正在运行。
这个工作流的结果将是一个名为gh-pages的新分支。每次推送到main分支时，这个工作流都会运行并更新这个新分支，实际上是通过重新创建它，以便在部署作业完成后它包含最新的构建内容。
在分支中可以看到一个新的gh-pages分支和一个新的部署。转到Settings > Pages，在Build and Deployment部分选择gh-pages分支。
返回到Actions。你会看到另一个动作正在运行——这是将dist文件夹部署到我们的子域名。
测试GitHub页面
在过程结束后，转到Settings > Pages，在顶部你会看到网站的链接。前往这个网站可以看到像在本地机器上部署的一样。
测试一下，按“Connect Wallet”，选择“Wallet > Tonkeeper”并扫描二维码。由于之前升级了清单文件，现在可以看到图标和名称。钱包连接后会看到带有所有操作按钮的网站。