Personal blog building notes

In the spirit of sharing for fun, I will record the specific steps I took to build this blog as detailed as possible below. This is a huge project, which will involve many unknown fields. I will take the method, idea and behavior of my blog building at the beginning as a benchmark, and try to simplify those steps as much as possible.

That is, do not consider too many principles, as long as you know how to operate.

Some are out of date. It is not recommended to refer to

Basic concepts

visit Sound of beginning , you need to enter in the browser himiku.com , browser via Domain name resolution service Query the above website directive IP address by 192.168.xx.xx , and IP address And The server Binding, accessing the IP is accessing the server. The server Query to www.himiku.com The point is Typecho This one Blog program So all the files that can be displayed in this directory are returned. Finally, the blog program returns the content to the visitor and displays it on the browser.

Some basic concepts include: domain name, server, domain name resolution service, IP, blog program, and running environment. That is:

1. Domain name= himiku.com
2. Server=Linux system (my system is Ubuntu)
3. Domain name resolution service=DNSPOD, or other
4. IP = 192.168.xx.xx
5. Blogger=Typecho
6. Running environment=LNMP (Linux+Nginx+MySQL+PHP)

The things we need to buy are: domain names, servers, domain name resolution services (generally, domain names are provided for free, of course, there are also paid ones, but the free ones are enough, as if there is a lot of nonsense).

The domain name and server can be purchased directly from the ECS manufacturer, and then the network environment can be deployed on the server. The subsequent installation of blog programs is very simple.

Purchase server

There are too many server platforms, including Amazon, Tencent Cloud, Alibaba Cloud, Google, VULTR, movers, and Linode. How to buy is of course your choice, but if you just want to play or write logs, you can give priority to domestic servers. Just pay attention to buying and using Located in China The domain name needs keep on record 。 If you don't like filing, you can buy servers located abroad.

Let's introduce Tencent Cloud and Alibaba Cloud The general purchase process. After registration, remember the IP address and secret key or password 。

Tencent Cloud

Follow the official steps to create an account, real name system and complete student certification. If you don't mind, you can pass my Invitation link Register an account.

If you are over 18 years old, a college student, and willing to make a real name system and file, you can purchase Tencent Cloud's student machine. Student machine purchase entrance: https://cloud.tencent.com/act/campus

Personally, I recommend buying a "lightweight application server with one core and 2G". Although the only available regions are Shanghai and Beijing, the upload bandwidth is "5M". The system first selects "CentOS", which can be changed after purchase.

Open lightweight application server Console , click in.

Then find "Application Information" and click "Reset Application".

Select Ubuntu 20.04 LTS.

If the domain name has not been filed or does not want to be filed, you can consider purchasing servers in overseas regions. Purchase address: https://buy.cloud.tencent.com/lighthouse

One core 1G configuration is enough at the beginning. The region can be Hong Kong or Singapore, China, and the mirror image can be selected Ubuntu 20.04 LTS The minimum configuration is 24 yuan a month, and 30M bandwidth is enough.

You can use mine if you don't mind Promotion link Purchase.

Alibaba Cloud

AliCloud student machine, formerly called "Cloud Wing Plan", is now renamed "Developer Growth Plan".

Purchase entrance: https://developer.aliyun.com/plan/grow-up

Follow the official steps to create an account, real name system and complete student certification. If you don't mind, you can pass my Invitation link Register an account.

Choose "lightweight application server" when purchasing, and the bandwidth is relatively high. Choose "System image, Ubuntu 20.04" for the pre installed environment. The region is optional, and it is better to be close to yourself.

If you don't want to buy a student computer or file it, you can also directly buy a lightweight computer: https://www.aliyun.com/product/swas

Choose "Hong Kong, Ubuntu 20.04".

Connect server

Use Xshell

use SSH connection tool To connect to the server, consider using Xshell 。 After downloading and installing, enter the software and click the upper left corner file ， newly build One conversation 。

As shown in the figure above.

1. stay host Fill in the IP address
2. The default port number is 22. Don't worry
3. Then click connect The pop-up will be confirmed directly
4. The user name is generally root , but Tencent Cloud use Ubuntu Instance created by image, disabled by default root The user logs in with a password, so the user name must be filled in ubuntu
5. The password is given by the host company, and it is also filled in. If the key is given, download it from the host company, import it into the Xshell, and then select the key to log in.

Use Visual Studio Code

Download and install Visual Studio Code: https://code.visualstudio.com/ , open, find Extensions , click Install Extension.

search chinese , install Simplified Chinese, and restart Visual Studio Code; Re search ssh , found Remote - SSH , install. After installation, there is one more on the left Remote Explorer 。 Then go to Remote Explorer Settings.

Click Remote Explorer and the following figure will appear.

Click the set gear and a prompt will pop up Select SSH confiquration file to update 。

Select first C:\User\xxx\.ssh\config , fill in the connection configuration.

Host The name is arbitrary, HostName namely ip Address; Port The default port is 22; User For user name, if it is a key login, set the key and config Files in the same location, such as

 Host ubuntu HostName 192.0.0.1 Port 22 User root IdentityFile ~/.ssh/id_rsa

Log in using SSH KEY

Tencent Cloud Not enabled by default root The user must enable it.

Use first ubuntu And set the password to log in to the server

 ssh  ubuntu@192.188.1.1

The first connection will require confirmation and complete input yes , press Enter, and then enter the password.

The input password is completely invisible and can be copied and pasted. Right click to paste in Windows terminal.

Then switch to root

 sudo su root

May be similar /home/ubuntu/ Directory, you need to switch to root Only in the directory

 cd

Then modify /etc/ssh/sshd_config

 vim /etc/ssh/sshd_config

vim The basic usage of is to press i Start input, adjust the cursor position with the direction key, and press esc Key to exit input, input :wq preservation. Find the following things and change them into yes , if there is # Just remove it.

 RSAAuthentication yes PubkeyAuthentication yes PermitRootLogin yes

restart ssh

 sudo service ssh restart

Then log in again and use root The user logs in and starts to create the key

 ssh-keygen -t rsa -b 4096 -C " your_email@domain.com "

your_email@domain.com Fill in your email and press Enter for all prompts until prompted

 Your identification has been saved in /root/.ssh/id_rsa Your public key has been saved in /root/.ssh/id_rsa.pub

That means the creation is completed, where, id_rsa Is a private key, id_rsa.pub Is the public key.

Then install the public key on the server

 cd .ssh cat id_rsa.pub >> authorized_keys

use xftp or vscode Download the private key.

Confirm that the private key is saved locally, and then delete the private key on the server

 rm id_rsa

Then use the key to log in. If you successfully log in with the private key, modify the /etc/ssh/sshd_config , disable password login

 PasswordAuthentication no

Finally, restart the SSH service:

 sudo service ssh restart

Deploy network environment

There is a suspected poisoning event in lnmp.org（ Portal ）, please use with caution.

Because I don't like pagodas, but I don't install Nginx, MySQL and PHP one by one, I recommend using LNMP one button package 。 There are also many basic requirements for installing LNMP 1H2G、Ubuntu 20.04 On the premise, install the latest version of LNMP.

Log in to the console and switch to root user

 sudo su root

Basic system environment under update

 apt update && apt upgrade -y

Software on which the installation point is based

 apt install -y wget git zip curl

Clean up the garbage

 apt autoremove

install screen

 apt install -y screen

Start a new window

 screen -S lnmp

If the network is disconnected, execute screen -r lnmp , you can return lnmp Installation process

install LNMP It's a big play. Let's take it step by step. The command here is to install 1.8beta Version. If there is an update, please install the latest version.

 wget  http://soft.vpser.net/lnmp/lnmp1.8beta.tar.gz  -cO lnmp1.8.tar.gz && tar zxf lnmp1.8.tar.gz && cd lnmp1.8 && ./ install.sh lnmp

If the machine configuration is not enough, MySQL 5.7.34 That's enough. input four , enter.

Tips Please setup root password of MySQL. , meaning input MySQL Of root The user password can be defaulted by the script and changed later. Enter directly.

Enabled by default, enter.

come PHP 。 because Typecho Of PHP 8 The compatibility of is not very good, and many topics are not supported yet PHP 8 , so enter here ten , and then enter.

This also defaults to Enter.

Then the process is over. Prompt Press any key to install... or Press Ctrl+c to cancel , continue to enter, and the script will be automatically installed Lnmp 。

For more detailed steps, refer to the official Installation method 。

It takes a long time to install LNMP. You can register the domain name at this time.

Register domain name

There are many choices for domain name purchase. If you just build a blog, you can register in China because it is cheaper. If you want to write something wrong, you should choose a foreign domain name provider, which is more appropriate. Specific self inspection.

Take Tencent Cloud as an example, go straight to https://dnspod.cloud.tencent.com , registration is over.

Domain name suffix, preferred .com 、 .net And other mainstream common domains. Not recommended .xyz , because Baidu does not include or very slow to include; Not recommended .top , because it is worn out, I don't think it looks very good.

Set domain name resolution

With the server and the domain name, the next step is to set the domain name resolution and connect the domain name to the server. Take Tencent Cloud as an example.

Go straight https://console.cloud.tencent.com/cns , find the domain name you registered in Tencent Cloud, click Add domain name resolution 。

With my himiku.com For example, the host record is filled www , the record value is filled in the above IP address 。 Then save it.

So your blog link is www.himiku.com. If you want blog links to appear as himiku.com , fill in @ 。 Or put @ Turn it into your personal homepage with blog.himiku.com It is also a good choice.

Install Blogger Typecho

1. Download Typecho

If you have already installed LNMP and set the resolution, you can install the blog program first. Here we need Xftp ， Xftp Follow the above Xshell It belongs to one company. Download it yourself. The login steps are also Xshell The same, turn it up and look again.

After logging in, the default is /root Catalog, let's go back Root Path It usually looks like this.

My screenshot is incomplete, regardless of him. get into /home/wwwroot Directory. The header here is the root directory of the website you created in LNMP.

Then download the blog program. reach Typecho official website Download the development version directly. The official version has many problems, but the development version is better. Then decompress. What you get is a build The folder contains such things.

Drag these things directly into the root directory of the website! But you'd better change your name, such as blog It's easy to remember, just like this.

There is a disadvantage of the folder dragged in directly. Its owner is root , Xftp will display, and you can see it after a good search. Here we need some commands to change their owner to www 。 Please enter the following command in the Xshell:

 chown www:www -R /home/wwwroot/blog chmod 755 -R /home/wwwroot/blog

-R Follow the path of your blog. If the blog program directory is not called blog , change it yourself. The same is true for subsequent plug-ins. Repeat the above operation and set the blog directory.

2. Create database

Because one step in LNMP's official virtual host adding tutorial is to add a database with the same name, but if you follow my method directly, it is equivalent to skipping, so you need to manually create the database.

If you have just installed LNMP, visit Http://your ip/phpmyadmin/ , enter the login page of phpMyAdmin, and fill in the user name root , the password is set when you install LNMP. Recommend renaming phpMyAdmin This folder makes others can't guess what it is.

Then click New on the left and fill in the database name on the left, as shown in blog , default selection on the right utf8mb4_general_ci , click Create.

3. Install Typecho

In normal order, the domain name should be added to the server before the installation interface can be opened.

If you want to test connectivity first, you can temporarily modify the default default folder. Rename this folder to another name, and then create the new blog Folder renamed to default , you can directly access the initial settings of the IP start Typecho.

Pay attention to the original default In folder phpMyadmin The folder is also moved to your typecho folder.

As shown in the figure, the database adapter, database address, and database port remain default, and the user name is root ， Database name It is the newly created database above, such as blog 。 Database code Modify to utf8mb4 , others remain default.

Be sure to select utf8mb4 , otherwise it will be used later emoji Will crash the database.

If you press OK, a prompt pops up saying:

This is the reason why the permission of the blog program is not enough. New is not recommended config.inc.php For files, permissions should be granted to prevent such problems from occurring later.

If your blog path is /home/wwwroot/blog , then:

 chown www:www -R /home/wwwroot/blog

This completes the initial installation of the blog.

Then a new blog appeared!

Add domain name to server

It is recommended to refer to the official website of LNMP first: Tutorial on adding and deleting virtual hosts and pseudo static use of LNMP

get into /usr/local/nginx/conf/vhost This directory (you can copy and paste it into the address bar, press Enter to enter directly), and create a new domain name configuration .conf You can also create the file locally on your PC and upload it to the server. Take my domain name as an example, such as www.himiku.com.conf 。

Use the editor (recommended Visual Studio Code ）Open this file, copy the following contents, and modify the domain name configuration in line 5, the path configuration of the blog program in line 7, and the domain name in line 35.

 server { listen 80; #listen [::]:80; server_name www.himiku.com himiku.com; index index.html index.htm index.php default.html default.htm default.php; root  /home/wwwroot/blog; #error_page   404   /404.html; # Deny access to PHP files in specific directory #location ~ /(wp-content|uploads|wp-includes|images)/.*\.php$ { deny all; } include rewrite/typecho.conf; include enable-php-pathinfo.conf; location ~ .*\. (gif|jpg|jpeg|png|bmp|swf)$ { expires      30d; } location ~ .*\. (js|css)?$ { expires      12h; } location ~ /.well-known { allow all; } location ~ /\. { deny all; } access_log  /home/wwwlogs/www.himiku.com.log; }

Wherein, Line 13 include rewrite/typecho.conf; It is a pseudo static content. After adding it, you can remove the index.php 。

Then enter the ssh console and enter the following command to restart Nginx

 lnmp nginx restart

Request SSL Certificate

1. Deploy certificate issuing service

For more details acme.sh Please refer to Official Tutorial 。

install acme.sh

 curl   https://get.acme.sh  | sh

 export DP_Id="123456" export DP_Key="sADDsdasdgdsf"

 acme.sh --issue --dns dns_dp -d himiku.com -d '*.himiku.com'

 acme.sh  --installcert  -d  'himiku.com'   --key-file   /usr/local/nginx/conf/ssl/himiku.com/himiku.com.key --fullchain-file /usr/local/nginx/conf/ssl/himiku.com/fullchain.cer --reloadcmd  "lnmp nginx restart"

 acme.sh --issue --dns dns_dp -d himiku.com -d '*.himiku.com' --keylength ec-256

 acme.sh  --installcert  -d  'himiku.com' --ecc   --key-file   /usr/local/nginx/conf/ssl/himiku.com/himiku.com_ecc.key --fullchain-file /usr/local/nginx/conf/ssl/himiku.com/fullchain_ecc.cer --reloadcmd  "lnmp nginx restart"

 acme.sh --renew-all

 acme.sh  --upgrade  --auto-upgrade

After that, you need to generate a dhparam.pem File to increase security.

 openssl dhparam -dsaparam -out /usr/local/nginx/conf/ssl/dhparam.pem 4096

2. Nginx configuration file modification

After the certificate is issued successfully, you need to modify the configuration file and force the https 。 Directly replace the original file without certificate, and fill in the following contents. Also, some places need to be explained when modifying the domain name.

• The function of line 5 is to access http://himiku.com or http://www.himiku.com Will jump to https://himiku.com
• The purpose of lines 11-13 is to access https://www.himiku.com Will be forced to jump to https://himiku.com
• Line 17-19 is part of the certificate. Please modify it according to your certificate location and name
• Line 26 is used to enable HSTS. See the following figure for specific functions: Xiaozhan has joined the HSTS Preload List , can be deleted if not needed

 server { listen 80; listen [::]:80; server_name himiku.com www.himiku.com; return 301  https://himiku.com $request_uri; } server { listen 443 ssl http2; listen [::]:443 ssl http2; server_name himiku.com www.himiku.com; if ($host = 'www.himiku.com') { return 301  https://himiku.com $request_uri; } index index.html index.htm index.php default.html default.htm default.php; root /home/wwwroot/blog; ssl_certificate /usr/local/nginx/conf/ssl/himiku.com/fullchain.cer; ssl_certificate_key /usr/local/nginx/conf/ssl/himiku.com/himiku.com.key; ssl_session_timeout 5m; ssl_protocols TLSv1.2 TLSv1.3; ssl_prefer_server_ciphers on; ssl_ciphers "TLS13-AES-256-GCM-SHA384:TLS13-CHACHA20-POLY1305-SHA256:TLS13-AES-128-GCM-SHA256:TLS13-AES-128-CCM-8-SHA256:TLS13-AES-128-CCM-SHA256:EECDH+CHACHA20:EECDH+CHACHA20-draft:EECDH+AES128:RSA+AES128:EECDH+AES256:RSA+AES256:EECDH+3DES:RSA+3DES:!MD5"; ssl_session_cache builtin:1000 shared:SSL:10m; ssl_dhparam /usr/local/nginx/conf/ssl/dhparam.pem; add_header Strict-Transport-Security "max-age=31536000; includeSubDomains; preload" always; include rewrite/typecho.conf; # Deny access to PHP files in specific directory #location ~ /(wp-content|uploads|wp-includes|images)/.*\.php$ { deny all; } include enable-php-pathinfo.conf; location ~ .*\. (gif|jpg|jpeg|png|bmp|swf)$ { expires 30d; } location ~ .*\. (js|css)?$  { expires 12h; } location ~ /.well-known { allow all; } location ~ /\.  { deny all; } access_log /home/wwwlogs/himiku.com.log; }

Note: After modifying the domain name configuration file, you can test whether there are errors

 nginx -t

Restart the Nginx service after no error

 lnmp nginx restart

About Typecho Settings

Site name, link settings

For site name and link settings, see Setup → Basic To modify. For example, the name of this site is "Initial Voice", which is described as "Listen to the initial voice in your heart", and the site is described as "Initial Voice, Blog". These settings are not only displayed on the home page, but also available for search engines.

Customized articles, independent pages, classified paths

stay Set → Permanent Link You can set custom articles, independent pages, and classification paths in. This site uses Wordpress style/archives/{slug}. html Link settings for. This style of link has one advantage, slug It can be modified by itself. Links are not simply digital displays. Default style cid It cannot be changed. However, each has his own needs.

Other independent pages and classification paths are default.

It should be noted that once the link format is determined, it should not be easily modified, unless you don't care about the pages that have been captured and displayed by search engines.

Website Logo

The logo of the website is a favicon.ico File, prepare a square or circular picture, search for "favicon making", and rename the conversion result to favicon , put this file in the blog root directory.

Refresh blog, press ctrl+shift+R , it will be displayed in the address bar after refreshing.

Personal portrait and nickname

The profile is set in Console → Personal Settings The password is reset here.

Pseudo static

Previously, pseudo static configuration was added to the Nginx configuration file. The pseudo static of Typecho is mainly used to remove the index.php , we need to Set → Permanent Link Enable this feature in. However, after enabling, you will be prompted that the detection of rewriting function failed. If you are sure that you have added pseudo static, you can directly check Enable and ignore this error.

Installing plug-ins

Take blog directory as blog The plug-in is stored in /home/wwwroot/blog/usr/plugins , drag all downloaded plug-ins to this header, and grant www:www Authority seven hundred and fifty-five jurisdiction. Note that the compressed package should be decompressed and uploaded.

 chown www:www -R /home/wwwroot/blog/usr/plugins chmod 755 -R /home/wwwroot/blog/usr/plugins

The recommended necessary plug-ins are:

1. Sitemap : for search engine capture
2. ExSearch : The necessary search plug-in for VOID topics
3. Mailer : Comment email reminder plug-in

For other plug-ins, please refer to the Plug in List 。

About VOID Topic Settings

If you refer to this site and also use the VOID theme, some settings will not be set without viewing the document. This part is added on the basis of your laziness.

file

stay Management → Independent Page Create a new page named "Archive" in the address bar and modify it to archives , right Custom Template Select Archives.

Friendly chain

stay Management → Independent Page Create a new page named "Friendly Link" in the address bar and modify it to links 。 The format of the friend chain is as follows:

 Because these codes will be parsed directly if the VOID theme is used, please remove the '#' symbol in the following codes. [#links] [Blog name] (Blog link)+(avatar link) [#/links]

Super Advanced Settings

There are "Super Advanced Settings" in the theme settings. Found in theme file advanceSetting.sample.json This file contains the description of super advanced settings. The settings of the height and font of the head map are all in it, which is very detailed.

Here is an example. Set the desktop end map height to account for 100, the mobile end map height to account for 30, the navigation bar mode to be fixed, and the image title will be displayed below the image.

 { "desktopBannerHeight" : 100, "mobileBannerHeight" : 30, "headerMode": 1, "parseFigcaption": true }

Typecho topic recommendation

• franco:

  1. VOID： https://blog.imalan.cn/archives/247/
  2. RAW： https://blog.imalan.cn/archives/163/
  3. Aria： https://eriri.ink/archives/Typecho-Theme-Aria.html
  4. Moricolor： https://yumoe.com/archives/moricolor.html

• Paid:

  1. Mirages： https://get233.com/archives/mirages-intro.html

  2. Handsome： https://www.ihewro.com/archives/489/

     other

     Blog picture problem

It can be uploaded directly in the blog, but later maintenance is troublesome, so it is recommended to use the public map bed or Self built map bed , specific self inspection.

Markdown syntax problem

Refer to: Common Markdown Syntax

Direct access to IP address

In the environment created with LNMP script, access to the IP will jump to the introduction page of LNMP and change it.

open /usr/local/nginx/conf/nginx.conf , replace the

 server { listen 80 default_server; #listen [::]:80 default_server ipv6only=on; server_name _; index index.html index.htm index.php; root  /home/wwwroot/default; ellipsis access_log  /home/wwwlogs/access.log; }

Comment out or delete it directly.

That's about it. We have a question to leave a message.

Author: mikusa

Link to this article: https://www.himiku.com/archives/build-a-personal-blog.html

Source of cover: I watched the fireworks bloom and watched them cool/ Painter JW # Pixiv

Copyright notice: Unless otherwise stated, all articles are my own creation. Please contact the author for reprinting and quotation, and indicate the source (author, original link, etc.).