Use the cloud to develop Webify and launch a new website in 5 minutes!

Use the easiest way to bring you online on your own website!

Hello everyone, I am Yuskin.

I believe that every student who learns programming wants to have his own website, such as a personal blog, which can be used to record his learning process, share his articles, display works, etc., so as to motivate himself to continue learning and summarizing.

So today’s article, the goal is very simple, I want to use new technology with all students from 0 to 1 to quickly launch a website of my own!

Give me 5 minutes and I will give you the whole world.

A minimalist tutorial on the online website

Let us first understand the traditional online website process.

Traditional way

If we want to launch a personal blog site for other students to visit, we need to go through the following steps:

1. Prepare a copy of the source code of a personal blog site
2. Purchase a server with public IP
3. Put the website files on the server, and install the web server software to provide web page access capabilities
4. Buy a domain name
5. Configure DNS resolution to point the domain name to the IP address of the server
6. If you want to increase the speed of website access, buy a CDN by yourself

The flow chart is as follows:

It sounds troublesome, and this process takes at least 1 hour. This is why many students just have the idea of launching a personal website, but never realized it.

However, yesterday I launched my website in only 5 minutes. How did I do it?

The following leads to today’s protagonist Webify .

Webify

Webify Tencent cloud provided stop Web application hosting services to help you speed the development, deployment, on-line website project.

What is a one-stop shop?

It is a one-stop service. As long as you have a set of web code, whether it is a static, dynamic website or other types of web applications, you can use Webify fool-proof deployment. It provides servers, default domain names, custom domain names, HTTPS, CDN acceleration, and improves the performance and security of Web applications.

In other words, if you use Webify to launch a personal blog, you only need to:

1. Prepare a copy of the source code of a personal blog site
2. Enter the Webify console, select the source code and configuration
3. One-click release

The process is greatly streamlined!

In addition, Webify also provides a DevOps process based on the Git workflow. Every time the code is modified, the deployment can be automatically rebuilt, and there is no need to log in to the server to operate by yourself!

It sounds cool, let's try to use Webify to launch a personal blog together.

Webify in action

Address: https://cloud.tencent.com/product/webify

First enter the web application hosting platform and create a new application.

An application corresponds to a website project. There are two ways to create a new application: Git import and create from a template.

Git import to create an application

Git import is suitable for existing website source code. As long as your code exists on the Git hosting platform, you can directly import it in Webify.

For example, if we want to launch a personal blog, we must first have a set of blog source code. You can write the code yourself; you can also directly use some ready-made site generators, such as Hugo, Hexo, etc. (described in detail later), to automatically generate the source code; of course, you can also download and clone other people's project code. After getting the code, upload it to a code hosting platform such as GitHub or Gitee, and it can be imported by Webify.

After importing, you need to fill in the configuration such as construction commands according to the technology stack and type of the application. Here you can directly select the preset configuration. For example, if your project uses Vue.js, you can directly select the corresponding preset and configure it automatically without filling in:

Create an application from a template

What if we don't have any code and can't get any code?

It doesn't matter, Webify has some built-in project templates, just select the application you need to create. For example, if we want to do a personal blog, we can choose Docusaurus 2 as a mainstream site generator:

After selecting the template, the system will automatically copy the code template to the new Git repository and associate it with the application.

Webify will automatically configure Webhooks for the Git warehouse, and whenever the warehouse code changes (push), it will automatically trigger the redeployment of the application, and there is no need to go to the server to change the code!

Click Next to enter the application configuration. Since we are using the system preset template, nothing needs to be changed, just use the default configuration.

Click the deploy button, wait a few minutes, the application is created successfully!

Application details

The newly created application can be viewed in the application list and deployment record:

Click on the newly created application to enter the application details page:

You can view the detailed information of the application, such as the default project domain name provided by the system. After clicking it, you can visit the online blog site!

There is also environmental information in the application details. What is that?

In fact, during the deployment process, the system will automatically create a cloud development environment, automatically build the project according to the configured commands, and put the build products on the static website hosting.

You can see the files that have been uploaded to the server in the cloud development console:

On the static website hosting page, you can modify the uploaded files, modify the CDN cache settings, etc.:

Want to understand what cloud development is? Welcome to read my previous article: I and Cloud Development .

Enter the settings page of the application details, you can add a custom domain name to the project, modify the application build configuration, delete the application, etc.:

Continuous release

Let us add an article to our blog site, enter the Git repository corresponding to the application, create a .md docs/tutorial-basics under the path 06103b893523f1, and enter the blog title and content.

Click the commit button, this code change will be automatically pushed to the main branch:

Of course, a better way is to pull the code repository locally, modify it locally and then push it remotely. You can push to the dev branch first, and then merge to the master branch after confirming that the code is ok.

After the code is pushed, the event will be passed to Webify through Webhooks, which automatically triggers redeployment, and after a period of time, you can see the new deployment record:

Visit the website address again and you will be able to see the new blog!

If you don't see the update immediately, it may be due to the CDN's cache (2 minutes by default), which caused the latest resources not to be pulled. Just wait a few minutes.

OK, from 0 to 1 the achievement of the online website is reached. Later, you can refer to the official documentation of the Docusaurus site generator, change the code and configuration, and further customize your blog.

experience feelings

In fact, this thing is not a new technology. The product form and experience are similar to Vercel and Github Pages. But the advantage is that Webify provides a high-speed CDN in China; it can also connect with other cloud products and form a system.

Using Webify to launch a website is still very cool. The whole process is very simple and easy to use, which really saves a lot of the trivial process of launching your own website. It is a good choice for students who want to quickly launch their own website or web development enthusiasts.

There is also an important point to remind everyone that there is no free lunch in the world. Webify relies on cloud development and is also charged (provides 1 month of free experience), but compared to buying a server (even a student computer), the price/performance ratio is also higher.

Finally, I also published a Webify quick start video tutorial to demonstrate the launch of another blog system, welcome to watch.
Webify quick start video tutorial

Technical Exchange Group