1. 前言
不久前买了17款的MacBook Pro，全新的电脑，我想在这个上面管理我的个人博客，所以我要继续搭建这样一个环境，说起来我也应该是老手了，我在2月份的时候已经在我的Linux上面搭建了环境，可以的是，我的Linux被我系统重装了，磁盘全部清空，我没有办法继续来更新我的博客。这件事我已经想了好久，因为第一次的搭建，让我有些阴影，花了我好多的时间，太可怕。这次回家，我打算攻克这个问题，并且记录下来，所以有了这篇笔记。首先，需要的是把环境搭建好，这个是比较简单的，关键的是后期的博客修饰，要将其看起来很舒服，美观大气，简洁明了。那么开始吧......
2. hexo博客系统搭建
如果不知道hexo是个什么东西，那就去百度一下吧，我也没法说清楚，我们可以使用它就可以了。可以去看官方的文档，说得很详细，简单的说就是一个博客框架。
2.1 Github账号注册及仓库创建
太多概念需要普及一下，如果是完全零基础的小伙伴，我这里也没办法，我也讲不了多少，我这里就只讲实战了，而不普及理论知识了，用到的时候去Google一下吧，基本没有什么问题。
- 进入Github官网，注册账号
账号注册页面，都是一般的流程，看着填写就可以
- 创建仓库的名字必须为username.github.io，我的用户名为Lxmic，因此我创建的仓库就是Lxmic.github.io，这是很关键的一点，很重要。输入名字后，直接点最下面绿色的按钮，创建新仓库。这一部分基本完成了，接下去需要在终端操作。
输入仓库的名字
2.2 环境配置
参考官网文档：
- 安装Git、Node.js和hexo
# 首先检查时候安装了git和node.js，终端输入一下命令，
node -v #是否出现安装版本信息，出现说明已经安装了
git --version #同上述情况
# 如果没有安装，则进行安装,都可以通过直接下载安装测序进行安装，这里不演示，提供下载网址：
[git]: https://sourceforge.net/projects/git-osx-installer/
[node.js]: https://nodejs.org/en/
- 如果已经安装好了上述的软件，那么可以安装hexo，然后等待安装成功即可。
npm install -g hexo-cli
- 创建blog文件夹，并初始化建立博客框架
# 在你的家目录下创建一个blog文件夹
mkdir blog
# 进入目录
cd blog
# 初始化目录
hexo init
开启本地服务
# hexo s
出现以下信息，说明你可以本地访问博客系统，在浏览器输入4000这个网址，就可以看到博客首页。
2.3 博客关联到Github仓库
在第一步的时候，我们已经将仓库创建好了，这里就需要用到了。
- 首先我们要编辑图中_config.yml文件，这是博客的主要配置文件，在下面一部分，我们要频繁使用这个配置文件，这里先编辑一步，为了管理GitHub账号。
-
打开文件之后，在文档最后，输入红色大框中的内容，只需要将你的username替换就可以了，其他无需更改。
image.png 然后在目录中执行
# 产生静态网页
hexo g
# 部署到GitHub page上
hexo d
然后你需要输入你GitHub的用户名和密码，这样你就就可以使用你的仓库名去访问你的博客主页了。为了每一次部署不必一种输入密码，我们可以生成秘钥，然后提交到GitHub，进行关联，那么你下次就不需要再输入密码了。
- 关联GitHub账号，免密提交
# 用你注册GitHub时的邮箱号，进行秘钥生成
cd ~
ssh-keygen -t rsa -C "xxxxxxx@qq.com"
# 系统就会生成一个隐藏文件夹.ssh
cd .ssh
ls
# 复制公钥
vim id_rsa.pub
点击箭头的按钮，进入设置，然后点击SSH and GPG keys，创建新的SSH，将之前复制的公钥黏贴，提交，OK。
2.4 博客基本使用
- 创建新的文章
hexo new "djy"
- 编辑markdown文件，可以使用markdown神器typora。可以看到markdown文件，里面自动生成了题目和时间，还可以写标签，这些我们先不去修改，这些是yaml内容，一般不去修改，修改不好会报错。我们直接在下面编辑一些内容。
- 发布文章至博客
hexo g
hexo d
如果运行加过是这样的结果，那么你的博客发布成功了，以后每次只要这么进行就可以更新你的博客了。
3. Hexo博客美化及功能增添
3.1 选主题
- Hexo官网：https://hexo.io/themes/，里面有特别多的主题可以选择，我在这里选的是next这个主题。下载主题：
cd ~/blog
git clone https://github.com/iissnan/hexo-theme-next themes/next
- 修改站点配置文件：
_config.yml，将里面76行的theme由landscape修改为next
image.png -
更换新的主题，可能会有一些延迟
image.png
3.2 通过站点配置文件修改网站细节
需要修改的内容可以参考网站：https://hexo.io/zh-cn/docs/configuration，里面对各个参数有一些详细的解释，我这里修改一些博客的标题，副标题，描述，语言等。
这里我想说的是，一般你修改一项，重新部署网站一下，因为一旦出错，就比较容易找到原因。
3.3 主题文件修改博客内容
- 关键也是同样名字的配置文件：
_config.yml，看一下里面的内容。
image.png
-
修改整个主题，不需要的用#注释掉，这里我已经将默认的Muse注释掉，改为mist
image.png -
将menu也修改，没来只有首页和归档，限制添加标签和分类，只需要去掉前面的#，现在来看一下效果。
image.png
-
需要新建一个分类和标签页面
找不到页面
cd ~/blog
hexo new page categories
hexo new page tags
效果如下：
-
设置头像
头像设置，参考next官网
- 设置侧边栏的社交连接
- 设置disqus评论功能，你只需要将站点配置文件
disqus_shortname中设置你shortname，并在主题配置文件中开启disqus功能为true。
image.png
- 设置本地搜索功能，只需要主题配置文件将
local search改成true，并且需要修改站点配置文件，在extensions下面，添加内容如下：
search:
path: search.xml
field: post
format: html
limit: 10000
- 设置阅读全文按钮，有时候文章有很多，你没有办法都是全文显示，会显得特别混乱，因此我们只要显示一部分内容。将主题配置文件中
auto_excerpt开启，然后更新，就完全OK了。
- 设置打赏功能，不管有没有人，设置一下这个功能还是挺好的。
- 修改文章内链接文本样式，你如果不想要下划线，那么可以把里面的border-bottom这4行代码都修改为
none。
- 设置网站缩略图标，将small、medium、apple_touch_icon这三行，都设置成一样的图片地址
- 添加网站访问量
效果如下：
- 添加版权信息
- 新创建的文章自动添加分类
在blog主目录下，编辑post.md，添加categories：就可以在创建的博客中生成。
4. 结语
花了一天半的时间，终于完成了博客的搭建，完全恢复到了之前的状态，这样就行了。网上有太多资料了，看都看不过来，很不错，下面列出我参考过的。终于把这件事给做完了，从二月份拖到了现在，真是拖延到无穷无尽。最后附上我博客的地址，会不定期更新。
Lxmic Blog: https://othlis.com/
参考文章
https://www.jianshu.com/p/3a05351a37dc
https://www.jianshu.com/p/344cf061598d
https://www.jianshu.com/p/d335569a6238
http://stevenshi.me/about/
https://www.jianshu.com/p/9f0e90cc32c2
https://www.jianshu.com/p/49c8168c7418
https://www.jianshu.com/p/cfdfcef680cc
https://zhuanlan.zhihu.com/p/30836436
https://theme-next.iissnan.com/theme-settings.html
https://www.jianshu.com/p/2fe658fd9d94
https://blog.csdn.net/qw8880000/article/details/80235648
https://blog.csdn.net/weixin_39345384/article/details/80544660
https://linlif.github.io/2017/05/27/Hexo%E4%BD%BF%E7%94%A8%E6%94%BB%E7%95%A5-%E6%B7%BB%E5%8A%A0%E5%88%86%E7%B1%BB%E5%8F%8A%E6%A0%87%E7%AD%BE/
