玩转 Hexo Butterfly

发表于 分类于 阅读次数： 本文字数： 8.2k 阅读时长 ≈ 7 分钟
默认

Hexo

安装

1
2
3
4
5
git clone --depth 1 https://gitee.com/weilining/hexo-starter.git blog
cd blog
git clone --depth 1 https://gitee.com/weilining/hexo-theme-landscape.git themes/landscape
npm i
hexo cl &&hexo s

预览

http://localhost:4000

配置

_config.yml

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
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
# Hexo Configuration
## Docs: https://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/

# Site
title: 未来的嘉先生's blog                                                                         # 网站标题
subtitle: '无知是迷信之母'                                                                         # 网站副标题
description:           										                                       # 网站描述
keywords:                                                                                          # 网站的关键词。支援多个关键词。
author: GarveyZhong                                                                                # 网站的作者
language: zh-CN                                                                                    # 网站使用的语言。
timezone: 'Asia/Shanghai'                                                                          # 网站的时区
email: 		                                                                      		           # 邮箱

# URL
url: https://innodb.top  # 网站的url，如果不在域名根目录，应包含子目录，且root要设置为 /子目录/
root: /                  # 网站的根目录
# permalink: :year/:month/:day/:title/    # 文章永久链接的形成模版。每一篇文章都有唯一的url。
permalink: :abbrlink.html # abbrlink 文章永久链接
abbrlink:
  alg: crc16
  rep: hex
  drafts: false
  auto_category:
     enable: true
     depth:
permalink_defaults:  # 文章永久链接中，各部分的默认值。                   
pretty_urls:
  trailing_index: true
  trailing_html: true

# Directory
source_dir: source          # 网站中源文件（比如Markdown啊什么的所在的文件夹）
public_dir: public          # 生成的静态网站的目录
tag_dir: tags               # 标签页所在的文件夹。
archive_dir: archives       # 文档页所在的文件夹
category_dir: categories    # 分类所在的文件夹
code_dir: downloads/code    # 代码所在的文件夹
i18n_dir: :lang             # 国际语言所在的文件夹
skip_render:                # 过滤资源
    - 'list/*'
    - 'list/**'
    - 'robots.txt'

# Writing
new_post_name: :title.md    # 默认新建文档名，`:title`为变量，指文档标题，也可用其他变量
default_layout: post        # 新建文档的默认布局
titlecase: false            # 是否要把标题中的首字符大写
external_link:              # 是否要在新的窗口中打开外链
  enable: true
  field: site
  exclude: ''
filename_case: 0            # 文件名是否小写敏感
render_drafts: false        # 是否渲染草稿
post_asset_folder: false    # 是否启用资源文件夹。如启用，新建文档同时建立同名的资源文件夹
relative_link: false        # 是否把站内资源的链接改为站内相对链接。建议关闭。
future: true                # 文档中指定为未来时间创建

#代码块设置
highlight:
  enable: true              # 是否开启代码高亮功能
  line_number: true         # 代码块中是否在前面加上行号
  auto_detect: false        # 是否自动检测代码块的语言（比如Java、xml、JavaScript等）
  tab_replace: ''
  wrap: true
  hljs: false
prismjs:
  enable: false
  preprocess: true
  line_number: true
  tab_replace: ''

# Home page setting
# path: Root path for your blogs index page. (default = '')
# per_page: Posts displayed per page. (0 = disable pagination)
# order_by: Posts order. (Order by date descending by default)
index_generator:            
  path: ''                  # 主页所在路径，默认为''     
  per_page: 10              # 主页的索引页包含文章数量，如未定义，则采用根目录下的`per_page`值
  order_by: -date           # 文章（Post类型）排序属性，`-`为降序

# Category & Tag
default_category: uncategorized
category_map:
tag_map:

# Metadata elements
## https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta
meta_generator: true

# 日期/时间格式
# Hexo使用Moment.js来解析和显示日期中定义的日期格式,可以自定义 http://momentjs.com/docs/#/displaying/format/
date_format: YYYY-MM-DD
time_format: HH:mm:ss

# 使用post的日期更新日期
updated_option: false

# Pagination
## Set per_page to 0 to disable pagination
per_page: 10                # 主页/分类/标签/存档等类型索引页包含文章数量
pagination_dir: page        # 分页所在文件夹

# Include / Exclude file(s)
## include:/exclude: options only apply to the 'source/' folder
include:
exclude:
ignore:

# 放置插件和主题  Plugins: https://hexo.io/plugins/   Themes: https://hexo.io/themes/
theme: butterfly@3.3.0

# 如果想在本插件中使用 MetingJS, meting：true， {% meting %} 的选项列表：https://github.com/MoePlayer/hexo-tag-aplayer/blob/master/docs/README-zh_cn.md#%E5%AE%89%E8%A3%85
aplayer:
  meting: true

# Deployment
## Docs: https://hexo.io/docs/one-command-deployment
deploy: # 定义部署
  type: ''

Butterfly

GitHub

安装

1
2
3
4
5
cd blog
npm config set registry http://registry.npm.taobao.org
npm i hexo-theme-butterfly
npm install hexo-renderer-pug
hexo cl && hexo s

预览

http://localhost:4000

配置

_config.yml旁边创建_config.butterfly.yml

1
2
cd blog
cp node_modules/hexo-theme-butterfly/_config.yml _config.butterfly.yml

初始化

永久链接

GitHub

模块安装

1
npm install hexo-abbrlink --save

配置

blog/_config.yml

1
permalink: posts/:abbrlink/

GitHub Token

https://github.com/settings/tokens

勾选repo，然后生成Personal access tokens

部署

GitHub先创建一个任意名字的私有仓库（一个私有仓库的GitHub Pages分支是公开的，其他分支私有）

hexo d 部署到GitHub Pages

GitHub

安装模块
1
npm install hexo-deployer-git --save
配置

blog/_config.yml

1
2
3
4
5
6
7
8
9
deploy:
  - type: git
    repo:
      github:
        url: https://github.com:name/name.git # GitHub Pages 的https
        branch: gh-pages # GitHub Pages的分支
        token: GitHub Token
    name: name # GitHub用户名
    email: email@qq.com # GitHub登陆邮箱
推送到GitHub远程仓库
1
hexo cl && hexo g && hexo d
打开GitHub Pages

进入项目->settings 找到GitHub Pages，选择GitHub Pages的分支gh-pages，打开GitHub Pages

域名绑定
创建CNAME

blog/source里创建CNAME文件，全大写，CNAME里写入

1
lllll.cf
域名管理

设置CNAME记录，填入github.io

GitHub Action 部署到GitHub Pages

设置secrets

进入项目->settings/secrets 增加三个参数

1
2
3
GH_NAME
GH_EMAIL
GH_TOKEN
配置

.github/workflows/main.yml

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
50
51
52
53
54
55
56
57
58
59
name: Deploy Blog

on:
  push:
    branches: 
      - main 
env:
  TZ: Asia/Shanghai
  
jobs:
  build: # 一项叫做build的任务
    name: Hexo blog build & deploy
    runs-on: ubuntu-latest # 在最新版的Ubuntu系统下运行
    
    steps:
    - name: Checkout codes # 将仓库内master分支的内容下载到工作目录
      uses: actions/checkout@master # 脚本来自 https://github.com/actions/checkout
      with:
        persist-credentials: false # otherwise, the token used is the GITHUB_TOKEN, instead of your personal token
        fetch-depth: 1

    - name: Setup Node # 配置Node环境
      uses: actions/setup-node@v1 # 配置脚本来自 https://github.com/actions/setup-node
      with:
        node-version: '12.x'

    - name: Cache
      uses: actions/cache@v1
      id: cache-dependencies
      with:
        path: node_modules
        key: ${{runner.OS}}-${{hashFiles('**/package-lock.json')}}

    - name: Install plugins
      if: steps.cache-dependencies.outputs.cache-hit != 'true'
      run: |
        npm install

    - name: Deploy && Create local changes
      run: |
        npm install hexo-cli -g
        hexo cl && hexo g

    - name: Commit files
      run: |
        git config --global core.ignorecase false
        # set git infomation
        git config --global user.email '${{ secrets.GH_NAME }}' # set up GitHub name
        git config --global user.name '${{ secrets.GH_EMAIL }}' # set up GitHub email
        cd ./public
        git init
        git add .
        git commit -m "Add changes" -a  

    - name: Deploy
      uses: peaceiris/actions-gh-pages@v3
      with:
        github_token: ${{ secrets.GH_TOKEN }} # set up GitHub Token for deploy
        publish_branch: gh-pages #default: gh-pages
打开GitHub Pages

进入项目->settings 找到GitHub Pages，选择GitHub Pages的分支gh-pages，打开GitHub Pages

域名绑定
创建CNAME

blog/source里创建CNAME文件，全大写，CNAME里写入

1
lllll.cf
域名管理

设置CNAME记录，填入github.io

部署到vercel

注册vercel

https://vercel.com，GitHub邮箱换谷歌邮箱，进行注册

通过GitHub源码部署到vercel

选Import a Git Repository，仓库https填入。

FRAMEWORK PRESET 选择Hexo，然后Deploy

域名绑定

进入vercel项目，settings/domains，填入lllll.cf，域名管理设置A记录，ip填入76.76.21.21

SEO

验证百度站点

https://ziyuan.baidu.com/site/

HTML标签验证

_config.butterfly.yml

1
baidu_site_verification: code-P2tiPNRKk6

百度SEO

一周之后收录

模块安装

1
npm install hexo-generator-baidu-sitemap

配置

_config.yml后面加上以下代码

1
2
baidusitemap:
  path: sitemap.xml

hexo cl && hexo s

http://localhost:4000/sitemap.xml

百度、必应、主动推送

GitHub

站点地图模块安装

1
npm install --save hexo-submit-urls-to-search-engine

配置

百度站点管理

普通收录->资源提交->API提交->推送接口里有token

_config.yml后面加上以下代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
hexo_submit_urls_to_search_engine:
  submit_condition: count ###链接被提交的条件，可选值：count | period 现仅支持count
  count: 10 ### 提交最新的10个链接
  period: 900 ### 提交修改时间在 900 秒内的链接
  google: 0 ### 是否向Google提交，可选值：1 | 0（0：否；1：是）
  bing: 1 ### 是否向bing提交，可选值：1 | 0（0：否；1：是）
  baidu: 1 ### 是否向baidu提交，可选值：1 | 0（0：否；1：是）
  txt_path: submit_urls.txt #### 文本文档名， 需要推送的链接会保存在此文本文档里
  baidu_host: https://cjh0613.github.io #### 在百度站长平台中注册的域名
  baidu_token: 请按照文档说明获取 #### 请注意这是您的秘钥， 所以请不要把它直接发布在公众仓库里!
  bing_host: https://cjh0613.github.io #### 在bing站长平台中注册的域名
  bing_token: 请按照文档说明获取 #### 请注意这是您的秘钥， 所以请不要把它直接发布在公众仓库里!
  google_host: https://cjh0613.github.io #### 在google站长平台中注册的域名
  google_key_file: Project.json ###存放google key的json文件，放于网站根目录（与hexo _config.yml文件位置相同），请不要把json文件内容直接发布在公众仓库里!
  replace: 0  ### 是否替换链接中的部分字符串，可选值：1 | 0（0：否；1：是）
  find_what: http://cjh0613.github.io/blog
  replace_with: https://cjh0613.com

_config.yml的deploy:改成

1
2
3
deploy:
  - type: ''
  - type: cjh_baidu_url_submitter # 主动提交百度爬虫

_config.yml的url: http://example.com改成

1
url: https://lllll.cf

hexo cl &&hexo g && hexo d最后出现{"remain":2996,"success":2}即可

Robots

blog/source/robots.txt

1
2
3
4
5
6
7
User-agent: Googlebot
Disallow: /page/
Disallow: /page/*.html
User-agent: *
Disallow: /page/
Disallow: /page/*.html
#Disallow politics

百度robots

防外链

GitHub

模块安装

1
npm i hexo-filter-nofollow

配置

_config.yml

1
2
3
4
5
6
nofollow:
  enable: true
  field: site
  exclude:
    - 'exclude1.com'
    - 'exclude2.com'

静态资源压缩Hexo-all-minifier

GitHub

模块安装

1
npm install hexo-all-minifier --save

配置

_config.yml

1
2
3
4
5
6
7
8
9
all_minifier: true
html_minifier:
  silent: true
css_minifier:
  silent: true
js_minifier:
  silent: true
image_minifier:
  enable: false

镜像站

Netlify | Vercel