With the simplest way, take you on-line own website!
Hello, I’m fishskin.
I believe that every student learning programming would like to have their own website, such as personal blog, which can be used to record their learning process, share their articles, display their works, etc., so as to motivate themselves to continue learning and summarizing.
So this article today, the goal is very simple, I want to use new technology to take all students from 0 to 1 quickly online a website!
Give me 5 minutes, I will give you the whole world.
Online website minimalist tutorials
Let us first understand the traditional online website process.
The traditional way
If we want to launch a personal blog site for other students to visit, we need to go through the following steps:
- Prepare a personal blog site source code
- You need to purchase a server with a public IP address
- Put the website files on the server and install the Web server software to provide web access
- Buy a domain name
- Configure DNS resolution and set the domain name to the IP address of the server
- If you want to speed up your site, buy your own CDN
The flow chart is as follows:
Sounds like trouble, and it takes at least an hour for this process to come down. This is why many students only have the idea of launching a personal website, but never realize it.
However, yesterday I only use 5 minutes, on the line their own website, how to do it?
Let’s introduce today’s main character Webify.
Webify
Webify is a one-stop Web application hosting service provided by Tencent Cloud, helping you to develop, deploy and launch website projects quickly.
What is one-stop?
As long as you have a set of web code, whether static, dynamic, or any other type of Web application, Webify can be deployed fool-proof. It provides the server, default domain name, customized domain name, HTTPS, and CDN acceleration to improve the performance and security of Web applications.
In other words, if you use Webify to launch a personal blog, you only need to:
- Prepare a personal blog site source code
- Go to the Webify console and select source and configuration
- A key to release
The process is greatly streamlined!
In addition, Webify provides a DevOps process based on Git workflow that automatically rebuilds the deployment every time the code is changed, eliminating the need to log in to the server and do it yourself!
Sounds cool, let’s try out a personal blog with Webify.
Webify of actual combat
Address: cloud.tencent.com/product/web…
First go to the Web application hosting platform and create an application.
An application corresponds to a website project. There are two ways to create an application: Git import and create from a template.
Git imports create applications
Git import works with existing website source code and can be imported directly from Webify as long as your code exists on a Git-hosting platform.
For example, if we want to launch a personal blog, we need a set of blog source code. You can write your own code; You can also use off-the-shelf site generators such as Hugo, Hexo, and others (more on that later) to automatically generate source code; Of course, you can download and clone other people’s project code. Once you’ve got the code, upload it to a code-hosting platform like GitHub or Gitee and it can be imported by Webify.
After the import, you need to fill in the configuration such as the build command based on the technology stack and type applied. Here you can directly select the preset configuration. For example, if your project uses vue. js, you can directly select the corresponding preset and automatically configure it without filling in:
Creating an application from a template
What if we don’t have any code, and we don’t have any code?
It doesn’t matter, Webify has some project templates built in, so you can just choose the application you want to create. For example, if we want to create a personal blog, we can choose Docusaurus 2, the mainstream site generator:
Once the template is selected, the system will automatically copy the code template to a new Git repository and associate it with your application.
Webify will automatically configure the Git repository with Webhooks, which will automatically trigger application redeployment every time a push of the repository code changes without having to go to the server to change the code!
Click Next to go to Application Configuration. Since we are using the system default template, we don’t need to change anything, just use the default configuration.
Click the Deploy button, wait a few minutes, and the application is created!
Application details
You can view the newly created application in the application list and deployment records:
Click the newly created application to enter the application details page:
You can view the details of the application, such as the default project domain provided by the system, and click on it to visit the online blog site!
There is also an environment information in the application details. What is that?
In fact, during the deployment process, the system automatically creates a cloud development environment, automatically builds the project according to the configured commands, and puts the build artifacts into static web hosting.
Files that have been uploaded to the server can be seen on the cloud Development Console:
On the static web hosting page, you can modify uploaded files and CDN cache Settings, etc. :
Want to know what cloud development is? Welcome to my previous post: Me and Cloud Development.
Enter the Settings page of application details, you can add a customized domain name to the project, modify the application build configuration, and delete the application.
Sustained release
Add an article to your blog site, go to your Git repository, create a.md file in the docs/ tutorial-Basics path, and enter the blog title and content.
Click commit and this code change will be automatically pushed to the main branch:
Of course, a better approach is to pull the repository locally and push it remotely after local modifications. You can push it to the dev branch first and then merge it to the Master branch after making sure the code is ok.
After code push, events are passed to Webify via Webhooks, triggering redeployment automatically, and after some time you can see the new deployment record:
Visit the site again and you can see the new blog!
If you do not see the update immediately, the CDN cache (default 2 minutes) may cause that the latest resource is not pulled, wait a few minutes.
OK, from 0 to 1 launch website achievements. Later, you can refer to the official documentation of the Docusaurus site generator to change the code and configuration and further customize your blog.
Use feeling
The technology isn’t new, and the product looks and feels like Vercel and Github Pages. But the advantage is that Webify offers high speed CDN in China; It can also get through and form a system with other cloud products.
Using Webify to launch a website is still very cool, the whole process is very simple, easy to use, really save a lot of their own website trivial process. It is a good choice for students who want to quickly launch their own websites or web development enthusiasts.
It’s also important to note that there’s no such thing as a free lunch. Webify is cloud-based and costs money (1 month free experience), but it’s more cost-effective than buying your own server (even if it’s a student machine).
Finally, I also posted a Webify video tutorial on Xiaobao site, demonstrating the launch of another blogging system.
Directions: www.bilibili.com/video/BV11V…
I am Yu PI, welcome to read my experience of learning programming, internship, job hunting, textual research and writing books from 0 to Tencent, no longer confused!
I learn computer four years, mutual encouragement!
“Like” or “request”, I wish everyone can be happy, make a fortune, the line of great luck.
