5 minutes, online from 0 to 1!

In the simplest way , Take you online to your own website ！

Hello everyone , I'm fish skin .

I believe that every student learning programming wants to have his own website , For example, personal blog , Can be used to record their learning process 、 Share your articles 、 Display works, etc , So as to motivate yourself to continue learning and summarizing .

So today's article , The goal is simple , I want to use New technology belt All the students from 0 To 1 Quickly launch your own website ！

Give me a 5 minute , I give you the world .

Online website minimalist tutorial

Let's first understand the traditional online website process .

The traditional way

If we want to launch a personal blog website , For other students to visit , Then you need to go through the following steps ：

1. Prepare a personal blog website source code
2. Buy one with public network IP Server for
3. Put the website file on the server , And install web The server software provides Web access
4. Buy a domain name
5. To configure DNS analysis , Point the domain name to the server IP Address
6. If you want to improve the speed of website access , Self purchase CDN

The flow chart is as follows ：

Traditional website online process

Sounds like trouble , And this process should at least 1 Hours . This is why many students just have the idea of online personal websites , But never realized .

however , Yesterday I only used 5 minute , He launched his own website , How to do it ？

The following leads to today's protagonist Webify .

Webify

Webify It's provided by Tencent cloud "One-stop" work style Web App hosting services , Help everyone develop 、 Deploy 、 Online website project .

What is a one-stop ？

It's a one-stop service , As long as you have a set of web code , Whether it's static 、 Dynamic websites are also other types web application , Can use Webify A fool's plan . It provides the server 、 Default domain name 、 Custom domain name 、HTTPS、CDN Speed up , promote Web Application performance and security .

In other words , If you use Webify Online personal blog , You only need to ：

1. Prepare a personal blog website source code
2. Get into Webify Console , Select source code and configuration
3. One click release

The process has been greatly streamlined ！

Webify Online website process

Besides ,Webify Also available based on Git Workflow DevOps technological process , Every time you modify the code, you can automatically rebuild and deploy , You don't have to log in to the server to operate by yourself ！

Sounds great , Let's try to use Webify Online personal blog .

Webify actual combat

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

First of all to enter Web Application hosting platform , Create an app .

An application corresponds to a website project , Here are two ways to create new applications ：Git Import and create from templates .

Web Application hosting platform

Git Import create application

Git Import methods that apply to the source code of existing websites , As long as your code exists in Git Hosting platform , Can be directly in Webify Import .

For example, we want to launch a personal blog , First, there must be a set of blog source code . You can write your own code ; You can also directly use some off the shelf site generators , such as Hugo、Hexo etc. （ Detailed introduction later ）, Automatically generate source code ; Of course, you can also download 、 Clone someone else's project code . When you get the code , Upload it GitHub or Gitee The code hosting platform can be Webify Imported .

After importing, you need to use the technology stack and type of the application , Fill in the build command and other configurations . Here you can directly select the preset configuration , For example, your project uses Vue.js, You can directly select the corresponding preset , It can be configured automatically without filling in ：

New application

Create an application from a template

If we don't have any code , I can't get the code , To do ？

It doesn't matter ,Webify Built in some project templates , Directly select the application you want to create . For example, we want to do a personal blog , You can choose Docusaurus 2 This mainstream site generator ：

Create from template

After the template is selected , The system will automatically copy the code template to the new Git Warehouse , Associated with the application .

Webify Will automatically give Git Warehouse configuration Webhooks, Subsequently, whenever the code of the warehouse changes （push） when , Will automatically trigger the redeployment of the application , No need to run to the server to change the code ！

Automatic configuration Webhooks

Click next , Enter application configuration , Because we use the system preset template , Nothing needs to be changed , Just use the default configuration .

Application configuration

Click the deploy button , Wait a few minutes , The application is created successfully ！

Application details

You can view the newly created application in the application list and deployment record ：

Click New Application , Go to the app details page ：

Application details

You can view the details of the application , For example, the default project domain name provided by the system , You can visit the blog after it is online ！

Generated blog site

There is also an environment information in the application details , What is that ？

In fact, during the deployment process , The system will automatically create a Development of cloud Environmental Science , Automatically build the project according to the configured commands , Put the build product in Static website hosting On .

You can see the files uploaded to the server on the cloud development console ：

Hosting pages in static websites , You can modify uploaded files , modify CDN Cache settings, etc ：

modify CDN Acceleration configuration

Want to know what cloud development is ？ Welcome to my previous article ： Cloud development and I .

Enter the settings page of application details , You can add a custom domain name to the project 、 Modify the application build configuration 、 Delete application, etc ：

Application settings

Continuous release

Let's add an article to our blog site , Enter the... Corresponding to the application Git Warehouse , stay docs/tutorial-basics Create a new one under the path .md Suffix file , Enter the blog title and content .

New document

Click on commit Button , This code change will automatically push To main branch ：

Submission code

Of course , A better way is to pull the code warehouse locally , Modify it locally and then push To remote . You can start with push To dev Branch , Confirm that the code is OK and then merge it into master Branch .

Code push after , The event will pass Webhooks Pass to Webify, Automatically trigger redeployment , After a period of time, you can see the new deployment record ：

Visit the website address again , You can see the new blog ！

If you don't see the update immediately , It may be due to CDN The cache of （ Default 2 minute ）, As a result, the latest resources are not pulled , Just wait a few minutes .

OK, from 0 To 1 The online website has achieved . Later, you can refer to Docusaurus Official documentation of the site generator , Change code and configuration , Further customize your blog .

Use feeling

In fact, this thing is not a new technology , The product form and experience are similar Vercel and Github Pages. But the advantage is Webify At home , Provides high speed CDN; It can also connect with other cloud products 、 Formation system .

Use Webify The online website is still very cool , The whole process is very simple 、 Easy to use , It really saves a lot of trivial processes of launching your own website . Whether for students who want to quickly launch their own website 、 still web Development enthusiasts , All good choices .

There is another important point to remind you , There is no free lunch in the world ,Webify Relying on cloud development , It's also a charge （ Provide 1 Months of free experience ）, But instead of buying your own servers （ Even student machines ）, Cost performance is also higher .

---

Last , I also posted it on the little broken website webify Video tutorial , Demonstrates the launch of another blog system .

The way ：https://www.bilibili.com/video/BV11V411p7vf/

I'm fish skin , Welcome to I started from 0 Self study and enter Tencent's programming learning 、 Internship 、 To apply for a job 、 Textual research 、 Book writing experience , No more confusion ！

I studied computer for four years , Mutual encouragement ！

give the thumbs-up It's still a request , I wish you all the best 、 Make a fortune 、 Universiade .