在上一篇文章部署明星关系图谱那些事儿 (GitHub Pages) 的最后, 古柳讲到了 GitHub Pages 不仅可以用来搭个人博客, 而且能单独部署静态网页(html/CSS/JS, 而不涉及后端), 鉴于自身在部署明星关系图谱时, 查阅的几篇中文博客内容(可能没搜对关键词的缘故) 都不太能解答我关于实操过程的困惑, 最后还得感谢这篇简洁明了的英文文章: Use GitHub Static Pages to Host Your Front End Projects, 助我成功部署, 所以古柳也简单讲下实践步骤, 希望能帮到有需要的人, 对 GitHub 和 Git 熟悉的朋友直接拉到 Git 命令处即可, 或者看原文也行.
古柳一开始的困惑是, 我已经用 GitHub Pages 搭建过个人博客, 其对应的 GitHub 仓库是: DesertsX/desertsx.GitHub.io, 里面已经有 master 主分支;
而网上说部署网页项目时最好将代码文件提交到 gh-pages 分支, 于是搞不清楚到底是在 desertsx.GitHub.io 个人博客项目里新建 gh-pages 分支(我还真这么干过, 逃), 还是另外开个 GitHub 仓库, 然后在里面的 gh-pages 分支里提交, 对后者的困惑是这么做就同时存在两个蛮相关的项目仓库, 怕出问题(后面发现其实也没有).
等看了 Use GitHub Static Pages to Host Your Front End Projects 一文, 发现代码清晰明了, 于是就照着做了, 采取的就是第二种方式.
下面就是实操步骤, 默认大家对 GitHub 与 Git 有所了解, 首先 GitHub 的账号是必须的, 注册登录即可; 接着创建一个新项目, 点右上角 + 号处的 New repository 或者直接打开 https://github.com/new ; 在 Repository name 处填写仓库名称, 因为和后续网页展示的 URL 挂钩, 建议取个可读性好点的名称, 比如本次明星关系图谱的项目名叫 yulequan-relations-graph, 对应展示的网址就是 https://desertsx.github.io/yulequan-relations-graph/; 最后点绿色按钮 Create repository, 一个空的仓库就创建成功(不带 readme.md 和. gitignore), 后续只需将本地仓库的代码推送到此处即可.
接着切换到大家本地保存有前端项目代码的文件夹下, 或是你自己写的, 或是从 GitHub 某处上 Git clone 下来的, 又或者就是用的古柳的明星关系图谱来练手(其实不太推荐, 因为项目里涉及小 1.3k 张图片约 140Mb, 下载和上传都可能耗些时间, 考虑到这点, 我可能会将项目打包压缩放到百度网盘里, 虽然也不见得能快多少), 然后进入 Git 命令行的模式, Windows 用户安装 Git 后在文件夹里右键 Git Bash Here 即可.
本文不对 Git 做过多介绍, 默认大家已经完成安装配置, 没有的可以看看: Git 安装配置和 Git 远程仓库(GitHub); 小白可以看这篇指南快速了解下: Git- 简明指南 - 助你入门 Git 的简明指南, 木有高深内容; 想系统学习的可以看: Git 教程 - 廖雪峰的官方网站; 想快速查找命令的可以看: 常用 Git 命令清单.
接下来先看看本项目的 webapp / 文件夹的目录结构, 必须放在根目录下 index.HTML, 打开: https://desertsx.github.io/yulequan-relations-graph / 渲染出来的页面就是 index.HTML;static 文件夹下分别是包含所有明星图片的 images/star / 文件夹, 包含 CSS 和 JS 外部文件的 lib / 文件夹, 以及符合本项目格式要求的 ylq_star_relation_graph_v2.JSON 数据. 由于本次用到开源项目 grapheco/InteractiveGraph, 所以只需要关注想展示什么样的数据, 如何爬取数据, 并将一般的 CSV 数据转换成 JSON 数据即可.
webapp
├─ index.HTML
├─ show.PNG
├─ static
│ ├─ images
│ │ └─ star
│ ├─ lib
│ │ ├─ font-awesome-4.7.0
│ │ ├─ interactive-graph-0.1.0
│ │ └─ jQuery-3.2.1
│ └─ ylq_star_relation_graph_v2.JSON
最后就是本文的重点, 如果你对 GitHub 和 Git 很熟悉, 上面琐碎的讲解完全可以忽略, 直接看这部分就行. 注意下述命令均在项目所在的 webapp 文件夹下运行. 快速查找命令可看: 常用 Git 命令清单.
- # 将该文件夹变成用 Git 管理的本地仓库
- Git init
- # 查看所有文件, 多出 .Git 文件
- ls -al
- # 新建后对项目进行介绍
- touch README.md
- # 新建后可以写入后续不想提交到 GitHub 上的文件
- touch .gitignore
- # 列出所有本地分支和远程分支, 仓库默认在 master 分支
- Git branch -a
- # 新建并切换到 gh-pages 分支
- Git checkout -b gh-pages
- # 显示有变更的文件
- Git status
- # 删除 master 分支
- Git branch -d master
- # 添加当前目录的所有文件到暂存区
- Git add .
- # 提交暂存区到仓库区, 并添加代码提交信息
- Git commit -m 'first commit'
- # 添加远程仓库
- Git remote add origin Git@GitHub.com:DesertsX/yulequan-relations-graph.Git
- # 把本地的 gh-pages 分支推送到 origin 服务器上
- Git push origin gh-pages
刷新 GitHub 仓库: DesertsX/desertsx.GitHub.io, 本地仓库的文件提交成功后, GitHub 仓库里就不是空的了, 然后查看部署后的网页效果: https://desertsx.github.io/yulequan-relations-graph/, 没问题后就大功告成了.
如果后续本地仓库里修改了什么文件, 再 Git add commit push 三连即可.
- Git status
- Git add .
- Git commit -m '添加展示图片和 README 说明'
- Git push origin gh-pages
最后本地仓库的目录结构大致如此.
webapp
├─ .Git
├─ .gitignore
├─ README.md
├─ index.HTML
├─ show.PNG
├─ static
│ ├─ images
│ │ └─ star
│ ├─ lib
│ │ ├─ font-awesome-4.7.0
│ │ ├─ interactive-graph-0.1.0
│ │ └─ jQuery-3.2.1
│ └─ ylq_star_relation_graph_v2.JSON
以上就是全部内容, 希望本文对想部署静态网页项目的人有用.
来源: http://www.jianshu.com/p/7a62537cd86b