资讯详情

搭建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:\Users\hong>node -v v14.15.3  C:\Users\hong>npm -v 6.14.9

设置全局目录

进入命令提示行：

npm con?g set pre?x "E:\environment\nodejs\node_global" npm con?g set cache "E:\environment\nodejs\node_cache"

2.2 git安装

下载

Git-2.33.1-64-bit.exe

安装

独立安装(修改安装路径，一路next）

验证安装是否成功

cmd 查看版本 C:\Users\hong>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文件夹()生成两个文件，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 框架的本地建设已经完成。

image-20211107122548660

验证

生成静态文件并启动服务

hexo g &&  hexo s

最后一行成功运行

INFO  Hexo is runnin 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，主题（磁盘:\博客跟目录\themes\butterfly）下的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

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

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

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

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

    twikoo:
  envId:
  region:
  visitor: false
  option:

  2. 开启评论

    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 git@github.com

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

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

  7. 通过访问就可以访问部署到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 root@114.xxx.xxx.xxx:/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

  1. 又拍云提供的CNAME地址（进入服务-》域名管理），去域名提供商解析到加速域名
  2. 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

/* 1.每一个不同地方的css会空两行 2.参考: https://www.antmoe.com/posts/a811d614/ https://butterfly.lete114.top/article/Butterfly-config.html */

/* 版权链接去掉下划线 */
.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*/
.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;
}


/* a标签默认颜色 */
#article-container a { 
        
    color: #00c4b6;
    text-decoration: none;
}


/* 鼠标悬停时的颜色 */
#article-container a:hover { 
        
    color: #e58a8a;
}


/*a标签颜色*/
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; /*这个rgba可以自己改*/
     content: '';
}




/*--------------------下面是暂时用不到的css样式--------------------*/


/* 自定义字体，暂时用不到先注释掉*/
/* @font-face { font-family: 'mycustom_font'; src: url('https://cdn.jsdelivr.net/gh/youthlql/static/font/chun_feng_kai.ttf'); font-size: 16px; } */

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:
    - <link rel="stylesheet" href="https://hexo.pifrij.cn/css/Lete.css">
  bottom:
    - <script src="https://hexo.pifrij.cn/js/Lete.js"></script>

12.阿里自定义图标

阿里图标库

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

  1. 访问你的那个链接，然后将代码复制到你自己的css文件里，然后像这样给其设置颜色
CSS .icon-shuji:before { 
        
  content: "\e609";
  color: #59AAFF
}
  1. 最后把你的css和js引入到配置文件中
inject:
  head:
    - <link rel="stylesheet" href="https://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

标签： 8px连接器cn

锐单商城拥有海量元器件数据手册、 IC替代型号，打造 电子元器件IC百科大全！

锐单商城 - 一站式电子元器件采购平台