Mac 上搭建基于 Hexo + GitHub 个人博客

Posted 2020-10-31 narisu

环境配置

本人电脑系统：macOS

Node.js

生成静态页面。安装Node.js

Git

用于将本地 Hexo 内容提交到 Github。Xcode自带Git（前提：macOS已经安装了Xcode），若没有，可以参考 Hexo官网上的安装方法。

安装 Hexo

当 Node.js 和 Git 都安装好后，就可以正式安装 Hexo 了，终端执行如下命令：

$ sudo npm install -g hexo

输入管理员密码（Mac 登陆密码）即可开始安装。

注：

sudo：linux系统管理指令

-g：全局安装

注意：Hexo官网上的安装命令是$npm install -g hexo-cli，安装时不要忘记前面加上sudo，否则会因为权限问题报错。

初始化

终端cd到一个你选定的目录，执行hexo init命令：

$ hexo init blog

注：blog是你建立的文件夹名称。

cd到blog文件夹下，执行如下命令安装npm：

$ npm install

执行如下命令，开启Hexo服务器：

$ hexo s

此时，浏览器中打开网址http://localhost:4000，能看到如下页面：

注：终端使用快捷键control + c可关闭Hexo服务器。

本地设置好后，接下来开始关联GitHub。

关联GitHub

创建仓库

登陆你的GitHub帐号，新建仓库，名为yours github username.github.io固定写法，如nar1su.github.io即下图中1所示：

注意：图中1处的/前后nar1su的拼写必须一直，否则无法部署Hexo。

本地的blog文件夹下内容为：

_config.yml
db.json
node_modules
package-lock.json
package.json
scaffolds
source
themes

终端cd到blog文件夹下，vim打开_config.yml，命令如下：

$ vim _config.yml

打开在最后的部分，修改成下边的样子：

deploy:
    type: git
    repository: https://github.com/nar1su/nar1su.github.io.git
    branch: master

你只需要将repository后的https:~~~改为你自己的就好。在上图中2处获取。Hexo 3.1.1版本后type:值为git

注意：配置所有的_config.yml文件时（包括theme文件夹中的_config.yml），所有的冒号:后边都要加一个空格，否则执行hexo命令时会报错。

在blog文件夹目录下执行生成静态页面命令：

$ hexo generate         或者：hexo g

此时若出现如下报错：
ERROR Local hexo not found in ~/blog
ERROR Try runing: 'npm install hexo --save'

则执行命令：
npm install hexo --save

若无报错，自行忽略此步骤

再执行配置命令：

$ hexo deploy           或者：hexo d

注意：若执行命令hexo deploy仍然报错：

ERROR Deployer not found: git     // 无法连接git或找不到git

无法连接git或找不到git，则执行如下命令来安装hexo-deployer-git:

$ npm install hexo-deployer-git --save

再次执行hexo generate和hexo deploy命令。

若你未关联GitHub，则执行hexo deploy命令时终端会提示你输入GitHub的用户名和密码，即

Username for 'https://github.com':
Password for 'https://github.com':

hexo deploy命令执行成功之后，浏览器中打开网址https://nar1su.github.io(将nar1su换成你的用户名)能看到和先前在本地打开http://localhost:4000时一样的页面。

为避免每次输入GitHub用户名和密码的麻烦，可参照下面4方法

添加ssh keys到GitHub

检查SSH keys是否存在GitHub

执行如下命令，检查SSH keys是否存在。

$ ls -al ~/.ssh

如果有文件id_rsa.pub或id_rsa，则直接进入步骤4.3将SSH key添加到GitHub中，否则执行4.2生成SSH key。

生成ssh key

执行如下命令生成public/private rsa key pair，注意将[email protected]换成你自己注册GitHub的邮箱地址。

$ ssh-keygen -t rsa -C "[email protected]"

默认会在相应路径下（~/.ssh/id_rsa.pub）生成id_rsa和id_rsa.pub两个文件。

将ssh key添加到GitHub中

在终端使用cat命令，前往文件夹~/.ssh查看id_rsa.pub 文件，里面的信息即为SSH key，将这些信息复制到GitHub的Add SSH key页面即可。

$ cat ~/.ssh/id_rsa.pub

通过浏览器进入个人GitHub网站： GitHub -> Settings -> SSH and GPG keys -> New SSH:

Title 里任意添加一个标题，将复制的内容粘贴到 key 里，点击下方Add key绿色按钮即可。

发布文章

终端cd到blog文件夹下，执行如下命令新建文章：

$ hexo new "fileName"

文件名为fileName.md的文件会建在目录/blog/source/_posts下，fileName是文件名，为方便链接文件名不建议命名为汉字。你当然可以用vim来编辑文章。我在用Typora编辑器，所写即所得，虽然缺点也不少，但书写基本没什么问题。如果你有好用的markdown编辑器，请推荐我，感激不尽！

文章编辑完成后，终端cd到blog文件夹下，执行如下命令来发布：

$ hexo generate         // 生成静态页面 
$ hexo deploy           // 将文章部署到GitHub

至此，macOS上搭建基于GitHub的Hexo博客就完成了。下面的内容是博客的一些个性化设置，如有兴趣，请各取所需。

安装主题（theme）

你可以到Hexo官方主题、有哪些好看的 Hexo 主题？找自己喜欢的主题。这里以hexo-theme-next为例，终端cd到blog目录下，执行如下命令：

$ git clone https://github.com/iissnan/hexo-theme-next themes/next

配置blog/_config.yml文件中的theme字段为next：

# Extensions
## Plugins: http://hexo.io/plugins/
## Themes: http://hexo.io/themes/
theme: next

编辑完成后，终端cd到blog文件夹下，执行如下命令（每次部署文章的步骤）来更新GitHub上的部署：

$ hexo clean        // 清除缓存文件（db.json）和已生成的静态文件（public）
$ hexo generate     // 生成静态页面 
$ hexo deploy       // 将修改更新到GitHub

至于修改theme内容，比如：名称、描述、头像等，配置blog/_config.yml文件和blog/themes/even/_config.yml文件中对应的属性名称即可， 不要忘记冒号:后加空格。 NexT 使用文档里有详细的介绍。

个人域名绑定

购买域名

我用的国外的GoDaddy（需要FQ）域名提供商，好处是不用走备案流程省事儿，然后使用DNSPOD解析域名。

好多人也在用国内的阿里万网，可以直接在其网站做域名解析。有兴趣的也可以试试。

配置GitHub端

在本地你的电脑/blog/source目录下新建文件名为：CNAME文件，注意没有后缀名！直接将自己的购买的域名写入即可。

$ vim Documents/blog/source/CNAME       // 写入自己购买的域名，保存退出即可。

终端cd到blog目录下执行如下命令重新部署：

$ hexo clean
$ hexo generate
$ hexo deploy

注意：网上许多都说在GitHub上直接新建CNAME文件，如若这样的话，下次更新部署执行hexo deploy命令后，CNAME文件就会消失，因为本地没有此文件嘛！

域名解析

配置GoDaddy

购买好域名后，进入GoDaddy个人帐号中的管理域名选项，点击三个小点

配置管理DNS：

依次键入a.dnspod.com、b.dnspod.com和c.dnspod.com，保存即可

转址部分这样配置即可：

注：nar1su替换为你的GitHub用户名即可。附仅转址和掩蔽转址相关信息：

配置DNSPOD

进入DNSPOD（需FQ）注册并登陆，配置解析域名：

1) 先添加一个CNAME，主机记录写@，后面记录值写上你的xxxx.github.io

2) 再添加一个CNAME，主机记录写www，后面记录值还是xxxx.github.io

xxxx是你的GitHub用户名。这样别人用www和不用www都能访问你的网站（其实，www的方式，会先解析成xxxx.github.io，然后根据CNAME再变成xxx.com（你购买的域名），即中间是经过一次转换的）。建议直接提供不带www的域名链接，这样速度快。

上面，我们用的是CNAME别名记录，也有人使用A记录，后面的记录值是写github page里面的ip地址，但有时候IP地址会更改，导致最后解析不正确，所以还是推荐用CNAME别名记录要好些，不建议用IP。

等几分钟，刷新浏览器。访问https://houhaibushihai.me、https://www.houhaibushihai.me和https://nar1su.github.io，效果是一样的。

配置七牛

Hexo我们部署到GitHub很便捷，可惜GitHub给的免费空间很少。所以尽量还是不要把图片，视频等多媒体，大容量资源存于GitHub，否则很快资源耗尽。

七牛，是一个云存储服务提供商，注册并实名认证之后，你将免费享有10GB存储空间，每个月10GB下载流量、100万次GET请求和10万次PUT/DELETE请求。

注册七牛云

七牛云，建议实名认证获取额外的免费空间。

创建空间

注意我们添加的资源为对象存储，访问控制为公开空间

1. 点击内容管理，上传文件 ；

2. 点击内容管理，点击指定照片的 复制外链 ；

3. 然后回到本地 md 文件中只要写上图片语法就可以引用了。

![自己定义的图片名字](复制过来的外链）

OK了，这个时候你重新部署一下，看看是不是文章里已经有图片了呢！

添加评论板块儿

添加 Disqus 评论

1. 注册 Disqus

2. 点击 I want to install Disqus on my site

3. Websit Name 就是 disqus_shortname 自己填写，但是要求全网唯一，设定后不可改变，比如我的是 narisu ，这个在配置 Hexo 的blog/themes/next/_config.yml文件时候需要用到。
   Category 选择种类，可以随便选；
   Language 语言选 Chinese 或者 English；
   然后点 Create Site 等待界面跳转。

4. 选择 Basic 下的 Subscribe Now 。

5. 选择 Configure Disqus ，Website URL 中输入你的博客域名。如下图：

1. 配置 Hexo 的blog/themes/next/_config.yml文件：

yml # Disqus disqus_shortname: narisu

注：disqus_shortname 填入你自己的 Websit Name 。

特定页面评论区禁用

禁用特定页面的评论区：

禁用about页面的评论模块儿方法：在 /source/about/ 下的 index.md 文件中，title 那栏设置（添加）：comments: false 。如下：
---
title:
date: 2017-12-28 14:13:34
comments: false
---

归档 (Archive) 如何设置成没有分页

在站点配置文件 即： blog/_config.yml文件中，添加代码：

# Archives
## 2: Enable pagination
## 1: Disable pagination
## 0: Fully Disable
archive: 1
## category: 1
## tag: 1

Reference

Hexo

Mac上搭建基于GitHub的Hexo博客

Hexo搭配七牛存储图片等媒体资源

next主题之第三方评论系统

大道至简--hexo主题的归档如何设置成没有分页

添加分类页面（别忘记 layout: 字段的添加）

如需个性化设置可参考此帖

even 主题的更多设置