Building a personal website for front-end engineers with zero foundation

Hello everyone, I am a front-end engineer. I think most front-end engineers are eager to build a personal website independently, whether it is for more learning to improve their core competitiveness, or to show off Build a personal blog by yourself, or just out of curiosity and want to build a one-stop website. Anyway, you need to build a website independently and run it. You can say that you don’t have the above ideas, but I do, so I tried it. Finally, I entered my URL maramlee.com and successfully displayed “hello world”. Ah...hahaha...

I plan to write this article in the hope that it can give some direction to students who want to try to build their own website but are confused about the front end. Some people may have said that there are a lot of ways to build a website with zero basics on the Internet. Heap, there is no need for me to write here. When I look back on my journey of building a website, I feel that it is still necessary. I believe that some people will benefit from this article of mine.

I checked a lot of information at the beginning of building the website. There is a lot of information on the Internet and it is very complicated. There are various reasons: for example, there are too many and it is difficult to distinguish, some of them are far back, and there are also many basic points that are different from each other. Ru Geshan looked confused, etc., so the actual operation was more difficult. Here I start from the initial application for a domain name, to the final input of the URL and "hello world". The whole process is connected in series, hoping to serve as a starting point.

I hope you are a person with a foundation in front-end development. Of course, I will try my best to put forward all the technical points used, hoping to give people without a foundation a way to think.

I use Alibaba Cloud for domain names, servers, etc. Friends who do not use this platform can compare it with their own platforms. If you have any questions, you can also leave me a comment and discuss it together. If you don’t know which platform to choose to apply, you can do the same as me and register an Alibaba Cloud account, and then follow me.

This section includes the processes of domain name registration, real-name authentication, and domain name registration.

Enter the desired domain name and register it if it is not occupied. For specific operations, please see Registering a Universal Domain Name.

The domain name suffix is ??usually .com or .cn. Basically, if you can register .com, just register .com. For more suffixes, please see Domain Name Differences.

For specific procedures, please see Overview of Domain Name Real-name Authentication.

Note: When using a server in mainland China to host your website, registration is required. Otherwise, no filing is required.

In order to save filing time and successfully pass the filing, it is recommended that you understand in advance and make preparations before filing:

The information required by each provincial administration bureau is different, please follow the requirements of each regional administration. Prepare information according to the Bureau’s filing rules. For more details, please see Overview of Preparation for ICP Filing.

If you follow the steps, you have not filed it before, so see: First Filing .

If you are in other filing scenarios, please see ICP Filing Quick Start.

First go to the instance creation page. For operation and maintenance, this section is relatively simple. However, as an operation and maintenance novice, when purchasing a server, you should pay attention to purchasing according to your actual situation. Please check Alibaba Cloud documentation: Use the wizard to create an instance, very detailed! Also read more tips, precautions, etc. The following are the steps that I, an operation and maintenance novice, summarized after reading the document. If you are a novice, you can also do this. If any operation and maintenance personnel find that there is something wrong with my description, please give me some advice.

For example, if you just want to learn and give it a try, choose "pay as you go" (note that if you pay as you go, you must recharge first, remember to recharge 100-200), but if you want long-term maintenance, choose "Year-monthly subscription".

This should be noted. Generally speaking, choose the website where there are more people viewing it. If you have your own blog, you can also choose your own location. Anyway, if it is used nationwide, it will be different. Not much. For more information, see: Teach me how to choose a region

As a Wanwan website, just click on the smallest one.

I don’t know how to choose. It is recommended to choose CentOS 7.4 64-bit.

Note, if you have a Windows computer, don’t take it for granted and choose the Windows Server system. Here is your server image. You can simply understand that this is the configuration of a new computer and has nothing to do with the computer system you use locally.

This depends on what you store. You can imagine that you buy a new computer. The storage here can be regarded as the computer's memory. The system disk must be selected and can be regarded as the C drive of the windows system. As for data disks and NAS storage, you don’t have to choose them if you don’t understand them. For those who are just playing around, you can go through the process directly with the operating system disk. As for other data disks, you can learn more about it later and then expand.

There is a difference between "classic network" and "private network". Now newly opened accounts only have the option of "private network", just choose this. I want to know more. They can look up information on their own.

By default, "Assign public IPv4 address" is checked

For testing purposes, just select "According to usage traffic"

It depends on the situation Select, for general play, the default is 5M

If you want to know more details, you can view: Teach me to choose>. Security Group You can create a new security group according to the prompts: New Security Group>. After entering here, when creating a new one, you need to create a private network. Fill in the information according to the prompts. Generally, the default is fine.

As a novice, the remaining elastic network cards and IPv6 are not needed for the time being. You can supplement your knowledge after clearing the process.

This depends on your mood. You can set it after logging in. You can "customize password" or use "key pair". Just follow the instructions in the document.

The next operation It can be set according to your situation, it’s not a big problem, just click to buy after confirmation. For detailed operations, remember to read the documentation~

Only after the domain name is resolved, external users can access the website through the domain name. For example, enter baidu.com to access the Baidu website.

For the main operation, just read this document from Alibaba Cloud: Quick Start for Setting up Domain Name Resolution

Deployment of the website involves server deployment. You may be unfamiliar with the front-end, and you may be unfamiliar with the back-end. It is easier on the end, but it is not difficult. Alibaba Cloud provides a deployment method: A summary of self-service website building methods, you can choose a method that suits you for deployment. I am a front-end staff, and the language I am most familiar with is javascript, so I choose to use node.js for deployment. There are also corresponding operation documents in the Alibaba Cloud documentation: node.js deployment

In this way, your first The webpage will be out~~~

As a novice, I have been through a lot of pitfalls. What should I do if I don’t know the backend? Learn node.js. What should I do if I don’t know how to operate the Linux system? Check common Linux operations. Anyway, I’m just looking for documents and learning materials. Here I will briefly mention the basic pitfalls, hoping to be helpful to other novices.

There are many ways to connect to an ECS instance:

Note that after the key pair is bound, the above two connection methods are no longer available.

For more detailed information, please view the documentation.

The Linux formatted data disk document states that formatting a data disk requires mounting. Data disks purchased with an instance do not need to be mounted. Moreover, cloud server ECS only supports data disk partition operations and does not support system disk partition operations.

I didn't notice before that the system disk is the data disk purchased with the instance. I only have this disk. When I read the documentation, I followed the instructions and partitioned them many times. I used fdisk -lu /dev/vda1 to view the partitions. Successfully, however, when I run the command mkfs.ext4 /dev/vda1p1 to create a file system on a new partition, I keep getting an error message: The device apparently does not exist; did you specify it correctly? The file system cannot be found. Finally, after searching for a long time, I discovered that I had made a low-level mistake in the system disk partition.

Since I am not a computer major, I don’t know much about IP addresses. When I created the rules in the security group, I was confused about the authorized objects column, so I looked up the knowledge about IP addresses.

Anyone with a little knowledge knows that the address printed out by inputting ifconfig on the console is the same as the IP address displayed on the graphical interface of the computer. However, this address is an internal network address, not an external network address. address.

When I was testing here, I set the intranet IP, but it never had the expected effect.

For the external network address, you can open Baidu and directly search for ip to see your external network address.

I also made up for the IP address. Friends who don’t understand can refer to this address: CIDR IP address representation and division method. For this example, I also made a note for everyone. Reference:

Host IDs all 0 and host IDs all 1 are illegal IP addresses

Those with the same network ID belong to the same network segment

Class C : Class C IP address:

3-byte network address (the highest bit must be 110) + 1-byte host address

CIDR: Classless Inter-Domain Routing

Number of bits in IP address/network ID 0.0.0.0/0

Submask: The network bits in the binary format of the subnet mask are all 1. In this way, the network bits of the IP address can be obtained by performing an "AND" operation on the subnet mask in binary format and the binary IP address.

CIDR technology uses the continuous 1 part in the subnet mask to represent the network ID, and the continuous 0 part to represent the host ID.

For example: 192.168.23.35/21, calculate the network ID, subnet mask, starting and ending IP addresses of the subnet

Subnet mask: 255.255.248.0

Starting IP address: 192.168.16.1

Ending IP address: 192.168.23.254

Since I am using Alibaba Cloud platform, many excerpts in this article are from Alibaba Cloud. If you want to know more, please check out the Alibaba Cloud documentation.

I wrote the article in retrospect, so there may be some omissions. If you find something wrong after reading it, please leave me a comment or leave a message, and I will continue to improve this article.