只用Github免费功能，上线仿抖音开源网站，Vue.js是什么？使用Github Action+Pages免费发布网站-CSDN博客

本文链接：https://blog.csdn.net/u014752461/article/details/140425667

这是我自己部署的一个仿抖音的网站。我把它放到了自己的域名下面，轮番播放自己的视频。

本期视频是个手把手教程。我们全程使用Github的免费服务，简单几步，就可以拥有一个属于自己的炫酷网站。因为它是开源的，我们也可以随意定制里面的内容。

视频教程：

只用Github免费功能，上线仿抖音开源网站，Vue.js是什么？使用Github Action+Pages免费发布网站

项目介绍

本次使用的项目是近期Github上爆火的一个项目，名字就叫抖音，已经有8,000多的star。作者使用了最新的Vue技术栈，模仿了抖音移动端的短视频效果，有媲美原生APP的丝滑体验。

项目地址： GitHub - zyronon/douyin: Vue3 + Pinia 仿抖音，Vue 在移动端的最佳实践 . Imitate TikTok ，Vue Best practices on Mobile

Vue是一个很流行的js框架，用于构建前端UI。Vue是一种渐进式框架，意思是可以从最简单的核心开始，根据需求逐步添加模块功能来构建复杂的Web应用。Vue的特点有响应式系统，可以把数据绑定到html的某个元素上。当数据发生变化的时候，页面也会自动渲染。另外一个特点是html的模板语法，比如使用v if控制控件是否渲染，使用v on CLICK绑定按钮事件等等。

Vite5是一种新型的前端构建工具，Pinia是Vue的专属状态管理库。

像这么一个前端项目，有许多方式可以发布到互联网上。最免费应用的方式应该是Github Pages。Github Pages是一个免费的静态网站托管服务，只需要将html文件上传到Github，你的网站就上线了。

爬爬虾之前有个完整视频介绍这块内容。Vue工程的原代码都是.vue文件。如果想发布成网站，需要打包编译成浏览器可以识别的html、JS等文件。我们可以将原代码下载到自己电脑上，进行build。当然我们也可以使用Github action，Github action是Github官方提供的CI/CD，通过action可以申请一个虚拟环境。

实战操作

爬爬虾同样有个完整视频介绍Github action。我们先注册并且登录Github，fork的意思是将项目保存到自己名下一份。

这里命名我建议直接写自己的英文名，后面接github.io。以我为例就是自己的英文名tech-shrimp.github.io。使用这个格式进行命名，Github会给我们分配一个免费的域名。

填好以后我们点击create fork，下一步点击settings，找到左侧的Pages，把来源改成Github action。

然后我们在顶部找到actions，点击这个绿色按钮启动action功能。

启动好以后，左边有一些列出的工作流，我们使用第二个deploy on Github Pages。右侧有一个按钮run workflow，这里点击run workflow。我们刷新一下页面，这里工作流就开始了。

我们进去简单看一下这个工作流的代码。

# 将静态内容部署到 GitHub Pages 的简易工作流程
name: Deploy Github Pages

on:
  # 仅在推送到默认分支时运行。
  push:
    branches: [ 'master' ]

  # 这个选项可以使你手动在 Action tab 页面触发工作流
  workflow_dispatch:

# 设置 GITHUB_TOKEN 的权限，以允许部署到 GitHub Pages。
permissions:
  contents: write
  pages: write
  id-token: write

jobs:
  # 单次部署的工作描述
  deploy:
    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v3

      - name: Install pnpm
        uses: pnpm/action-setup@v2
        with:
          version: 8

      - name: Set up Node
        uses: actions/setup-node@v3
        with:
          node-version: 18
          cache: 'pnpm'

      - name: Install dependencies
        run: pnpm install

      - name: Build
        run: pnpm run build-gp-pages

      - name: Setup Pages
        uses: actions/configure-pages@v3

      - name: Upload artifact
        uses: actions/upload-pages-artifact@v1
        with:
          # Upload dist repository
          path: './dist'

      - name: Deploy to GitHub Pages
        id: deployment
        uses: actions/deploy-pages@v1

这里的on关键字指的是触发时间，它有两种触发方式。第一个是master分支有了修改就会触发，第二个是可以手动触发。这里面开启了Github Pages的权限，然后下面定义了一个job。这里申请了一个Ubuntu的虚拟机，第一步先是检出代码，第二步安装PNPM，下一步设置Node js，这里的版本是18P，pnpm install安装项目依赖，这里run build就是编译打包。这里对Github Pages进行了设置，然后把打包编译后的结果上传的上传的目录就是这个点dist目录。最后再发布到Github Pages上。

想把一个前端项目部署到Github Pages上，基本上遵循这一套模板就可以了。

我们再回到actions，等到这里打上一个对勾呢，部署就完成了。回到Pages，这里可以看到Github为我自动分配了一个域名，我们点进去看一下，网站直接就上线了哈，非常的简单。