Mac 下用 Github 和 Hexo 搭建博客

发表于

准备

  • Github pages 的创建在上一篇博文已经说了，这里略过

  • git 自带，略过

  • Hexo 基于 Node.js ，这个等会装

  • 安装 Hexo

  • 整个过程大概就是：

    创建 Github pages —> 安装 Node.js —> 安装 Hexo —> Hexo 初始配置 —> 关联 github —> 开始创作

一、安装 Node.js

这里选择 Homebrew 进行安装，对于没有 Homebrew 的自己去找下教程，网上教程很多，不过最好的教程在官网，特简单易懂，这里附上官网地址 https://brew.sh/ ，Homebrew 安装好之后，开始下面的步骤

在命令行输入

1
brew install node

剩下的交给时间

二、安装 Hexo

1
npm install -g hexo-cl

有啥不懂的，特别推荐官网查询 https://hexo.io/docs/

三、Hexo 初始化

来到自己喜欢的目录下，新建一个文件夹，我这里新建了一个 HexoBlog 文件夹

1
cd /Users/you path/HexoBlog

接着输入

1
2
hexo init
npm install

如果没有出错的话，Hexo 就初始化完成了，此时会在你新建的文件夹(我这里的是 HexoBlog) 里头看到如下目录结构

1
2
3
4
5
6
7
8
HexoBlog
├── _config.yml
├── package.json
├── scaffolds
├── source
|   ├── _drafts
|   └── _posts
└── themes

每个目录是做啥的呢，去官网看吧 https://hexo.io/docs/setup.html

启动 Hexo 服务

1
hexo s

或者 debug 模式下启动，debug 模式可以看到更多的日志

1
hexo s --debug

成功启动效果

然后在浏览器输入http://localhost:4000/ 就可以看到

Hexo 常用命令

1
2
3
4
5
hexo new [layout] <title> //新建一篇文章，layout 可以不填，默认文章路径 /source/_posts
hexo g|generate // 生成静态文件，在我们发布到GitHub的仓库的时候，需要先生成，才能上传
hexo s|server // 开启 hexo 服务
hexo clean //清除缓存文件 (db.json) 和已生成的静态文件 (public)
hexo d|deploy // 文件生成后立即部署网站

上面的 hexo g|generate 表示可以直接用简写hexo g 或者全称 hexo generate 书写，效果一样

更多指令请查看 https://hexo.io/zh-cn/docs/commands.html

四、关联 Github

打开我们的 HexoBlog 目录下的配置文件 _config.yml ，拉到最下头，找到 deploy，进行如下配置

1
2
3
4
5
6
7
# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: git
  repo: https://github.com/objectville/objectville.github.io.git
  brashch: master
  message:

其中 repo 输入我们 Github Pages 对应的仓库地址，message 为上传日志，可不填

配置完之后，命令行输入

1
hexo d

如果出现如下错误

1
ERROR Deployer not found: git

通过运行以下命令解决

1
npm install hexo-deployer-git --save

再次输入 hexo d，等待部署完成

注意：如果没有进行对 github 进行 ssh 配置，每次部署的时候可能都需要输入 github 的账号密码，ssh 配置这里先略过

再次进入我们的网址 https://objectville.github.io/ 是不是就是 Hexo 了

当部署到 github 完成之后，在本地会有一个 .deploy_git 目录，里面的内容就是我们的仓库文件，与你打开 https://github.com/objectville/objectville.github.io 看到是一样的

五、换个主题吧

看到好多人用 NexT，所以，主题地址：http://theme-next.iissnan.com/getting-started.html#stable

进入我们的 HexoBlog 目录（貌似一直在）执行

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

OK之后，打开配置文件 _config.yml，修改 theme 字段的值为 next

1
theme: next

然后执行

1
2
3
hexo clean
hexo g
hexo d

关于主题的更多配置，请查看上方的链接

六、开始创作

我们先把 /source/_posts/hello-world.md 这篇自带的删掉，然后

1
hexo n "HelloWorld"

我们就会看到在 /source/_posts 目录下，出现了 HelloWorld.md 文件，在文件里头编辑自己的内容，就是一篇博文了，比如

1
2
3
4
5
6
---
title: HelloWorld
date: 2018-05-04 12:03:43
tags:
---
欢迎来到对象村！

然后在命令行输入

1
2
3
4
hexo clean
hexo g
hexo d
// 上面的两天指令可以合成一个：hexo g -d

来到我们的博客地址瞅瞅

七、域名

这个这个，我的域名过期了，暂时没打算买域名，以后再说吧，囧…