搭建hexo主题Butterfly部署github+个人服务器

搭建hexo主题Butterfly部署github+个人服务器 1.文章介绍

网址展示：chen&blog

此文章总结不易，参考各个文章总结，如有问题请留言…

2.环境要求

笔者环境：

win11 64位；

node.js：v14.15.3 64位；

git：2.29.2.windows.2 64位

编写代码使用Notepad++

2.1 node.js安装 下载

node-v14.15.3-x64.msi

安装

自主安装（修改安装路径，一路next）

验证安装是否成功

cmd 查看版本
C:Usershong>node -v
v14.15.3

C:Usershong>npm -v
6.14.9

设置全局目录

命令提示行打入：

npm config set prefix "E:environmentnodejsnode_global"
npm config set cache "E:environmentnodejsnode_cache"

2.2 git安装 下载

Git-2.33.1-64-bit.exe

安装

自主安装（修改安装路径，一路next）

验证安装是否成功

cmd 查看版本
C:Usershong>git --version
git version 2.33.1

设置

Github在下文需要时介绍，设置在部署Github再执行也不迟

桌面右键，选择Git Bash Here

1. 设置Github的名字和邮箱

   git config --global user.name "你的名字"
   git config --global user.email“你的邮箱"
   

2. 生成ssh

   ssh-keygen -t rsa -C "你的名字/你的邮箱"
   

   然后会出现以下内容

   Generating public/private rsa key pair.
   Enter file in which to save the key (/c/Users/Administrator/.ssh/id_rsa):
   /c/Users/Administrator/.ssh/id_rsa already exists.
   Overwrite (y/n)? y（输入y）
   Enter passphrase (empty for no passphrase):（回车）
   Enter same passphrase again:（回车）
   

   系统会自动在.ssh文件夹(.SSH在C:UsersWindows用户名目录下)下生成两个文件，id_rsa和id_rsa.pub

3.Hexo 指令

Hexo指令

安装

# 选择存放博客文件的位置，鼠标右键，选择Git Bash Here
# 依次执行完成以下 *** 作

# 1.hexo框架的全局安装
npm install -g hexo-cli

# 2.新建一个网站，[folder]改自定义博客文件夹名称
hexo init [folder]

# 3.进入博客文件夹
cd 上一步博客文件夹名称

# 4.安装博客所需要的依赖文件
npm install

运行完成，此时博客文件夹中多了许多文件， 此时 Hexo 框架的本地搭建已经完成了。

验证

生成静态文件并启动服务

hexo g &&  hexo s

运行成功最后一行出现

INFO  Hexo is running at http://localhost:4000 . Press Ctrl+C to stop.

浏览器中打开 http://localhost:4000 或127.0.0.1:4000，看到网页，则运行成功

4.butterfly主题 4.1 安装

在hexo根目录执行

1. 下载

   git clone -b master https://gitee.com/immyw/hexo-theme-butterfly.git themes/butterfly
   

2. 应用主题

   修改hexo根目录下的_config.yml，修改主题

   theme: butterfly
   

3. 安装插件，pug 以及 stylus 的渲染器

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

4. 升级建议

   为减少升级主题带来的不便，采用以下方法

   hexo根目录下创建config.butterfly.yml，主题（磁盘:博客跟目录themesbutterfly）下的config.yml內容复制到刚刚创建的config.butterfly.yml

   注：

   1. 主题目录下的config.yml不可删
   2. 以后只需要配置config.butterfly.yml即可，配置主题下config.yml无效

4.2 配置

修改配置文件config.yml

4.2.1 语言修改

language: zh-CN

4.2.2 导航菜单

icon最后有说阿里矢量图标库

# 例如
menu:
  首页: /||iconfont icon-shouye
  留言板: /messageboard/||iconfont icon-liuyanban-05
  目录 || iconfont icon-BAI-wenzhang:
    分类: /categories/||iconfont icon-fenlei
    标签: /tags/||iconfont icon-biaoqian
    时间轴: /archives/||iconfont icon-timeAxis
  关于: /about/||iconfont icon-wo

4.2.3 搜索系统 安装

npm install hexo-generator-search --save

修改配置

local_search:
  enable: true

4.2.4 评论（twikoo） 手动部署

1. 购买腾讯云 云开发Cloudbase，推荐上海环境，名称自由填写
2. 进入云开发控制台(opens new window)
3. 进入环境-登录授权 (opens new window)，启用“匿名登录”
4. 进入环境-安全配置 (opens new window)，将网站域名添加到“WEB安全域名”
5. 进入环境-云函数 (opens new window)，点击“新建云函数”
6. 函数名称请填写：twikoo，创建方式请选择：空白函数，运行环境请选择：Nodejs12.16，函数内存请选择：256MB`，点击“下一步”
7. 清空输入框中的示例代码，复制以下代码、粘贴到“函数代码”输入框中，点击“确定”

exports.main = require('twikoo-func').main

8. 创建完成后，点击“twikoo"进入云函数详情页，进入“函数代码”标签，点击“文件 - 新建文件”，输入 package.json，回车

9. 复制以下代码、粘贴到代码框中，点击“保存并安装依赖”

{ "dependencies": { "twikoo-func": "1.4.10" } }

10. 环境ID (envId) 填写到配置上

    twikoo:
      envId:
      region:
      visitor: false
      option:
    

11. 开启评论

    comments:
      # Up to two comments system, the first will be shown as default
      # Choose: Disqus/Disqusjs/Livere/Gitalk/Valine/Waline/Utterances/Facebook Comments/Twikoo
      use:
        - Twikoo 
      text: true # Display the comment name next to the button
    
      lazyload: false
      count: false # Display comment count in post's top_img
      card_post_count: false # Display comment count in Home Page
    

开启twikoo评论管理面板

1. 进入环境-登录授权 (opens new window)，点击“自定义登录”右边的“私钥下载”，下载私钥文件
2. 用文本编辑器打开私钥文件，复制全部内容
3. 点击评论窗口的“小齿轮”图标，粘贴私钥文件内容，并设置管理员密码

5.部署到Github

本地博客已经安装完成，但是只限于在本地，博客需要让别人访问，所以部署到Github Pages上，Github托管了博客，别人就可以访问

部署

1. 创建仓库

   1. 仓库名：用户名.github.io
   2. Public 公开

2. 创建完成后，复制仓库SSH地址，粘贴到博客文件夹下的config.yml文件里

   deploy:
     type: git
     repository: 
       github:      #把博客推送至github
     branch: master #把博客推送至主分支
   

3. 安装hexo部署插件

   # 博客根目录执行
   npm install hexo-deployer-git --save
   

4. 用Notepad++打开id_rsa.pub，复制到

5. 验证与github连接是否成功

   ssh -T [email protected]
   

6. 博客根目录下打开Git Bash Here执行

   # 本地文件部署到github新建的仓库中
   hexo d
   

7. 通过访问https://自己的用户名.github.io就可以访问部署到Github上的博客

Github自定义域名

1. 购买域名，解析：
   1. 记录类型：CNAME
   2. 记录值：自己的用户名.github.io
2. 博客根目录下的source文件夹下新建CNAME文件，无后缀！，里面填入域名，保存
3. 使用hexo d命令将博客部署到Github上
4. 进入Github的博客仓库依次点击Setting—>Page

6.个人服务器部署 为linux服务器新建用户

# 用户名就是git，若不存在用户目录，则会创建
adduser -d /home/git -m git  

# 输入设置git用户的密码，此步骤在此不展示，建议密码设置复杂点，毕竟是放在网上的
passwd git

# 编辑/etc/sudoers文件，在root	ALL=(ALL) 	ALL之后回车追加以下内容
git	ALL=(ALL) 	ALL

添加SSH信任

chmod 755 /home/git

# 切换用户并进入当前用户目录
su git
cd /home/git

# 创建文件并给予权限
mkdir .ssh && chmod 700 .ssh
touch .ssh/authorized_keys && chmod 600 .ssh/authorized_keys

上传本地id_rsa_pub

linux新开一个终端

# root用户下执行
cd ~/.ssh/

# 此步将id_rsa.pub上传当前目录再执行查看
ls ./id_rsa.pub

# cp到git用户目录下
scp ./id_rsa.pub [email protected]:/home/git

切换用户

# 切换到git用户
su git

# 进入git用户的家目录
cd /home/git

#将id_rsa.pub文件内容追加到authorized_keys中
cat ./id_rsa.pub >> .ssh/authorized_keys

本地Git Bash Here连接服务器

# 连接
ssh git@服务器IP

# 新仓库要建立在哪个文件夹自己选，我直接放在git用户的目录下
cd /home/git

# 创建一个新仓库目录
mkdir hexoblog.git

# 进入新仓库目录
cd hexoblog.git

# 初始化该新仓库
git init --bare

# 出现以下内容表示成功
Initialized empty Git repository in /home/git/hexoblog.git/

如连接时报错：

ECDSA host key for [ip address] has changed and you have requested strict checking

解决：修改本地.ssh下的host文件即可，删除与服务器连接信息

至此，服务器上的git仓库搭建完毕，地址为：

git@服务器IP:/home/git/hexoblog.git

git仓库使用git-hooks自动部署

# 新建部署后文件位置
sudo mkdir -p /home/web/hexo

仓库下新建/hooks/post-update文件，新增内容

#!/bin/bash
git --work-tree=/home/web/hexo --git-dir=/home/git/hexoblog.git checkout -f

给post-update权限

cd /home/git/hexoblog.git/hooks/

sudo chown -R git:git /home/web/hexo

# 赋予其可执行权限
sudo chmod +x post-update

本地hexo配置

修改根目录下config.yml文件

deploy:
  type: git
  repository: 
    repo: git@服务器IP:/home/git/hexoblog.git
  branch: master #把博客推送至主分支

至此，在根目录Git Bash Here执行

hexo clean && hexo g && hexo d

查看服务器/home/web/hexo目录下生成静态文件，至此完成！！

7.又拍云CDN全站加速 注册

1. 注册又拍云：点我注册

2. 加入又拍云联盟：https://www.upyun.com/league 点击申请

创建CDN服务

1. 创建CDN

2. 又拍云提供的CNAME地址（进入服务-》域名管理），去域名提供商解析到加速域名
3. GitHub Pages需取消强制HTTPS

配置

进入CDN服务配置

1. 配置SSL

   • 进入HTTPS设置
   • 申请免费SSL证书：
     • 又拍云申请
     • 域名服务商申请
   • 开启HTTPS

2. 优化配置

   • 开启 Gzip 和 Brotli，压缩级别调到3

   • 开启页面压缩

   • HTTP 302 调度

   • 开启TLS1.3，最低建议TLSv1.1

   • 开启 HTTP/2 + Server Push

   • WebP 自适应

   • 开启源站资源迁移

3. IP访问限制

4. CC防护

8. jsDelivr+Github做图床

1. 创建 Github 仓库，名字随意，并使用readme.md初始化仓库

2. 获取 token，生成的token保存

3. 填入 PicGo 配置

   自定义域名：https://cdn.jsdelivr.net/gh/用户名/仓库名@master

9.Typora集成PicGo PicGO 2.3.0

激活 PicGo-Server，进入 PicGo 设置–设置 Server，默认

Typora 0.9.86

（文件->偏好设置->图像）

10.推荐插件和配置 文章生成永久url连接

1. 首先安装插件

   npm install hexo-abbrlink --save
   

2. 然后改配置(_config.yml)

   # 改动的地方
   url: https://hexo.pifrij.cn
    root: /
    permalink: :year/:month/:day/:title/
    permalink: post/:abbrlink.html
    abbrlink:
    alg: crc32  # 算法：crc16(default) and crc32
    rep: hex    # 进制：dec(default) and hex
    permalink_defaults:
    pretty_urls:
    trailing_index: true # Set to false to remove trailing 'index.html' from permalinks
     trailing_html: true # Set to false to remove trailing '.html' from permalinks
   root: /
   #permalink: :year/:month/:day/:title/
   permalink: post/:abbrlink.html
   abbrlink:
     alg: crc32  # 算法：crc16(default) and crc32
     rep: hex    # 进制：dec(default) and hex
   permalink_defaults:
   pretty_urls:
     trailing_index: true # Set to false to remove trailing 'index.html' from permalinks
     trailing_html: true # Set to false to remove trailing '.html' from permalinks
   

文章密码 安装

npm install --save hexo-blog-encrypt

配置文章信息头

---
title: Hello World
tags:
- 作为日记加密
date: 2016-03-30 21:12:21
password: 密码
abstract: 有东西被加密了, 请输入密码查看.
message: 您好, 这里需要密码.
theme: xray
wrong_pass_message: 抱歉, 这个密码看着不太对, 请再试试.
wrong_hash_message: 抱歉, 这个文章不能被校验, 不过您还是能看看解密后的内容.
---

样式：theme: default || blink ||shrink ||flip ||up ||surge|| wave || xray

11.美化

butterfly主题下：

css

source->css->新建任意名字.css

.layout_post .post-copyright .post-copyright-info a {
    text-decoration: none;
}



.author-info__name {
    color: #121a2a;
}



#footer {
    background: transparent !important;
}



#page-header #site_title {
    color: #80bdab;
}



#nav a {
    color: #f9f2f4;
}



.footer_custom_text {
    color: #EEEEEE;
}



body {
    cursor: url(https://cdn.jsdelivr.net/gh/sviptzk/HexoStaticFile@latest/Hexo/img/default.cur),
        default;
}
a,
img {
    cursor: url(https://cdn.jsdelivr.net/gh/sviptzk/HexoStaticFile@latest/Hexo/img/pointer.cur),
        default;
}



::-webkit-scrollbar {
  width: 14px;
  height: 14px;
}

::-webkit-scrollbar-track {
  background-color: rgba( 86, 190, 150, 0.2);
  border-radius: 2em;
}

::-webkit-scrollbar-thumb {
  background-color: #4BB994;
  background-image: -webkit-linear-gradient(
    45deg,
    rgba(255, 255, 255, 0.4) 25%,
    transparent 25%,
    transparent 50%,
    rgba(255, 255, 255, 0.4) 50%,
    rgba(255, 255, 255, 0.4) 75%,
    transparent 75%,
    transparent
  );
  border-radius: 2em;
}

::-webkit-scrollbar-corner {
  background-color: transparent;
}

::-moz-selection {
  color: #fff;
  background-color: #4BB994;
}



#article-container a {
    color: #00c4b6;
    text-decoration: none;
}



#article-container a:hover {
    color: #e58a8a;
}



a {
    color: #00c4b6;
}



#page-header {
     background: transparent !important;
}
#page-header.post-bg:before {
     position: absolute;
     top: 0;
     left: 0;
     display: block;
     width: 100%;
     height: 100%;
     background: transparent !important; 
     content: '';
}

js

source->js->新建任意名字.js

//随机背景图片数组,图片可以换成图床链接，注意最后一条后面不要有逗号
var backimg =[
  "url(https://cdn.jsdelivr.net/gh/chen020723/pic@master/img/shan.jpg)"
  ];
  //获取背景图片总数，生成随机数
  var bgindex =Math.ceil(Math.random() * (backimg.length-1));
  //重设背景图片
  document.getElementById("web_bg").style.backgroundImage = backimg[bgindex];
  //重设banner图片
  document.getElementById("page-header").style.backgroundImage = backimg[bgindex];

引入js，css

主题配置

inject:
  head:
    - ://hexo.pifrij.cn/css/Lete.css">
  bottom:
    - 

12.阿里自定义图标

阿里图标库

1. 搜索图标然后加入你的项目

2. 访问你的那个链接，然后将代码复制到你自己的css文件里，然后像这样给其设置颜色

CSS
.icon-shuji:before {
  content: "e609";
  color: #59AAFF
}

3. 最后把你的css和js引入到配置文件中

inject:
  head:
    - ://hexo.pifrij.cn/css/icon.css">
  bottom:

13.站长之家统计

1. 友盟+ ，产品->网站统计 U-Web

2. 点击统计代码

3. 复制下方的横排数据显示代码到 custom_text

footer:
  owner:
    enable: true
    since: 2020
  custom_text: 
  copyright: true # Copyright of theme and framework