[](https://res.cloudinary.com/practicaldev/image/fetch/s--ccPheBMM--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://cdn-images-1. medium.com/max/1024/1%2AXaVxXpwczhQchHSaHY4h-g.png)

我努力的最终结果。可在https://rodolphocastro.github.io/#/

在冠状病毒流行期间,过去几年我处于一种非常不典型的情况:整个周末都在家,不出门,不跑步,不锻炼。

我决定让它富有成效,并做所有那些在我的心理“backlog”中并一直忘记的小事情。其中之一是重新制作我最初在 2015 年制作的旧个人网站,它归结为一个带有内置引导程序和一些固定文本的 index.html。

[](https://res.cloudinary.com/practicaldev/image/fetch/s--bSIo6hyI--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://cdn-images-1。 medium.com/max/272/1%2ARQ3WFyjaKfFZ-dA0WZQwdA.png)

[](https://res.cloudinary.com/practicaldev/image/fetch/s--687xXv68--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_880/https://cdn-images-1. medium.com/max/1024/1%2A0OPfq4wqywbVdQM7SeVn0w.gif)

旧版网站源代码和视觉图(2015年开发)

为了使项目更有趣,我决定使用 Vue.JS 作为基础,以允许与我的站点进行更多的交互,此外还允许(将来)查阅 Cell CMS 等 API动态搜索内容!

但是,对于那些已经使用过 github.io 的人来说,想法是可用的站点是静态的或由某些支持的语言生成的(例如 Ruby ,使用 Jekyll ,或 *去 * )。

在本文中,我将向您展示我们如何在 GitHub Pages 的结构中发布通过 Vue CLI 生成的站点**。 如果您已经熟悉通过 Vue CLI 创建项目,请跳过到文末,哪里有如何发表文章的说明!

创建网站

为了简化教程,我假设您已经创建了 github.io 存储库。没有的话去https://pages.github.com/发子弹!

第一步是使用@vue/cli 创建我们的网站。打开终端并使用命令并按照 gif 进行操作:

1. vue create my-github-page (替换你想要的项目名称)

2. 选择任何特性(在我的例子中,我选择了 Typescript、Vuex 和 Vue-Router)

[](https://res.cloudinary.com/practicaldev/image/fetch/s--kqZzL2E---/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_880/https://cdn-images-1 .medium.com/max/1024/1%2AbkAjxdCmymTh8zL_pz08_w.gif)

初始化我们的网站

完成这些步骤后,根据您首选的包管理器,使用 npm serve 或 yarn serve 运行您的站点。你会在你的http://localhost:8080/:上得到以下结果

[](https://res.cloudinary.com/practicaldev/image/fetch/s--0qca_w9N--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://cdn-images-1。 medium.com/max/1024/1%2AGLDdOYkD4cn-jmu-mdGhLw.png)

默认的 Vue.js 脚手架

此时,您应该根据需要更改站点。唯一的限制是该站点不能是服务器渲染(例如,不使用_Nuxt_!)。

发布网站

对您对网站所做的更改满意吗?是时候发布它了!打开终端并输入 npm build 或 yarn build 以生成要发布的文件:

[](https://res.cloudinary.com/practicaldev/image/fetch/s--dCfdvlLf--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://cdn-images-1。 medium.com/max/1024/1%2A2Ml-VUFOzmFG2_tpyoLxzQ.png)

[](https://res.cloudinary.com/practicaldev/image/fetch/s--y_bYj-0X--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://cdn-images- 1.medium.com/max/307/1%2ACzZ9NIowTrPZxrYcIQqYuQ.png)

在“dist”文件夹中运行构建和结果

将生成 dist 文件夹。其中将是要发布的文件。现在的程序是将这些文件复制到我们的“服务器”。但是 在 GitHub 页面上,我们有一些不同的规则 发布文件:

1. 要显示的站点****必须是在存储库的master分支中

2. 所有内容需要必须在存储库的根目录

也就是说:我们需要以某种方式将 dist 文件夹中的文件和文件夹复制到存储库的根目录。要手动执行此操作,我们可以:

1. 访问**:** Dist 文件夹

2. 对于每个元素:将其移动上一级

3. 执行:commit 这些文件在 master

这些步骤可以通过脚本轻松完成**。因为我是 powershell 粉丝,所以我编写了一个脚本来执行构建和列出的步骤:

[](https://res.cloudinary.com/practicaldev/image/fetch/s--Cs6NVKHy--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_880/https://cdn-images-1. medium.com/max/1024/1%2At7bR4tHs9fJwkMJz2YOdbg.gif)

deploy.ps1 在行动!

现在只需将复制的文件提交到 master 和 push 即可发布您的网站!

如果您有兴趣查看使用我在此处介绍的内容的已完成站点,请访问https://rodolphocastro.github.io/#/以查看结果或访问https://github.com/rodolphocastro/rodolphocastro。 github .io看源码!

感谢您阅读本文,拥抱,直到下一次!