GitHub Pages can be used not only for personal blogs, but also to deploy static web Pages (HTML/CSS/JS, not the backend). Several Chinese blogs I checked (maybe because I did not search the right keywords) could not solve my confusion about the practical operation process. Finally, THANKS to this concise English article: Use Github Static Pages to Host Your Front End Projects, so you can Use Github Static Pages to Host Your Front End Projects. Or read the original text.

Ancient liu confusion is at the beginning, I’ve been with making Pages set up personal blog, its corresponding lot warehouse is: DesertsX/DesertsX lot. IO, there has been the master main branch;

It was not clear whether to create a new gh-Pages branch in the desertsx.github. IO personal blog project (which I did) or to open another Github repository. The problem with the gh-Pages branch is that there are two related project repositories at the same time, so there is no problem.

After reading the article Use Github Static Pages to Host Your Front End Projects, I found the code was clear, so I did it and adopted the second method.

GitHub account is a must. You can register and log in to GitHub. To create a New project, click “New Repository” in the upper right corner (+) or go to github.com/new. Put the name of the Repository in the Repository name section. Since it will be linked to the URL displayed on subsequent pages, it is recommended to use a more readable name, such as yulequan-relation-graph. Corresponding display url is desertsx. Making. IO/yulequan – re… ; Click the green Create Repository button to Create an empty repository (without readme.md and.gitignore), and then just push the local repository code there.

Then switch to the folder with the front-end project code stored locally, either you wrote it yourself, or you clone it from GitHub, or you just use guliu’s star relationship map to practice. (Actually not recommended, because the project involves 1.3K pictures about 140Mb, downloading and uploading can take some time. With this in mind, I’ll probably package the project into a Baidu disk, although it won’t be much faster) and then go to the Git command line mode. After installing Git as a Windows user, right-click Git Bash Here in the folder.

Git installation and Configuration and Git Remote Repository (Github) Git- a simple guide to help you get started with Git, no in-depth content; If you want to learn systematically, you can see: Git tutorial – Liao Xuefeng’s official website; For a quick look at Git commands, see the list of common Git commands.

Next look at the objective of the webapp/folder directory structure, must be placed in the root directory index. The HTML, open: https://desertsx.github.io/yulequan-relations-graph/ renders the page is index. The HTML; The static folder contains the images/star/ folder containing all star images, the lib/ folder containing CSS and JS external files, and the ylq_STAR_relation_graph_v2. json data that meets the format requirements of this project. Grapheco/InteractiveGraph due to the open source project, so only need to pay attention to want to show what kind of data, how to crawl the data, and will generally CSV data into a json data.

├─ │ ├─ ├─ webApp ├─ index.html ├─ show. PNG ├─ static │ ├─ images │ ├─ ├─ font-awesome │ ├─ Activate-graph-1.02 │ ├ ─ ├ ─ 07.02Copy the code

Finally, the main point of this article, if you are familiar with GitHub and Git, you can ignore the above trivia and just read this section. Note that the following commands are run in the webApp folder of the project. Git command list

Make this folder a local repository managed with Git
git init
Git files
ls -al

# Introduce the project after it is created
touch README.md
You can write files that you don't want to commit to GitHub
touch .gitignore
The default repository is in the master branch

git branch -a
# Create and switch to the GH-Pages branch
git checkout -b gh-pages
# show the changed file
git status
# delete master branch
git branch -d master

Add all files from the current directory to the staging area
git add .
# Submit the staging area to the warehouse area and add the code submission information
git commit -m 'first commit'

Add remote repository
git remote add origin [email protected]:DesertsX/yulequan-relations-graph.git
# push the local GH-Pages branch to origin server
git push origin gh-pagesCopy the code

Refresh: making warehouse DesertsX/DesertsX. Making. IO, local documents submitted after the success of the warehouse, making a warehouse, it is not empty, then look at page effect after deployment: DesertsX. Making. IO/yulequan – re… No problem, then we’re done.

If any files are modified in the local repository, then git add commit push can be connected three times.

git status
git add .
git commit -m 'Add display image and README description'
git push origin gh-pagesCopy the code

Finally, the directory structure of the local repository looks something like this.

Webapp ├ ─. Git ├ ─. Gitignore ├ ─ README. Md ├ ─ index. The HTML ├ ─ show. The PNG ├ ─ static │ ├ ─ images │ │ └ ─ star │ ├ ─ lib │ │ ├ ─ The font - awesome - 4.7.0 │ │ ├ ─ interactive graph - 0.1.0 from │ │ └ ─ jquery - 3.2.1 │ └ ─ ylq_star_relation_graph_v2. JsonCopy the code

That’s all, and I hope this article is useful to anyone who wants to deploy a static web project.

Finally, welcome to “cow clothes ancient willow” ha!