Mac 下 Hexo 和 GitHub-Pages 搭建个人博客(一)

本文以图文的方式介绍了在 Mac 下使用 Hexo + GitHub Pages 搭建个人博客

准备条件

硬件环境:

  • Mac 笔记本

软件环境:

  • GitHub 账号
  • Git
  • Node.js
  • npm
  • hexo

本地站点搭建

安装Git

在 Mac OS X 中自带 Git,不需要安装 Git,在 Mac terminal 中输入以下命令可以查看 git 版本号:

1
git --version

如下图所示:



安装Node.js

Node.js 可以直接从 官网 下载,然后下一步下一步即可完成安装,如下图所示:



从上图中可以看出,node.js 安装完成以后,npm 也被安装完成,简化了工作。检测安装是否成功,可以在 Mac terminal 中输入以下命令查看 node.js 和 npm 的版本号:

1
2
node -v
npm -v

如下图所示:



安装Hexo

Git、Node.js 和 npm 安装完成以后,接下来就可以安装 Hexo 了。在 Mac terminal 中输入以下命令即可执行安装:

1
sudo npm install -g hexo

稍等片刻,安装完成以后,效果如下图所示:



输入以下命令查看 Hexo 的版本号:

1
hexo -v

如下图所示:



初始化 Hexo

在自己的用户名目录下,创建 hexo 文件夹(mkdir hexo),并进入到 hexo 文件夹中(cd hexo),执行以下命令可以完成对 Hexo 的初始化工作

1
hexo init

如下图所示:






安装依赖

在部署博客之前,需要先安装依赖,执行以下命令即可:

1
npm install

生成静态页面

执行以下命令,生成静态页面,如下图所示:

1
hexo generate



启动服务

执行以下命令,启动服务,如下图所示:

1
hexo server



PS:停止服务使用 Ctrl+C

在本地查看效果

打开浏览器,输入 http://localhost:4000/,如下图所示:



部署到 GitHub

以上操作的结果是可以生成一个在本地浏览的博客站点,若想部署到 GitHub 上,请按照如下方式操作即可。因为本博客是托管在 GitHub 上的,所以一个 GitHub 账号是必不可少的,在 GitHub 注册账号这里就不叙述了。

创建 repository

登录 GitHub 个人账号以后,在首页右上角会有 New repository 按钮,点击按钮会出现下图所示界面:



如上图所示,其中有三点需要说明:

  1. Repository name 的格式必须是:yourGitHubId.github.io,例如我的是:lijiankun24.github.io;
  2. Description 可以为空;
  3. 免费服务的话,只能选择 Public (公开的)

安装 Git 部署器

在 Mac terminal 中执行以下命令即可:

1
npm install hexo-deployer-git –save

修改配置文件

hexo 的根目录下会有 _config.yml 文件,打开 _config.yml 文件,在文件最末尾,修改如下配置:



部署

hexo 目录下执行以下命令, 即可完成对将静态博客部署到 GitHub 上

1
hexo deploy



部署成功以后,在浏览器中输入 http://lijiankun24.github.io 即可在线浏览自己的博客啦~

创建新博客

PS:以下命令均是在 hexo 路径下执行的。

新建博客,执行以下命令:

1
hexo new "test_blog"



/hexo/source/_posts/ 目录下即可看到一个名为 test-blog.md 文件。

发布新博客

编辑好博客以后,即可执行以下命令部署到GitHub上:

1
2
3
hexo clean
hexo generate
hexo deploy

PS:一些快捷键:

1
2
3
4
hexo g == hexo generate
hexo d == hexo deploy
hexo s == hexo server
hexo n == hexo new


本文到此结束,其实在网上类似的教程很多,我只不过是参考别人照猫画虎,这篇博客真正的意义在于熟悉 Hexo 的使用,为以后继续写博客奠定一定的基础。
当然,《Mac 下 Hexo 和 GitHub-Pages 搭建个人博客》系列文章还没有写完,后面会继续更新。

参考博客:

Mac下Hexo+GitHub搭建博客图文教程(一) – yuweiguo