tag

- hexo
- gitee
- blog
Copy the code

preface

For personal blogs, there are several ways

1. Use third-party servers (hosting) such as Github, Gitee,coding and other code hosting providers

2, buy your own server is not recommended for personal blogs, just the display of the article is enough

Since Github has a slow access speed in China, this article shows that hexo blog is built by using Gitee (code cloud) as a server. Both Github and Gitee have a xxxPage function, which is intended to display project content, so that it can be used for personal blog display

Build hexo blog using Gitee

Setting up local services

1. Prepare the environment

Prepare to download node.js and Git clients

  • Node.js is used because hexo is rendered based on Node.js
  • Use gitbash in Git for file downloading, configuration, and publishing to a remote repository

We need NPM to download the required packages or plug-ins

Test whether the NPM downloads well

$ npm -v
2.3.0  
Copy the code

⚠️ If the version number is displayed, the NPM is successfully installed

Once downloaded, you will find the Linux command line environment, and the following commands will be executed on git bash, remember ❗❗❗

2. Download Hexo

Before downloading and installing Hexo, test NPM and Node.js again to see if they are configured to execute

Node.js - NPM - NPM - NPM - NPM - NPMCopy the code

The effect

3. Run the following command to download the CNPM

npm install -g  cnpm --registry=https://registry.npm.taobao.org 
Copy the code

Hexo (hexo, hexo, hexo, hexo, hexo, hexo

4. Officially download Hexo

cnpm install -g  hexo-cli 
Copy the code

Note that this process may take some time, depending on the network speed

Test whether the download is good

hexo  -v  
Copy the code

The following output shows the version number and Node version number

5. Install Hexo

On the local PC, select a disk and create a folder for storing blogs. For example, select system drive F and create a folder for storing blogs

CD /F/ # this is the command to switch to drive F PWD # this is the command to check whether in drive F blog # this is the command to create a blog name file in drive FCopy the code

⚠️ Note: this new blog directory is the root directory of the entire blog. If you have any problems later, delete this directory directly. again

Initialize the Hexo blog

Hexo init # After executing this code, a default topic and default article are automatically downloadedCopy the code

If initialization fails, it may be that the package management dependency is not installed and the dependency is re-downloaded

npm install # download NPM
Copy the code

7. Launch your first Hexo blog

Create a new Markdown article

hexo new  "xxxxx"
Copy the code

XXXX is the title of the article for example

Hexo New "This is my first article"Copy the code

The Hexo blog is written in Markdown format, which can be interpreted as a text document format similar to TXT, so create a new Markdown document called “This is my first post”

This post will be saved in the source/_post/ file at the root of the blog

Use the vscode editor to open the blog root directory

This section describes the common commands of hexo

Hexo Clean # Empty existing hexo website files Hexo Generator # (also short for hexo G) Start web files and new CSS styles to generate new files Hexo Sever # (short for Hexo S) Start local services, You can view a preview of locally generated files on port localhost:4000 (this is a check before publishing to the remote end)Copy the code

8. Preview local blog posts

perform

Hexo Clean Hexo g # Generate blog file (CSS, JS...) Hexo S # launches the local preview serviceCopy the code

This completes the local preview. If you have any problems, delete the blog root. Redo can ❗

Deploy to a remote repository

Blogs can be accessed by address

1. Configure Gitee and the local computer

Open gitee’s official website to register or log in

Follow these steps in turn

⚠️ this public key functions as a local and gitee pass, so that the next time you upload to Gitee, you do not need to enter a password or anything ⚠️ note that you must add a personal public key, the fifth step to add a personal public key, this is a write permission public key, not the first page read-only public key if you do not do this, Then the server Gitee will not be deployed

How to add a public key? Click How to Obtain a Personal Public key

Launch gitee Page to publish files

2. Configure the local Hexo blog file

Use the editor to open the corresponding blog root directory /blog/config.yml using the vscode editor

Click on the config.yml file in the root directory

⚠️ here repo: XXXXX XXXX is the clone/download SSH or HTTPS path of the repository not the path of the repository gitee.com/ username/repository name so

SSH Git: [email protected]: user name/repository name Git: Https: https://gitee.com/ User name/repository name gitCopy the code

So add git to the end of your git deployment directory

You can find the relevant information on the Gitee page first go to the warehouse https://gitee.com/ username/warehouse name and find the button as shown below

1 the pit

⚠️ note the config.yml file

#URL
##If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: https://gitee Username.giee. IO /
root: /
Copy the code
https://gitee Username. Gizee. IO is the site addressCopy the code

If root is set to /, blogs are located in the subdirectory of the site. You need to add a/subdirectory, that is, the user name https://gitee. You can go directly to the site to visit the blog https://gitee username.gizee.io

Warehouse Address: https://gitee.com/gitee Username/username Site address: https://gitee username.gitee. IO (here my warehouse name and gitee username have the same name)

The site address is actually the site address displayed after the “Gitee Page” is launched/updated, and is used to access the blog, so the last blog access is to https://gitee username.gitee.io

GiteePage. IO is the giteePage service for displaying HTML files

If the URL and root fields are not configured, there may be a web page can not be accessed, we must pay attention to the trouble, so simply like GitHubPage mandatory use of the same name of the account to create a new website warehouse, so also obtained by account name characteristics of the unique domain name, kill two birds with one stone!

Pit 2

#Deployment
##Docs: https://hexo.io/docs/deployment.html
deploy:
  type: git
  repo: [email protected]: user name/repository name git
  branch: master
Copy the code

⚠️ Note each: follow with a space (this is required by the YAML file format)

There are two addresses to know:

  1. Git deployment directory = URL = Gitee Pages preview URL
  2. The warehouse address

3, deployment,

Switch to the root directory in the COMMAND line window

hexo clean
hexo g
hexo d     Deploy to gitee remote
Copy the code

You’ll notice that the deployment failed. I also need to download the Git plug-in and run it under Gitbash before deploying to the remote end

cnpm  install --save hexo-deployer-git
Copy the code

After the installation, perform the above operations. After hexo D, the first time you might want to authenticate SSH, enter the email address and username

Again, hexo d okay, go to your browser and type in the static website address

Examples of Butterfly blog topics

⚠️ At this time the blog is the default theme, not beautiful, you can use other third party theme or web can be customized style

Related articles:

  • Gitee Hexo blog deployment
  • Deploy local files to Gitee
  • Jane books the use of Markdown syntax
  • Super useful blog writing framework