如何在github上搭建网站?

时间:2022-08-13 10:04:58

3年前就想写这篇文章了,一直没写,拖到现在,迟到总比不到好,哈哈。
github pages只支持静态博客(html,css,js),不支持服务端(php,physon)。

一、尝试一下

1、在电脑上安装git工具

2、在github上注册账号
如何在github上搭建网站?
如何在github上搭建网站?

3、创建一个新仓库,名称必须为:username.github.io,username是你的github用户名。
如何在github上搭建网站?

4、把该仓库克隆到本地,新建index.html,js,css,img。本地浏览后,git提交代码到仓库。
如何在github上搭建网站?
如何在github上搭建网站?
即可访问https://zhugeshuiying.github.io/

二、自定义域名

1、在github将仓库username.github.io绑定到域名studio.zgsy.info

在该仓库的Settings界面,custom domain处,填入域名,创建CNAME文件。
如何在github上搭建网站?

如何在github上搭建网站?

如何在github上搭建网站?

2、在域名端将DNS指向username.github.io

A、登陆阿里云

B、获取域名
有两种方式获取域名,即注册域名购买域名
注册域名先要查别人有没有在用,然后加入清单,立即支付,注册域名可以设置自己想要的名字。
如何在github上搭建网站?
购买域名,就是从某个人那里买过来已经存在的域名,属于二手域名。

C、添加解析
如何在github上搭建网站?
如何在github上搭建网站?

三、分支管理

如果自己在电脑上简单写html,css,js,一般不牵扯分支管理,写完代码,直接提交到github即可浏览。如果你是用webpack构建工具+vue搭建网站,这里推荐你用三个分支来管理你的代码。

1、master分支
该分支代码用于部署线上环境,它实际是develop分支中dist文件夹(产出目录)中的文件被提取出来放到根目录了。因为github pages优先寻找根目录的index.html文件,所以要把dist文件夹的文件提取出来放到根目录后,记得更改index.html中的资源引用路径,比如把webpack打包后的index.html文件中对css的引用从"/static/css/style.css"改为"static/css/style.css"。
如何在github上搭建网站?

2、develop分支(重点保护对象)
该分支代码最全,包含webpack配置文件,package.json文件,postcss配置文件,babel配置文件,源代码src文件夹,dist产出目录,CNAME文件,READEME.md文档。
如何在github上搭建网站?

3、gh-pages分支
该分支就是纯代码,没有域名映射文件,也没有README.md。本地切换到该分支,直接打开index.html即可浏览。如果涉及ajax请求的页面,就需要一个http服务器支持了。
如何在github上搭建网站?

四、在github上预览html

https://htmlpreview.github.io/

如何在github上搭建网站?的更多相关文章

  1. 如何在github上搭建一个免费的 无限流量的静态网页博客Github pages

    前言: 看到很多相关的教程,但是在实际操作的时候还是遇见了不少问题,这里记录分享一下我的操作流程.免费空间用过很多,博客也用过一些,听说了github后就想试着玩一下这个静态库,感觉挺不错的,操作也比 ...

  2. github上搭建网站前台页面

    其实就是把html页面提交到github,为了能在线演示: 1. 首先在github网站找到你的项目 2. 点击设置 3. 找到这几个选项,选择master branch打钩,然后保存 4. 然后就会 ...

  3. 在Github上搭建自己的博客(Windows平台)

    折腾了好久,终于在Github上搭建了自己的博客.这里面总结一下过程希望对大家能有所帮助. Github建博优缺点 和 csdn,新浪,网易相比,在Github上可以自己实现功能 和阿里云,VPS相比 ...

  4. 如何在Windows上搭建Android开发环境

    Android开发越来越火,许多小伙伴们纷纷学习Android开发,学习Android开发首要任务是搭建Android开发环境,由于大家 主要实在Windows 上开发Android,下面就详细给大家 ...

  5. 基于Hexo且在GitHub上搭建博客

    title: 基于Hexo且在GitHub上搭建博客 Welcome to Fofade's Blog! 搭建初衷 大大小小,大学两年,玩了很多,也学了很多. 回首望之,曾经不知道的,现在是知道了,但 ...

  6. 在github上搭建个人博客并在线更新

    换博客比更博还勤的我终于决定写一篇博客搭建教程了.. FAQ Q:\(hexo\)需要本地编译.\(jekyll\)虽然可以直接上传\(md\)..但是如果在github上直接编译也太难受了叭,毕竟不 ...

  7. 如何在GitHub上大显身手?

    推荐一篇良许大佬的文章,如何在github上大显身手.拥有自己的github,且有所贡献,这是一件很有意义的的事情,在面试上也是加分项哦,赶紧搞起来. 转载至http://uee.me/aHAfN 这 ...

  8. 如何在 macOS 上搭建 PHP 开发环境

    如何在 macOS 上搭建 PHP 开发环境 Linux, Nginx, MySQL, PHP $ php --version $ php -v # PHP 7.3.11 (cli) (built: ...

  9. 关于如何在github上创建团队开发环境

    今天想写个如何在github上创建团队开发环境的博客.送给那些还不知道如何在github上创建团队开发环境的开发人员. 1.首先,当然你要有个github的账号.具体怎么注册我这里就不说了.可以上gi ...

随机推荐

  1. DIV+CSS实现左侧带三角形的提示框

    实现效果

  2. phpmyadmin导出数据库为什么是php文件

    你的迅雷在作怪,把它卸载了,或者在迅雷的高级设置中,关闭监听浏览器,就不会触发迅雷下载,就没问题了.或者360浏览器的话,把急速模式改为兼容模式

  3. [Windows]_[0基础]_[使用命令行工具dumpbin分析文件]

    dumpbin(vs拥有) 1. 出口lib函数符号文件(symbols) dumpbin /exports zlib1.lib Microsoft (R) COFF/PE Dumper Versio ...

  4. BZOJ:1443: [JSOI2009]游戏Game

    原题链接:http://www.lydsy.com/JudgeOnline/problem.php?id=1443 反正不看题解我是完全想不出系列…… 先把棋盘黑白染色,也就是同一对角线上颜色相同,使 ...

  5. JNI实战(三):JNI 数据类型映射

    在JNI实战(二):Java 调用 C 我们了解了JNI的静态注册和动态注册.也知道我们应该使用动态注册来进行JNI函数与Java方法之间的映射. 示例的映射表的数组为如下: static JNINa ...

  6. Apex计划作业框架的实现

    Apex计划作业框架的实现 在本文中,我们实现一个简单的"计划作业框架",用于实现数据的定时自动处理. Apex相关接口 Apex中提供了一组接口用来实现数据的处理.我们主要使用以 ...

  7. Expected BEGIN_ARRAY but was BEGIN_OBJECT

    Expected BEGIN_ARRAY but was BEGIN_OBJECT at line 1 column 3519 path $.data[1].inspector_user Gson 中 ...

  8. Pointer Lock

    Pointer Lock API 指针锁定(以前叫做 鼠标锁定) 提供了一种输入方法,这种方法是基于鼠标随着时间推移的运动的(也就是说,deltas),而不仅是鼠标光标的绝对位置.通过它可以访问原始的 ...

  9. Google Intern

    申请 事情应该从去年(2013)说起,好基友从百度离职跳到了Google,回学校打印本科成绩单,然后晚上在scuacm群里,结果Dr. zuo问我想去实习么,正好有学长可以内推. 于是乎写了简历,然后 ...

  10. 说说JavaScript 中的new吧

    在其他语言中,new操作符都是用来实例化创建一个对象的,JavaScript 中同样如此,但是它又有一些不同.为了说清楚这个问题我们先来看一下JavaScript 中的类.原型.原型链.继承这些概念吧 ...