How to 创建 this 风格`s Blog

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

基础信息

1. Hexo

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

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

2. Butterfly

A Simple and Card UI Design theme for Hexo.

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

配置方案

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

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

脑袋空空

建站过程

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

环境配置

  1. 安装Git

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

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

    Git官网

    git

  2. 安装node.js

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

    Node.js官网

  3. 注册Github

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

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

    github

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

  4. 链接本地Git和Github

    ​ 在菜单里搜索Git Bash,设置user.name和user.email配置信息:

    1
    2
    git config --global user.name "你的GitHub用户名"
    git config --global user.email "你的GitHub注册邮箱"

    ​ 生成ssh密钥文件:

    1
    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

    ​ 若出现:

    1
    2
    3
    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

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

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

  2. Hexo初始化

    在弹出来的GitBash界面中依次输入以下命令

    1
    2
    3
    4
    5
    npm install -g hexo-cli
    hexo init
    npm install
    hexo g
    hexo s

    此时如果操作无误,Hexo博客会运行在http://localhost:4000,访问这个网址就会看到原生态无公害的Hexo博客框架

    Hexo

    1. 一些基础的Hexo操作
    1
    2
    3
    4
    hexo new "xxxxxx"
    hexo g
    hexo s
    hexo clean
    1. 如何写一篇博客?

    通过命令行输入hexo new "xxxxxxx"你可以在./source/_posts文件夹下生成一个Markdown文件,在这个文件下用markdown的语法去写你的博客,例如:

    1
    2
    3
    4
    5
    6
    7
    ---
    title: 你好
    date: 2021-01-19 17:31:01
    ---

    # 你好
    <font color=red>与买桂花同载酒</font>,~~终不似~~,**少年游**.

    之后再在命令行中输入hexo ghexo s就可以在本地端口看到你写的博客了。

    1. 安装Butterfly

    在博客根目录下GitBash中输入

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

    并在站点配置文件_config.yml中,更改主题相关配置

    1
    theme: butterfly

    如果你沒有 pug 以及 stylus 的渲染器,请安装:

    1
    npm install hexo-renderer-pug hexo-renderer-stylus --save
    1. 自定义配置

    对于网站的一些自定义配置,例如网站标题、图标。可以修改博客根目录下的_config.yml文件进行配置,相关内容在Hexo中有说明。

    对于主题的一些自定义配置,例如头像,打印文字内容。可以修改butterfly主题文件夹下的_config.yml文件,相关内容在butterfly中有说明。

    1. 发布

    对于此时小有规模的网站,我们就有足够的自信给别人展示了,但是现在我们发现只能本地访问。要想发布给别人看我们还需要把他部署到Github和Gitee上。

    此时我们安装一个插件,在GitBash中输入

    1
    npm install hexo-deployer-git --save

    然后修改博客根目录下的_config.yml

    1
    2
    3
    4
    5
    6
    deploy:
    type: 'git'
    repository:
    github: #你的仓库地址
    gitee: #你的仓库地址
    branch: master

    修改完成后在命令行输入

    1
    2
    hexo g
    hexo d

    然后就可以通过Pages服务提供的网址看到你刚发布的页面了,例如:

    据说gitee pages不支持自动刷新,发布完之后需要手动刷新

其余美化

音乐

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

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

这段代码是通过网易云播放千与千寻,效果如下

看板娘

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

1
npm install --save hexo-helper-live2d

_config.yml中添加如下配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
# Live2D
## https://github.com/EYHN/hexo-helper-live2d
live2d:
enable: true
scriptFrom: 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 # 你的自定义 url
tagMode: 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 # 你的自定义 url
display:
position: left
width: 150
height: 300
vOffset: -80
hOffset: 100
mobile:
show: true # 手机中是否展示

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

例如我的这只黑猫

1
npm install live2d-widget-model-hijiki

表情包

评论

参看教程张洪老师

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

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

表情包

总结

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

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

表情