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

分手后的思念是犯贱 2021-09-29 10:56 613阅读 0赞

## 环境配置 ##

本人电脑系统：macOS

## Node.js ##

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

### Git ###

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

### 安装 Hexo ###

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

$ sudo npm install -g hexo

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

注：

`sudo`：linux系统管理指令

`-g`：全局安装

> 注意：[Hexo官网][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][http_localhost_4000]，能看到如下页面：

![Screen Shot 2018-04-07 at 09.43.00][]

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

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

## 关联GitHub ##

### 创建仓库 ###

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

![Screen Shot 2018-04-07 at 18.04.17][]

> 注意：图中`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][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，注意将your\_email@example.com换成你自己注册GitHub的邮箱地址。

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

默认会在相应路径下（`~/.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 1]、[有哪些好看的 Hexo 主题？][Hexo 2]找自己喜欢的主题。这里以[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 使用文档][NexT]里有详细的介绍。

## 个人域名绑定 ##

### 购买域名 ###

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

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

### 配置GitHub端 ###

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

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

![Screen Shot 2018-04-08 at 01.30.32][]

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

$ hexo clean
    $ hexo generate
    $ hexo deploy

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

### 域名解析 ###

#### 配置GoDaddy ####

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

![Screen Shot 2018-04-08 at 01.10.51][]

配置`管理DNS`：

![Screen Shot 2018-04-08 at 01.43.23][]

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

![Screen Shot 2018-04-08 at 01.46.43][]

`转址`部分这样配置即可：

![Screen Shot 2018-04-08 at 01.50.47][]

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

![Screen Shot 2018-04-08 at 00.58.54][]

#### 配置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_houhaibushihai.me]、[https://www.houhaibushihai.me][https_www.houhaibushihai.me]和[https://nar1su.github.io][https_nar1su.github.io]，效果是一样的。

## 配置七牛 ##

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

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

### 注册七牛云 ###

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

### 创建空间 ###

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

1.  点击`内容管理`，`上传文件` ；
2.  点击`内容管理`，点击指定照片的 `复制外链` ；
3.  然后回到本地 md 文件中只要写上图片语法就可以引用了。
    
    `![自己定义的图片名字](复制过来的外链）`
    
    OK了，这个时候你重新部署一下，看看是不是文章里已经有图片了呢！

## 添加评论板块儿 ##

### 添加 Disqus 评论 ###

1.  [注册 Disqus][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` 中输入你的博客域名。如下图：
    
    ![Screen Shot 2018-04-08 at 19.16.07][]
6.  配置 Hexo 的`blog/themes/next/_config.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][Hexo 3]

[Mac上搭建基于GitHub的Hexo博客][Mac_GitHub_Hexo]

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

[next主题之第三方评论系统][next]

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

[添加分类页面][Link 3]（别忘记 `layout:` 字段的添加）

[如需个性化设置可参考此帖][Link 4]

[even 主题的更多设置][even]

转载于:https://www.cnblogs.com/kafffka/p/9057810.html

[Node.js]: https://nodejs.org/en/
[Hexo]: https://hexo.io/docs/
[http_localhost_4000]: http://localhost:4000
[Screen Shot 2018-04-07 at 09.43.00]: /images/20210725/6424b256713c42bda17b63e2d8c80251.png
[Screen Shot 2018-04-07 at 18.04.17]: /images/20210725/3a158703dcf243f08d49f78cadc4ba1a.png
[hexo-deployer-git]: https://github.com/hexojs/hexo-deployer-git
[https_nar1su.github.io]: https://nar1su.github.io
[Typora]: https://www.typora.io
[Hexo 1]: https://hexo.io/themes/
[Hexo 2]: https://www.zhihu.com/question/24422335
[hexo-theme-next]: https://github.com/theme-next/hexo-theme-next/blob/master/docs/zh-CN/README.md
[NexT]: http://theme-next.iissnan.com/
[GoDaddy]: https://sg.godaddy.com/
[DNSPOD]: https://www.dnspod.com/
[Link 1]: https://wanwang.aliyun.com/
[Screen Shot 2018-04-08 at 01.30.32]: /images/20210725/3ceafef52d604242b89d945f9e33d2de.png
[Screen Shot 2018-04-08 at 01.10.51]: /images/20210725/eee9c49c9c354c15ad3e27418701a06a.png
[Screen Shot 2018-04-08 at 01.43.23]: /images/20210725/fb30d0a9a1bc4964bc5344e96aaca0df.png
[Screen Shot 2018-04-08 at 01.46.43]: /images/20210725/9ddb2b602b064ad8b2f18b15c51c1540.png
[Screen Shot 2018-04-08 at 01.50.47]: /images/20210725/a0f1b6c3d69542b7942ddcce5a3f84b1.png
[Screen Shot 2018-04-08 at 00.58.54]: /images/20210725/9458e3b0fc8b4038ac812357764756b3.png
[https_houhaibushihai.me]: https://houhaibushihai.me
[https_www.houhaibushihai.me]: https://www.houhaibushihai.me
[Link 2]: https://www.qiniu.com/
[Disqus]: https://disqus.com/profile/signup/
[Screen Shot 2018-04-08 at 19.16.07]: /images/20210725/079790f27f7e4ced9a518c5dc23f3652.png
[Hexo 3]: https://hexo.io/zh-cn/
[Mac_GitHub_Hexo]: http://gonghonglou.com/2016/02/03/firstblog/
[Hexo 4]: https://www.jianshu.com/p/9553b4077ca4
[next]: http://jinfang.life/posts/989a1501/
[--hexo]: https://segmentfault.com/q/1010000009688644
[Link 3]: http://uchuhimo.me/2017/04/11/genesis/
[Link 4]: https://www.jianshu.com/p/f054333ac9e6
[even]: https://github.com/ahonn/hexo-theme-even/wiki