Github-README 中展示demo

 
 

2017年更新,现在github再master分支直接就可以操作,所以我改了这篇文章

  • 问题所在?
  • 解决办法?
  • 博主建议?

一:问题的所在

相信很多小胖友们在把自己的网页上传到github仓库中,都会有一个疑问?是什么呢? 那就是上传完网页后,自己的仓库中是这个样子的

点进去相应的html文件是出来的是代码
可是自己想在网上看到自己仓库中的demo(也就是网页的效果) 下面博猪为您解答 ( ~)

二:解决问题的方法

1: 使用 Githubpages

比如我要上传

按照如下四个步骤上传到名为:flexSupplement的仓库中

     git init (初始化本地仓库)
     git add .  (将本地所有文件加到仓库里)
     git commit -m "message" (设置提交信息)
     git remote add origin   git@github.com:sunningcarryhaha/flexSupplement.git(本地仓库链接远程仓库)
     git push -u origin master (push文件到仓库中)

重头戏来了哟!

我们现在点击这个html文件,出现的效果全是代码

,没有咱们想要的demo效果

此时呢,应该植入咱们github爸爸的一个好东西,那就是-githubPages

第一步:找到Settings,点击
Paste_Image.png
第二步:找到githubPages点击none,切换到master branch,save保存
Paste_Image.png
save保存
Paste_Image.png
第三步:保存后出现了连接,点击
Paste_Image.png

小胖友们看到这里一定会有疑问,预览到的是githubpages的效果,并不是你自己网页的效果,没关系,我下面为你们解答

第四步:修改地址

我的GithubPages地址是这个:http://carryguan.me/flex-add
我要预览flex-add中的fb1.html
我最后预览的地址应该是这个:http://carryguan.me/flex-add/fb1.html
第九步:添加read.me
把类似下面代码到read.me中

 flex-add
这是一个关于flexbox基础的骰子布局
 [demo](http://carryguan.me/flex-add/fb1.html)   
2: 增加路径前缀(不建议用,会自动更改css的样式)

在地址前加http://htmlpreview.github.io/?前缀(不建议用这个,会更改css样式)
例如,你想预览这个:
https://github.com/aisinvon/aisinvon.github.io/blob/master/index.html
你在这个地址前加http://htmlpreview.github.io/?
最后预览demo地址是:
http://htmlpreview.github.io/?https://github.com/aisinvon/aisinvon.github.io/blob/master/index.html

作者:sunningcarry
链接:https://www.jianshu.com/p/75e30889e70a
來源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
GitHub创建仓库的步骤如下: 1. 在GitHub网站上登录您的账号。 2. 点击页面右上角的加号图标,选择"New repository"(新建仓库)。 3. 在"Repository name"(仓库名称)输入一个简短且容易记住的名称,比如"hello-world"。\[1\] 4. 可选地,在"Description"(描述)添加对仓库的说明,例如"我的第一个GitHub仓库"。 5. 选择仓库的可见性,可以是公开的(Public)或者私有的(Private)。 6. 勾选"Initialize this repository with a README"(使用README初始化仓库)选项。 7. 点击"Create repository"(创建仓库)按钮。 8. 您的仓库已经创建成功,现在您可以进行第一次提交了。\[3\] 如果您想使用命令行来克隆仓库,可以按照以下步骤: 1. 在仓库页面,点击绿色的"Code"按钮。 2. 在弹出的菜单,选择"HTTPS"或者"SSH",根据您的需要选择克隆方式。\[2\] 3. 复制克隆链接,例如"https://github.com/Ghostwritten/gitbook-demo.git"。 4. 打开命令行终端,进入您想要克隆仓库的目录。 5. 运行命令"git clone 克隆链接",例如"git clone https://github.com/Ghostwritten/gitbook-demo.git"。 6. 等待克隆完成,您的仓库就会被复制到本地。 总结起来,创建GitHub仓库的步骤包括命名仓库、添加描述、选择可见性、初始化仓库、创建仓库,并且可以使用命令行来克隆仓库。\[1\]\[2\]\[3\] #### 引用[.reference_title] - *1* *2* [github 创建仓库](https://blog.csdn.net/xixihahalelehehe/article/details/125108266)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^koosearch_v1,239^v3^insert_chatgpt"}} ] [.reference_item] - *3* [GitHub创建仓库](https://blog.csdn.net/weixin_44718395/article/details/126561316)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^koosearch_v1,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值