总述

“*** 记录下自己搭建博客的过程***”

简介

​ 起初想要搭建一个自己的博客是因为从实验室的学长们的博客学到了很多，从而萌生了搭建自己的博客，记录下自己的学习和经验。说来有趣的一点是，我个人将学长们的博客收藏起来的文件夹命名为“传承”，如同朱学长留下给我们的《仪器仪表指南》，毅子哥、阿宾学长等等学长自己费时写出的经验总结博客，也同样给予了我们这一代电赛实验室成员知识。

​ 是故，我也想像前一届的学长们一样，写下博客，留下自己的经验，一是自查学习用，二是留给下一代的实验室成员。衷心祝愿我所崇拜的实验室的学长学姐们未来能有光明的前途。

​ 其实原来是有自己的一个博客的，是520那天心血来潮搭建的，但是后续又没有写文章也没有做美化，故拖到了暑假后段比完电赛干脆推倒重来。鉴定为懒狗。

​ 曾经的博客界面

主要流程

​ 1、搭建博客工具下载

​ 2、使用hexo搭建博客

​ 3、将博客部署至云服务器

搭建博客

前置要求

​ 需要自己去注册好github账号，同时下载好node.js和git

​ 这是两个必要的工具，多提一嘴，Git的使用十分重要，之后需要自己摸索，学会Git使用是无论以后工作或是其他都是一个程序员所必备的重要技能。

​ 这是我所使用的版本，使用window10的cmd命令窗输入命令查看

1
2
3
4
5
C:\Users\nongj>git --version
git version 2.35.1.windows.2

C:\Users\nongj>node --version
v16.16.0

建立工作区文件夹

​ 找一个地方建立博客工程文件夹，我是直接在E:\Blog，其中Blog文件夹就是我的代码工作区。

​ 进入Blog文件夹后，在文件管理器上面的对话框，键入cmd，回车即可打开命令窗口，如图示：

输入cmd

cmd界面

​ 这里就是在指定文件夹打开cmd的方法了

安装hexo

1
npm install -g hexo-cli

创建目录

​ 先在Blog文件夹下再新建一个文件夹，正常都应该知道不要用中文名或含空格建了吧？

1
hexo init <文件夹名称>	//新建的文件夹名字

​ 下载完成后应该有这些文件

启动

​ 点击进入建立起的文件夹，在该文件夹目录下打开cmd

​ 或者在刚刚的cmd命令窗输入，命令窗指令前路径指向该文件夹

1
cd <文件夹名称>

​ 这里我建立的文件夹名字叫new，在命令窗口输入hexo server启动本地服务器运行

1
2
3
4
5
6
7
8
 E:\Blog> cd new				//进入文件夹
 E:\Blog\new> hexo server		//启动本地服务器
 
 //输入上述指令后后命令窗口会变成：
E:\Blog\new> hexo server		//启动本地服务器
INFO  Validating config
INFO  Start processing
INFO  Hexo is running at http://localhost:4000/ . Press Ctrl+C to stop.

​ 其含义就是启动了本地服务器，在命令窗口按Ctrl+C停止，这个时候我们打开浏览器

浏览器输入http://localhost:4000/

​ 此时显示的就是hexo默认的主题了

*** 网上有很多其他hexo美化主题，可以自行查找使用***

使用butterfly主题

​ 官方的文档是http://localhost:4000/，内容十分详细，b站也有很多相关教程，作者来自中国台湾，繁中教程并没有什么难以理解的，作者在右下角还贴心的设置了简繁切换按钮，只要用心去看其实并没有什么难以看懂的。

​ butterfly是一个功能强大、扩展性强、兼具简洁与美观的主题，也有很多人在用，如何避免千篇一律创造出自己独一无二的博客，这需要自己努力学习搭建来得到，这里制作教学起到抛砖引玉的作用，希望能根据下面教程搭建出基本的框架，之后自行配合作者的文档进行美化。

安装butterfly

​ 在之前创建的文件夹内打开cmd窗口，之后我们将这个目录称之为Hexo 根目录，输入下述代码后，Hexo 根目录下的themes文件夹会新增一个butterfly文件夹，这就是butterfly主题的相关文件

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

推荐使用VS code

​ 右键文件夹空白处，选择用VS code打开，选中**_config.yml**划到代码100行附近，改成如下所示，Ctrl+S保存，即换成butterfly主题

1
2
3
4
# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: butterfly

​ 再次打开cmd命令窗口，输入，如果一直跟着做下来，上面的服务器没关掉，先去那个命令窗口Ctrl+C关闭再输入下述指令重开服务器，之后每次更改文件保存后查看效果都要重启服务器，务必记住

1
hexo server

浏览器输入http://localhost:4000/

细心的人就发现了，命令窗口显示的信息和默认的不一样，它显示成了：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
E:\Blog\new> hexo server
INFO  Validating config
INFO
  ===================================================================

      #####  #    # ##### ##### ###### #####  ###### #      #   #
      #    # #    #   #     #   #      #    # #      #       # #
      #####  #    #   #     #   #####  #    # #####  #        #
      #    # #    #   #     #   #      #####  #      #        #
      #    # #    #   #     #   #      #   #  #      #        #
      #####   ####    #     #   ###### #    # #      ######   #

                            4.3.1
  ===================================================================
INFO  Start processing
INFO  Hexo is running at http://localhost:4000/ . Press Ctrl+C to stop.

即在命令窗口用字符#拼成了butterfly的样式，这样就表示主题启动成功了，没有显示这个的检查是不是改了以后忘记按Ctrl+S保存了

​ 然后安装需要的插件，否则界面是打不开的

1
npm install hexo-renderer-pug hexo-renderer-stylus --save

安装成功插件后，打开服务器，进入http://localhost:4000/即可查看到butterfly的默认界面

1
hexo server

还有一件事，要去Hexo 根目录内的**_config.yml**第11行的language里把en改成zh-CN即简体中文，这几个的设置下面会详细讲述。

配置

标签页和分类页

VS code选择Hexo 根目录下的\ source \ _posts内的hello-world.md并打开，在最开头的地方如下添加几个修改，以便看到标签页，分类页创建成功的效果，将原本的仅有第2行修改成如下所示：

1
2
3
4
5
6
7
8
9
---
title: Hello World
tags: 
    - tag1
    - tag2
categories:
    - ccategorie1
    - ccategorie2
---

​ 再到Hexo 根目录执行以下命令，创建界面的命令为hexo new page <页面名>

1
hexo new page tags				//命令
1
2
3
4
5
6
7
8
9
10
11
12
13
14
E:\Blog\new> hexo new page tags	//命令执行成功时演示
INFO  Validating config
INFO

      #####  #    # ##### ##### ###### #####  ###### #      #   #
      #    # #    #   #     #   #      #    # #      #       # #
      #####  #    #   #     #   #####  #    # #####  #        #
      #    # #    #   #     #   #      #####  #      #        #
      #    # #    #   #     #   #      #   #  #      #        #
      #####   ####    #     #   ###### #    # #      ######   #

                            4.3.1
  ===================================================================
INFO  Created: E:\Blog\new\source\tags\index.md

这样就在Hexo根目录下的 ~ \ source \ tages <—此为新增文件夹> 新建了tages文件夹，即标签文件夹，文件夹内部会有唯一一个index.md文件，打开，并修改至如下样式：

1
2
3
4
5
---
title: 标签							//这里是名称，我们改用中文显示
date: 2022-08-05 19:47:05			 //创建的日期	
type: "tags"						 //设置类型
---

保存所有修改，再次打开服务器，浏览器输入：http://localhost:4000/tags/可以看到创建了以下界面

​ 同理，键入以下创建分类页面

1
hexo new page categories

修改创建的categories文件夹下的index.md

1
2
3
4
5
---
title: 分类
date: 2022-08-05 20:15:28
type: categories
---

接下来基本不会插入示例图片，自己去试

​ 输入http://localhost:4000/categories/查看是否成功

友情链接

​ 创建页面

1
hexo new page link

​ 修改type为link

1
2
3
4
5
---
title: 友情链接
date: 2022-08-05 20:20:31
type: link
---

​ 在source下创建文件夹_data，文件夹内再创建link.yml文件，复制下面的内容并修改

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
- class_name: 友情链接
  class_desc: 那些人，那些事
  link_list:
    - name: Hexo
      link: https://hexo.io/zh-tw/
      avatar: https://d33wubrfki0l68.cloudfront.net/6657ba50e702d84afb32fe846bed54fba1a77add/827ae/logo.svg
      descr: 快速、简单且强大的网誌框架

- class_name: 网站
  class_desc: 值得推荐的网站
  link_list:
    - name: Youtube
      link: https://www.youtube.com/
      avatar: https://i.loli.net/2020/05/14/9ZkGg8v3azHJfM1.png
      descr: 视频网站
    - name: Weibo
      link: https://www.weibo.com/
      avatar: https://i.loli.net/2020/05/14/TLJBum386vcnI1P.png
      descr: 中国最大社交分享平台
    - name: Twitter
      link: https://twitter.com/
      avatar: https://i.loli.net/2020/05/14/5VyHPQqR6LWF39a.png
      descr: 社交分享平台

新增自己的友链就自己新增，如我的信息是

1
2
3
4
- name: Roxy
  link: https://roxykko.github.io/
  avatar: https://s2.loli.net/2022/08/05/aJirCcAp8PH6mo7.jpg
  descr: 学无止境

关于我

介绍自己的一个界面，用同样的方法创建一个名为about的页面

修改index.md即可，这里附上我自己的页面，可在此基础上修改

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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
---
title: 关于我
date: 2022-08-04 23:08:12
comments: false

---

#### 个人简介

---

>"***愿朱颜不改常依旧，花中消遣，酒内忘忧。***"
><br>

个人信息:

双非一本学生。
博客用作学习自查，记录累计经验用。
喜好FPS类游戏，有一群很好的损友
YYR、YWL、DRM、Amao、Winter......

#### 博客信息

---

+ 网站搭建于：2022年8月4日23:31:00
+ 使用hexo搭建

***更新日志：***
--*2022年8月4日：建立起博客，开始记录学习内容*

<br>

#### 计划

**2022计划**

---

>**2022-GOALS**
>
>+ [ ]学习PYQT5
>+ [ ]学习使用Cube+CubeIDE复刻安富莱示波器项目
>+ [ ]英语过四级
>+ [ ]赚点小钱
>+ [ ]学会JAVA、JS


浏览器输入：http://localhost:4000/about/ 查看效果

留言板

用同样的方法创建一个名为messageboard的页面

修改生成的index.md

1
2
3
4
5
6
---
title: 留言板
date: 2022-08-04 23:38:42
comments: true
---

这个暂时看不到效果，得等到配置好评论功能后

网站信息

​ 修改Hexo根目录主配置文件

1
2
3
4
5
6
7
8
# Site
title: Roxy Blog				#博客名称
subtitle: 'subtitle'			#副标题
description: '学无止境'			 #个人签名
keywords:						#关键词
author: Roxy					#作者名
language: zh-CN					#语言设置
timezone: ''					#时区设置

导航条

​ 前面也注意到了，每次都要输入网址才能进入特定的页的话很麻烦，那有没有像我们正常使用网页那样的点击跳转呢？有的，导航条就是一个方法。

​ 上面创建了这么多页面，就让他显示在导航条。

接下来是比较重要的一个内容，首先先进到\ themes \ butterfly 里面，选择里面的_config.yml，Ctrl + A全选，Ctrl + C 复制里面的所有内容，再按Ctrl + / 全部注释了，回到Hexo根目录，新建一个 _config.butterfly.yml 再将前面复制的内容 Ctrl + V 粘贴，这样的目的是我们在主题文件保留了一个可作为参照的纯净副本，同时每次我们修改设置不需要点开两个目录，直接在根目录里面修改这个文件即可。

​ 之后我们将根目录下 _config.yml 称为主配置文件

​ _config.butterfly.yml 则称为主题配置文件

打开主题配置文件修改至这样，选中被注释的地方，按一下Ctrl + /解除注释，保存即可，前面的英文可以改成中文，这样显示才会显示中文，顺序就是从上到下排列

1
2
3
4
5
6
7
8
9
10
menu:
  主页: / || fas fa-home
  归档: /archives/ || fas fa-archive
  标签: /tags/ || fas fa-tags
  分类: /categories/ || fas fa-folder-open
  留言板||fas fa-list:
    #Music: /music/ || fas fa-music			#我又没写这两个，所以留着干嘛
    #Movie: /movies/ || fas fa-video		#直接保留注释了
  友情链接: /link/ || fas fa-link
  关于: /about/ || fas fa-heart

开启服务器后在主页或是其他页面均可见导航条

社交图标

​ 需要博客连接到你的其他社交媒体，默认的是只有两个，github和邮箱

其他的社交媒体连接和图标现没做，可以参考官方文档

​ 进入主题配置文件，Ctrl + F 搜索，输入social，找到如下位置，解除注释并修改成自己的个人信息。

1
2
3
social:
  fab fa-github: https://github.com/xxxxx || Github
  fas fa-envelope: mailto:xxxxxx@gmail.com || Email

ICON设置

前面社交图标和导航条的图标都可以修改，博客官方教程有提供阿里巴巴矢量库的方法

头像设置

头像，以及博客主页图片、背景图片、页脚图片、文章封面、文章插图，都需要有一个图床来提供图片，这里提供的方法是PicGo + SM.MS制作图床，该方法是免费的，并且对我来说也暂时够用，其他方法还有PicGo 配合腾讯云COS、阿里云OSS等等，有兴趣可以自行了解，这里仅介绍PicGo + SM.MS制作图床的方法。

​ 首先，需要下载关键的软件PicGo

​ 安装好后打开SM.MS网站获取API Token，自行注册一个账号。

登陆后选择这个进入个人页面

选择复制，没有就点生成再复制

打开PicGo图床设置，选择SM.MS，填入API

​ 绑定完成后就是上传图片，选择上传区，把想要使用的图片拖入其中，SM.MS是给永久的5G空间，但一次不能上传超过5MB的图片，上传完毕后，在相册里就能看到你所上传的图片，点图片下方的第二个按钮，将弹出的连接复制即可。不嫌麻烦的话，点第一个也可以，然后把其他给删除仅留下网络连接，其实对于写博客文章插图来说，第一个按钮复制是最实用的，可以粘贴了直接用，但是这里是设置头像，只需要一个网络连接即可，不需要其他的格式。

​ 进入主题配置文件，Ctrl + F 搜索 avatar 即头像设置，在img一栏，将后面的网络连接用你上传的图片覆盖掉，保存重开服务器，即可看到头像更新。

1
2
3
4
# Avatar (頭像)
avatar:
  img: https://s2.loli.net/2022/08/05/aJirCcAp8PH6mo7.jpg	#这是我的头像图片
  effect: false

页脚

​ 网站当然是都要备案的，只是我还没购买自己域名，尚未备案，只是挂在github上的个人博客，有米了自然就去搞个自己域名备案啦，有备案号了我就补上

​ Ctrl + F 搜索 footer，如下修改，下面留言那一栏里的网址自己改成自己留言板的对应网址

1
2
3
4
5
6
7
8
9
# Footer Settings
# --------------------------------------
footer:
  owner:
    enable: true
    since: 2020
  custom_text: ©版权说明：本网站所有内容均收集于互联网或自己创作,<br>方便于网友与自己学习交流，如有侵权，请<a href = 'https://roxykko.github.io/messageboard/'>留言</a>，立即处理<br><a href="https://beian.miit.gov.cn/"><span>备案号：?</span></a>
  copyright: false # Copyright of theme and framework

评论区

​ 前面留言面板的后续，搞完这里的设置即可使用评论区，这里使用Valine

​ https://valine.js.org/

​ 进入网址后看快速开启，一直跟着做直到得到APP ID 和 APP KEY

​ 得到后在主题配置文件内搜索valine，填上自己的appID和appKey

1
2
3
4
5
6
7
8
9
10
# valine
# https://valine.js.org
valine:
  appId: nNLGoFrFqOGrnjjwjlcvwhQ8-gzGzoHsz
  appKey: 8L52XkDfas8PNIFBJYD3oHUj
  avatar: retro # gravatar style https://valine.js.org/#/avatar
  serverURLs: # This configuration is suitable for domestic custom domain name users, overseas version will be automatically detected (no need to manually fill in)
  bg: # valine background
  visitor: false
  option:

同时还要在comment选项里面选择valine

1
2
3
4
5
6
7
8
9
10
comments:
  # Up to two comments system, the first will be shown as default
  # Choose: Disqus/Disqusjs/Livere/Gitalk/Valine/Waline/Utterances/Facebook Comments/Twikoo/Giscus/Remark42
  use: Valine # Valine,Disqus		#这里，改成Valine
  text: true # Display the comment name next to the button
  # lazyload: The comment system will be load when comment element enters the browser's viewport.
  # If you set it to true, the comment count will be invalid
  lazyload: false
  count: false # Display comment count in post's top_img
  card_post_count: false # Display comment count in Home Page

此时评论区即可用

网站图片和页脚

​ 搜索default_top_img，在里面填上你的图片链接

1
2
# If the banner of page not setting, it will show the top_img
default_top_img: https://s2.loli.net/2022/08/05/eyrKMHmW9fAsEGo.jpg

​ 再找到footer_bg,将false改成true

1
2
# Footer Background
footer_bg: true

​ 自己重新启动看看效果吧

更多美化

​ 挖个坑，以后再把自己美化的方法写下来，真的推荐多读读主题的官方文档，自行搭建出自己独一无二的博客

撰写文章

​ 推荐使用插件hexo-admin

​ 在Hexo 根目录安装

1
npm install --save hexo-admin

​ 安装后启动hexo server

​ 浏览器输入http://localhost:4000/admin/#/来进入管理页面，选择Post撰写文章，点击new post输入文字名开始撰写，写完后点击Publish。更改的话选择更改的文章，改完点右上角更新即可。

​ 推荐的方法是在Typora写好直接复制粘贴过来，然后在齿轮按钮更改设置，更改Tags标签和分类，可多填，然后发布即可。

部署到Github上

​ 首先进入Github主页新建一个库

​ 库名称是<自己的Github名字>.github.io 这里是我已经建过了，所以已存在，选公开就好

​ 建好以后首先将本地的git与Github连接，可以看以下教程自行连接，已连接好就可以进入下一步

​ 进入主配置文件，划到最下面，也就是104行左右，在下面用户名改成自己的，保存

1
2
3
4
5
6
# Deployment
## Docs: https://hexo.io/docs/one-command-deployment
deploy:
  type: git
  repo: git@github.com:<用户名>/<用户名>.github.io.git
  branch: master

​ 在Hexo 根目录，打开cmd命令窗口，输入以下代码

1
hexo g -d

​ 去到刚刚创建的仓库查看，出现许多文件即上传成功，他人即可通过<用户名>.github.io网站访问你的博客了，因为github是外网，国内不挂梯子可能加载较慢，听说以前有通过挂载在gitee上的，但是那玩意最近开始要审核了，所以估计已经不行了。

​ 果然还是有个自己的备案域名好啊。