easy-to-use website building tools

Preface
By chance, I saw a highly praised question on a certain website: How to prove the ability of computer science students? There are also many comments under the question. The most clear and realistic one I remember is: What ability do I have? I just want to show off.

Seeing this, I have to stand up and say that building a website is not the only way to prove one’s ability, right? After all, “every profession has its own specialty”, right? I don’t know why improving one’s practical skills and broadening one’s knowledge has become a keyboard warrior’s show-off. I can’t criticize it, please forgive me, please forgive me

OK, back to the point. My original intention of building a personal website is actually very simple. Maybe you have also thought about it, but you just haven’t done it. I thought: there are many writing platforms on the Internet now, such as the C station I am using now. It is very mature and has everything you need for community discussion, question posting, Blink dynamics, etc. After I have learned the relevant knowledge, why can’t I write one myself? Maybe it’s more because I like to tinker, haha

I first came into contact with it in the “Section Customization” module of C Station’s article publishing. I could enter a few lines of code to have a beautiful interface. At that time, I had not yet come into contact with CSS and Web front-end, so I learned them for free from the Internet, which aroused my interest in further learning.

What is a blog? A blog is a platform for sharing and communication. We can learn from others’ experience and improve ourselves. This is true for people who read blogs. For bloggers, it is a summary of what they have learned, which can help them sort out their thoughts, facilitate future review, and develop good habits. Technical blogs can record the problems we encounter and better bug handling solutions. When we encounter the same problems in the future development process, we will remember them more deeply.

Once you have an idea, you should start working on it. When I actually started working on it, I realized that it was not some headline-grabbing article, like “Build your own website in 10 minutes, you still can’t build a website yourself?” When I actually watched their videos and articles to operate, some of them were really great. They assumed that you should know some things, and they would write them in a simpler way. Some of them were just “great porters”, who simply posted other people’s articles without putting the original link.

It is because I have not found a complete set of resources that can help novices develop a website, so I decided to write down the process of UP website building and share some of my experiences from the beginning to the final realization. So, if you also want to have your own website, you can follow the operation. If you encounter any problems during the process, you can send a private message or leave a message. Now, let’s get started together

Think about it, what do we use most to search for information? Some friends will say: Why ask? It must be “Studying at Bilibili” or search engines. Yes, I think this is the tool most used by most of us when we learn new things and keep exploring. So, what do we search for? For example, you can do this:

Perhaps you can also:

Indeed, you can search for a lot of videos and articles. But in this part, I will describe my mental journey from the perspective of a beginner: because this thing is just a preliminary idea in my mind, and I don’t know how to realize it. It’s like a person who is lost in the mountains. I only know that I have to get out, but I can’t find the way.

In this post, let’s talk about building a website and what I should prepare. Most of the tutorials on the Internet are long and you can’t finish them even after several clicks of the mouse. It will give beginners a feeling of “Wow, it’s so difficult, there are so many things”, so here I have classified the contents of each part, you just need to follow the order and go down step by step

Local Website
Why do I emphasize “local” here? At the beginning, I also read tutorials and followed other people’s ideas, such as buying a domain name and a server. I have stepped into the pit. This will cause difficulties for beginners in purchasing or choosing. Why don’t we change the way of thinking? Now I build a website on my own computer, and then “send” it out so that others can see it. You see, isn’t this very clear?

To build a website on your computer, you need two things: a browser and development tools . I’m sure everyone has the former, so I won’t go into details (otherwise, how would you read this article? Hehe). We’ll focus on the latter.

Development Tools
WebStorm
WebStorm is a JavaScript development tool from JetBrains. It has been praised by many Chinese JS developers as “Web front-end development tool”, “the most powerful HTML5 editor”, “the smartest JavaScript IDE”, etc. It has the same origin as IntelliJ IDEA and inherits the powerful JS functions of IntelliJ IDEA.

Enough of the crap, come here to download the portal

Here, there is a small problem. This thing is charged. If you are a college student, you can apply for an educational account for free through student certification. If… (I won’t say more, ask Baidu and you will find a way), just install it without any hesitation. Don’t panic.

Vscode
Visual Studio Code (VS Code for short) is a cross-platform source code editor for writing modern Web and cloud applications that runs on Mac OS X, Windows, and Linux. It was officially announced by Microsoft at the Build Developer Conference on April 30, 2015. It runs on the desktop and is available for Windows, macOS, and Linux. It has built-in support for JavaScript, TypeScript, and Node.js, and has a rich ecosystem of extensions for other languages ​​(such as C++, C#, Java, Python, PHP, Go) and runtimes (such as .NET and Unity).

Portal

Specifically, these two tools are: the former is a full-package (it has everything, you don’t have to worry about it, just use it directly), and the latter is a shell company that needs various employees (plug-ins) to implement some functions. So if you are too lazy to configure, just download the first one. The second one may be more convenient for writing blog Markdown syntax, which I will talk about later. If you are a novice here, I suggest you download WebStorm , which will be more convenient for some configurations in the following text

frame
What is “framework”? You are confused, right? Hehe. Don’t panic when you encounter something, and listen to Jason’s explanation. Here we look at the explanation of a certain term:

A framework is a frame, which refers to its constraints, and a frame, which refers to its support. It is a basic conceptual structure used to solve or deal with complex problems.
This broad definition of framework is very popular, especially in software concepts. Framework can also be used for mechanical structures.

What is this equivalent to? For example, if we build a house, how do you build it? We can’t start without drawings and workers. Isn’t this a “fairy tale”? First of all, it must be necessary for the designer to design the drawings according to user needs, and then the workers will start building the house based on this drawing, right? A lot is omitted here, please let the industry experts go, let me give you an example.

The same is true when we build websites. Do you really think that so many websites are written from scratch by programmers working day and night? Emmm, in fact, my answer to this question at the beginning was: Well, yes, of course. It was not until I went to internship that I found that some things in the enterprise were not all developed from scratch. (Open source is good, hahahaha) Do you want to be like this?

A product, project, website… As long as it is something that has been done by predecessors, we can learn from it. Learn good coding, open source, why waste time to do it again when others have already achieved it? Especially WordPress , which is going to be introduced below , is simply a “brainless operation”. You may not know what you have done, but a website that belongs to you will come out just like that.

In layman’s terms, a blog framework is a set of source code written by others. You just need to use it, modify your own configuration, and add the theme you want. That’s enough (big guys, please take a detour). So below I will share with you some frameworks I learned when building my personal website, and briefly analyze them for your selection.

As always, the target audience of this column is new friends, so I will not mention some complicated parameters that you don’t need to know. I will only mention the most critical parts to help you quickly find the one that suits you.

I’d like to state in advance that Jason uses the framework ==Hexo== . You can choose a different one from me, but the configuration is not exactly the same. The same can be achieved.

Hexo (highly recommended)
Hexo is a fast, simple and powerful blogging framework. You write your posts in Markdown (or other markup languages), and Hexo generates static files with beautiful themes in seconds. >Click here to go< Hexo Features: Excellent operation effect and low cost Multi-platform: local, cloud, PC, mobile Support multiple CDN services (enabling it can increase the speed of web page loading) Major search engines have a greater advantage in the inclusion and weight of websites (users are more likely to search for the content you publish) If you like configuration and want to complete certain configurations after operating the code, this one will suit your taste. Here is a screenshot of the configuration for reference: WordPress WordPress is a free and open source content management system (CMS) based on PHP and MySQL. It is the most widely used CMS software in the world. From a simple blog system at the beginning, it has developed into a complete CMS system with thousands of plug-ins, widgets and themes. > Click here to go directly< WordPress Features: Wide range of commercial applications Convenient for subsequent backup and transfer, with built-in tool support Strong scalability (think of Google's plug-in store here) Very user-friendly for customization (you can definitely build whatever you want) If you don't want to read the code, you can use this one. WordPress comes with backend management. Select the theme you want, and then drag and drop the required controls (for example, if you want to display the time, there will be something like a mobile desktop widget, just drag it to the location you want to display). In addition, the most important thing is that you need to get a server first to use it In order to help you find the right one more quickly, I will not give you many options, nor will I tell you what else there is (otherwise you will feel that what I have now may not be the best, and I need to try more. If so, you will waste a lot of time unknowingly. It is better to build one first, and then change to other ones when you are familiar with it in the future.) When you get started independently, you will have a clear idea and will not spend too much time on a certain point. Local Environment There is no need to introduce this part too much. You can understand that we need cement, shovels and other tools and raw materials to build a house. The local environment is the shovel we use, which is a tool. And Hexo 's blog framework is the raw material like cement. We need tools to start working, otherwise you can't do it with your hands... git Briefly describe what it is used for, Look Here: Git is an open source distributed version control system that is used to handle any small or large project in an agile and efficient manner. It is an open source version control software developed by Linus Torvalds to help manage Linux kernel development. Git is different from commonly used version control tools such as CVS and Subversion. It uses a distributed version library and does not require server-side software support. Don't worry about the words you've never heard of above. Here's how it works. Have you used Baidu cloud disk? Is there an automatic backup function? You select a local folder. When the local file changes, as long as the software is running in the background, the cloud will automatically keep the same as the local file. This is the process. However, you can now imagine the operation of git as a cloud. With some commands, you can "send/backup" the local code to the cloud. I have not elaborated on the distributed features and commands of git . I recommend that beginners can > see here Download Directly< Many friends are confused about these two versions. After reading this explanation, I believe you will know which one you need. Jason uses the LTS version LTS stands for "Long Term Support", and Current stands for "Current". Current stands for the latest released version (once every 6 months), which can be an odd or even version. Hexo Install Right-click on the desktop, open git bash here and enter the command to install (the default location is fine, it is not recommended to modify it for subsequent configuration) npm install -g hexo-cli I have installed it here, and the display may be different from yours. Just close the window after execution. At this time, the local hexo environment has been installed. How about it, isn't it simple? initialization For your convenience, it is recommended to create a new folder in any drive letter except C drive (but remember the path) . You can name it anything you want. For example, I created a new hexo-jason-blog folder in D drive. You can refer to it below. I wanted to demonstrate this to you using my own local environment, but in order to truly reflect the operating environment of a "novice", Jason decided to rebuild it and operate it step by step, just so that everyone can take every step well until success. Open git bash here in this folder and enter the command hexo init You may encounter this error at this point. Don't panic. It's a network error when cloning from GitHub . Just try a few more times. For solutions to this problem, please >refer here< Successful results: There are more files in the root directory Briefly introduce the file structure of hexo: public All the contents of the final page you see node_modules plugins and node.js modules required by hexo _config.yml site configuration file, set some public information, etc. package.json application information, configure the js package required for hexo to run scaffolds template folder, create a new article, it will contain the corresponding template content by default themes stores theme files, hexo generates static web pages based on the theme (very fast) source is used to store user resources (except for the posts folder, other files named as " + file name" are ignored) Our daily writing operations are all under source/_post. Since we already have the tool for "mixing mud" when building a house - WebStorm, why not use it? Open the root directory hexo-jason-blog in WebStorm (just drag the file to the desktop WebStorm shortcut to open it), open the terminal and enter the command hexos Click the link http://localhost:4000(yellow underlined position in the figure) for local preview, the default is the landscape theme built into hexo The cursor stays at the Terminal position, the key combinationCtrl+CStop local preview. This is the simplest local website. Emmm, the default page friends have also previewed successfully, probably, that's it, hey: But I always feel that something is missing. Without some of the things that a blog or website should have, how can it be made more like a website? theme Here we introduce themes and frameworks . We are currently using Hexo , a fast and simple blog framework. Themes are a kind of "accessories" that developers develop based on this framework with more complete functions, page styles, and more columns. Just like your mobile phone, when you change the phone case, you need to choose a phone case that matches the model of your phone, otherwise it will not match, right? Let's take another example. For example, for Android phones (iOS is closed source, unless jailbroken), the manufacturer has a default desktop theme. In the Theme Store app, you can choose better-looking icons, backgrounds, and fonts according to your preferences. It's like "putting on new clothes". You can understand the following operations from this perspective. style When it comes to themes, there are definitely a lot of them. Again, just choose according to your preferences. Here is the official theme libraryI prefer the Butterfly theme. Now I will show you how to give your website a new look. Butterfly Let me show you the theme page first. Blog Home Blog Page From the theme's documentation, the author has been maintaining it for a long time. As the saying goes, a good product must have good documentation. The author is also very attentive. You can follow the documentation to configure it step by step. It is very simple, just chaining some tools together. application Terminal input command git clone -b master https://gitee.com/immyw/hexo-theme-butterfly.git themes/butterfly Wait for the installation to complete, and some files of the butterfly theme will be displayed in the themes folder Install the plugin Install pug and stylus renderers. If not installed, the preview interface is like this Enter the command in the console, press Enter and wait for the installation npm install hexo-renderer-pug hexo-renderer-stylus --save Modify the configuration file Find the **_config.yml file in the root directory of the website and change the theme to butterfly (note the yml** file format) Local Preview hexo clean //Continue with the next command after executing this command hexo g //Generate blog directory hexo s //Preview locally Rendering It may still look so "simple". Well, this problem will involve the subsequent "theme beautification" (actually just adding some nice pictures, which is also very simple). My blog is not optimized in detail, it is very rough. Time is limited, so I will talk about it later. You can take a look and leave a "thought". I believe you can do better than me. Officially launched Image hosting Is this a piece of shit? Don’t panic. Don’t you see that our default theme website is not good-looking at all? That’s because there are no pictures. If you change it to a set of pictures and optimize it, won’t it be much better? Then, when we reference pictures on the Internet, one is to upload them locally and put the path reference in the code; the other is to use the URL, which is obviously more convenient (if we compare it to the server to be used later, as the number of pictures increases and the storage space decreases, each post needs to be uploaded together with the pictures, how much space will it take up) However, it would be great if we had a place where we could convert local images into links (everyone can access the photos you posted through this link). Picgo and some other plugins can achieve this. I updated an article a while ago, using GitHub and SM.MS. If you have friends who can't follow the analogy, > see here Click here to go directly< Tencent Cloud I have to say that the interfaces of the two are basically the same, so you only need to get familiar with one, so the locations are almost the same. Exclusive for students Students please check here > Click here to go directly< Exclusive Events Latest Events > Click here to go directly< domain name A domain name (English: Domain Name), also known as a network domain, is the name of a computer or computer group on the Internet, consisting of a string of names separated by dots. It is used to locate the computer (sometimes also refers to the geographical location) during data transmission. Since IP addresses are inconvenient to remember and cannot display the name and nature of the address organization, people designed domain names and used the Domain Name System (DNS) to map domain names and IP addresses to each other, making it easier for people to access the Internet without having to remember the IP address string that can be directly read by machines. If you don't understand, it's okay, then listen to Jason's detailed explanation. In simple terms, resources accessed on the public Internet have fixed IP addresses , but if you want to access a specific IP address , you need to remember it. However, it is not convenient to remember, so people came up with the domain name . Give the IP a personalized name, for example, "Siege Lion Jason" is the full name, and my friends call me "Sen Sen", "A Sen", "Xiao Sen", which are all aliases, but they all refer to the person "Siege Lion Jason". So how to implement aliases on the Internet? Here is an introduction to DNS , which is a service on the Internet that maps domain names and IPs to each other. That is to say, when you enter a domain name, you access the IP address corresponding to the domain name. Buy Now that we understand what a domain name is , let’s buy one! > Click here