如何在github上使用github.io或自己的域名下预览项目

目录

  • 前言
  • 正文
    • html文件上传方法
      • 1.新建版本库
      • 2.上传本地代码到github库中的master分支
      • 3.在版本库中设置网址
      • 4.配置github pages
      • 5.这样就可以访问你的静态项目了
    • vue项目的浏览方法
      • 区别
      • 这样就可以访问你的vue项目了
  • 结语

前言

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

正文

html文件上传方法

1.新建版本库

如何在github上使用github.io或自己的域名下预览项目_第1张图片

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

如何在github上使用github.io或自己的域名下预览项目_第2张图片

3.在版本库中设置网址

如何在github上使用github.io或自己的域名下预览项目_第3张图片

4.配置github pages

如何在github上使用github.io或自己的域名下预览项目_第4张图片
如何在github上使用github.io或自己的域名下预览项目_第5张图片

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

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

vue项目的浏览方法

其他步骤同上:

区别

如何在github上使用github.io或自己的域名下预览项目_第6张图片
如何在github上使用github.io或自己的域名下预览项目_第7张图片
写好项目后 npm run build打包项目,把dist中的文件单独部署在github库中即可;
如何在github上使用github.io或自己的域名下预览项目_第8张图片

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

http://www.jcat.club/vue_editor/dist/index.html

结语

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

如果本文对你有帮助的话,请不要忘记给我点赞打call哦~o( ̄▽ ̄)do
有问题留言 over~

你可能感兴趣的:(开发日常,github,vue,前端)