More Github Series:

  • Play Github — Add a unique business card to your Gtihub
  • Github – How to generate nice badges for warehouse projects

preface

The latest hot news is undoubtedly the Microsoft acquisitionThe biggest gay dating site in the world– making. As a single program dog, I also come to the hotspot, just spent a half a day to learn how to build Github Pages, yes, I am now learning, and then found that Github has such NB good function, ah, found myself really more learning more feel really embarrassed to give their position as a programmer ah! O ha ha ~ O (studying studying)

The children’s shoes that have oneself server please go around, suit short short here poor and think small outfit B’s classmate admire and admire. O (￣) ￣) O

Github Pages

Github Pages is one of the most popular Github Pages Pages in the world. If you want to use Github Pages, you can find out what Github Pages are.

Websites for you and your projects.

Hosted directly from your GitHub repository. Just edit, push, and your changes are live.

In simple terms, it provides a site for your project to visit, and points directly to your warehouse. Your warehouse updates, and the site updates automatically. Here is a Demo of mine to see the effect:

Zhou Gongzi’s Garden

The advantages are self-evident:

  • Free!! Free!! Free!! When you use it, it gives you a free site to showcase projects, which is good news for those of us who are short and single and don’t have a server.
  • Convenient! Convenient! Convenient! Have you ever found a repository on Github using a keyword, and then clone it, NPM install, NPM run dev? Finally, I found that WTF was not what I wanted at all, and then I deleted the warehouse. Or, if you post something, readme. md details how to use and takes screenshots. There are theGithub PagesYou can really just have one 
    Demo: https://yourname.github.io/your-project-name
Copy the code

    It’s so cool. You see for yourself!

Three ways

The official website says:

- The master branch
- The gh-pages branch
- A folder named "docs" located on the master branch

Copy the code

There are three ways to deploy your project to Github Pages, and I spent half a day doing research to summarize how to use them!

Post the React/Vue project to Github Pages

Ok, I put this first because, indeed, with the rise of the big three frameworks, very few people are writing only HTML5 pages anymore, and most of them are single-page apps, so let’s start with single-page apps. Use create-react-app to create a simple react application.

  • Use create-react-app to create a basic project, as shown in the following figure:

  • Create a local branch gh-Pages, install the GH-Pages package, modify the package.json file, and add a homepage
Json {"name": "demo", "version": "0.1.0", "private": true, "dependencies": {"gh-pages": "^" 1.2.0, / / yarn add gh - pages "react" : "^ 16.4.0", "the react - dom" : "^ 16.4.0", "the react - scripts" : "1.1.4"}, "scripts" : {"predeploy": "YARN build", // Add predeploy" deploy": "gh-pages -d build", // Add deploy" start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test --env=jsdom", "eject": "react-scripts eject" }, "homepage": "https://luffyzh.github.io/first-github-pages" }Copy the code

Publishing through GH-Pages requires two additional commands. The first preldeploy will run the build in your project and package your project, and the second command will push the packaged file to the remote GH-Pages branch.

Note: it is best to create a local branch with the same name gh-Pages to run deploy, not on the master branch!!

Note: Make sure you have a homepage property, otherwise gh-Pages will not find the location of some files when it is published

  • Run the yarn deploy command to publish the file to Github Pages

Github Pages: Setting: github Pages

We can see that the gh-Pages approach is more intelligent, haha. Push to automatically deploy to Github Pages, the rest of us directly to the corresponding URL can be.

Luffyzh. Making. IO/first – githu…

[Note] : Because it is a static site, it is completely the client part, so when using the route, if you do not care about the appearance, use Hash route as much as possible, so that the jump will not have any problems. Because browserRouter relies on server support, access to it will show up 404 Not Found.

Hack some ways

If you’re obsessive-compulsive, you have to use browserRouter, and that’s fine. Gods are gods, and they’ve provided some fantastic solutions:

  • Add a new 404.html file to the create-react-app public directory.
// 404.html <! DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>404 Not Found</title> <script type="text/javascript"> var segmentCount = 0; var l = window.location; l.replace(l.protocol + '//' + l.hostname + (l.port ? ':' + l.port : '') + l.pathname.split('/').slice(0, 1 + segmentCount).join('/') + '/? p=/' + l.pathname.slice(1).split('/').slice(segmentCount).join('/').replace(/&/g, '~and~') + (l.search ? '&q=' + l.search.slice(1).replace(/&/g, '~and~') : '') + l.hash); </script> </head> <body> </body> </html>Copy the code
  • Add the following code to the head of the index.html page
<script type="text/javascript"> (function(l) { if (l.search) { var q = {}; l.search.slice(1).split('&').forEach(function(v) { var a = v.split('='); q[a[0]] = a.slice(1).join('=').replace(/~and~/g, '&'); }); if (q.p ! == undefined) { window.history .replaceState(null, null, l.pathname.slice(0, -1) + (q.p || '') + (q.q ? ('? ' + q.q) : '') + l.hash ); } } }(window.location)); </script>Copy the code

This solves the browserRouter problem.

Create-react-app documents these contents

See the article here

Publish h5-like static pages to Github Pages

This uses the third method mentioned above, which is the master branch containing a docs folder. Let’s try it step by step.

  • Build a new warehouse.

  • Write HTML files locally.

  • Push to the Master branch to see the effect

We need to enable Github Pages in the repository setting

All right. As shown above, the Master Branch/Docs Folder option is not optional because we don’t have the Docs folder.

  • Let’s create a new docs folder and put index.html inside it, then push it up.

After push, we go to setting and find that option can be selected. We select it and click Save, and the URL of our Github Pages will appear, as shown in the picture below:We click on the URL, and we see the ugly HTML file that we wrote, and we publish it.

Make yourself a home page

Github pages are usually published in https://[username].github. IO /project-name. But I just wanted to create a personal Github page with some of my projects on Github. What to do?

Use and must use the first method — Master Branch

The source files for User and Organization Pages sites live on The master branch in a dedicated repository named with the GitHub account name:

To create a User Pages site, name the repository using the naming scheme <username>.github.io .

To create an Organization Pages site, name the repository using the naming scheme <orgname>.github.io .
Copy the code

This means that if you want to access your site directly through.github. IO, you must publish it through Master Branch. Why do I end up with this? Since it has to be in Master Branch, it’s pretty much the same as the first and second versions. If you’re a framework project, you’ll use the first version, and if you’re an H5 page, you’ll use the second version, with a few minor changes.

Since I only wrote an H5 page, I used the second method:

Copy everything from the docs folder to the master branch. so easy.

Github. IO: [username].github. IO: [username].github

repeated

Have a server of children’s shoes and big people laugh off, ha ha, after all, there are poor people exist! A server can be deployed casually, this I think is just used to show some static content small demo or quite convenient!

The final summary

Recently feel that they are quite suitable for writing articles, smelly shameless think their logic is quite clear! Haha, try to write an article a week in your spare time. The last feeling is still helpful to some people, also got feedback, keep up the good work, thanks meena sang!!