In the previous article deployment star relationship map that thing (GitHub Pages) Finally, the old Liu talked about GitHub Pagesnot only can be used to build personal blog, static pages and can be deployed alone ( HTML/CSS/JSwithout involving the back-end), in view of their deployment when the relationship between the star map, consulted several Chinese blog content (probably not the reason for the search keywords) are not able to answer my confusion about the practical operation of the process, and finally have to thank this concise article in English: the Use Static Github Front End to Host Your Pages and the the Projects , help me successfully deployed, so to speak under the old Liu is also simple practice steps, hope to help people in need, to GitHuband Gitfamiliar friend pulled directly Gitcommand can be, or to see the original will do .
Liu confused ancient beginning is that I have used GitHub Pagesto build personal blog too, the corresponding GitHubwarehouse: DesertsX / desertsx.github.io , which has been masterthe main branch;
The best online that will be submitted to the deployment of web project code files to gh-pagesbranch, so confused in the end is desertsx.github.ioa new project in a personal blog gh-pagesbranch (I really done so, escape), or another to open a GitHubwarehouse, then inside gh-pagesbranch in the submission, the confusion of the latter two is to do so while there is quite related items warehouse, fear of problems (later discovered that in fact did not).
Etc. Read Use Github Static Pages to Host Your Front End Projects a text, find the code clear, so he did so, it is to take the second approach.
Here is the practical operation of the steps, the default for everyone GitHuband Gitunderstand, first of all GitHubto account is required, registration login; then create a new project, the upper right corner + number at the New repository or directly open github.com/new ; in Repository namefill in name at the warehouse, and because subsequent pages show the URL linked to the name of a good point to take a readability of recommendations, such as the relationship of this star map project name yulequan-relations-graph, the corresponding display URL is desertsx.github.io/yulequan- ... Re ; the last point of the green button the create Repository , an empty warehouse is created successfully (without readme.mdand .gitignore), simply follow the local repository of code that can be pushed to here.
Then switch to the front end you save a local project code folder, or write your own, or from GitHubsomewhere in git clonedown, or is the relationship with the star map of ancient willow to practice hand (do not really recommended, because the project involved in small 1.3k pictures about 140Mb, energy consumption can be downloaded and uploaded some time, take this into account, I might project into Baidu network disk compression package, although not necessarily how much faster), then enter Gitthe command line mode, windowthe user installs Gitthe right in the folder Git Bash Herecan be.
This article does not Gitdo too much introduction, we have completed a default installation configuration, you can not look at: Git installation configuration and Git remote repository (Github) ; white can look at this guide to quickly understand: GIT-Concise Guide - to help get you started Git Rough Guide, wood profound content ; want to learn the system can be seen: Git tutorial - Liao Xuefeng's official website ; you want to quickly find the commands you can see: common Git commands list .
Then take a look at the project webapp/directory structure folder must be placed in the root directory index.html, open: https://desertsx.github.io/yulequan-relations-graph/rendered page is index.html; staticfolder contains all of the stars are the pictures of the images/star/folder containing CSSand JSexternal file lib/folder, as well as to meet the requirements of the project format ylq_star_relation_graph_v2.jsondata. Since this uses the open-source project grapheco / InteractiveGraph , so just want to focus on what data to show how data crawling and generally csvconvert the data into jsondata can be.
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复制代码Last is the focus of this article, if you GitHuband Gitvery familiar with the above trivial explanation can be ignored, direct look at this part of the line. Note that the following commands are located in the project webapprun folder. Quick Find command to see: Common Git commands list .
# 将该文件夹变成用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 [email protected]:DesertsX/yulequan-relations-graph.git
# 把本地的 gh-pages 分支推送到 origin 服务器上
git push origin gh-pages复制代码Refresh GitHubwarehouse: DesertsX / desertsx.github.io , the local repository of documents submitted successfully, GitHubthe warehouse is not empty, and then view the Web page effect after deployment: desertsx.github.io/yulequan-re... , no problem after It's done.
If the subsequent local warehouse modify what file, and then git add commit pushtriple to.
git status
git add .
git commit -m '添加展示图片和README说明'
git push origin gh-pages复制代码Finally, the directory structure of the local repository of much the same.
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复制代码That's all, I hope this is useful for people who want to deploy the static pages project.
Finally, welcome attention to the "old Liu Yi cow" Ha!
Reproduced in: https: //juejin.im/post/5d084407e51d45777a12619b