最新消息:20181230 VPS服务器已从Linode换到腾讯云香港,主题仍用朋友推荐的大前端D8

【已解决】用github的io去存放个人的静态页面

Git crifan 133浏览 0评论

之前好像看到很多人都:

除了有自己的github的项目代码之外,还能有自己的在线的demo,用于演示静态网页

而且地址好像是github的io的地址。

比如:

PanJiaChen/vueAdmin-template: a vue2.0 minimal admin template

-》demo是:

http://panjiachen.github.io/vueAdmin-template

大概懂了,估计是每个github的用户的一个项目,都有自己的用于存放静态页面的地方?

去研究看看

无意间从:

Options

-》

Creating a GitHub Pages site with the Jekyll Theme Chooser – User Documentation

GitHub Pages | Websites for you and your projects, hosted directly from your GitHub repository. Just edit, push, and your changes are live.

然后看懂了:

是每个用户都有一个用于保存自己静态网页地址,是自己创建的,

完全匹配到自己的用户名。

另外试了试:

Panjiachen.GitHub.io by PanJiaChen

就是一个空的首页:

自己去试试:

对于自己

https://github.com/crifan

github的用户名是:crifan

所以去:

https://github.com/new

新建项目:

crifan.github.io

crifan/crifan.github.io

然后去把之前gitbook的build出来的页面,放到子文件夹中试试效果:

先去clone:

➜  github.io git clone https://github.com/crifan/crifan.github.io.git

Cloning into ‘crifan.github.io’…

warning: You appear to have cloned an empty repository.

然后把文件拷贝进去:

然后提交到远程仓库上:

➜  github.io ll

total 0

drwxr-xr-x  5 crifan  staff   160B 11 20 19:08 crifan.github.io

➜  github.io cd crifan.github.io

➜  crifan.github.io git:(master) ✗ ll

total 0

drwxr-xr-x  12 crifan  staff   384B 11 20 19:08 http_tech_demo_merge

➜  crifan.github.io git:(master) ✗ git status

On branch master

Initial commit

Untracked files:

  (use “git add <file>…” to include in what will be committed)

    http_tech_demo_merge/

nothing added to commit but untracked files present (use “git add” to track)

➜  crifan.github.io git:(master) ✗ git add *

➜  crifan.github.io git:(master) ✗ git status

On branch master

Initial commit

Changes to be committed:

  (use “git rm –cached <file>…” to unstage)

    new file:   http_tech_demo_merge/.gitignore

    new file:   http_tech_demo_merge/.vscode/settings.json

    new file:   http_tech_demo_merge/assets/img/2017-11-15-14-47-44.png

    new file:   http_tech_demo_merge/assets/img/2017-11-15-14-49-20.png

    new file:   http_tech_demo_merge/assets/img/2017-11-15-15-00-52.png

    new file:   http_tech_demo_merge/assets/img/2017-11-15-15-15-36.png

    new file:   http_tech_demo_merge/assets/img/2017-11-16-00-11-26.png

    new file:   http_tech_demo_merge/assets/img/2017-11-16-00-12-01.png

    new file:   http_tech_demo_merge/assets/img/A9A7B516-6745-41C6-AF57-F1DF2899B734.png

    new file:   http_tech_demo_merge/assets/img/D6649A81-5C5E-4634-92F2-D8561F8BA92B.png

    new file:   http_tech_demo_merge/ch1_http_intro.html

    new file:   http_tech_demo_merge/gitbook/fonts/fontawesome/FontAwesome.otf

    new file:   http_tech_demo_merge/gitbook/fonts/fontawesome/fontawesome-webfont.eot

    new file:   http_tech_demo_merge/gitbook/fonts/fontawesome/fontawesome-webfont.svg

    new file:   http_tech_demo_merge/gitbook/fonts/fontawesome/fontawesome-webfont.ttf

    new file:   http_tech_demo_merge/gitbook/fonts/fontawesome/fontawesome-webfont.woff

    new file:   http_tech_demo_merge/gitbook/fonts/fontawesome/fontawesome-webfont.woff2

    new file:   http_tech_demo_merge/gitbook/gitbook-plugin-fontsettings/fontsettings.js

    new file:   http_tech_demo_merge/gitbook/gitbook-plugin-fontsettings/website.css

    new file:   http_tech_demo_merge/gitbook/gitbook-plugin-highlight/ebook.css

    new file:   http_tech_demo_merge/gitbook/gitbook-plugin-highlight/website.css

    new file:   http_tech_demo_merge/gitbook/gitbook-plugin-livereload/plugin.js

    new file:   http_tech_demo_merge/gitbook/gitbook-plugin-lunr/lunr.min.js

    new file:   http_tech_demo_merge/gitbook/gitbook-plugin-lunr/search-lunr.js

    new file:   http_tech_demo_merge/gitbook/gitbook-plugin-search/lunr.min.js

    new file:   http_tech_demo_merge/gitbook/gitbook-plugin-search/search-engine.js

    new file:   http_tech_demo_merge/gitbook/gitbook-plugin-search/search.css

    new file:   http_tech_demo_merge/gitbook/gitbook-plugin-search/search.js

    new file:   http_tech_demo_merge/gitbook/gitbook-plugin-sharing/buttons.js

    new file:   http_tech_demo_merge/gitbook/gitbook.js

    new file:   http_tech_demo_merge/gitbook/images/apple-touch-icon-precomposed-152.png

    new file:   http_tech_demo_merge/gitbook/images/favicon.ico

    new file:   http_tech_demo_merge/gitbook/style.css

    new file:   http_tech_demo_merge/gitbook/theme.js

    new file:   http_tech_demo_merge/httpde-dai-ma-fang-mian-de-ku.html

    new file:   http_tech_demo_merge/httpde-dian-xing-gou-cheng.html

    new file:   http_tech_demo_merge/httpde-request-zhong-de-can-shu-bian-ma-parameter-encoding.html

    new file:   http_tech_demo_merge/index.html

    new file:   http_tech_demo_merge/search_index.json

➜  crifan.github.io git:(master) ✗ git commit -m “1. try online hosting by github.io for http_tech_demo_merge”

[master (root-commit) c614051] 1. try online hosting by github.io for http_tech_demo_merge

39 files changed, 3970 insertions(+)

create mode 100644 http_tech_demo_merge/.gitignore

create mode 100644 http_tech_demo_merge/.vscode/settings.json

create mode 100644 http_tech_demo_merge/assets/img/2017-11-15-14-47-44.png

create mode 100644 http_tech_demo_merge/assets/img/2017-11-15-14-49-20.png

create mode 100644 http_tech_demo_merge/assets/img/2017-11-15-15-00-52.png

create mode 100644 http_tech_demo_merge/assets/img/2017-11-15-15-15-36.png

create mode 100644 http_tech_demo_merge/assets/img/2017-11-16-00-11-26.png

create mode 100644 http_tech_demo_merge/assets/img/2017-11-16-00-12-01.png

create mode 100644 http_tech_demo_merge/assets/img/A9A7B516-6745-41C6-AF57-F1DF2899B734.png

create mode 100644 http_tech_demo_merge/assets/img/D6649A81-5C5E-4634-92F2-D8561F8BA92B.png

create mode 100644 http_tech_demo_merge/ch1_http_intro.html

create mode 100644 http_tech_demo_merge/gitbook/fonts/fontawesome/FontAwesome.otf

create mode 100644 http_tech_demo_merge/gitbook/fonts/fontawesome/fontawesome-webfont.eot

create mode 100644 http_tech_demo_merge/gitbook/fonts/fontawesome/fontawesome-webfont.svg

create mode 100644 http_tech_demo_merge/gitbook/fonts/fontawesome/fontawesome-webfont.ttf

create mode 100644 http_tech_demo_merge/gitbook/fonts/fontawesome/fontawesome-webfont.woff

create mode 100644 http_tech_demo_merge/gitbook/fonts/fontawesome/fontawesome-webfont.woff2

create mode 100644 http_tech_demo_merge/gitbook/gitbook-plugin-fontsettings/fontsettings.js

create mode 100644 http_tech_demo_merge/gitbook/gitbook-plugin-fontsettings/website.css

create mode 100644 http_tech_demo_merge/gitbook/gitbook-plugin-highlight/ebook.css

create mode 100644 http_tech_demo_merge/gitbook/gitbook-plugin-highlight/website.css

create mode 100644 http_tech_demo_merge/gitbook/gitbook-plugin-livereload/plugin.js

create mode 100644 http_tech_demo_merge/gitbook/gitbook-plugin-lunr/lunr.min.js

create mode 100644 http_tech_demo_merge/gitbook/gitbook-plugin-lunr/search-lunr.js

create mode 100644 http_tech_demo_merge/gitbook/gitbook-plugin-search/lunr.min.js

create mode 100644 http_tech_demo_merge/gitbook/gitbook-plugin-search/search-engine.js

create mode 100644 http_tech_demo_merge/gitbook/gitbook-plugin-search/search.css

create mode 100644 http_tech_demo_merge/gitbook/gitbook-plugin-search/search.js

create mode 100644 http_tech_demo_merge/gitbook/gitbook-plugin-sharing/buttons.js

create mode 100644 http_tech_demo_merge/gitbook/gitbook.js

create mode 100644 http_tech_demo_merge/gitbook/images/apple-touch-icon-precomposed-152.png

create mode 100644 http_tech_demo_merge/gitbook/images/favicon.ico

create mode 100644 http_tech_demo_merge/gitbook/style.css

create mode 100644 http_tech_demo_merge/gitbook/theme.js

create mode 100644 http_tech_demo_merge/httpde-dai-ma-fang-mian-de-ku.html

create mode 100644 http_tech_demo_merge/httpde-dian-xing-gou-cheng.html

create mode 100644 http_tech_demo_merge/httpde-request-zhong-de-can-shu-bian-ma-parameter-encoding.html

create mode 100644 http_tech_demo_merge/index.html

create mode 100644 http_tech_demo_merge/search_index.json

➜  crifan.github.io git:(master) git push

Counting objects: 54, done.

Delta compression using up to 4 threads.

Compressing objects: 100% (48/48), done.

Writing objects: 100% (54/54), 2.38 MiB | 257.00 KiB/s, done.

Total 54 (delta 5), reused 0 (delta 0)

remote: Resolving deltas: 100% (5/5), done.

To https://github.com/crifan/crifan.github.io.git

* [new branch]      master -> master

然后去对应地址看看效果:

https://crifan.github.io/

结果404:

估计是没有开启Github pages的功能。

然后去:

https://crifan.github.io/http_tech_demo_merge

以为:肯定更不行,也是404,结果能显示出来:

-》所以肯定是上面的

https://crifan.github.io/

地址中没有index.html导致404的。

然后点击加载下一页,虽然速度慢,但是也是可以的:

https://github.com/crifan/crifan.github.io

所以就是实现了,github的io的个人的静态页面的加载。

然后去首页中,添加了README.md后,效果是:

https://crifan.github.io

【总结】

github中,除了免费可以放代码

比如:https://github.com/crifan

github.io的地址中

比如:https://crifan.github.io

还可以免费放静态页面-》很多人都用其来放一些项目生成的静态页面,Demo演示项目的效果

对应的步骤是:

1.创建自己的github.io的代码仓库

登录github-》新建项目-〉项目名:xxx.github.io,其中xxx是你的github的用户名。

2.然后就像正常你写代码,提交代码一样即可。

然后就可以去访问:

https://crifan.github.io

查看自己的静态网页的效果了。

说明:

  • README.md:可以写一个readme,然后其中内容自动变成 首页 的html的内容

  • 可以考虑建一个个的子目录,用于存放一个个项目对应的demo页面

转载请注明:在路上 » 【已解决】用github的io去存放个人的静态页面

发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
66 queries in 0.098 seconds, using 9.47MB memory