“This article has participated in the good article call order activity, click to see: back end, big front end double track submission, 20,000 yuan prize pool for you to challenge!”

I’m sure many of you have heard of Github as a deployment site, but I’ve been digging through a lot of articles that are mostly practical, and they’re gone at the Setting.

While deploying on Github is fairly straightforward, there are a lot of details involved, and this article will not only teach you how to deploy a website, but also talk about deployment details.

Tip: This post is a bit long. We’ll talk about custom domain names in the next post.

In the next article, we will talk about how to use domestic CDN to speed up Github access. Why don’t you pay more attention

Simplest deployment

First of all, or first hand to teach you to deploy a simple page, let you first experience the joy of deployment.

The first step is to create a random project on Github, like the one I’ll call first-Page.

Then create three files: index.html, styles.css, main.js:

<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <link rel="stylesheet" href="styles.css">
    <title>First Page</title>
</head>
<body>
    <h2>This is my first page</h2>
    <script src="main.js"></script>
</body>
</html>
Copy the code
alert('xxx')
Copy the code
h2 {
    color: red;
}
Copy the code

Run the following command locally using http-server:

http-server -c-1
Copy the code

You can see the preview at localhost:8080

OK, now let’s submit the code to Github:

Git add./ git commit -m 'feat: initialize 'git pushCopy the code

Go to the Github project Settings.

Go to Github Pages at the bottom.

Select the master branch inside, and click the Save button.

IO /first-page/ (note: username is your github username, like Haixiang6123 for mine). .

So that’s a very, very simple Github page deployment. Let’s talk about how it works.

The principle of

We’ve just been able to access our page via http://localhost:8080, essentially accessing our local index.html. Accordingly, http://username.github.io/first-page is the access to remote index. The HTML.

The deployment here is just uploading the file to Github by adding + commit + push a shuttle.

If we had to write a deployment script, we could write it like this:

git add ./
git commit -m 'deploy'
git push
Copy the code

Complex project deployment

HTML, styles.css, main.js, Vue, main.js, etc.

First of all, don’t get “confused” by the framework, the framework is just to improve our development efficiency, essentially when we visit the web page is still index.html + styles.css + main.js.

Whether it’s React or Vue, it’s going to be similarnpm run buildSuch a packaging command. It will convert JSX /.vue to index.html + styles.css + main.js via Webpack.

Here I use React to demonstrate, first create a project with CRA:

create-react-app hello --template=typescript
Copy the code

Then run the package command in the project:

npm run build
Copy the code

After running, we get a /build directory in the root directory, which contains the HTML, CSS and JS files we need.

From our deployment experience, we know that just push the HTML, CSS and JS to a branch, select the branch in Settings, and click the “Save” button to OJBK. So the question is: how?

Git push = git push = git push = git push

git push origin master
Copy the code

Origin is the clone address of the project, and Master is our branch. If I change the master to some other branch, let’s just call it the x branch, right?

git push origin x
Copy the code

However, if you write it this way, it is easy to cause code conflicts after push and cause push to fail. Generally, each deployment must overwrite the previous deployment, so you can directly force the following:

git push origin x -f
Copy the code

There’s still a problem: / SRC /node_modules will be pushed to the x branch as well as /build push. What if we just want the push /build directory?

The simple answer is to go to the /build directory and git init it. It is equivalent to creating a git repository in the build directory under the first-page project repository. Set Origin to the clone address of the original project.

This is a bit of a head-spinning explanation, so I’ll release the deployment code:

Stop deployment if there is an error
set -e

# Local package build
npm run build

Go to the Build directory
cd build

Create a local Git repository
git init 
# Add and submit
git add -A
git commit -m 'deploy'
# Specify origin and branch
git push -f [email protected]:Haixiang6123/first-page.git master

Return to the original directory
cd -
Copy the code

These are the one-click deployment methods for all projects, and you can see that you can use the above method for one-click deployment of any project that has packaging capabilities.

Tip: the origin directly use [email protected]: Haixiang6123 / first – page. The git replaced, can say project code to literally a warehouse, only need to push to the corresponding git address can complete the corresponding project deployment. So far, this is how I deploy my personal website: I develop one repository, deploy the artifacts to another repository, and deploy the static pages to another repository.

Third-party deployment Tools

I also copied the deployment script provided by Vue for the deployment script above.

Vue officially lets developers copy this script and deploy it themselves, while React can be deployed using a third-party tool called React-gh-pages.

The benefit of third-party deployment tools is that you don’t have to write your own bash scripts.

Another benefit is that it will help you avoid 404, which many of you will encounter when you first deploy a static Github page. 99% of the reason is because publicPath is not set up properly.

All of these third-party deployment tools remind you to configure publicPath in the Getting Started step, or do it for you.

Special function

The steps above are ready to deploy a project similar to xxx.github. IO /first-page. However, we don’t want the first-page suffix when deploying a personal website or blog. It would look better to go with xxx.github.

Create a project named xxx.github. IO (XXX is your username) and deploy it in the above manner to get xxx.github. IO without a suffix.

For example, my Github user name is Haixiang6123. I would create a repository named Haixiang6123.github.

Why is that? It’s kind of an Easter egg for Github users, but it’s not so much an Easter egg for a feature everyone wants to use, so I prefer to call it a special feature.

In addition to this, Github has a number of special features, such as creating a repository of your Github usernames (my own Haixiang6123 is an example) :

Then add readme.md to it and it will become your Profile:

Back in the days when deployment was not as easy as it is now to deploy on whatever branch you wanted, only on gh-Pages, a particular branch. It is also possible to deploy index. HTML in the root directory, unlike today’s index. HTML in /docs.

So, in the old days, Github deployed static pages more as a special feature, which led many people to think that deploying a web page was such a hassle.

conclusion

To summarize, deployment is essentially uploading HTML, CSS, js files to another hard disk (COS bucket, CDN, etc.) and then remotely accessing index.html.

The key to Github deployment is to push HTML, CSS, and JS to the repository using the add-commit-push quality, and then click the deploy button in Settings.

For projects that need to be packaged, you need to CD them to a packaged directory before deployment, such as /build or /dist, then create a local repository through Git init, and then force the entire directory onto the project branch.

By the way, recently just built a public number [write code sea monster], think I write a good follow the fate of attention to it ~