Fork me on GitHub

Mac下使用Github与Hexo搭建静态博客

目录

  1. 1. 前言
  2. 2. 环境搭建
    1. 2.1. 安装Node.js
      1. 2.1.1. 通过nvm安装
      2. 2.1.2. 通过安装包来安装
  3. 3. 安装Hexo
  4. 4. Hexo初始化配置
    1. 4.1. 初始化hexo
    2. 4.2. 本地查看
  5. 5. 创建一个Github Repository
  6. 6. 配置Githu SSH keys
  7. 7. 部署
    1. 7.1. 修改Hexo配置
    2. 7.2. 安装git插件到hexo中
    3. 7.3. 部署到github

前言

从今年的一月七号开始,看到好友老孙在搞自己的 Hexo 博客,弄的挺起劲的。心生好奇也想搞搞,
加之之前也在工作学习中看到不少人都有在自己的博客中发布一些自己的学习工作心得,然后自己 google 了一番
发现眼前一亮,从去年年初开始就一直在用 markdown 做笔记,都是把工作学习中的笔记写在Wiz笔记里的,但是
记在笔记里的终究不是用来分享。这次这个 Hexo 静态网页博客正好支持 markdown ,加上支持
发布到 github 和 gitcafe 上,不用花钱申请域名,也不用申请存储空前,所有文章通过 markdown 来编写,然后渲染成网页
文章也很方便撰写,保存,跨平台,迁移方便。果断进行了折腾^_^。
于是进行 google ,找了一些教程来搭建一个个人静态博客。
其间看到阮一峰的一篇博文中提到的,
喜欢写Blog的人会经历三个阶段:

第一阶段,刚接触Blog,觉得很新鲜,试着选择一个免费空间来写。
第二阶段,发现免费空间限制太多,就自己购买域名和空间,搭建独立博客。
第三阶段,觉得独立博客的管理太麻烦,最好在保留控制权的前提下,让别人来管,自己只负责写文章。

哈哈,感觉说到了心坎。

然后在知乎上看到一个讨论『如何在 GitHub 上写博客?』,里面的cnfeat总结的博客搭建过程,其中他的一篇《为什么你要写博客?》列出了一个博客的值得写的原因:

  1. 重新认识自己
  2. 提供持续学习的动力
  3. 积累更多的知识
  4. 提高将事情讲清楚的能力
  5. 分享带来的连锁反应
  6. 帮你找到志同道合的人
  7. 记录成长
  8. 培养持续做一件事情的能力
  9. 讨论反思
  10. 搜寻到你意想不到东西
  11. 一个人在做一件属于自己的事
  12. 互联网的身份识别

环境搭建

这里主要记录自己在mac下进行博客搭建的过程,主要通过Terminal来完成。
主要涉及到的hexo和github。其中hexo是基于nodejs,这里通过Terminal来安装。

Installing Hexo is quite easy. However, you do need to have a couple of other things installed first:

  • Node.js
  • Git

安装Node.js

安装nodejs最佳方式是通过nvm来安装

通过nvm安装

通过cUrl安装nvm:

1
curl https://raw.github.com/creationix/nvm/master/install.sh | sh

Once nvm is installed, restart the terminal and run the following command to install Node.js.
当nvm安装完成后,关闭terminal 然后再重新打开,并输入以下命令来安装Node.js:

1
nvm install 4

通过安装包来安装

直接在官网下载并运行安装包v5.4.0 Stable

安装Hexo

当Node.js安装完成后,这时就可以通过npm来安装hexo了:

1
npm install -g hexo-cli

You may encounter some problems when compiling. Please install Xcode from App Store first. After Xcode is installed, open Xcode and go to Preferences -> Download -> Command Line Tools -> Install to install command line tools.

如果在安装过程中编译出现了问题,请先从App Store安装Xcode,安装完Xcode后打开Xcode打开菜单栏 Preferences -> Download -> Command Line Tools -> Install来安装xcode命令行工具。
或者直接通过命令行进行安装:

1
xcode-select --install

Hexo初始化配置

这里参考了:

初始化hexo

在Terminal里切换到一个空的目录下,我们将用来初始化hexo,假设我们选择的目录是hexo

1
2
3
4
5
6
# 将会在我们的`hexo`目录下生成一个新的文件夹`blog`
hexo init blog
# 切换到新生成的blog目录下
cd blog
# 安装hexo的依赖项
hexo install

最终会得到以下的目录结构

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

本地查看

现在我们已经搭建起本地的hexo博客了,在我们的blog目录下执行以下命令,然后到浏览器输入http://localhost:4000 看看效果。

1
2
hexo generate
hexo server

至此我们的本地博客就搭建好了。

创建一个Github Repository

在自己Github主页右下角,创建一个新的repository。比如我的Github账号是lulee007,那么我应该创建的repository名字应该是lulee.github.io

配置Githu SSH keys

因为目前已经在使用Github,而且注册也比较简单,也可以参考:一步步在GitHub上创建博客主页 全系列by pchou,所以直接说一下SSH keys的配置。

SSH keys are a way to identify trusted computers, without involving passwords.

利用ssh keys 可以直接和github建立链接而不必每次pull request都输入用户名密码。
有英语阅读能力的直接参考官方的Generating SSH keys。里面讲的很详细,包括如何利用已有的ssh keys,加入到github上。

部署

修改Hexo配置

要部署到github上需要修改Hexo的_config.yml_config.ymlblog目录下,要把下面的lulee007都换成你的账号名:

1
2
3
4
deploy:
type: git
repository: git@github.com:lulee007/lulee007.github.io.git
branch: master

注意: 每个冒号后面都要有一个空格
repository 这个链接也可以直接在github上复制:
copyssh

安装git插件到hexo中

由于默认hexo没有没安装此插件,所以得手动安装
在Terminal中在blog目录下输入:

1
npm install hexo-deployer-git --save

这样就安装好了git插件了,配合上面的配置,很方便就能把博客部署到github上。

部署到github

1
2
hexo generate
hexo deploy

注意:每次修改文章后,都需要执行:

hexo generate

这样才能把修改后的文章重新生成静态网页。
最后:
在浏览器访问lulee007.github.io就能看到你的成就了

本文总阅读量