本期视频教程：

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

项目介绍

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

项目地址： https://github.com/zyronon/douyin

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。我们刷新一下页面，这里工作流就开始了。

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

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

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

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

替换数据源

我不想看这些小姐姐，我想换成爬爬虾自己的视频。我们看一下如何操作。

这里我简单分析了一下这套源代码，由于他没有后台，他使用了静态数据模拟了后台的数据。他的数据都放到了src/assets/data的这个目录下面就是这个post6.json。这里面大约定义了每个视频的数据，这个应该是视频的原始播放地址。

总之来说数据非常的繁琐，字节跳动不愧是大厂，这个接口都这么复杂的。

好我们看一下把这个数据换成爬爬下自己的。我先找到一个我自己的视频，点击F12，我们只需要从后台请求里找一份跟刚才差不多的数据就行了。这里点击我头像。

filter里面搜索post就是这个请求，

我们看一下这个请求的aweme_list就是往期视频的列表，基本上跟这个post6.json这个文件差不多。类似的我们就用这套数据就行了。好我先从浏览器里把这个数据复制出来，这里切换到响应选项卡，整个复制出来，进来以后我们调一下数据，变成跟post6.json文件一样的。