How to 创建 this 风格`s Blog
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同时搭建了一个镜像网站,就是同时上传两个仓库。
建站过程
对于以下所有步骤都可以在网上找到相关教程
环境配置
安装Git
Git是一个分布式版本控制软件,主要利用它来将本地项目推送到远程仓库,以及使用Git Bash。
对于Git的安装网上有大量教程,安装Git不仅适用这次安装博客,对工作环境的搭建也有帮助(
据说)。安装node.js
简单的说 Node.js 就是运行在服务端的 JavaScript。安装node.js的原因是Hexo框架基于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配置信息:
1
2git 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
3PTY 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界面中依次输入以下命令
1
2
3
4
5npm install -g hexo-cli
hexo init
npm install
hexo g
hexo s此时如果操作无误,Hexo博客会运行在http://localhost:4000,访问这个网址就会看到原生态无公害的Hexo博客框架
- 一些基础的Hexo操作
1
2
3
4hexo new "xxxxxx"
hexo g
hexo s
hexo clean- 如何写一篇博客?
通过命令行输入
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 g
和hexo s
就可以在本地端口看到你写的博客了。- 安装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
- 自定义配置
对于网站的一些自定义配置,例如网站标题、图标。可以修改博客根目录下的
_config.yml
文件进行配置,相关内容在Hexo中有说明。对于主题的一些自定义配置,例如头像,打印文字内容。可以修改butterfly主题文件夹下的
_config.yml
文件,相关内容在butterfly中有说明。- 发布
对于此时小有规模的网站,我们就有足够的自信给别人展示了,但是现在我们发现只能本地访问。要想发布给别人看我们还需要把他部署到Github和Gitee上。
此时我们安装一个插件,在GitBash中输入
1
npm install hexo-deployer-git --save
然后修改博客根目录下的
_config.yml
1
2
3
4
5
6deploy:
type: 'git'
repository:
github: #你的仓库地址
gitee: #你的仓库地址
branch: master修改完成后在命令行输入
1
2hexo 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 | # Live2D |
然后下载模型,模型名称可以到这里参考,一些模型的预览可以在这里。
例如我的这只黑猫
1 | npm install live2d-widget-model-hijiki |
评论
参看教程张洪老师
这部分是用Twikoo+腾讯云做的,也是白嫖。
另外绑定了server酱和Qmsg酱,如果各位在下面留了言,我会在QQ和微信收到提醒。
总结
emmm,内容有点多,很多地方自己也只是跟着别人的教程做的,毕竟我是学会了面向Google编程的新生代程序员!
很感谢你看到这里,如果你觉得我的文章写的还行,欢迎您把这篇文章分享出去,或者在下面评论区留下你的想法