在 gitee 码云上搭建一个网站

序
个人用户平时会自己练习一些项目,但是大多数时候这些项目都是在本地查看。如果想让他人能够看到自己制作的网站项目应该怎么办呢?
☞ 发布到服务器上
一般来说,域名和服务器都需要钱去购买,比如腾讯云和阿里云服务器,如果想使用阿里云去搭建一个个人网站,可以去参考这篇文章:域名和服务器的购买和配置
当然,这里也有一种免费的选择,可以将网站项目配置到 GitHub 或者 gitee 上面进行查看,本文主要说的就是如何在 gitee 码云上搭建一个网站(゜▽^*))
第一步
在码云上创建一个个人仓库,仓库的名字要和用户名相同

此时仓库已经创建完毕

第二步
将想要展示的网站页面提交到该仓库中,需要一个 index.html 页面
我制作了一个个人组件的 API 网站,将项目进行 npm run build 打包后的 dist 提交至该仓库中


注意
打包后 index.html 文件中 static 文件夹使用的路径为绝对路径,所以需要修改为相对路径可以参考:npm run build打包路径问题


仓库中以接受到本次提交,我使用的提交工具是 Tortoisegit,具体的使用方式可以参考这篇博文:Tortoisegit工具的安装和使用

第三步
进入 gitee pages 页面中进行设置

Gitee Pages 页面,点击启动即可

启动成功

终点
现在,网站已经成功发布到 gitee 码云上面了,可以通过网站网址进行访问了 http://wzckongchengji.gitee.io/kongchengji
网站效果:


版权声明: 本文为 InfoQ 作者【空城机】的原创文章。
原文链接:【http://xie.infoq.cn/article/797632860229ee6cb33c3a836】。
本文遵守【CC-BY 4.0】协议,转载请保留原文出处及本版权声明。
评论