开篇之博客搭建（Hexo+GitHub）

博客（BLOG）：英文名blogger，指写网络日记的人，后音译为博客。它代表着新的生活、工作和学习方式。大部分内容以文字为主，再结合一些图片，链接完善布局，不同的博客专注着不同的主题，在艺术、摄影、视频、音乐各个领域都可以接触到，常用博客有博客园、CSDN、新浪博客等。

1.前言

作为IT领域的一员，怎么能没有自己的博客呢。于是，我便按照各博客大神的教程搭建了自己的独立博客。每天花一些时间来写博客，期初还是挺痛苦的，在文笔和内容写作水平方面就显得比较拙劣。急需多看些文学类的书，期待自己慢慢的提升。

大多数人习惯选择懒惰，会优先选择安逸、选择简单，而少部分选择先苦后甜，选择坚持各自的兴趣爱好，选择将其变成习惯。我跟随少部分的脚步，做了决定，开始写一点东西，无论写技术还是写生活，希望将这些点点滴滴记录在博客中，为了沉淀信息，同时见证自己的成长。

2.博客搭建

博客框架:Hexo
代码托管:GitHub（借助GithubPage）

2.1准备环境

1.Node.js 下载并安装。
2.Git 下载并安装。（下载很慢，请耐心等待）
由于我是win10下进行的，无脑式下一步到底。这里不进行详细的环境搭建步骤的梳理，具体可以查看参考链接部分（其他博客主写的超级详细）。
3.安装所需依赖，命令行（Git Bash）依次运行以下命令:

1	$ npm install hexo-cli hexo-server hexo-deployer-git -g

4.初始化Hexo（folder为项目路径）

1
2
3

$ hexo init <folder>
$ cd <folder>
$ npm install

新建完成后，目录结构如下:

.
├── node_modules 用来存储已安装的各类依赖包
├── public       将source文件夹里的Markdown文档，转换成index.html，再结合主题进行渲染，就是最终看到的博客。
├── scaffolds    模板文件夹包含page，post，draft三种模板，分别对应页面、要发布的文章、草稿。
├── source       资源文件夹，用来存放图片、Markdown文档（文章、草稿）、各种页面（分类、关于页面等）。
|   └── _posts   存放文章的文件夹
└── themes       主题文件夹。每一个主题，都有一个单独的文件夹。
└── _config.yml  博客的相应配置文件
└── package.json 用来查看Hexo的版本以及相关依赖包的版本

5.启动服务器

hexo s

补全：hexo server
6.浏览器访问网址:http://localhost:4000/

2.2实施操作

1.注册Github 账号，Create a new repository（创建新仓库），命名为<Github账号名称>.github.io
★注:如果仓库命名不是按照上面来的，你会在后面访问路径的时候发现各种问题。
2.添加SSH key，命令行（Git Bash）依次运行以下命令:
邮箱地址就用github上注册的邮箱（引号里的内容为注释的内容，所有””里面不一定填邮箱，可以输入任何内容）

1	$ ssh-keygen -t rsa -C "邮箱地址"，

三个回车，会在默认文件id_rsa上生成ssh key，测试一下SSH链接

1 2	$ ssh -T git@github.com 返回信息：Hi IamRabbitSir! You've successfully authenticated, but GitHub does not provide shell access.

3.回到GitHub上，右上角+，New SSH key，Title:随便（GithubBlog），把key粘贴进去（密钥文件内容路径C:\Users\Administrator.ssh\id_rsa.pub）
4.修改_config.yml（在项目目录下）。文件末尾修改为：

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: git
  repo: git@github.com:<Github账号名称>/<Github账号名称>.github.io.git
  branch: master

●注：库路径可以直接复制GitHub上SSH路径
5.推送到GithubPages。在命令行（即Git Bash）依次输入以下命令：

1 2	$ hexo g $ hexo d

g补全：generate
Generate static files.
d补全：deploy
Deploy your website.
最后返回INFO Deploy done: git即成功推送
6.等待几分钟，浏览器访问网址：https://<Github账号名称>.github.io

3.主题优化

主题的选择着实让人头疼，这个好看那个也好看，选择哪种主题看个人喜好，我喜欢简洁风格，又功能齐全的主题hexo-theme-snippet。有能力的可以尝试将主题优化（修改一些源代码或加一些插件），成为独具特色的博客。
1.下载主题
2.将下载好的主题文件夹，粘贴到站点目录的themes下。
3.修改项目根目录下的_config.yml,找到并修改主题名称即可

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: <主题文件夹的名称>

自定义样式见参考链接（博客大神值得学习）

3.1添加文章

1	$ hexo new [layout] <title>

●注：[layout]可以为以下三种：

post 新建博文
page 新建页面（如404，分类）
draft 草稿
title是markdown文章的文件名称，也是文章访问路径
目前阶段内容直接修改.md文件，按照markdown格式编写。
一般会用到以下格式：
1
2
3
4
$ --- 横线分隔符
$ ### 二级标题
$ #### 三级标题
$ **文字** 加粗

3.2添加图片

可以把图片上传到免费图床服务器，然后把链接放到文章中，尽量减少图片的大小，以免访问加载图片影响阅读效果。
以下三种方式，需将其插入到需要插入图片的.md文章中

1.将图片存在网络服务器上，非常依赖网络。
![avatar](http://链接地址)  网络图片

2.位置路径一般用相对路径，从文章位置去找图片
![avatar](/路径/1.png)  本地图片

3.用base64转码工具把图片转成一段字符串，然后把字符串填到基础格式中链接的那个位置
![avatar](data:image/png;base64,iVBORw0......) 把图片存入markdown文件

这个时候会发现插入的这一长串字符串会把整个文章分割开，非常影响编写文章时的体验。如果能够把大段的base64字符串放在文章末尾，然后在文章中通过一个变量名来调用，文章就不会被分割的这么乱了。比如：

1 2	![avatar][base64str] [base64str]:data:image/png;base64,iVBORw0......

avatar

3.3增加分类和标签模块

新创建的hexo博客没有分类和标签，点击分类或标签会提示404，需要额外创建。

修改主题的配置文件themes/next/_config.yml，生效分类和标签：

menu:
- page: 首页
  url: /
  icon: home
- page: 分类
  url: /categories/
  icon: list
- page: 标签
  url: /tags/
  icon: tags
- page: 归档
  url: /archives/
  icon: archive
- page: 关于我
  url: /about/
  icon: user

分类

a1）进入hexo博客所在的根目录，输入如下命令：

1	$hexo new page categories

成功后提示：

1	INFO Created: HEXO_ROOT\source\categories\index.md

a2）对生成的index.md修改内容如下：

---
title: 分类
date: 2020-03-31 17:51:10
type: "categories"
---

a3）在source/_posts路径下的markdown文章，并修改其categories属性。

---
title: 对自我的重新定义与反思
date: 2020-04-15
categories: ['生活']
---

4.知识点

从npm安装文档学习，npm install 命令用来安装模块到 node_modules 目录，

1	$ npm install <packageName>

安装之前，npm install会先检查，node_modules目录之中是否已经存在指定模块。如果存在，就不再重新安装了。

npm install -f 不管模块是否安装过，npm都要强制重新安装
npm install -g 安装模块到全局，一般是安装到node的安装目录的node_modules
npm install –save 安装模块到项目的node_modules文件夹

5.参考链接

更多其他信息:
博客搭建：https://www.simon96.online/2018/10/12/hexo-tutorial/
Live2D看娘板：https://blog.csdn.net/qq_39610915/article/details/90679768
Live2D看娘板：https://www.j8mao.com/index.php/archives/59/