一文教你使用GitHub Pages部署静态网页

在上一篇文章部署明星关系图谱那些事儿(GitHub Pages) 的最后,古柳讲到了GitHub Pages不仅可以用来搭个人博客,而且能单独部署静态网页(HTML/CSS/JS,而不涉及后端),鉴于自身在部署明星关系图谱时,查阅的几篇中文博客内容(可能没搜对关键词的缘故)都不太能解答我关于实操过程的困惑,最后还得感谢这篇简洁明了的英文文章:Use Github Static Pages to Host Your Front End Projects,助我成功部署,所以古柳也简单讲下实践步骤,希望能帮到有需要的人,对GitHubGit熟悉的朋友直接拉到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一文,发现代码清晰明了,于是就照着做了,采取的就是第二种方式。

下面就是实操步骤,默认大家对GitHubGit有所了解,首先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命令行的模式,window用户安装Git后在文件夹里右键Git Bash Here即可。

本文不对Git做过多介绍,默认大家已经完成安装配置,没有的可以看看:Git 安装配置Git 远程仓库(Github);小白可以看这篇指南快速了解下:Git- 简明指南 - 助你入门 Git的简明指南,木有高深内容;想系统学习的可以看:Git 教程- 廖雪峰的官方网站;想快速查找命令的可以看:常用 Git 命令清单

接下来先看看本项目的webapp/文件夹的目录结构,必须放在根目录下index.html,打开:https://desertsx.github.io/yulequan-relations-graph/渲染出来的页面就是index.htmlstatic文件夹下分别是包含所有明星图片的images/star/文件夹,包含CSSJS外部文件的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

最后就是本文的重点,如果你对GitHubGit很熟悉,上面琐碎的讲解完全可以忽略,直接看这部分就行。注意下述命令均在项目所在的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

以上就是全部内容,希望本文对想部署静态网页项目的人有用。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Golang开发

Git(五)——远程仓库

下载远程仓库到本地 git clone <版本库的网址>例如远程仓库地址是https://git.coding.net/baxiang/gitTest.git,...

11920
来自专栏Golang开发

iOS模块化(2)——CocoaPods的运用

iOS组件化现阶段成为开发者讨论的热点问题,个人觉得这是iOS技术日渐成熟的表现,就跟一个人一样,最初是想着如何吃饱,现在开始琢磨如何变着花样吃好。不太想蹭组件...

14920
来自专栏Golang开发

golang-101-hacks(5)——go get

“go get”命令是下载和安装包以及相关依赖项的标准方法,让我们通过一个示例来说明go get使用细节: (1)在GitHub创建项目playstack ...

11620
来自专栏Golang开发

Go——依赖管理

在Go1.5 release的版本的发布vendor目录被添加到除了GOPATH和GOROOT之外的依赖目录查找的解决方法。 查找依赖包路径的解决 当前包下...

45120
来自专栏迹_Jason的AppZone

记一次 Git 管理经历

随着负责的项目越来越大,出现了专人维护一个模块的可能,业务与模块划分变得清晰可见,但出现了如下几个问题:

13030
来自专栏小网管运维之路

前端组件网站列表

2019年2月20日 ⋅ 浏览量: 93    ...

38520
来自专栏Golang开发

golang-101-hacks(3)——包

注:本文是对golang-101-hacks中文翻译,原文地址 在“Go”中,包分为两种类型: (1) main包:用于生成可执行的二进制文件,main函数...

8420
来自专栏Jerry的SAP技术分享

用nodejs读取github上某仓库的某条issue明细

版权声明:本文为博主汪子熙原创文章,未经博主允许不得转载。 https://jerry.bl...

11010
来自专栏Jerry的SAP技术分享

github上开箱即用的app之TODO app

版权声明:本文为博主汪子熙原创文章,未经博主允许不得转载。 https://jerry.bl...

12920
来自专栏Jerry的SAP技术分享

如何把自己github博客配置到一个腾讯云购买的自定义域名上

版权声明:本文为博主汪子熙原创文章,未经博主允许不得转载。 https://jerry.bl...

17110

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励