hexo博客的安装和使用

发表于 更新于 分类于 ， ， 阅读次数： Waline： 本文字数： 5.3k 阅读时长 ≈ 5 分钟

1. 安装

1.1 初始化

  • 新建项目
1
2
3
4
5
mkdir dohttp && cd dohttp
hexo init
git init
git remote add origin git@github.com:unix2dos/dohttp.git
git push --set-upstream origin main
  • .gitignore
1
2
3
4
5
.DS_Store
Thumbs.db
db.json
*.log
node_modules/
  • 主题
1
2
3
4
5
6
7
8
git submodule add https://github.com/theme-next/hexo-theme-next themes/next

cat themes/next/_config.yml >> _config.yml

mv _config.yml source/_data/next.yml
vi source/_data/next.yml

#theme:next
  • 本地启动
1
2
3
4
hexo new post hello  

# 随便写点东西, http://localhost:4000/
hexo server --config source/_data/next.yml

1.2 基础配置

  • 标签
1
2
3
4
5
6
7
8
hexo new page tags

vi source/tags/index.md
title: 标签
date: 2014-12-22 12:39:04
type: "tags"
comments: false
---
  • 分类
1
2
3
4
5
6
7
8
hexo new page categories

vi source/categories/index.md
title: 分类
date: 2014-12-22 12:39:04
type: "categories"
comments: false
---
1
2
3
4
5
menu:
  home: / || fa fa-home
  Life: /categories/life || fas fa-feather
  Note: /categories/note || fas fa-horse-head
  Study: /categories/study || fas fa-dragon

2. 插件

2.1 插件库

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
# 分享按钮
git clone https://github.com/theme-next/theme-next-needmoreshare2 source/lib/needsharebutton  

# 丝带
git clone https://github.com/theme-next/theme-next-canvas-ribbon source/lib/canvas-ribbon

# 蜘蛛网
git clone https://github.com/theme-next/theme-next-canvas-nest source/lib/canvas-nest

# 三种特效
git clone https://github.com/theme-next/theme-next-three source/lib/three 

# 特殊汉字
git clone https://github.com/theme-next/theme-next-han source/lib/Han

# 快速点击
git clone https://github.com/theme-next/theme-next-fastclick source/lib/fastclick

# 懒加载
git clone https://github.com/theme-next/theme-next-jquery-lazyload source/lib/jquery_lazyload

# 顶部的进度
git clone https://github.com/theme-next/theme-next-pace source/lib/pace 

# 图片展示
git clone https://github.com/theme-next/theme-next-fancybox3 source/lib/fancybox 

# 文字显示加空格
git clone https://github.com/theme-next/theme-next-pangu.git source/lib/pangu

# 读取进度
git clone https://github.com/theme-next/theme-next-reading-progress source/lib/reading_progress

2.2 Hexo 插件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
1. npm install hexo-symbols-count-time --save   # 统计字数

symbols_count_time:
  symbols: true
  time: true
  total_symbols: true
  total_time: true
  separated_meta: true
  item_text_post: true
  item_text_total: false
  awl: 4
  wpm: 275


2. npm install hexo-abbrlink --save # 链接持久

permalink: post/:abbrlink.html
abbrlink:
  alg: crc16 #support crc16(default) and crc32
  rep: hex    #support dec(default) and hex
  
  
3. npm install hexo-auto-category --save #自动分类

auto_category:
 enable: true
 depth:
 
 
4. npm install hexo-generator-searchdb --save # 本地搜索

search:
  path: search.json
  field: post
  format: html
  limit: 10000
  content: true
  
#然后打开本地local_search
local_search:
	enable: true
  

5. npm install hexo-asset-image --save
post_asset_folder: true


# 置顶 （没用）
https://github.com/netcan/hexo-generator-index-pin-top

3. 配置

3.1 配置文件

  • 因为主站有个配置, 主题也有个配置, 建议两个配置合并一起, 需要 Hexo 版本在 3 以上

3.2 自定义主页

  1. npm remove hexo-generator-index
  2. Add index.md to source folder.

3.3 绑定域名

  • 为自己的 github 生成一个公钥私钥对
  • 建立带用户名的仓库 unix2dos.github.io
  • CNAME 放到 source 文件夹, 里面写上 <www.liuvv.com>
  • 向你的 DNS 配置中添加 3 条记录
1
2
3
@          A             192.30.252.153
@          A             192.30.252.154
www      CNAME           unix2dos.github.io.

4. 部署

4.1 部署到 Github Pages

  • 部署到 github

    1
    2
    3
    4
    5
    6
    deploy:
        -
         type: git
         repo:
          github: git@github.com:unix2dos/dohttp.git
         branch: gh-pages

  • 安装并部署

    1
    2
    3
    npm install hexo-deployer-git --save

    hexo clean --config source/_data/next.yml && hexo g -d --config source/_data/next.yml

4.2 部署到腾讯云 Cloudbase

  • 强烈建议选择上海地区

  • 开通 hexo 应用

  • 开通静态网站托管

  • 命令

    1
    2
    tcb login
    hexo g --config source/_data/next.yml && tcb hosting deploy ./public  -e dohttp-8g3uegkw004f490e -r bj

  • Cloudbase 自动部署 Github action

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    on: [push] # push 代码时触发
    jobs: 
        deploy: 
            runs-on: ubuntu-latest
            name: Tencent Cloudbase Github Action Example
            steps: 
            - name: Checkout
              uses: actions/checkout@v2
            # 使用云开发 Github Action 部署
            - name: Deploy static to Tencent CloudBase
              id: deployStatic
              uses: TencentCloudBase/cloudbase-action@v1.1.1
              with: 
                # 云开发的访问密钥 secretId 和 secretKey
                secretId: ${{ secrets.SECRET_ID }}
                secretKey: ${{ secrets.SECRET_KEY }}
                # 云开发的环境id
                envId: ${{ secrets.ENV_ID }}
                # Github 项目静态文件的路径
                staticSrcPath: public

  • 仓库私钥

    设置 SECRET_ID,SECRET_KEY 和 cloudbase 的 ENV_ID

  • 自动部署操作

    deploy.sh

    1
    2
    3
    hexo clean --config source/_data/next.yml && hexo g -d --config source/_data/next.yml 
    git add . && git commit -m "update public" 
    git pull && git push

4.3 腾讯云 CDN 桶 （目前使用的这个）

1
2
3
4
5
6
7
8
9
10
11
12
13
deploy:
    -
     type: git
     repo:
      github: git@unix2dos:unix2dos/unix2dos.github.io.git
     branch: master
    - 
     type: cos-cdn
     cloud: tencent
     bucket: blog-1300740185
     region: ap-beijing
     secretId: ***
     secretKey: ***

5. 问题解决方案

5.1 生成空白页

  • 生成页面如果空白的话，换个主题再重新生成一次。
  • 更新下主题仓库

5.2 WARN No Layout

看看主题里面究竟有没有东西，文件夹名字和主题是否对应。

5.3 使用链接持久后图片无法显示

1
2
3
4
5
6
7
8
9
10
11
# vi node_modules/hexo-asset-image/index.js     #24行

// var endPos = link.length-1; // 换成下面的这句话
var endPos = link.length-5; //因为我的permalink: p/:abbrlink.html,  这里要改成-5


// 正则也要替换
/*
/http[s]*.*|\/\/.*/.test(src)  
/^(((http|https|ftp|rtsp|mms)+:\/{2})|\/).+/.test(src)
*/

5.4 主题更新

  • fork 到自己 github, 用新的分支, 修改了一些 language
  • 定期同步最新的仓库主题

5.5 域名备案

5.6 Mermarid 开启

  • 没有安装 hexo-filter-mermaid
  • 高亮排除 mermaid
    • 没有排除前： Highlight.js 看到你的代码块，不管三七二十一，直接把它当成普通代码进行 “ 化妆 “。它会把单纯的文本拆得支离破碎，加上各种 <span class="keyword">、<span class="string"> 标签，甚至加上行号表格。
1
2
3
4
5
6
7
8
9
10
mermaid:
    enable: true   
    theme: forest
    cdn: //cdnjs.cloudflare.com/ajax/libs/mermaid/10.9.0/mermaid.min.js
    
    
# 核心    
highlight:
  exclude_languages:
    - mermaid

6. 参考资料