在MacOS操作系统下搭建Hexo博客

Posted on | In |

未经本人同意，内容禁止转载！

与很多的搭建blog的人一样，我也是很早就想搭建一个自己的blog，但是由于种种原因一直都没有弄起来，对于我个人来说有以下几个原因：

  1. 我不喜欢广告，希望blog只有文章、评论
  2. blog能支持繁杂的格式。比如各种代码能保持其在IDE一样的格式，可以打各种公式，以及你们现在看到的我在写这几个原因的这样的效果
  3. 能按照自己的想法来安排blog的样式，个人喜欢简洁、实用的风格
  4. 平台要足够稳定，因为国内很多平台都不稳定，随时可能倒闭，然后我就需要转移所有内容，这是我最为担心的。比如之前就是各种免费云，那么大的容量，1T、2T甚至无限的，最后统统关闭了，对这种具有中国特色的市场行为非常的反感
  5. 尝试过其他的平台都是一团糟，最后还是寻找国外的平台了

整篇文章会按照以下步骤展开：

  • 我在搭建blog时的系统环境介绍
  • 申请github账号并建立一个repository
  • 生成ssh key与github通信
  • 安装git
  • 安装node.js
  • 安装hexo并进行简单设置(包括hexo与github的连接)
  • 发布第一篇文章
  • 如何使用一个主题theme
  • 总结搭建过程中需要用到的知识(Terminal和Vim和Markdown)

1. 设备与搭建环境

我使用hexo来搭建平台，hexo由台湾的tommy351大神用node.js编写，膜拜。我的由hexo生成的blog代码托管于github，以下是我使用的设备和搭建环境的version：

  1. MacOS Sierra version 10.12.6，这个很重要，我用的macbook，所以很多操作都是在terminal中完成
  2. node.js version 8.9.1
  3. git version 2.13.6 (Apple Git-96) 下载Xcode会自带git
  4. hexo version 3.4.1 通过terminal下载
  5. Xcode version 9.1 App Store下载

所以我的建议是你的版本跟我一致或者更高比较好，如果因为version的关系在搭建过程中就可能会遇到很多的意想不到的问题。我在搭建的时候几乎没有遇到什么问题，基本上就是一次性就搭建好了

2. 申请github账号并建立一个repository

申请一个github账号没有什么好说的，用邮箱注册一下就好了，在此教程生成的这个时间点，我没有用vpn也可以流畅的使用github，所以应该没有被万里长城屏蔽掉

建立一个repository

在github上创建一个repository，如图所示

注意repository的名字，必须以github的username.github.io这种格式才行

3. 生成ssh key与github通信

检查ssh key是否存在

1
$ ls -al ~/.ssh


2021.12.02更正：
以前这里写的有很多问题，ssh-keygen是一个生成ssh-key键值对的工具，在linux或者unix环境，用户所在的根目录表示是波浪线即“~”
不带pub后缀的是私钥，带pub的是公钥，私钥放在用户根目录下的.ssh文件夹内，公钥放在对应的服务器上就可以通过ssh方式免密登录
rsa是加密方式，还有dsa等等，创建键值对的时候之所以要用邮箱，是担心用户有工作、私人等等不同场景的键值对需要，做一个区分，这个不是必须的
如果生成的时候不是在.ssh文件夹内，用linux的mv语句移过去也行
如果是centos等其他系统，还要注意.ssh需要700权限，其中的authorized_keys需要600权限

如果不存在会显示No such file or directory，如果存在会显示 id_rsa 和 id_rsa.pub

创建新ssh key

1
$ ssh-keygen -t rsa -C "example@example.com"

其中example@example.com为你在注册github时所用的邮箱
这时候会提示你保存路径，直接键盘回车
这时候会提示输入passphrase，建议直接键盘回车，否则以后连接github去push代码时每次都要输入
成功后会显示：

Your identification has been saved in xxxxxxxxxxxxxxxx
Your public key has been saved in xxxxxxxxxxxxxxxx
The key fingerprint is: xxxxxxxxxxxxxxxxxxxxxxxx
The key’s randomart image is:（后面图形省略）

添加key到ssh

1
$ ssh-add ~/.ssh/id_rsa

这样一个ssh key就生成了

添加ssh key到github

打开id_rsa.pub，其终端命令为

1
$ vim ~/.ssh/id_rsa.pub

复制以ssh-rsa开头到以邮箱结尾的所有内容
登录github，选择settings，选择SSH and GPG keys，选择new ssh key，将刚才复制的内容全部粘贴进去就完成了

测试是否可以连接

终端输入

1
$ ssh git@github.com

如果显示以下信息就成功了

Hi xxxxx! You’ve successfully authenticated, but GitHub does not provide shell access. Connection to github.com closed.

4. 安装git

我是直接安装的Xcode，Xcode自带了git，Xcode在App store中直接搜索即可下载，大约几个G。由于想到以后可能会使用Xcode编写IOS的程序，另外也为了减少配置的麻烦，因为不清楚单独安装git是否有设置的问题，所以感觉直接安装Xcode更加快捷方便。本教程是基于MacOS的系统，所以强烈建议此方式减少安装过程可能会出现的错误

安装之后使用以下代码在terminal中查看git版本号：

1
$ git version

5. 安装node.js

Mac系统直接去node官方网站下载，安装包不停的点击下一步，就安装好了

安装之后在terminal中查看版本号：

1
$ node -v

检查npm版本号(npm是个包管理工具，会随同node.js的安装一同安装)：

1
$ npm -v

6. 安装hexo并进行简单设置

在terminal中进行hexo的安装：

1
$ sudo npm install -g hexo

新建一个文件夹，例如建立一个文件夹叫localblog，在terminal中cd到这个文件夹中，然后执行：

1
$ hexo init

然后执行

1
$ npm install

就完成hexo的安装了
接下来我们可以看看原始的hexo效果，首先生成静态页面，依然cd到这个localblog中输入：

1
$ hexo g

然后启动hexo的本地server：

1
$ hexo s

这个时候在终端中会显示：

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

打开电脑上的浏览器，输入这个网址 http://localhost:4000/ 就可以看到一个原始hexo博客页面了

将本地hexo与github page联系起来

进入你的localblog的文件夹，你会找到一个叫做_config.yml的文件，我们需要修改这个文件。

首先cd进入这个文件夹，然后输入：

1
$ vim _config.yml

此时_config.yml在terminal中打开，找到deployment，将你在github上建立的repository地址填写在里面，如下所示：

deploy:
    type: git
    repo: 你的repository地址
    branch: master

修改好以后保存、退出
现在我们要将本地的hexo文件通过git的方式push到github的repository中
首先要安装一个小插件，这个是hexo要git到github上必须的！！！

1
$ npm install hexo-deployer-git --save

安装完成以后，就可以把本地hexo文件push到github上了，输入：

1
2
3
$ hexo clean
$ hexo g
$ hexo d

完成后就可以通过 https://yourname.github.io/ 在浏览器里看到啦

7. 发布一篇文章

首先我们要看一下hexo的文件夹，就是我们建立的localblog，进入这个文件夹，我们会看到一些重要的文件: _config.yml所有hexo的基本设置都在这里。themes文件夹保存了你以后会使用的主题，如果你点进去看就会发现有个landscape文件夹，这个主题即是你在步骤6中生成网页的主题。然后就是source文件夹，进入后你会看到_post文件夹，进入这个post文件夹，里面会有一个hello-world.md文件，这个就是你步骤6中那个自动生成的文章，以后所有的文章都会以markdown文件的形式保存在这里。

发布一篇新文章

首先terminal要cd到你的hexo文件夹，比如这里我们cd到localblog，然后输入：

1
$ hexo new "新文章的文件名"

成功后会显示你成功生成了一个md文件，你可以在_post文件夹中看到，你也可以启动本地hexo的server：

1
$ hexo s

也能看到一篇新文章生成
此时新文章只在你本地电脑上，如果要发布到github你需要输入：

1
2
3
$ hexo clean
$ hexo g
$ hexo d

所以基本上每次编辑好你的新文章md文件后都有这个发布的过程。

8. 使用一个blog主题

首先我们要明白的是默认的自带主题只有landscape一个，很显然你希望一个有自己风格的主题或者排版风格。由于我暂时不会js，并且我认为一个blog的灵魂是内容，所以，我们可以使用别人已经制作好的主题。在这里感谢网络上无数的技术达人无私的奉献。你可以在hexo官方网站找到很多的主题。我使用的是一个yilia简洁风格的主题（现在已经换成next主题）

如何使用yilia主题

首先cd到你的hexo文件夹，本文章里是localblog，然后输入：

1
$ git clone https://github.com/litten/hexo-theme-yilia.git themes/yilia

完成后yilia主题就被下载放置到themes文件夹下面了，进入themes文件夹你就能看到一个新的文件夹yilia，说明就成功下载了

接下来我们要用这个theme来替换之前默认的主题，进入_config.yml文件：

1
$ vim _config.yml

找到theme：landscape 改为theme：yilia
然后保存退出

然后输入：

1
2
3
$ hexo c
$ hexo g
$ hexo s

就可以在本地看到yilia主题的效果了，关于yilia主题应该如何设置，作者Litten有详细的说明

总结

本来想总结一下的，发现这些技能很多，很杂，遇到问题自己baidu或者google更好吧
只在这里说一个，vim命令是进入一个编辑器，进入后只是浏览模式，如果要编辑首先要按i，之后会出现insert，这时候就可以编辑了，编辑好之后先按esc退出编辑模式，然后按shift+:就会出现一个冒号，输入w保存改动，输入q退出编辑

终于写完了，由于是第一篇，所以花了较多的时间查各种出现的问题以及如何编辑markdown文件，另外还没有找到合适的图床，所以这篇文章没有图片，另外还有没有编辑完成的地方，等我先想想再说。（已经找到图床，用的阿里云的oss服务，本来想替换用自己的域名，但域名必须备案，额，这个就比较麻烦了，需要点时间）