How to 创建 this 风格`s Blog
我的博客采用框架是Hexo，主题为Butterfly，评论采用Twikoo，支持音乐播放，还有旁边的这只黑猫看版娘，对于如何构建这些，我会在这篇文章中介绍。
GitHub：https://solitude325.github.ioGitee：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.ioGitee：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@
若出现：
PTY allocation request failed on channel 0Hi solitude325! You've successfully authenticated, but GitHub does not provide shell access.Connection to closed.
则成功。
这里之所以设置GitHub密钥原因是，通过非对称加密的公钥与私钥来完成加密，公钥放置在GitHub上，私钥放置在自己的电脑里。GitHub要求每次推送代码都是合法用户，所以每次推送都需要输入账号密码验证推送用户是否是合法用户，为了省去每次输入密码的步骤，采用了ssh，当你推送的时候，git就会匹配你的私钥跟GitHub上面的公钥是否是配对的，若是匹配就认为你是合法用户，则允许推送。这样可以保证每次的推送都是正确合法的。
到这里前期环境配置完成，后面正式开始建站。
安装Hexo和Butterfly
选择一个文件位置作为你博客的工作目录，用来存放相关 文件。例如我在D盘下新建了Hexoblog文件夹。进入这个文件 夹，右键选择Git Bash Here
之后所有的命令行内容都是在GitBash中运行
Hexo初始化
在弹出来的GitBash界面中依次输入以下命令
npm install -g hexo-clihexo initnpm installhexo ghexo s
此时如果操作无误，Hexo博客会运行在http://localhost:4000，访问这个网址就会看到原生态无公害的Hexo博客框架
一些基础的Hexo操作
hexo new "xxxxxx"hexo ghexo shexo clean
如何写一篇博客？
通过命令行输入hexo new "xxxxxxx"你可以在./source/_posts文件夹下生成一个Markdown文件，在这个文件下用markdown的语法去写你的博客，例如：
---title: 你好date: -01-19 17:31:01---# 你好<font color=red>与买桂花同载酒</font>,~~终不似~~,**少年游**.
之后再在命令行中输入hexo g和hexo s就可以在本地端口看到你写的博客了。
安装Butterfly
在博客根目录下GitBash中输入
git clone -b master /jerryc127/hexo-theme-butterfly.git themes/butterfly
并在站点配置文件_config.yml中，更改主题相关配置
theme: butterfly
如果你沒有 pug 以及 stylus 的渲染器，请安装：
npm install hexo-renderer-pug hexo-renderer-stylus --save
自定义配置
对于网站的一些自定义配置，例如网站标题、图标。可以修改博客根目录下的_config.yml文件进行配置，相关内容在Hexo中有说明。
对于主题的一些自定义配置，例如头像，打印文字内容。可以修改butterfly主题文件夹下的_config.yml文件，相关内容在butterfly中有说明。
发布
对于此时小有规模的网站，我们就有足够的自信给别人展示了，但是现在我们发现只能本地访问。要想发布给别人看我们还需要把他部署到Github和Gitee上。
此时我们安装一个插件，在GitBash中输入
npm install hexo-deployer-git --save
然后修改博客根目录下的_config.yml
deploy:type: 'git'repository: github: #你的仓库地址gitee: #你的仓库地址branch: master
修改完成后在命令行输入
hexo ghexo d
然后就可以通过Pages服务提供的网址看到你刚发布的页面了，例如：
GitHub：https://solitude325.github.ioGitee：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## /EYHN/hexo-helper-live2dlive2d:enable: truescriptFrom: local # 默认pluginRootPath: live2dw/ # 插件在站点上的根目录(相对路径)pluginJsPath: lib/ # 脚本文件相对与插件根目录路径pluginModelPath: assets/ # 模型文件相对与插件根目录路径# scriptFrom: jsdelivr # jsdelivr CDN# scriptFrom: unpkg # unpkg CDN# scriptFrom: /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: /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编程的新生代程序员！
很感谢你看到这里，如果你觉得我的文章写的还行，欢迎您把这篇文章分享出去，或者在下面评论区留下你的想法
