×

Hexo之旅(二):Hexo博客搭建(在 Mac OS 平台)

96
vinnyxiong
2016.03.29 23:04* 字数 2435

1 Git Pages 服务准备

工欲善其事,必先利其器。

在配置本地环境之前,先介绍Pages服务,是因为这是一切静态博客的基础。我们之所以能够使用Github、GitCafe等代码托管站来托管我们的博客,是因为他们提供了Pages服务。来看GitCafe上的介绍。

Pages服务
GitCafe Pages 是一项公众网页托管和发布服务。你可以使用 GitCafe Pages 托管博客、项目官网一类的静态网页,支持绑定自定义域名。
GitCafe Pages 支持用户 Pages 服务和项目 Pages 服务。用户 Pages 可以通过 user_name.gitcafe.io 形式的 URL 直接访问,适合用作个人或组织的静态博客或网站;项目 Pages 需通过user_name.gitcafe.io/project_name形式的 URL 访问,更适合托管项目的官网或博客。

1.1 创建Github项目

这里只以Github为例,GitCafe是类似的。
如果还没有Github账号,先去注册一个吧https://github.com/
用刚刚注册的 Github 账号登录,然后在点击页面右上角的加号,在弹出菜单中点击New Repository,如图所示
{% img /images/blog_post_images/2016-03/2016-03-01-Hexo之旅-二-:Hexo博客搭建1.jpg %}
然后会跳转到一个新建库(Create new repository)的页面,在Repository name一栏填[your_username].github.io[your_username]是你 Github 上的用户名,请务必按照此格式填写,否则无法在 Github 上部署博客。然后点击 Create repository 按钮提交。
如果一切顺利会出现一个页面,有一个 SSH 地址,形如git@github.com:[your_username]/[your_username].github.io.git,下一步会用到。(这里会有两种形式的地址,一种是HTTPS的,一种是SSH的,我们用SSH形式的)。

1.2 添加 SSH 公钥

为了保证安全,以及不用每次输入git密码,我们可以在Github上添加 SSH 公钥。
SSH 密钥的创建需要在终端(命令行)环境下进行,我们首先进入命令行环境。通常在 Mac OS X 和 Linux 平台下我们使用终端工具(Terminal),在 Windows 平台中,可以使用 Git Bash 工具。
在 GitCafe 的官网上有很详细的添加 SSH 公钥的方法的介绍。
点击查看“添加 SSH 公钥”的方法
注意:如果是同一个Email注册的Github和GitCafe,在本地只需要生成一次公钥密钥,然后分别添加到Github和GitCafe上。
添加到Github上的方法与GitCafe是类似的,点击右上角的头像打开setting,点击SSH Keys,点击右上角的New SSH key,将公钥复制进去创建即可。

2016-03-01-Hexo之旅-二-:Hexo博客搭建2.jpg

做完上面这两个步骤,我们的 Pages 服务就准备好了,下面开始搭建本地环境。

2 本地环境准备

既然是为黑客设计的博客框架,安装起来肯定没有像普通应用程序那么简单,需要一些准备工作,但请相信我,并不复杂。

  1. Hexo 是基于 Node.js 的,而且我们需要使用 git 来管理代码,所以总体上来说我们需要安装 Node.js 和 Git。
  2. 安装 Node.js 和 Git 可以通过 HomeBrew 安装。

2.1 安装 HomeBrew

HomeBrew 是一个非常有用的软件包管理系统,你可以把它想象成一个稍微抽象一点的 Mac App Store。正如我们用 Mac App Store 来安装其他软件一样,我们这一步安装 HomeBrew 的目的是为了安装别的软件(Node.js 和 Git)。当然 Mac App Store 和 HomeBrew 本身也是软件。
安装 HomeBrew 非常简单,打开终端 (Terminal),执行以下命令(所谓「执行」即「输入+回车」,下同):

$ ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

如果在执行上如命令的时候弹出需要安装 Xcode Command Line Tool 的提示,直接点击安装即可。
安装好之后最好先执行以下命令:

$ brew doctor

此条命令用来诊断安装中出现的问题并提示修复方法,如果没有问题则会显示:

$ Your system is ready to brew.

如遇问题,则按照提示处理,如果不懂如何处理可以先试着执行后面的步骤,如果能成功,则没有太大问题,毕竟我们只是想写博客而已。当然,做任何事情之前,备份是必须的。

2.2 安装 Git

安装 Git 非常简单,执行以下命令即可:

$ brew install git

2.3 安装 Node.js

Hexo官网上说安装Node.js 的最佳方式是使用nvm。因此推荐的安装流程如下:

  1. 使用Homebrew安裝nvm
  2. 使用nvm安裝Node.js
  3. 使用nvm无痛切换Node.js版本

使用Homebrew安裝nvm

$ brew install nvm

安装过程看到如下提示:

==> Downloading https://github.com/creationix/nvm/archive/v0.30.1.tar.gz
==> Downloading from https://codeload.github.com/creationix/nvm/tar.gz/v0.30.1
######################################################################## 100.0%
==> Caveats
Please note that upstream has asked us to make explicit managing
nvm via Homebrew is unsupported by them and you should check any
problems against the standard nvm install method prior to reporting.

You should create NVM's working directory if it doesn't exist:

  mkdir ~/.nvm

Add the following to ~/.bash_profile or your desired shell
configuration file:

  export NVM_DIR=~/.nvm
  . $(brew --prefix nvm)/nvm.sh

You can set $NVM_DIR to any location, but leaving it unchanged from
/usr/local/Cellar/nvm/0.30.1 will destroy any nvm-installed Node installations
upon upgrade/reinstall.

Type `nvm help` for further information.

Bash completion has been installed to:
  /usr/local/etc/bash_completion.d
==> Summary
🍺  /usr/local/Cellar/nvm/0.30.1: 6 files, 82.6K, built in 6 seconds

根据提示知道,为了让你可以直接在shell使用nvm指令,必须创建nvm的工作目录,并且在你的 .bash_profile 加入以下两行:

export NVM_DIR=~/.nvm
. $(brew --prefix nvm)/nvm.sh

在终端按顺序执行以下命令:

$ mkdir ~/.nvm
$ echo "export NVM_DIR=~/.nvm" >> .bash_profile
$ echo ". $(brew --prefix nvm)/nvm.sh" >> .bash_profile

记得重新source你的 .bash_profile来让设定生效:

$ . ~/.bash_profile

最后用 nvm help 来验证nvm是否正确安装

以上步骤一定要执行,不然无法在命令行使用nvm。有时候你明明记得已经安装了nvm,但是提示找不到nvm命令,则可以重复执行以上的步骤。

使用nvm安裝Node.js

安裝完了nvm,接著安裝主角 Node.js。先用 $ nvm ls-remote 指令看一下有哪些版本可以安裝:

$ nvm ls-remote
      .
      .
      .
       v0.11.12
       v0.11.13
       v0.11.14
       v0.11.15
       v0.11.16
        v0.12.0
        v0.12.1
        v0.12.2
        v0.12.3
        v0.12.4
        v0.12.5
        v0.12.6
        v0.12.7
        v0.12.8
        v0.12.9
        v0.12.10
      .
      .
      .

直接用

$ nvm install <version>

指令安装官网上建议的版本:

$ nvm install v0.12.10
######################################################################## 100.0%

Now using node v0.12.2

使用nvm无痛切换Node.js版本

检查当前使用的 Node.js 版本使用命令 nvm ls。如果输出结果如下表示正确:

->     v0.12.10
         system
default -> v0.12.10
node -> stable (-> v0.12.10) (default)
stable -> 0.12 (-> v0.12.10) (default)
iojs -> N/A (default)

第一个 -> 表示当前使用的版本,default -> 表示默认版本,必须保证这两个,不然后面安装hexo会提示 -bash: hexo: command not found ,不能在命令行使用。
设置的方法是,先通过 nvm ls 看看本地安装了什么版本,如果本地没有,则应该使用上一步的方法先安装,然后执行这个命令指定版本:

$ nvm use v0.12.10

再通过这个命令指定默认版本:

$ nvm alias default v0.12.10

2.4 安装 Hexo

所有必备的应用程序安装完成后,即可使用 npm 安装 Hexo:

$ npm install -g hexo-cli

-g 或 –global 表示全局安装模块,如果没有这个参数,会安装在当前目录的node_modules子目录下。
安装 Hexo 完成后,请执行下列命令,Hexo 将会在指定文件夹中新建所需要的文件。

$ hexo init <folder>
$ cd <folder>
$ npm install

$ npm install 表示安装当前目录package.json文件中配置的dependencies模块。

2.5 更新 Hexo

官方发布了新版本后,可以在Hexo建立的博客目录内运行:

$ npm update

用如下命令可以检查package.json文件中配置的dependencies的版本号:

$ npm ls --depth=0

2.6 部署 Hexo

Hexo 3.0版本需要单独安装发布器插件,检查博客目录的node_modules中有没有hexo-deployer-git文件夹,若没有,执行以下命令安装:

$ npm install hexo-deployer-git --save

添加 -save 参数安装的模块的名字及其版本信息会出现在package.json的dependencies选项中。

另外,从Hexo 3.0开始配置文件_config.yml中的部署类型记得要填写成git:

deploy:
  type: git ##部署类型,其它类型自行google之
  repo: <repository url> ##git仓库地址
  branch: [branch] ##git 页面分支
  message: [message] ##git message建议默认字段update 可以自定义

如果要同时部署到 Github 和 GitCafe 上,可以按照下面的方式来写,这时候就要用到前面创建 Github 项目时的 SSH 地址了。

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: git
  repo:
    github: git@github.com:[your_username]/[your_username].github.io.git,master
    gitcafe: git@gitcafe.com:[your_username]/[your_username].git,gitcafe-pages

[your_username]改成你的username即可,逗号后面跟着分支名,如果是master可以省略。

2.7 运行 Hexo

到现在,一个 Hexo 博客已经搭建起来了,你可以在本地运行,也可以发布到 Git Page 服务商运行。
执行下面的命令就可以在本地运行一个 Hexo 博客了。

$ hexo server 或 hexo s

这个命令执行之后 Hexo 会监视文件变动并自动更新,您无须重启服务器。
按照提示打开http://localhost:4000/即可。

当然我们最终还是要发布到 Github 或 GitCafe 上的,每次更新完博客发布需要执行以下命令:

$ hexo clean  # 清空
$ hexo generate 或 hexo g    # 生成
# hexo deploy 或 hexo d      # 发布

然后在浏览器输入 http://[your_username].github.io/,如果是 GitCafe,则是 http://[your_username].gitcafe.io/,即可打开我们的博客了,里面有一篇默认的“Hello World”文章(果然任何程序都是从 Hello World 开始的啊)。

有人写了个各种命令的总结:hexo常用命令笔记

3 尾巴

搭建一个 Hexo 博客还是很简单的,当然现在的运行起来的只是一个博客的默认的样子,我们需要更多的个性化,来把她真正地变成我们的个人博客。后面会再介绍博客的优化及个性化方法。

俗话说,“好记性不如烂笔头”,写这篇文字也是为了记录自己的博客搭建过程,以及中间遇到的问题的处理和解决方法的记录,当然也可以当作是一个对于新手的教程吧。

本文首发于我的博客vinnyxiong.cn,欢迎访问。

Web note ad 1