• What if you see some great repositories on GitHub and want to contribute code?
  • What if you find some useful sites on GitHub and want to deploy them to your own server?
  • .

I think a lot of people have had this problem.

  • If I wanted to contribute code, my previous approach was to clone the code locally, then modify it in the local editor and commit PR.
  • If I wanted to deploy to my own server, my previous approach was to clone it locally, modify the deployment configuration locally, and finally deploy it to my own server or a third-party cloud server (such as GitHub Pages).

Now with the popularity of cloud technology, there is no need to clone the code to operate locally. Instead, we can modify it directly in the cloud editor, develop it, and deploy it directly to the cloud server. Today I’m going to recommend a tool that deploys code to a cloud server with one click.

What is one-click deployment?

Today I’m going to introduce you to one-click deployment. So what is one-click deployment? As the name suggests, there’s a button that you can click to deploy.

Here’s a project with a one-click deploy button:

Click to go to the following page, where you can change some of the default Settings (or use the default Settings directly) :

Click Deploy App after making the changes. After successful deployment, it can be accessed at an address like the following ~

The demo address in the figure is:
https://leetcode-cheat.heroku…

You can directly into my warehouse https://github.com/leetcode-p… “And click the Deploy button to try it.

How does it work?

I’m a person who likes to find out how things work, so of course I have to know how things work. It’s actually pretty easy, so let’s start at the beginning.

1. How to display the publish button on GitHub.

The deployment button above is rendered with the following Markdown content:

[![Deploy](https://www.herokucdn.com/deploy/button.svg)](https://heroku.com/deploy)

The above will be rendered as the following DOM:

<a href="https://heroku.com/deploy" rel="nofollow" ><img src="https://camo.githubusercontent.com/6979881d5a96b7b18a057083bb8aeb87ba35fc279452e29034c1e1c49ade0636/68747470733a2f2 f7777772e6865726f6b7563646e2e636f6d2f6465706c6f792f627574746f6e2e737667" alt="Deploy" data-canonical-src="https://www.herokucdn.com/deploy/button.svg" style="max-width:100%;" /></a>

In other words, it is actually an SVG image wrapped by the tag A, and after clicking it, it will complete the URL jump.

2. How do cloud service vendors get the default configuration?

In Heroku’s case, other vendors (like Tencent) have similar principles.

For the above reasons, the only way we can actually pass to a third-party cloud vendor is the URL. So we can transfer the configuration directly through UR. Such as https://heroku.com/deploy?a=1. . This is good enough for a small amount of data, but how about a large amount? We know that the length of browser URLs is limited, and the limits vary from browser to browser.

So what’s the solution? The popular way to think about it is convention. In Heroku’s case, I personally highly recommend the convention to store the configuration in the app.json file of the root directory.

For example, my repository app.json looks like this:

{"name": "LeetCode Cheatsheet", "description": "force button plus plus, may be the best algorithm solution in West Lake "," Repository ": "https://github.com/leetcode-pp/leetcode-cheat", "logo": "https://tva1.sinaimg.cn/large/008eGmZEly1gnm68epc0kj30u00tsaav.jpg", "keywords": ["github", "leetcode", "cheatsheet", "91algo", "algorithm"], "env": { "REACT_APP_BUILD_TARGET": { "description": "Enumeration values: extension and web", "value": null}, "PUBLIC_URL": {"description":" static resource location (can be accelerated using CDN) ", "value": "https://cdn.jsdelivr.net/gh/leetcode-pp/leetcode-cheat@gh-pages/" } }, "buildpacks": [ { "url": "https://buildpack-registry.s3.amazonaws.com/buildpacks/mars/create-react-app.tgz" } ] }

As you can see, in addition to configuring the repository, logo, and description, I also configured environment variables and Buidpacks. Buildpacks are simply how you build your application, and for more information about Buildpacks you can refer to the Heroku documentation

You may still have doubts, why the above link is https://heroku.com/deploy. You can see that the URL doesn’t have any parameter information, so why does it know where it came from? I think TA should use the browser’s referer to determine where it came from and then search for the app.json file corresponding to the project root directory. You can verify this by right-clicking and opening it in the new Traceless mode. You will notice that the right click does not deploy properly when opened in the new Trace Free mode.

What’s the use of that?

One-click deployment means a lower barrier to entry for deployment, not only in terms of skill, but also in terms of cost. Heroku, for example, allows you to deploy several apps directly with one click, generate websites directly, and access domain names directly. If you don’t like the domain name can also be customized. If you want to modify the source code and rebuild it, you can.

For example, I see someone’s blog is beautiful. If TA provides one-click deployment, you can deploy directly to your own cloud server and generate your own URLs. Push can also be automatically deployed (CD) when you associate your own Git. And it can all be free, at least the one I’m using right now. If the TA doesn’t provide one-click deployment, you’ll need to do it yourself. If you’re familiar with all this, it’s just a matter of spending a little more time. If you’re a tech geek, I might just want to deploy it, using my own domain name and so on, and not having to deploy it with one click would be very unfriendly.

Related technologies

Gitpod is a tool I’ve been using to help me edit content directly from the cloud. Or there are some environmental problems, the need for virtual host, you can also use it to solve. Not only does it provide all the functionality of an online IDE, but it also integrates CI and CD, making it very easy to use.

Similarly, you can add the ability to open GitPod with one click in your repository.

tip

Some open source projects you don’t know how to contribute. You can do something different, like give them a logo, or give them a one-click deployment. This may be your first step towards an open source career.

For more information

  • heroku-button
  • Cloudbase one-click deployment

You can also pay attention to my official account “Imagination Front End” to get more fresh front-end hardcore articles, take you to know what you don’t know about the front end.