How to 创建 this 风格`s Blog

我的博客采用框架是Hexo，主题为Butterfly，评论采用Twikoo，支持音乐播放，还有旁边的这只黑猫看版娘，对于如何构建这些，我会在这篇文章中介绍。

GitHub：https://solitude325.github.io
Gitee：https://solitude0325.gitee.io

基础信息

1. Hexo

Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用Markdown（或其他渲染引擎）解析文章，在几秒内，即可利用靓丽的主题生成静态网页。

安装简单，使用方便，主题丰富，相对来说文档资源较为丰富。

2. Butterfly

A Simple and Card UI Design theme for Hexo.

Butterfly是由JerryC编写的一款Hexo主题。页面足够美观，文档也较为丰富。

配置方案

我没有租用服务器，没有购买域名，所以本方案完全免费。博客部署在GitHub和Gitee上，利用其免费的Pages服务搭建页面。

GitHub：https://solitude325.github.io
Gitee：https://solitude0325.gitee.io

本来并不打算使用Gitee，不过由于国内访问GitHub速度堪忧忧，就使用Gitee同时搭建了一个镜像网站，就是同时上传两个仓库。

建站过程

对于以下所有步骤都可以在网上找到相关教程

环境配置

安装Git

Git是一个分布式版本控制软件，主要利用它来将本地项目推送到远程仓库，以及使用Git Bash。

对于Git的安装网上有大量教程，安装Git不仅适用这次安装博客，对工作环境的搭建也有帮助（据说）。

Git官网
安装node.js

简单的说 Node.js 就是运行在服务端的 JavaScript。安装node.js的原因是Hexo框架基于node.js。

Node.js官网
注册Github

GitHub是全球最大的同性交友网站，也是最好的代码托管平台。不过由于其外网的性质访问速度堪忧，条件不允许的可以选用国内代码托管平台Gitee。选用这两者另外的好处是不用考虑域名，部署page服务后可以通过xxx.github.io或者xxx.gitee.io访问到自己的页面。

为了构建我们的页面，还需要建立个人代码仓库，部署page服务要求仓库名与账号名相同。点击GitHub中的New repository创建新仓库，仓库名应该为：用户名.github.io 这个用户名使用你的GitHub帐号名称代替，这是固定写法。如

Gitee则仓库名与用户名相同才能开启Gitee Pages。

链接本地Git和Github

在菜单里搜索Git Bash，设置user.name和user.email配置信息：
```
git config --global user.name "你的GitHub用户名"
git config --global user.email "你的GitHub注册邮箱"
```
生成ssh密钥文件：
```
ssh-keygen -t rsa -C "你的GitHub注册邮箱"
```
然后直接三个回车即可，默认不需要设置密码
然后找到生成的.ssh的文件夹中的id_rsa.pub密钥，将内容全部复制

打开GitHub_Settings_keys 页面，新建new SSH Key：Title为标题，任意填即可，将刚刚复制的id_rsa.pub内容粘贴进去，最后点击Add SSH key。
在Git Bash中检测GitHub公钥设置是否成功，输入 ssh git@github.com

若出现：
```
PTY allocation request failed on channel 0
Hi solitude325! You've successfully authenticated, but GitHub does not provide shell access.
Connection to github.com closed.
```
则成功。

这里之所以设置GitHub密钥原因是，通过非对称加密的公钥与私钥来完成加密，公钥放置在GitHub上，私钥放置在自己的电脑里。GitHub要求每次推送代码都是合法用户，所以每次推送都需要输入账号密码验证推送用户是否是合法用户，为了省去每次输入密码的步骤，采用了ssh，当你推送的时候，git就会匹配你的私钥跟GitHub上面的公钥是否是配对的，若是匹配就认为你是合法用户，则允许推送。这样可以保证每次的推送都是正确合法的。

到这里前期环境配置完成，后面正式开始建站。

安装Hexo和Butterfly

选择一个文件位置作为你博客的工作目录，用来存放相关文件。例如我在D盘下新建了Hexoblog文件夹。进入这个文件夹，右键选择Git Bash Here

之后所有的命令行内容都是在GitBash中运行
Hexo初始化

在弹出来的GitBash界面中依次输入以下命令
```
npm install -g hexo-cli
hexo init
npm install
hexo g
hexo s
```
此时如果操作无误，Hexo博客会运行在http://localhost:4000，访问这个网址就会看到原生态无公害的Hexo博客框架
1. 一些基础的Hexo操作
```
hexo new "xxxxxx"
hexo g
hexo s
hexo clean
```
1. 如何写一篇博客？
通过命令行输入hexo new "xxxxxxx"你可以在./source/_posts文件夹下生成一个Markdown文件，在这个文件下用markdown的语法去写你的博客，例如：
```
---
title: 你好
date: 2021-01-19 17:31:01
---# 你好
<font color=red>与买桂花同载酒</font>,~~终不似~~,**少年游**.
```
之后再在命令行中输入hexo g和hexo s就可以在本地端口看到你写的博客了。
1. 安装Butterfly
在博客根目录下GitBash中输入
```
git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly
```
并在站点配置文件_config.yml中，更改主题相关配置
```
theme: butterfly
```
如果你沒有 pug 以及 stylus 的渲染器，请安装：
```
npm install hexo-renderer-pug hexo-renderer-stylus --save
```
1. 自定义配置
对于网站的一些自定义配置，例如网站标题、图标。可以修改博客根目录下的_config.yml文件进行配置，相关内容在Hexo中有说明。

对于主题的一些自定义配置，例如头像，打印文字内容。可以修改butterfly主题文件夹下的_config.yml文件，相关内容在butterfly中有说明。
1. 发布
对于此时小有规模的网站，我们就有足够的自信给别人展示了，但是现在我们发现只能本地访问。要想发布给别人看我们还需要把他部署到Github和Gitee上。

此时我们安装一个插件，在GitBash中输入
```
npm install hexo-deployer-git --save
```
然后修改博客根目录下的_config.yml
```
deploy:type: 'git'repository: github: #你的仓库地址gitee: #你的仓库地址branch: master
```
修改完成后在命令行输入
```
hexo g
hexo d
```
然后就可以通过Pages服务提供的网址看到你刚发布的页面了，例如：
- GitHub：https://solitude325.github.io
- Gitee：https://solitude0325.gitee.io
据说gitee pages不支持自动刷新，发布完之后需要手动刷新

其余美化

音乐

音乐的内容butterfly文档中有相关说明

{% meting "469838125" "netease" "song" "theme:#FF4081" "mode:circulation" "mutex:true" "listmaxheight:340px" "preload:auto" %}

这段代码是通过网易云播放千与千寻

看板娘

在博客根目录下打开GitBash输入

npm install --save hexo-helper-live2d

在_config.yml中添加如下配置

# Live2D
## https://github.com/EYHN/hexo-helper-live2d
live2d:enable: truescriptFrom: local # 默认pluginRootPath: live2dw/ # 插件在站点上的根目录(相对路径)pluginJsPath: lib/ # 脚本文件相对与插件根目录路径pluginModelPath: assets/ # 模型文件相对与插件根目录路径# scriptFrom: jsdelivr # jsdelivr CDN# scriptFrom: unpkg # unpkg CDN# scriptFrom: https://cdn.jsdelivr.net/npm/live2d-widget@3.x/lib/L2Dwidget.min.js # 你的自定义 urltagMode: false # 标签模式, 是否仅替换 live2d tag标签而非插入到所有页面中debug: false # 调试, 是否在控制台输出日志model:use: live2d-widget-model-hijiki # npm-module package name# use: wanko # 博客根目录/live2d_models/ 下的目录名# use: ./wives/wanko # 相对于博客根目录的路径# use: https://cdn.jsdelivr.net/npm/live2d-widget-model-wanko@1.0.5/assets/wanko.model.json # 你的自定义 urldisplay:position: leftwidth: 150height: 300vOffset: -80hOffset: 100mobile:show: true # 手机中是否展示

然后下载模型，模型名称可以到这里参考，一些模型的预览可以在这里。

例如我的这只黑猫

npm install live2d-widget-model-hijiki

参看教程张洪老师

这部分是用Twikoo+腾讯云做的，也是白嫖。

另外绑定了server酱和Qmsg酱，如果各位在下面留了言，我会在QQ和微信收到提醒。

总结

emmm，内容有点多，很多地方自己也只是跟着别人的教程做的，毕竟我是学会了面向Google编程的新生代程序员！

很感谢你看到这里，如果你觉得我的文章写的还行，欢迎您把这篇文章分享出去，或者在下面评论区留下你的想法

Hexo+Buttterly+Github Pages构建个人博客相关推荐

Github Pages + Jekyll 独立博客一小时快速搭建上线指南
只要一小时?! 人生道路上布满了坑,于是有了人生导师. 美丽的地球上布满了坑,于是有了Google Earth. 使用Github Pages搭建独立博客的过程中布满了坑,所以有了这篇指南. 我在 ...
【Web】Hexo+Butterfly+Github+Coding搭建个人博客
个人博客: http://www.milovetingting.cn Hexo+Butterfly+Github+Coding搭建个人博客背景之前用docsify搭建了一个简单的博客,但是docs ...
Github Pages搭建个人博客（2018年10月版）
Github Pages搭建个人博客(2018年10月版) 前言几年前看到网上大神自己搭建的个人博客网站,就想过搭建一个属于自己的个人博客网站,为此还专门去研究了建站所需技能,但是购买了域名和云虚拟 ...
最全面的github pages搭建个人博客教程
作为一个程序员怎么能没有自己的个人博客呢,这里详细记录和分享我的博客搭建经验,让你轻轻松松拥有自己的博客网站.傻瓜式一站式教你用 github pages 来搭建博客,详细记录全过程,保证你能学会. ...
使用Pelican和Github Pages搭建个人博客详细教程
操作系统:Mac OS / Linux 工具集: 1.Pelican--基于Python的静态网页生成器 2.马克飞象--Evernote出的Markdown文本编辑器 3.GoDaddy--域名供应 ...
Hexo+GitHub Pages搭建个人博客（ 0 基础、小白值得一看--实力软文！）- 初行ᵀᵀᴴ
文章目录 **写在之前** 一.搭建前的准备工作 - 安装工具 1.1 附上工具链接 1.2 Git 1.3 Node.js 1.4 GitHub Desktop 1.5 Notepad++ 1.6 ...
Hugo + Github Pages 搭建个人博客
尝试过 Hexo .GatsbyJs. Vuepress 搭建博客后,对这些工具最大的不满,就是运行速度以及打包速度. 后来看到 Hugo ,号称最快的静态站点生成器后. 尝试搭建博客,发现不管是运行 ...
hexo+git+github+域名搭建个人博客提示404_不用花一分线，松哥手把手教你上线个人博客...
有不少小伙伴私信松哥,打听松哥的博客是怎么做的,其实这个我之前和大家聊过,今天就再来说一说. 我记得是 2015 年 4 月 15 在CSDN上发表了我的第一篇博客,是一个学习笔记,从那之后开启了我博 ...
hexo在github上搭建个人博客详细步骤
hexo搭建个人博客详细步骤本片博文讲详细讲解搭建过程,经历鉴于我搭建托管博客所遇到的错误!为了避免读者重蹈覆辙.我将尽量详细,和一些遇到的错误与大家分享. 第一步 1 首先我们先去准备［githu ...

Hexo+Buttterly+Github Pages构建个人博客