github pages & 在线预览

Posted 2020-09-27 艳阳天

      

    之前参加活动，提交demo时，自己只会提交github上的源码地址，看别人提交的不仅有源码地址还有在线预览地址，自己折腾了好久也没折腾出来，中间还遇见了js Bin、js Fiddle、极客标签。。。等，前几天遇见了github pages，，终于知道别人的github.io是哪来的了。。。做一下小整理。。。

 

1   github上新建一个仓库，如test

2   个人信息输入验证及配置密钥

     $ git config --global user.name "sunshineqtgit"

     $ git config --global user.email "[e-mail]"

     $ ssh-keygen -t rsa -C "[e-mail]"

     将生成的密钥（C:\\Users\\DELL\\.ssh下的id_rsa.pub）配置到github上

3   打开settings，有一个Github Pages的设置，点击source中的默认显示的None，使其变成master分支，即部署github pages的分支，然后点save

4   页面刷新后，可在github pages处看到自己的github pages网址，如https://sunshineqt.github.io/test/

5   点击该链接，显示一个test页面

6   在电脑上选择一个位置，新建一个文件夹，如E:\\test\\706，在该文件夹下右击git bash here

7   在上述文件夹下建立test文件夹：mkdir test

8   然后进入该文件夹，cd test/

9   克隆远程仓库：git clone https://github.com/sunshineqt/test.git

10  将自己作品的文件复制粘贴到刚刚建的test文件中

11  进入该文件夹 cd test/

12  显示,列出当前目录所有还没有被git管理的文件和被git管理且被修改但还未提交的文件，也就是所有改动文件，红色字体标出 git status

13  添加当前目录下的所有文件和子目录     git add .

14  git status   全变绿了则准备好了被提交

15  将文件上传至远程master分支：git commit –m “modify”

16  git pull   第一次上传到该仓库需执行此操作，抓取远程仓库所有分支更新并合并到本地

17  git push  push所有分支

18  打开浏览器输入github pages分配的网址加上上传的主html文件名，回车即可看到效果图，如https://sunshineqt.github.io/test/doubanall/index.html

 

 

git命令：

git clone  //本地克隆远程仓库

cd         //定位

git status   //查看本地自己修改了多少文件

git add .    //添加远程不存在的git文件

git commit –m “description”  //提交修改

git pull      //抓取远程仓库所有分支更新并合并到本地

git push     //更新到远程服务器

git rm     //移除文件

 

 

 

 

 

 

 

 

 

2017-7-31 小记

 回来看博文，点开链接，有种惨不忍睹的感觉，为什么明明之前做过的小demo，演示也好好的，时隔多日之后就惨不忍睹了呢？？？我很疑惑。。

 

2017-8-10

还是之前整理的部分在线预览链接，现在居然又可以了！不知道以后还会不会出现问题。。。

https://sunshineqt.github.io/test/doubanall/index.html （仿豆瓣APP，推荐谷歌浏览器检查模式下查看， http://www.cnblogs.com/haimengqingyuan/p/6760803.html 这里是自己录的效果图）

https://sunshineqt.github.io/schoolmate/schoolmate/fangxyb/index.html （仿校友帮网站，推荐谷歌浏览器下查看，这里是自己录的效果图http://www.cnblogs.com/haimengqingyuan/p/6945497.html  ）

https://sunshineqt.github.io/test/five-in-line/index.html  （仿五子棋，推荐谷歌浏览器下查看，http://www.cnblogs.com/haimengqingyuan/p/5423877.html这里是自己录的效果图）

 

https://sunshineqt.github.io/reader/reader/reading/demo.html   （阅读器，因文中引入文件位置，文本内容显示不出来，这里需要本地软件中打开预览，点击中间部分可显示样式设置效果，http://www.cnblogs.com/haimengqingyuan/p/7264654.html 这里是自己录的效果图）

http://sunshineqt.github.io/programtest/programtest/webapp/index.html （组件式开发webAPP，推荐谷歌浏览器检查模式下查看，这里是自己录的效果图https://i.cnblogs.com/EditPosts.aspx?postid=6508951 ）

 

学习参考&感谢：

http://www.cnblogs.com/lijiayi/p/githubpages.html