为更好的普及计算机知识,本站现为大家提供一个交流环境,欢迎大家加入计算机联盟:864265068(QQ群)

如何用GitHub搭建网站?

GitHub|建站|免费空间12-25 01:02阅读:482作者:evilrabbit520
很早就想写这篇博客了,一直没找到合适的平台,拖到现在,我写了自己的博客平台,从今天起,我将会驻扎在这里为大家献上科技之魂。

github pages只支持静态博客(html,css,js),不支持服务端(php,physon)。

一、准备开始

1、在电脑上安装git工具

2、在github上注册账号(如图1),因为我的账号已经注册过了,所以,会有错误提醒,如果你的账号是没被使用的,则不会有此提升。

图1 加入GitHub

3、创建一个新仓库,名称必须为:username.github.io,username是你的github用户名。

图2 创建项目存储库

4、把该仓库克隆到本地,新建index.html,js,css,img。本地浏览后,git提交代码到仓库。

图3 提交或在线编辑web page

即可访问https://Evilrabbit520.github.io/(需要注意的是,此链接可能会无效,因为我不能保证我新项目不会占用此仓库)。


图4 在浏览器浏览


二、分支管理

如果自己只是在电脑上简单写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"。

图5 master分支内容及结构

2、develop分支(重点保护对象
该分支代码最全,包含webpack配置文件,package.json文件,postcss配置文件,babel配置文件,源代码src文件夹,dist产出目录,CNAME文件,READEME.md文档。


图6 develop分支内容及结构


3、gh-pages分支

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


图7 gh-pages分支内容及结构



文章声明

文章未经允许不得转载,转载请标明文章来源、作者名称。

分享:

扫一扫在手机阅读、分享本文

评论

精彩评论
暂无留言!