Levon's Blog

微信: L6241425

0%

hexo博客系统的安装和自动部署

发表于 更新于 分类于 ， 阅读次数： Valine：
本文字数： 2.9k 阅读时长 ≈ 3 分钟

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
  • vi .gitignore
1
2
3
4
5
.DS_Store
Thumbs.db
db.json
*.log
node_modules/

1.2 主题

1
2
3
4
5
6
7
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.3 开始

1
2
3
4
hexo new post hello  

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

1.4 分类和标签

  • 标签
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.5 主页menu

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
npm install hexo-abbrlink --save

  • config

    1
    2
    3
    4
    permalink: post/:abbrlink.html
    abbrlink:
      alg: crc16 #support crc16(default) and crc32
      rep: hex    #support dec(default) and hex

2.2 图片相对路径

1
npm install hexo-asset-image --save

  • config

    1
    post_asset_folder: true

2.3 本地搜索

1
npm install hexo-generator-searchdb --save

  • config

    1
    2
    local_search:
    	enable: true

2.4 自动分类

1
npm install hexo-auto-category --save

  • config

    1
    2
    3
    auto_category:
     enable: true
     depth:

2.5 自定义主页

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

3. 部署

3.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

3.2 部署到腾讯云cloudbase

  • 强烈建议选择上海地区

  • 开通hexo应用

  • 开通静态网站托管

  • 命令

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

3.3 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

3.4 腾讯云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: ***

4. 参考资料

可以加首页作者微信，咨询相关问题！