My Hexo builds the blogging road

preface

I’ve always wanted to build a personal website, and when I learned that Hexo was a fast, simple, and efficient blogging framework, I couldn’t wait to try it out.

What is a Hexo

Hexo is a fast, concise, and efficient blogging framework. Hexo uses Markdown (or another rendering engine) to parse the article and, in seconds, generates a static web page with a beautiful theme.

Install Hexo

Before installation, you must check that the following applications are installed on your computer:

• Node.js
• Git

npm install hexo-cli -g
Copy the code

# Create a new website. If Folder is not set, Hexo creates the site in the current folder by default. $ hexo init <folder> $ cd <folder> $ npm installCopy the code

. ├ ─ ─ _config. Yml ├ ─ ─ package. The json ├ ─ ─ scaffolds ├ ─ ─ source | ├ ─ ─ _drafts | └ ─ ─ _posts └ ─ ─ themesCopy the code

$ hexo new [layout] <title>
Copy the code

$hexo g or $hexo generateCopy the code

Hexo d or hexo deployCopy the code

$ hexo list
Usage: hexo list <type>

Description:
List the information of the site.

Arguments:
  type  Available types: page, post, route, tag, category
Copy the code

$ hexo new [layout] <title>
Copy the code

default_layout: post
Copy the code

title: Hello World
date: 2013/ 7/13 20: captives
---
Copy the code

$ npm install hexo-deployer-git --save
Copy the code

title: Blogs of acc8226
description: a personal website of acc8226
author: acc8226
## Chinese simplified zh-cn, you can choose to change to en
language: zh-CN
timezone: Asia/Shanghai

Post_title: post_title: post_title: post_title: post_title: post_title
permalink: :category/:post_title/

## updated_option supports 'mtime' uses the last time the file was modified, and 'date' uses date as the value of updated. Can be used in Git workflow, 'empty'
updated_option: 'date'

# Code highlighting
highlight:
  enable: true
  line_number: true
  auto_detect: true

# paging
index_generator:
  path: ' '
  per_page: 5
  order_by: -date
Copy the code

# Mathematical formula support
math:
  every_page: true
# Only MathJax is enabled for now
  mathjax:
    enable: true
    tags: none
  katex:
    enable: false
    copy_tex: false
# Enable / Disable menu icons / item badges.
menu_settings:
  icons: true
  badges: true
# Sidebar Avatar
avatar:
  # Replace the default image and set the url here.
  url: #/images/avatar.gif
  # If true, the avatar will be dispalyed in circle. 
  rounded: true
  # If true, the avatar will be rotated with the cursor. Whether the mouse is rotated when placed on the head
  rotated: true
social:
  GitHub: https://github.com/acc8226 || fab fa-github
  #E-Mail: mailto:[email protected] || fa fa-envelope
  Weibo: https://weibo.com/u/1846300870 || fab fa-weibo
# Modify footer
footer:
  # Site start time
  since: 2018
  icon:
    # If you want to animate the icon, set it to true.
    animated: true
  # If not defined, `author` from Hexo `_config.yml` will be used.
  copyright: acc8226<br/><a href="https://www.upyun.com/?utm_source=lianmeng&utm_medium=referral"><img src="https://www.upyun.com/static/img/%E6%A0%B7%E5%BC%8F%E5%9B%BE.7cf927c.png width='34%' "/></a>
Copy the code

1. Hexo-src Specifies the address of the build project

Codeup.aliyun.com/5eacd743380…

2. Publish the Hexo blog’s · Cloud Effect Flow

Flow.aliyun.com/pipelines/1…

Building work

cnpm install hexo-cli -g
cnpm install

hexo clean
hexo g
Copy the code

Code upload, I’ve written two versions here. You can choose one as needed.

Mandatory upload version

git config user.name "flow"
git config user.email "[email protected]" 

cd public 
git init

git add . 
git commit -m "force push by flow"
git push --force  "https://${userName}:${accessToken}@${hostName}/${userName}/${repoPath}" master
Copy the code

Update bar record version based on previous version

git config --global user.name "flow" git config --global user.email "[email protected]" git clone "https://${userName}:${accessToken}@${hostName}/${userName}/${repoPath}" cd ${userName}/ git rm -rf . cp -r .. /public/* ./ git add . git commit -m "committed by flow" git push origin masterCopy the code

3. Publish a project using Gitee Page

Create a new target project: gitee.com/kaiLee/kaiL…

I can use username + accessToken to clone and other operations. After extracting a series of private variables

userName kaiLee
accessToken 70e185c4cc2d56418e1d2c8385bca1b7
hostName gitee.com
repoPath kaiLee.git
Copy the code

Transformed into this:

git clone https://${userName}:${accessToken}@${hostName}/${userName}/${repoPath}
Copy the code

New Article Example

Create from the command line:

Or create directories and files directly:

1. Establish \ source_posts \ demo \ demo. The md

2. Type the following

---
title: demo-title
date: 2020-12-12 17:15:55
categories:
- foo
- bar
---
Copy the code

According to the format of post.md

---
title: {{ title }}
date: {{ date }}
tags:
---
Copy the code

Add Categories and tags to the next topic

$ cd hexo-site
$ hexo new page tags
Copy the code

Edit a new page and change the type to tag, and the theme will automatically display the tag cloud on this page. The page content is as follows:

title: Tags
date: 2014-12-22 12:39:04
type: tags
---
Copy the code

Adding Categories is a similar approach

$ cd hexo-site
$ hexo new page categories
Copy the code

Edit a new page and change the type to tag, and the theme will automatically display the tag cloud on this page. The page content is as follows:

title: categories
date: 2014-12-22 12:39:04
type: categories
---
Copy the code

Add the about

The next theme adds a 404 page

Custom 404 pages

In the terminal, switch to the source folder of the site root directory. Create a new folder named 404 and create a new page in it:

$ cd hexo-site
$ hexo new page 404
Copy the code

If you want to enable Gongyi 404(Tencent’s service in China), please edit 404/index.md, like this:

---
title: '404'
date: 2014-12-22 12:39:04
comments: false
---
<script src="//qzonestyle.gtimg.cn/qzone/hybrid/app/404/search_children.js"
        charset="utf-8" homePageUrl="/" homePageName="Back to home">
</script>
Copy the code

Add 404 to the menu by editing the theme configuration file:

menu:
  home: / || fa fa-home
  archives: /archives/ || fa fa-archive
  commonweal: / 404 / || fa fa-heartbeat
Copy the code

Adding local search

Local Local Search Indicates the Local Search

$ npm install hexo-generator-searchdb
Copy the code

Add the dependent

# Local Search
# Dependencies: https://github.com/next-theme/hexo-generator-searchdb
local_search:
  enable: true
  # If auto, trigger search by changing input.
  # If manual, trigger search by pressing enter key or search button.
  trigger: auto
  # Show top n results per article, show all results by setting to -1
  top_n_per_article: 1
  # Unescape html strings to the readable one.
  unescape: false
  # Preload the search data when the page loads.
  preload: false
Copy the code

Some problems encountered during the period

Common problems with deploying Gitee Pages

How do I create a pages without a secondary directory on the home page, such as ipvB.gite.io?

You need to create a repository with the same name as your personal address. For example, gitee.com/ipvb, if you want to create your own site but don’t want to access it as a subdirectory, you want to access it directly with ipvB.gitee. He can then create a repository named ipvb gitee.com/ipvb/ipvb once deployed, it can be accessed as ipvB.gitee. IO.

When the project to be deployed is different from its own personal address, there are some resources to access 404 after the deployment is complete?

A: When the repository to be deployed is inconsistent with its own address, such as gitee.com/ipvb/blog, the generated Pages URL is ipvB.gitee. IO /blog, and the accessed resource is 404, such as ipvB.gitee. IO /style.css. This is because there was a problem with the relative path corresponding configuration file, the generated resource url should be ipvb. Gitee. IO/blog/style.css…. Just right. For the different static resource generators, the configuration is as follows:

The url and root of the Hexo configuration file _config.yml are modified as follows:

url: https://ipvb.gitee.io/blog
root: /blog
Copy the code

When if it is the establishment of the same name with their own individual address warehouse, there will be no problem. For example, kailee.gitee. IO/this address.

conclusion

The full tutorial is available on the Hexo website.