Mac使用hexo搭建博客部署在github上

发表于 |

Hexo是什么？

  • Hexo 的中文官网：http://hexo.io/zh-cn/

  • 作者 Tommy Chen：https://zespia.tw/

  • 在我的理解里面：Hexo 是一个基于 Node.js 快速、简洁且高效的博客框架，可以将 Markdown 文件快速的生成静态网页，托管在 GitHub Pages 上。

  • 而官网自己是这样说的：

Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown（或其他渲染引擎）解析文章，在几秒内，即可利用靓丽的主题生成静态网页。

为什么要用 Hexo?

本文环境：

关于域名绑定

  • 域名绑定的作用是让你可以使用自己的域名去访问这个博客，如果不需要绑定就直接使用github默认的xxxxx.github.io即可。

Node.js 源设置

  • 在安装 Hexo 之前，先说一下 Node.js 的源，Node.js 官方源默认是：http://registry.npmjs.org，但是由于在国外，说不定你使用的时候就抽风无法下载任何软件。所以我们决定暂时使用淘宝提供的源，淘宝源官网：http://npm.taobao.org/
    在 Terminal 中我们执行下面这一句（这是一整句的）：

    1
    2
    3
    4
    alias cnpm="npm --registry=https://registry.npm.taobao.org \
    --cache=$HOME/.npm/.cache/cnpm \
    --disturl=https://npm.taobao.org/dist \
    --userconfig=$HOME/.cnpmrc"
    • 现在验证下是否可以使用淘宝的 cnpm 命令：cnpm info express
      如果能输出一大堆介绍，则说明成功了，以后每次要使用淘宝的源都需要这样来。现在除了默认的 npm，还多了一个 cnpm 可以使用，我们下面有关安装的讲解内容也都是基于此临时命令。
    • 如果Terminal输出： cnpm: command not found，则表示没成功，需要你在排查下
      需要强调的是：cnpm 不是永久性命令，只是此时这个界面窗口下的临时命令，关掉窗口就没效果了。

安装 Hexo 框架

  • 安装 Hexo（注意，现在是 cnpm 开头了，不是 npm 了）：cnpm install -g hexo-cli
    • 安装时间不一定很快，有可能需要等 3 ~ 5 分钟。
    • 安装过程中有 WARN 警告也没关系的，不用在意这些 WARN，继续等它安装完成。
    • 因为国内的网络问题，有时候安装异常慢花了大半个小时都没效果，那就 Ctrl + C 停掉这次命令，重新再执行一次。

Hexo初始化

  • 进入需要初始化的文件夹，我这里为/Work/hexo，执行如下命令：
    • 1、 cd /Work/hexo
    • 2、 hexo init
    • 3、最后执行：cnpm install，有显示 WARN 也不用管
  • 现在我们启动 hexo 本地服务，看下默认的博客是怎样的，命令：hexo server
    现在用浏览器访问：http://localhost:4000/，效果如下图

  • 如果要停止 hexo 服务：在 Terminal 下按 Ctrl + C 即可

选用其他主题

由于默认主题太大众了，所以现在我们换个主题。

你可以去这里找主题：

hexo-theme：
https://hexo.io/themes/

hexo-github-theme-list：
https://github.com/hexojs/hexo/wiki/Themes

现在假设你跟我要用的模板是一样：
还是让 Terminal 保持在 /Work/hexo/themes 目录下，然后输入命令： git clone https://github.com/iissnan/hexo-theme-next.git

这样就在 /Work/hexo/themes 目录下生成了一个 hexo-theme-next 文件夹，里面有我们刚刚 clone 下来的主题内容。

如果以后你不自己修改这个主题的话，可以考虑经常更新下作者的更新内容：

1
2
cd /Work/hexo/themes/hexo-theme-next 
git pull origin master

下载好主题文件之后，我们现在要修改 /Work/hexo 目录下的项目配置文件：_config.yml，把对应的主题目录名改下，编辑如下图。

  • 更改主题目录名后，我们还要重新生成主题静态内容：

创建 Github pages 并 SSH 授权

原文链接(此处引用youmeek的方法)

  • 现在假设你已经有一个 Gtihub 账号，你还需要一个特别的仓库，特别在仓库名就是你的 Github 账号登录名，比如我的用户名是：judasn，那我要创建的仓库名字完整滴填写是：judasn.github.io，具体效果如下图。

  • 1、在终端，也就是Terminal上输入命令：
    ssh-keygen有提示直接按回车即可。

  • 2、cd ~/.ssh
  • 3、这个时候会看到该目录下有文件id_rsa.pub 复制里面的内容。
  • 4、访问：https://github.com/settings/ssh，添加新秘钥，效果如下图
    Title：自己随便取
    Key：把刚刚复制的都粘贴进来

把本地的博客内容同步到 Github 上

  • 要把本地的静态博客同步到 Github，我们还需要先安装两个跟部署相关的 hexo 插件：
    继续在 Terminal 中输入：
1
2
cnpm install hexo -server --save
cnpm install hexo-deployer-git --save

编辑全局 hexo 的配置文件：_config.yml

官网对此配置的介绍：https://hexo.io/zh-cn/docs/configuration.html
我自己的编辑内容初稿（你需要认真看的是含有中文注释的内容）：

1
2
3
4
5
6
7
8
# Deployment
## 这里是重点，这里是修改发布地址，因为我们前面已经加了 SSH 密钥信息在 Github 设置里面了，所以只要我们电脑里面持有那两个密钥文件就可以无需密码地跟 Github 做同步。
## 需要注意的是这里的 repo 采用的是 ssh 的地址，而不是 https 的。分支我们默认采用 master 分支，以后你翅膀硬了要换其他也无所谓。
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: git
  repo: git@github.com:judasn/judasn.github.io.git
  branch: master

  • 编辑全局配置后我们需要重新部署：

    • 继续在 Git Bash 中输入命令：
    • 先清除掉已经生成的旧文件：hexo clean
    • 再生成一次静态文件：hexo generate
    • 在本地预览下：hexo server
    • 本地没问题之后，Ctrl + C 停掉本地预览。
    • 在部署到 Github 之前，需要先确定你是否已经用过 Git，如果你没用过，则此时你需要做如下设置，在 Git Bash 中依次输入下面两个命令：
    • git config --global user.email "你的 Github 注册邮箱地址"
    • git config --global user.name "你的 Github 用户名"

  • 通过上面几次流程我们也就可以总结：以后，每次发表新文章要部署都按这样的流程来：

1
2
3
hexo clean
hexo generate
hexo deploy
  • 也因为这几个命令太频繁了，所以又有了精简版的命令：
1
2
3
4
hexo clean == hexo clean
hexo g == hexo generate
hexo s == hexo server
hexo d == hexo deploy

域名绑定

  • 首先我们要一个 CNAME 文件（文件名叫 CNAME，没有文件后缀的），把该文件放在 E:\git_work_space\hexo\source 目录下，以后一些需要放在根目录的资源文件都可以放这里。如果你找不到这样的文件可以到youmeek的项目上下载：https://github.com/judasn/judasn.github.io
    • CNAME 上的内容需要写你具体要绑定的域名信息，比如我是：blog.byyan.com，具体你可以参考下图：
    • 然后到自己的域名管理后台填写CNAME记录
    • 设置好之后，等几分钟就可以通过http://blog.byyan.com访问这个页面了