Mac 系统下搭建hexo个人博客

Mac-20180819.jpeg

1. 前言

不久前买了17款的MacBook Pro，全新的电脑，我想在这个上面管理我的个人博客，所以我要继续搭建这样一个环境，说起来我也应该是老手了，我在2月份的时候已经在我的Linux上面搭建了环境，可以的是，我的Linux被我系统重装了，磁盘全部清空，我没有办法继续来更新我的博客。这件事我已经想了好久，因为第一次的搭建，让我有些阴影，花了我好多的时间，太可怕。这次回家，我打算攻克这个问题，并且记录下来，所以有了这篇笔记。首先，需要的是把环境搭建好，这个是比较简单的，关键的是后期的博客修饰，要将其看起来很舒服，美观大气，简洁明了。那么开始吧......

2. hexo博客系统搭建

如果不知道hexo是个什么东西，那就去百度一下吧，我也没法说清楚，我们可以使用它就可以了。可以去看官方的文档，说得很详细，简单的说就是一个博客框架。

2.1 Github账号注册及仓库创建

太多概念需要普及一下，如果是完全零基础的小伙伴，我这里也没办法，我也讲不了多少，我这里就只讲实战了，而不普及理论知识了，用到的时候去Google一下吧，基本没有什么问题。

• 进入Github官网，注册账号
  
  账号注册页面，都是一般的流程，看着填写就可以

注册号之后的页面

点击new仓库

• 创建仓库的名字必须为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这个网址，就可以看到博客首页。

image.png

到这里说明你的环境以及没有问题了，成功了搭建起了博客框架

2.3 博客关联到Github仓库

在第一步的时候，我们已经将仓库创建好了，这里就需要用到了。

• 首先我们要编辑图中_config.yml文件，这是博客的主要配置文件，在下面一部分，我们要频繁使用这个配置文件，这里先编辑一步，为了管理GitHub账号。

image.png

• 打开文件之后，在文档最后，输入红色大框中的内容，只需要将你的username替换就可以了，其他无需更改。

  
  
  image.png

• 然后在目录中执行

# 产生静态网页
hexo g
# 部署到GitHub page上
hexo d

然后你需要输入你GitHub的用户名和密码，这样你就就可以使用你的仓库名去访问你的博客主页了。为了每一次部署不必一种输入密码，我们可以生成秘钥，然后提交到GitHub，进行关联，那么你下次就不需要再输入密码了。

关联成功，这里我是购买了自己的域名，所以显示的是域名，域名关联在后面讲，这里先忽略

• 关联GitHub账号，免密提交

# 用你注册GitHub时的邮箱号，进行秘钥生成
cd ~
ssh-keygen -t rsa -C "[email protected]"
# 系统就会生成一个隐藏文件夹.ssh
cd .ssh
ls
# 复制公钥
vim id_rsa.pub

点击箭头的按钮，进入设置，然后点击SSH and GPG keys，创建新的SSH，将之前复制的公钥黏贴，提交，OK。

进入settings

image.png

image.png

2.4 博客基本使用

• 创建新的文章

hexo new "djy"

执行之后，就会在下面的目录里自动创建djy.md的markdown文件，然后你就可以输入内容

• 编辑markdown文件，可以使用markdown神器typora。可以看到markdown文件，里面自动生成了题目和时间，还可以写标签，这些我们先不去修改，这些是yaml内容，一般不去修改，修改不好会报错。我们直接在下面编辑一些内容。
  

• 发布文章至博客

hexo g
hexo d

如果运行加过是这样的结果，那么你的博客发布成功了，以后每次只要这么进行就可以更新你的博客了。

image.png

我写的内容，可以在博客上发布了，成功

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官网

设置完之后的头像

• 设置侧边栏的社交连接

next官网

设置后的效果

• 设置disqus评论功能，你只需要将站点配置文件disqus_shortname中设置你shortname，并在主题配置文件中开启disqus功能为true。
  
  image.png

开启评论后的效果

• 设置本地搜索功能，只需要主题配置文件将local search 改成true，并且需要修改站点配置文件，在extensions下面，添加内容如下：

search:
  path: search.xml
  field: post
  format: html
  limit: 10000

image.png

搜索的效果

• 设置阅读全文按钮，有时候文章有很多，你没有办法都是全文显示，会显得特别混乱，因此我们只要显示一部分内容。将主题配置文件中auto_excerpt开启，然后更新，就完全OK了。

image.png

• 设置打赏功能，不管有没有人，设置一下这个功能还是挺好的。

image.png

打赏功能已经开启

• 修改文章内链接文本样式，你如果不想要下划线，那么可以把里面的border-bottom这4行代码都修改为none。

image.png

参考文章：https://www.jianshu.com/p/3a05351a37dc

image.png

• 设置网站缩略图标，将small、medium、apple_touch_icon这三行，都设置成一样的图片地址

参考文章：https://www.jianshu.com/p/3a05351a37dc

image.png

这就是我选择的图标

• 添加网站访问量

参考文章：https://www.jianshu.com/p/3a05351a37dc

完全是别人的东西，直接跟着尝试

效果如下：

image.png

• 添加版权信息

参考文章：http://stevenshi.me/2017/05/26/hexo-add-copyright/

版权

• 新创建的文章自动添加分类
  在blog主目录下，编辑post.md，添加categories：就可以在创建的博客中生成。

image.png

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/