Skip to main content

托管你的站点

经过前面的设置，你的博客网站就完成了。现在，我们需要一个链接能够访问你的站点。最流行的方法是使用 Github Pages 进行代码托管和自动部署，但是 Github 的服务器部署在境外，因此我们在国内的访问速度很慢，那么，在这里我将介绍一种使用 Vercel 的方式部署你的博客。它能够提供可以接受的访问速度。

Github Pages​

Github Pages 是很流行的静态网页托管，你只要将源代码上传到 Github Pages ， Github 就能自动地帮你把你的源码部署到 Github 服务器，然后给你一个链接，你就能通过这个链接访问你的静态页面了。它的最大的好处是能够省下不必要的服务器开支。

前面我已经写过相关文档了，请查看：这篇文章。

但是， docusaurus 不太一样，因为它的源代码并不是我们熟知的静态网页的模样，他还要使用下面的 npm 代码来完成打包这件事： 

npm run build

完成这件事后，项目的根目录会出现一个 build 文件夹，这里面的内容就是我们熟知的打包后生成的原生 html 文件。
2
在这个文件夹中， index.js 就是项目入口文件，可以直接 open with live server 在浏览器运行。

但是，我们怎么让 Github 帮我们打包呢？

Github Action​

这里可以使用 Github Action 进行自动部署，在你将整个网站上传之后，你就不用管它了。它会帮你执行 npm run build 并部署到服务器。

创建仓库和分支​

创建一个 blog 仓库，为了让域名，建议仓库命名为 你的GithubID.github.io。
1
并创建一个新分支，名叫 gh-pages 。
0
设置 Github Pages 。 1 将 Branch 切换为刚刚创建的分支。 gh-pages 。

注册 token​

在你的 Github 主页，选择 setting 。
1
选择左下角的的 Developer settings 。
2
然后选择 Personal access tokens 。
3
填写相关信息，选择 无限期 ， 勾选 repo 和 workflow 。点击创建。
4
然后生成完成，之后它会生成一串密码：
5
在你的 Github 主页，选择 setting 。
1
选择左下角的的 Developer settings 。
2
然后选择 Personal access tokens 。
3
填写相关信息，选择 无限期 ， 勾选 repo 和 workflow 。点击创建。
4
然后生成完成，之后它会生成一串密码：
5

注意

请记住这一串密码，你将不再能看到它。

登记到你的博客仓库​

进入你托管博客源码的仓库，选择 setting-secret , 登记上面得到的 token 。 6
7
为这个 Secret 取一个名字： ACCESS_TOKEN ，然后将上面得到的密码填到下面：
8

这个操作的目的是授予权限对仓库进行操作。

添加自动部署脚本​

在项目根目录下添加一个文件夹，并配置相应的文件：.github\workflows\deploy.yml 。 deploy.yml 文件内容如下： 

name: Deploy Github pages
on:
  push:
    branches:
      - main    # 监听 main 分支的 push 操作，一旦有了这个操作，就触发 ACTION 部署。
jobs:   # 触发事件后进行的操作
  build-and-deploy:
    runs-on: ubuntu-latest  # 部署服务器环境：ubuntu
    steps:  # 步骤
    - name: Checkout    # 检查分支
      uses: actions/checkout@main
      with:
        persist-credentials: false
    - name: Install and Build   # 安装和部署
      run: |
        npm install # 安装npm包
        npm run-script build    # 执行 build 操作
    - name: Deploy
      uses: JamesIves/github-pages-deploy-action@releases/v3
      with:
        ACCESS_TOKEN: ${{ secrets.ACCESS_TOKEN }}
        BRANCH: gh-pages
        FOLDER: build
        BUILD_SCRIPT: npm install && npm run build

推送代码​

将你的代码推送到你的仓库。之后你就不用管了，以后只需要执行 Push 操作就可以。 然后在 Github Actions 查看进度。
5
如果为绿色，就可以啦，然后访问 GithubPages 给你的链接。

Vercel 部署​

Vercel 就更简单了。你不用写脚本，只需要几个按钮点点就可以。
打开Vercel 登录，选择使用 Github 登录。
1
然后选择新建项目：
2
选择刚刚新建的博客仓库：
3
你可以忽略 Create a Team (Optional) ，看下面的：
4
显然，它已经帮我们识别了我们的项目，要干什么它已经帮我们设置好了。
那就不用管了，点击 Deploy。
5
等待部署完成。
6
很有仪式感的界面。
点击 Go to Dashboard，进入管理界面。然后点击展示域名设置。
7
然后创建一个形如 xxxx.vercel.app 的域名。
8
OK！选择ADD，之后你就可以在这个域名看到你的博客啦！ 9
11