前言

用 Hexo 框架可以快速的搭建一个博客网站，再配合 butterfly 主题可以搭建出较为好看的页面，需遵循它的配置

环境

安装 node、git、vscode

Node

node 配置看 https://luckynwa.top/posts/1839/

Git

ssh 配置看https://mytool.luckynwa.top/lucky-tools/git-memo

创建博客

桌面新建文件夹 blog，进入根目录 cmd 打开终端，安装 hexo 脚手架

1
2
hexo version               查看版本
npm install hexo-cli -g    没装则运行

初始化

1
hexo init

等待完成，生成本地页面

1
hexo s

访问

http://localhost:4000/

本地版

部署博客

GitHub

去 Github 新建仓库 luckyNwa.github.io，必须这个格式，第一个名称改自己的 GitHub 名称

打开_config.yml 最后一行改成下面

1
2
3
4
5
6
# Deployment
## Docs: https://hexo.io/docs/one-command-deployment
deploy:
  type: git
  repository: git@github.com:luckyNwa/luckyNwa.github.io.git
  branch: main

在 blog 文件夹路径 cmd 打开终端，安装自动部署发布工具

1
npm install hexo-deployer-git --save

生成页面

1
hexo g

上传到 github

1
hexo d

访问 https://luckynwa.github.io/ 要等它部署几分钟

Vercel

官网 https://vercel.com/ 用 GitHub 登录即可

点击 new 一个项目，找到刚刚那个博客的导入，点部署，它会分配一个二级域名免费用，也可以加入自己的国内域名

https://lucky-blog.vercel.app/

安装主题

一些指令

1
2
3
4
hexo cl 清除缓存
hexo g
hexo s 这是本地预览  http://localhost:4000/
hexo d 这是同步远程

我的 package.json 指令，首尾是安装依赖、删除依赖，dev 和 server 都是运行会同时删除缓存重新生成、build 是打包、deploy 是推送到 GitHub

1
2
3
4
5
6
7
8
"scripts": {
  "iNode18": "npm install",
  "dev": "hexo clean && hexo generate && hexo server",
  "server": "hexo clean && hexo generate && hexo server",
  "build": "hexo generate",
  "deploy": "hexo deploy",
  "clean": "npx rimraf node_modules"
},

butterfly 主题

中文文档 https://butterfly.js.org/ 最好科学一下

开源地址 https://github.com/jerryc127/hexo-theme-butterfly

安装

1
git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly

打开_config.yml 修改主题

1
theme: butterfly

_config.yml 同级别创建_config.butterfly.yml

把 themes 里的 butterfly 文件夹下的 config 内容复制进去，删除_config.landscape.yml

安装 pug 以及 stylus 的渲染器

1
npm install hexo-renderer-pug hexo-renderer-stylus --save

文章更好的 url 地址展示

1
npm install hexo-abbrlink --save

_config.yml 找到 permalink

1
2
3
4
5
6
permalink: :year/:month/:day/:title/
改成
permalink: post/:abbrlink.html
abbrlink:
    alg:crc32
    rep:hex

本地搜索

1
npm i hexo-generator-search  --save

_config.yml 下新增

1
2
3
4
5
# 本地搜索
search:
  path: search.xml
  field: all
  content: true

主题配置下

1
local_search:下2个true

其他

1
2
3
4
hexo new post "博客搭建笔记"     创建文章
hexo new page categories       创建页面
hexo cl && hexo g  && hexo s   多合一生成到本地
hexo version  查看版本

问题

要是 vs 中不能启动项目

1
2
get-ExecutionPolicy 必须是RemoteSigned才行，不是则运行下面
set-ExecutionPolicy RemoteSigned

twikoo 评论系统

由于 docker 大部分镜像源被封，我使用了阿里云做代理，用 docker 去部署了这个评论系统

1
docker run --name twikoo -e TWIKOO_THROTTLE=1000 -p 3737:8080 -v ${PWD}/data:/app/data -d registry.cn-hangzhou.aliyuncs.com/lucky-warehouse/twikoo

博客主题配置中修改如下

1
2
3
4
5
twikoo:
  envId: http://xxxxxx:3737/
  region:
  visitor: true
  option:

use 也选它，上面连接去浏览器输入有东西出来就配置好了

必须申请一个 2 级域名，不然会出现跨域情况

twikoo.luckynwa.top、ng 配置如下，必须带上 ip，不然 tw 设置无法查看访问者具体位置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
server {
    listen  443 ssl;
    server_name  twikoo.luckynwa.top;

    ssl_certificate /etc/nginx/cert/twikoo.luckynwa.top.cer;   #证书文件路径
    ssl_certificate_key /etc/nginx/cert/twikoo.luckynwa.top.key;      #证书私钥文件路径

    # ssl_session_cache    shared:SSL:1m;
    ssl_session_timeout  5m;

    ssl_protocols SSLv3 TLSv1 TLSv1.1 TLSv1.2;
    ssl_ciphers  HIGH:!ADH:!EXPORT56:RC4+RSA:+MEDIUM;
    ssl_prefer_server_ciphers  on;

    location / {
        proxy_pass http://xxxxxx:3737; #建议这种写法，和主域名保持一致
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }

}

至于它的控制面板---->就在项目中的留言区，可以设置各种、比如留言时候 qq 邮箱通知提醒我

qq 邮箱开启 smtp 服务,授权码记得保存，配置到控制面板中