gitee build personal blog tutorial

Basic environment:

gitee account, git, node.js, npm, Typora (a higher version is required)

personal blog

Create warehouse

Create a warehouse with the same name as the account

The way to get the account name is as follows, remove the @ part.

Create a warehouse with the same name as your gitee account, so you can use https://account name.gitee.io/ to access.

insert image description here

Just fill in the warehouse name, but it is recommended to check the setting template---->Readme file.

insert image description here

Created successfully.

insert image description here

Apply for the Gitee Pages service in gitee

Before starting the Gitee Pages service, you need to set the warehouse created in the previous step as open source.

Enter the warehouse created in the previous step and enable the Gitee Pages service (a service that supports Jekyll, Hugo, and Hexo static websites).

Opened successfully.

insert image description here

Configure PicGo

Install PicGo
PicGo : a tool for quickly uploading pictures and getting picture URL links . Requires npm support, if not installed, please install it yourself.

download link

What I downloaded here is the download resource provided by Tencent Cloud COS, the version is 2.3.1. After downloading, double-click PicGo-Setup-2.3.1.exe and follow the next step.

insert image description here

Download gitee-uploader
Open PicGo installed in the previous step, search for gitee-uploader in the plugin settings, and download it.

insert image description here

Image bed settings

Repo
is a warehouse for storing pictures. It is recommended to create a new one. Requires an open source library.
The branch in the branch
repo that needs to use resources. Usually master.
token
Apply for a private token and copy the generated token.

insert image description here

Path is
the folder where the pictures are stored. It is not required to fill in. If it is not filled, it will be in the root directory of the warehouse. I created an images folder here.
The format of the message displayed when customPath
submits the picture, I choose the default here. You can leave it blank.
customUrl
image path, you can leave it blank.

Finally click OK.

Set Typora

Self- download and install without Typora installed . I am using the 1.4.8
menu bar file---->preferences---->image
insert image description here

Integrate Hexo

Install Hexo
Hexo Official Documentation
Hexo depends on node.js (npm) and Git, which needs to be installed in advance. Not installed, you can Baidu by yourself.
If Node and Git have been installed, execute the following command under node_modules of node (that is, where your node downloads resources):
```
npm install hexo-cli -g
```

insert image description here

After the installation is complete, add the bin directory where hexo is located to the Path environment variable.
insert image description here

use hexo
- create a project
```
hexo init blog
```
You can see that the blog directory has been generated.

insert image description here

create a blog

Enter the project created in the previous step and create a blog.

cd blog
hexo new helloKiwi

insert image description here

Open D:\develop\nodejs\node_modules\blog\source_posts\helloKiwi.md and write a blog post.

insert image description here

Install hexo-deployer-git
```
npm install --save hexo-deployer-git
```

insert image description here

Before publishing the application,
you need to modify the related configuration of blog_config.yml.

author: kiwi
# https://你自己仓库的账号名.github.io/博客的仓库名
url: https://xiaomaer-sss.gitee.io/xiaomaer-sss
deploy:
  type: 'git'
  repo: [email protected]:xiaomaer-sss/xiaomaer-sss.git
  branch: master

Note: repo needs to use the ssh clone address. For the method of setting ssh , refer to my process of setting gitlib's ssh.

refresh app
```
hexo clean && hexo g && hexo d
```
$[External link picture transfer failed, the source site may have an anti-theft link mechanism, it is recommended to save the picture and upload it directly (img-5dXXfe8O-1673747604649) (E:\Study Notes\December 2022 Learning Notes\gitee Building a Personal Blog Tutorial .assets\image-20230114012526093.png)]$
View repository files

view personal blog

Visit https://xiaomaer-sss.gitee.io after updating the Gitee Pages service

insert image description here

So far, building a personal blog based on gitee is complete.

Welcome everyone to visit my personal blog , and I will continue to update it in my personal blog in the future, so stay tuned...