The following tutorial comes from my personal blog: Tips on building the Typecho blog and a very detailed tutorial. Please visit my website: https://xuanland.cn

This article describes the process (and tutorial) that I shifted my focus from CSDN blog platform to my personal website in the middle of July 2020.It is also the first article that I wrote on my own website ~ online Typecho blog building tutorial bits and pieces, so I also determined to write a comprehensive guide. If you want to build your own dedicated blog from scratch, this is your choice!

One, about the blog

  • I have been blogging with CSDN for half a year. I feel that CSDN is a very powerful blogging platform with built-in Markdown syntax editor. It is easy to write formulas and codes. I wrote 106 blogs around July 10, 2020, and decided to build my own blog platform to have a learning and living space of my own, so I had this website three days later. Is not to say that no longer write blog in CSDN, I admit CSDN convenience and openness has a great advantage, where I detailed in all directions in the field of computer classification (elaboration to each topic), in the website, I choose to collect some of the most essence and valuable part, with the most satisfactory typesetting, So here I will not very frequently update the blog, to ensure the quality of each update ~ I hope my personal blog and I grow together!
  • Attached is a CSDN blog link: Mr. ZwX csDNblog

Two, Typecho Blog setup tutorial

Aliyun platform: aliyun.com

(1) Server ECS(Instance)

  • Our local IP support Intranet access, but not support public network access, how can you let people in different computers to ask for your web page? We need servers. In the past, when we did a separate front and back interaction, the method we used was Intranet penetration, which is fromLocal IP address (localhost)Map to an accessible URL (directly to some company, of course), so that the front end can interact with each other through such a mapping (the front end may need to use IIS publishing) to make the Web pages work.

For Intranet penetration and local servers, I give a link to a tutorial and a mind map I drew: Make your computer a Web server & Intranet penetration and publish web pages

  • We need to build a website can not directly use the method of Intranet penetration, so we can not directly access the site through the URL, so we need a cloud server. Of course, I can choose either Ali Cloud or Tencent Cloud. Because of the recommendation of my classmates, I resolutely choose Ali Cloud server.
  • Before the purchase of the server, I have to carry out the student authentication with my personal information, and then purchase the server in the Cloud Wing program. It is 114 yuan/year until I reach the age of 24, leaving 1K + RMB.

  • If you can see your server running in the ECS instance after you buy it, you need to be able to use theMirror marketChange the Linux system to a pagoda system to facilitate subsequent operations.

Stop the instance first

  • Find the Pagoda Linux panel in the mirror Market column and select the latest version

Now you need to configure the security group, as shown below

  • Click the configuration rule to connect the required interface.

  • In the same place as before, let’s go to Remote SSH and selectWorkBench(Of course, you can use SSH tools, such as Xshell, etc. I can also select Linux Ubuntu and use SSH command to connect public IP and then enter the pagoda panel.) The default port is 22

  • If you want to use Ubuntu, it is also convenient to open the terminal and remotely connect with the following command:
    ssh root@ip  --- > password ---> bt
Copy the code

  • So you can change the panel information by such a command (I reset the user name and password once) ** be sure to remember the server and panel user name and password, followed by the database name and password! ** Next, access IP :8888, which is the default path of the pagoda, log in to the pagoda to the next operation.

(2) Domain name

Domain name registration and filing

  • Generally speaking, a domain name is to visit the website and enter the domain name you want in the Ali Cloud domain name bar. For example, my application xuanland.cn is my domain name. After the payment is successful, it is approved and filed, which needs to wait for some time. Because the domain name registration and server are also in Aliyun platform, so here will not expand on it (like shopping in a company like doge)
  • Then after buying the domain name, we will go through the real name authentication process. This process will not take long, but then we need toFor the record, this process is more complicated. We choose to file on the App of Aliyun and fill in personal information and website information. Take photos of the ID card and personal face recognition ** must pay attention to the light is good, the background color is white! ** THIS is where I got stuck, and I need to upload it in the next two daysHolding a photo of the household registration booklet, Ali Cloud manual video call verification, etc.

Domain name resolution

After everything goes well, we only need to do one thing — wait for the domain name to be filed through, and conduct the domain name resolution in Ali Cloud — pointing to the public IP address.

  • The domain name points to a public IP address. For details, see:Ali Cloud domain name purchase and DNS resolution tutorialNote: If you wish to enter the url isxuanland.cnThere is nowww, thenAdd records**@ A**www A

Enter ping (WWW.)xuanland.cn in CMD to display the received and sent packets. If the pointed IP is correct and 0% is lost, the resolution is successful.

(3) Pagoda panel

  • The pagoda – I would say the most important tool in the process, or the “operating system” of the cloud server. What do we do with pagodas? The entire process that requires the Linux command line to manipulate server files takes place in the pagoda visual interface – just as we use the mouse to manipulate files on Windows. So we can easily add the site (domain name) under the public IP address, the file under the IP address… In layman’s terms, by manipulating files in the pagoda, we can give our IP access something to render — and the content to render, which is Typecho in the next point. At the same time, the pagoda monitors cloud servers and files.
  • IP /8888 Log in to the pagoda panel and install itLNMPThese four letters are actually abbreviations for four words, as shown below:

  • After installing the “four great artifacts”, the operation is very simple and direct, we add the domain name in the website bar, generate its corresponding folder, as an example:

  • So we found xuanland.cn in the file bar, and this is the folder we need to operate our website in!! (I’ll call this a server file)

(4) Typecho

This section describes how to install Typecho

  • Typecho and WordPress are both very powerful, TC is simple, WP is cumbersome, but I prefer high-end pages, I still choose TC, focus on high quality blog content is the original intention. Typecho Download has found a download page that is easy to open… 100 YEARS LATER… Then unzip the zip locally to bring up a build folder and upload it to your server file in xuanland.cn, but! ** We need to cut all files in the build folder to the xuanland.cn folder and delete the empty build folder! ** All right, oak

Initial configuration on the web page

  • Since port 80 (default) has been enabled in the security group, enter the public IP address directly to access the Typecho official configuration panel.

  • 3306 Here note that the data port does not change can 3306 default, database information according to their own creation write, in the back need to register again an administrator user name & password, so must pay attention to remember the password ah, here has appeared four times to register pull!! Ok, no more words, I also found the password twice, people do not make mistakes, where to remember clearly/manual doge, of course, everyone in the registration of the time to use word record is the best.

Typecho Settings and templates

  • In fact, there is not much to talk about after success, which is actually what I am doing now, making some Settings within the Typecho administrator permission. ✌ with web theme templates, you can go to Typecho to find suitable ones, or find favorite templates through other channels. When it’s time to do freelance work, though, I actually spend the most time choosing templates. As the author said, I don’t like making choices, but I don’t regret making them. In fact, the style of the site has been very much in line with my aesthetic – simple and elegant. Here’s an optional image — a screenshot of this article on a computer port:

  • The template download is usually from Github clone or Baidu cloud disk download, often get a compression package. Zip, we decompress in the local, and then in the pagoda panel file to the entire template directory uploadwww/wwwroot/xuanland.cn/usr/themesBelow, if the suffix has-masterMay need to be deleted. Finally, the new template can be found in the appearance Settings of the blog site.
  • The image can be placed under usr, if placed in the outer folder, the image will not be found.

Plugins are plugins, but be careful to read the README of a template, because some templates have restrictions on plugins and configuration versions! For example, to port a template from WordPress to Typecho requires PHP7.0 or above. In my case, the result is — 500 ERROR!

  • Profile picture Settings – You need to upload your profile picture with a Gravatar, so that your profile picture will follow your associated email, including your profile picture on your own website and when you comment on other people’s posts.

About the profile picture setting, I think it is necessary to talk about in detail below!

(five) it is necessary to speak about blog avatar

  • First up, the official way — open up a universal Gravatar, sign up for a linked profile picture, and your profile picture will follow you through your email, as well as in other people’s comments. So, binding the avatar is necessary! However, in our personal blog, there is a major problem – it is too slow to pull your avatar from the avatar site! Extremely affect the viewing effect, so we take the following methods:
  • Directly change the code to where we need an avatar in our websiteStatic linkCan! Take this site as an example, first change the profile picture code in the abstract of each articleindex.php:

$this->author->gravatar $this->author->gravatar

  • Then modify click the profile picture to enterauthorThe large profile picture on the page, inindex.phpIn:

Replace the getGravatar() part of the code directly with a static link:

  • Finally, change the profile picture at the bottom of the pagepost.php, same as the first method:

Note that the class is written as it is, because the appropriate tag is selected and the size is appropriate.

  • This static link can be very quick to pull the avatar, of course willing to changeThem mirror image sourceFriends can also change their own try (I think the speed is still not satisfied)
  • Method of changing the image source: Find it in the root directory of the websiteconfig.inc.phpFile, and add the following code at the end for global configuration:
Gravatar Gravatar Gravatar Gravatar Gravatar
define('__TYPECHO_GRAVATAR_PREFIX__'.'https://secure.gravatar.com/avatar/');
Copy the code
  • In the theme ofUtils.phpYou can find it in the filegetGravatar()Function to change to a domestic mirror source:

  • Anyway, fumbling around in the code filectrl+FSearch keywordsauthor->gravatar/getGravatar()To change the image source or static link profile picture.
  • Common mirror source:
- source of them official WWW https://www.gravatar.com/avatar/ - them official cn source https://cn.gravatar.com/avatar/ - official them en source https://en.gravatar.com/avatar/ - official them secure source https://secure.gravatar.com/avatar/ - V2EX source https://cdn.v2ex.com/gravatar/ - Loli source https://gravatar.loli.net/avatar/ https://sdn.geekzu.org/avatar/ - geekCopy the code

(six) pseudo static site processing

The non-static url is verbose and contains index.php/1.html, when we only need 1.html. Go to the Pagoda and then tutorial as shown below:

The code in the figure is as follows:

    if(! -e$request_filename) {
        rewrite ^(.*)$ /index.php$1 last;
    }
Copy the code

Then enter the Typecho background – Settings – permanent link, open address rewrite, choose their favorite style can be. So web site appears concise some: http://www.xuanland.cn/Life/36.html

(7) Configure SSL for ACCESS from HTTP to HTTPS

First of all, buy the cloud shield SSL certificate of 0 yuan in Ali Cloud, and pay attention to buy the ha ha of 0 yuan, as shown in the following picture:

Then fill in the personal information, soon you can successfully apply for your SSL, in the certificate list to find download, then select your server type, I chose Nginx, then unzip the file, find KEY PEM, then open the website Settings in the pagoda website:

But!!!! Nginx error

To analyze this error – in the WWW/server/panel/vhost/nginx/xuanland. Cn. Conf line 5 appeared about serve_name problem, so we entered the nginx configuration file manually modify under!

“Serve_name” is the user name of the server: 5 serve_name root is the user name.

Back in the Typecho background basic Settings, change the website link to https://xuanland.cn to access! Visit again, the site in front of the unsafe has disappeared in the wind, mobile phone access is also a small green lock, Bingo!

If there is no small green lock in front of the url, then open the console F12, check ERROR, will not secure static links all change! Typecho also put in the background of the thumbnail URL also need to change! For example, I put all the image links change http://ip/x.jpg to https://xuanland.cn/x.jpg, little green lock! Resources: Pagoda Panel one-click SSL Certificate deployment, free CONFIGURATION HTTPS enable full-site HTTPS for your Typecho

Thank you very much

Guidance from Shaun and Jason_xy!

Iv. Relevant instructions

  • If you need to reprint, please contact the author (contact information at the top – me), thank you for your support!
  • If this article was helpful, please leave your footprints in the comments section!
  • If possible, please attach a link to this tutorial on your own blog. Thanks for your support
  • Welcome each other with links: blogger: Mr_zwX | URL: xuanland. Cn | image URL: xuanland. Cn/usr/head. The jp…

(and send me your nickname, blog, profile picture, address, one sentence introduction)