已有源码,如何在github上使用github.io或自己的网站预览项目

前言

有时候demo或者项目,想让别人看,但是为此买个服务器也没有必要,这里就讲一下如何在github上使用github.io预览自己的项目?
分为html文件上传方法和vue项目的浏览方法

html文件上传方法——新建版本库

已有源码,如何在github上使用github.io或自己的网站预览项目

上传本地代码到github库中的master分支

已有源码,如何在github上使用github.io或自己的网站预览项目

在版本库中设置网址

已有源码,如何在github上使用github.io或自己的网站预览项目

配置github pages

已有源码,如何在github上使用github.io或自己的网站预览项目
已有源码,如何在github上使用github.io或自己的网站预览项目

这样就可以访问你的静态项目了

http://www.jcat.club/htmlio/

vue项目的浏览方法

其他步骤同上:

区别

已有源码,如何在github上使用github.io或自己的网站预览项目
已有源码,如何在github上使用github.io或自己的网站预览项目
写好项目后 npm run build打包项目,把dist中的文件单独部署在github库中即可;
已有源码,如何在github上使用github.io或自己的网站预览项目

这样就可以访问你的vue项目了

http://www.jcat.club/testvueio/

结语

如何配置自己网址,可以参考我之前的博客中
使用github+hexo搭建自己的博客网站–入门篇