Build a personal blog Hexo+Fluid blog and deploy it to GitHub/cloud server (Alibaba Cloud/Tencent Cloud)

My blog is here! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! !

1. Install Hexo+Fluid locally (Windows10)

1. Install Nodejs on the official website (Node.js 12.0 and above are recommended)

NodeJs is a necessary environment for Hexo.

Click on the NodeJs official website , download the one on the left, download it and continue to next, select a folder location and continue to next to complete. Installing Node.js will include environment variables and npm installation.

Verify that the installation is complete and enter the command in cmd:

node -v
npm -v

Returning the version number indicates that the installation is complete.

2. Install git

Git is an open source distributed version control system for agile and efficient handling of projects.

Our website is built locally and needs to be synchronized to the cloud server or GitHub code base using Git. Click on the git official website to download the installation package. Click next, select the folder location, and then continue to next until the end. Just select the default configuration, which will configure the environment variables. After the installation is successful, right-click the mouse as shown in the figure:

3. Download and install the Hexo blog framework

Hexo is a fast, clean and efficient blogging framework. Hexo has official documentation. If you want to see the most detailed tutorial, you can go to the official website of HEXO . After the previous git and nodejs are installed, you can install hexo. You can create a folder HEXO first, then right-click git bash directly in this folder to open it, and enter the command:

npm install -g hexo-cli

If the download is too slow, you can change the source of Taobao and still use

hexo -v

Check the version, so far all installed.

Next, initialize hexo, right-click gitbash in the folder and enter the command:

hexo init blog

"blog" is the folder name of the blog you want to generate, you can name it according to your preference. The generated file is shown in the figure:

input the command:

hexo g
hexo s

After completion, open the browser and enter the address: localhost:4000 to see the blog you generated. Use ctrl+c to turn off the service.

After the local deployment is complete, you can only view the blog locally. We need to upload the code library to the cloud (cloud server or GitHub) to host your blog, so that others can access your blog at any time.

4. Install the fluid theme

Theme download: https://github.com/fluid-dev/hexo-theme-fluid

Unzip and copy to the blog root directory\themes directory, and change the name to fluid

Modify _config.yml in the blog root directory

theme: fluid  # 指定主题
language: zh-CN  # 指定语言，会影响主题显示的语言，按需修改

Personalize the theme page, and refer to the official documentation for more detailed instructions.

2. Host your blog on GitHub

1.GitHub generates a code base

First, you need a GitHub account. Click the + sign, select New repository, and create a new warehouse

Create a warehouse with the same name as your username, and add .github.io after it. Only in this way, it will be recognized when it is deployed to the GitHub page in the future, that is, xxxx.github.io, where xxx is your registered GitHub user name, click create repository.

2. Local SSH generates a key and copies the public key to the cloud

Back in the local host git bash, create a username and password

git config --global user.name "GitHub用户名"
git config --global user.email "GitHub注册邮箱"
git config --global user.password "GitHub登录密码"

Create an SSH key, press Enter all the way

ssh-keygen -t rsa -C "GitHub注册邮箱"

At this time it will tell you that the .ssh folder has been generated. Find this folder on your computer, in C:\Users\24714.ssh.
ssh, in simple terms, is a secret key. Among them, id_rsa is the private key of your computer, which is equivalent to a key, and id_rsa.pub is a public secret key, which is equivalent to a lock. You need to give the id_rsa.pub public key to GitHub so that you can use your private key to open the lock. When you can match each other, you can successfully upload your files to GitHub through git.

Copy the content in id_rsa.pub, and then in the setting of GitHub:

Click the setting option of SSH and GPG keys on the left, click New SSH key, and copy the information in your id_rsa.pub into it. Fill in the title casually, and copy the local public key to the key.

Detect whether the GitHub public key setting is successful in the local gitbash

ssh [email protected]

To log in for the first time, you need to enter your GitHub login username and password.

3. Modify the configuration file

The next step is to associate our Hexo with GitHub, open the configuration file _config.yml of the blog root directory of the site blog,
and finally modify it to: (note that the next three lines are indented by two spaces)

deploy:
  type: git 
  repository: https://github.com/lixinyiceline/lixinyiceline.github.io.git（改）
  branch: master

The content in the repository is the URL in the URL bar of the GitHub code warehouse browser. Note that .git is added after it to save the site configuration file.

4. Upload locally to GitHub

Local gitbash installs the Git deployment plugin

npm install hexo-deployer-git --save

At this time, we enter three commands respectively:

hexo clean 
hexo g 
hexo d

After completion, open the browser and enter the warehouse path of your personal website in the address bar, namely http://xxxx.github.io, and you will find that your blog is online and can be accessed on the Internet.

3. Host your blog on a cloud server

If the access speed of GitHub is slow, you can purchase cloud servers from major manufacturers and purchase domain names.
Friendly reminder: domestic domain name purchases need to be filed, and Alibaba Cloud servers need to be purchased for more than three months before they can be filed. It is a good deal to buy one year of Tencent Cloud 618 event!
The server is centOS 7.4, switch root account:

sudo su root

1. Install nodejs (the environment required by the HEXO framework)

curl -sL https://rpm.nodesource.com/setup_14.x | bash -
yum install -y nodejs

It is best to change 14 in setup_14.x to the latest stable version here, and execute after the installation is complete:

node -v 
npm -v

If the version number is printed, the installation was successful.

2. Install git and create a git account

yum install git

After installation, check the version

git --version

Create a git account

adduser git

Add user permissions

chmod 740 /etc/sudoers
vim /etc/sudoers

Add git ALL=(ALL) ALL in edit mode:

Change permissions back

chmod 400 /etc/sudoers

Set git account password

sudo passwd git

Switch to git user, create ~/.ssh folder and ~/.ssh/authorized_keys file, and grant corresponding permissions

su git
mkdir ~/.ssh

First go back to the local host gitbash to generate the key:

ssh-keygen

Back to the server, copy the public key in the id_rsa.pub file generated in win10 to authorized_keys:

vim ~/.ssh/authorized_keys

dG Select all to delete, paste the public key, press "esc", then press ":wq", save and exit. Enter the command to grant permission

chmod 600 /home/git/.ssh/authorized_keys
chmod 700 /home/git/.ssh

Test whether the public key is successfully deployed in local gitbash:

ssh -v git@自己的云主机IP

Appears: Welcome to Alibaba Cloud Elastic Compute Service ! Indicates success

3. Create a blog root directory

switch to root account

mkdir /home/www/website

As the Git warehouse directory, as the root path of the blog, grant permissions:

chown -R git:git /home/www/website
chmod -R 755 /home/www/website

4. Create a git repository

Now we want to create a git warehouse and create a new hook file post-receive for automatic deployment

cd /home/git
git init --bare blog.git

5. git warehouse synchronization blog root directory

Enter the following:

vi /home/git/blog.git/hooks/post-receive
git --work-tree=/home/www/website --git-dir=/home/git/blog.git checkout -f

Save and exit and grant executable permission to the file

chmod +x ~/blog.git/hooks/post-receive
chown -R git:git /home/git/blog.git/hooks/post-receive

At this point, the Git repository has been built.

6. Install nginx as our server

The installation execution command is as follows

yum install -y nginx

Start the server:

systemctl start nginx
systemctl enable nginx

After installing and starting the server, we have completed the first step, and now we can try to use our own computer to access the public IP of the server.
It can be found that the public network IP can open a default webpage of centos7.
We need to configure the configuration file of nginx, let the public network IP point to our blog,

vim /etc/nginx/nginx.conf

server { 
  listen              80; 
  listen              [::]:80;  
  server_name         换成自己服务器的IP; #域名或IP（改）
  root                /home/www/website; #网站目录（改）

Save and exit, restart the server

systemctl restart nginx.service

7. Modify the _config.yml file in the local hexo directory of windows10

deploy:
  type: git
  repository: git@服务器IP:/home/git/blog.git  #用户名@服务器Ip:git仓库位置（改）
  branch: master

8. Deploy to the server on the local gitbash

hexo clean
hexo g -d

This is a test, so you can see the deployed blog by entering your own public IP. The public IP needs to be bound to a domain name.

4. Typora+PicGo+Illustrator Editing Blog

Reprinted from https://blog.csdn.net/muxuen/article/details/122441469

Writing a blog generally uses markdown syntax. Typora is an editing software with a simple interface and easy to write. In the local markdown file .md, pictures exist in the form of "external links". address, where does the link go, and where does the picture really exist? The answer is the picture bed! Alibaba Cloud's OSS object storage and Tencent Cloud's cloud object storage are both cheap. We use Typora+Picgo+Picgo to create a blog. When we insert a picture into typora, PicGO will automatically upload the picture to the picture bed and return a link of the picture.

1. Download the software

Typora: https://typoraio.cn/ requires payment, you can find a free installation package online, you need to confirm that the typora version is higher than 0.9.86

PicGo：https://github.com/Molunerfinn/PicGo/releases

2. Configure Alibaba Cloud OSS

https://www.aliyun.com/product/oss

After activation, enter the console and create a bucket

OSS

Click Overview, view the bucket domain name, find the regional node, the first line of external network access, just copy oss-cn-beijing, no suffix is required

Find your picture bed "key", which is accesskey, click on the avatar in the upper right corner, accesskey management,

key

Click Continue to use Accesskey, create an accesskey, and remember your accessKeyId and accessKeySecret in the pop-up interface

The various charges of Alibaba Cloud OSS are independent!

For the picture bed, there are two forms of charging

Use storage capacity and traffic by recharging (default state)
Charged yearly/monthly, purchase a certain storage package. Traffic extra charge

In other words, even if you purchase the storage package shown below, you still have to pay for the traffic to access the picture bed!

3. Configure PicGo

Image bed settings

Select Alibaba Cloud OSS in the image bed settings, and fill in the information according to the following steps

Set Keyld: fill in the AccessKeyID just obtained
Set KeySecret: Fill in AccessKeyIDSecret
Set the storage space name: fill in the bucket name
Fill in here is the bucket name, not the domain name in the browser
Confirm the storage area: fill in your regional node, pay attention to the copied format
Specify the storage path: In fact, it is to customize the name of a folder, ending with /, it will automatically create a folder in your bucket, and upload the picture into it

e091468885207a9a953279b1c8848186

picgo settings

Turn on "Timestamp Rename" and "Automatically copy URL after upload"

4. Configure typora

Enter typora main interface, click "File-Preferences" in the upper left corner
select image
Upload image when inserting image
Tick all the options below
Upload service selection PicGo(app)
PicGo path: Find the installation path of picgo
, not the path of the installation package! ! ! !

202201041930644

5. You're done

After setting, we click Verify Image Upload option to verify. In daily writing, we only need to copy the picture and paste it in typora without dragging!

Six, Nginx configuration SSL certificate

Tencent Cloud Apply for Free SSL Certificate

After the application is completed, download it and choose the Nginx version.

After downloading and decompressing, you need two files, .key and .crt, a key and a certificate.

Deploy the SSL certificate to the server Nginx

Go to the /etc/nginx folder and generate a certificate folder to store the certificate and key

cd /etc/nginx
mkdir cert

vim generates two files, which store the key and certificate respectively, and copy the contents of the previously downloaded .key and .crt files into it

vim lixinyi.xyz.key
vim lixinyi.xyz_bundle.crt

Open the Nginx configuration file

vim /etc/nginx/nginx.conf

Comment out lines 38-57

Uncomment lines 61-91 to use encrypted server configuration instead. What needs to be modified are:

Add lines 64-65: add listening port 80, otherwise the mobile phone will not be able to access, this is a trap.

Line 66 server_name: Change to the domain name of your own website

Line 67 root: Change to the root directory of the website

Line 69: Absolute path to .crt

Line 70: Absolute path to .key

Save and exit, reload the Nginx configuration, and restart the Nginx server.

nginx -t
nginx -s reload
systemctl restart nginx

You're done! In this way, there is a small lock in front of our website!

Build a personal blog [build a Hexo+Fluid blog and deploy it to GitHub/cloud server (Alibaba Cloud/Tencent Cloud)]