macOS基于Hexo和GitHub Pages搭建静态博客

1.Hexo简介

1.1 什么是 Hexo?

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

Hexo主页:https://hexo.io/zh-cn/

1.2 为什么要用Hexo?

  1. 因为其他博客框架太烂了
  2. 想自己管理博客,不受其他平台的约束

1.3 Hexo适合哪些人使用

  1. 有开发基础的程序员(或者你是前端开发工程师)
  2. 想搭建个人技术博客的人

2. 搭建静态博客

2.1 在Github上创建repository

因为我们的博客是基于GitHub Pages(可以被认为是用户编写的、托管在GitHub上的静态网页)的,也就是博客内容都托管在GitHub Pages,所以需要有一个GitHub账号,并且创建一个公开库(repository),用来存放你的博客。如果还没有GitHub账号,申请一个就好了,申请步骤很简单,不再详述,记住选免费服务就可以。在GitHub上创建public库是免费的,也就是传说中的创建开源库。创建private库是要付费的,我们使用GitHub主要就是为了拥抱开源,如果没有特殊需求,创建public库就可以,我们一会儿要创建的博客仓库就是public库。

申请完账号,登陆之后,就可以创建repository了,点击New repository,会跳转到下面这个界面:

创建repository

需要注意的是新创建的repository的名字,必须是username.github.io,例如我的用户名是HelloRyanCR7,那repository名就是HelloRyanCR7.github.io;项目的Description可以任意填写内容,或者不写;项目类型选择Public类型,Private类型要收费;Initialize this repository with a README表示添加README.md文件初始化repository,这个文件是repository的一些描述信息,可以根据需要决定是否添加。
信息填写完毕,点击create repository就可以创建repository。

2.2 使用Homebrew软件包管理器安装git和node.js

Homebrew套件管理器主要用来安装git和node.js,你也可以通过其他途径安装git和node.js,但是Homebrew相当nice,而且在mac下管理安装包特别方便。

2.2.1 Homebrew的安装

Homebrew需要你的mac安装了Xcode,很多其他mac应用也需要,所以建议先安装一下,appstore里就有。装完Xcode之后,剩下的步骤就特别简单了,打开mac terminal终端,输入以下命令:

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

这样可以自动完成该工具的安装,如果这条命令失效了,可能是Homebrew更新了安装方式,可以去这里查看最新安装命令以及Homebrew的简要介绍。Homebrew安装完成之后,安装git和node.js就会非常简单。

2.2.2 安装Git版本管理工具:

Git是一个强大的版本管理工具,Github的版本管理就是基于Git的。安装完Homebrew之后,安装Git几乎零成本,还是在terminal终端,输入以下命令:

1
brew install git

然后等一段时间就ok了,Homebrew会自动去帮你完成下载安装。

2.2.3 安装node.js:

Hexo是基于node.js的,所以要让Hexo运行,node.js环境是必不可少的。使用Homebrew安装node.js也特别简单,在terminal终端输入如下命令:

1
brew install node

然后等着Homebrew帮你完成下载安装就可以了。安装完node.js就可以使用常见的npm命令了。

2.3 配置SSH key

这一步可以忽略,配置SSH key与否,并不影响博客的搭建和使用,只是配置了之后,更新博客方便一点,不用每次都输用户名和密码。
(1)检查本机上是否存在SSH key
打开终端,输入如下两条命令:

1
2
cd .ssh
ls -la

检查终端输出的文件列表中是否已经存在id_rsa.pub 或 id_dsa.pub 文件,如果文件已经存在,那么你可以跳过步骤(2),直接进入步骤(3)。
(2)创建一个SSH key
在终端输入以下命令:

1
ssh-keygen -t rsa -C "your_email@example.com"

回车,接着会提示你,让你输入文件名,直接回车会创建使用默认文件名的文件(推荐使用默认文件名);然后会提示你输入两次密码(输入密码之后没有反馈,显示还是空白,但是你确实已经输入了),当然密码也可以不输,直接回车,如果这里没有输入密码,以后提交博客更新的时候就不需要输入密码了。
(3)添加SSH key到github
经过第(2)步,如果你没有指定文件名(也就是使用的默认文件名),那么你的.ssh文件夹下,应该有一个id_rsa.pub文件了,打开该文件,复制里面的文本。然后登陆github,点击右上角头像右边的三角图标,点击Settings,然后在左边菜单栏点击SSH and GPG keys,点击new ssh key,title 随便填一个,在key 栏填入你复制的内容,点击add ssh key,就可以添加一个ssh key了,如下图:

添加SSHkey
添加SSHkey成功

(4)验证SSH key是否配置成功
在终端输入以下命令:

1
ssh -T git@github.com

如果你创建的key没有设密码的话,等待一段时间后提示你

Hi yourusername! You’ve successfully authenticated, but GitHub does not provide shell access.

说明你的ssh key添加成功了。如果过程中提示你perimission deny相关错误,就在命令前加上sudo,然后执行命令的时候输入你的电脑密码应该就可以了。(sudo用来说明用管理员权限运行)

2.4 安装Hexo

经过以上步骤的铺垫,终于到了Hexo安装了,前面我们安装了node.js,装完node之后,我们就可以使用npm命令了,而Hexo安装就是使用npm,在终端输入以下命令:

1
npm install -g hexo-cli

然后等待一会儿,hexo会自动完成下载安装,如果出现错误提示,就在命令前面添加sudo再次执行。(sudo用来说明用管理员权限运行)
Hexo安装完成之后,在你喜欢的位置随意创建一个文件夹,这个文件夹以后就是你存放本地博客的地方了,通过cd filepath(filepath替换成你创建的文件夹目录)命令,进入到你创建的文件夹目录,然后执行以下命令:

1
2
hexo init
npm install

这样Hexo会在该文件夹创建本地博客所需的一切资源,完成本地博客的搭建。

Hexo主要文件介绍:

_config.yml
网站的配置信息,可以在此配置大部分的参数。

node_modules
node_modules为hexo的插件目录,作用是利用此目录的插件生成对应功能的静态HTML等脚本代码,如node_modules下 hexo-autonofollow可以实现编译后,生成a链接属性加上nofollow。

package.json
应用程序的信息。EJS, Stylus 和 Markdown renderer 已默认安装,可以自由移除。

scaffolds
模版文件夹。新建文章时,Hexo 会根据 scaffold 来建立文件。
Hexo的模板是指在新建的markdown文件中默认填充的内容。例如,如果您修改scaffold/post.md中的Front-matter内容,那么每次新建一篇文章时都会包含这个修改。

source
资源文件夹是存放用户资源的地方。除 posts 文件夹之外,开头命名为 (下划线)的文件 / 文件夹和隐藏的文件将会被忽略。Markdown 和 HTML 文件会被解析并放到 public 文件夹,而其他文件会被拷贝过去。

themes
主题 文件夹。Hexo 会根据主题来生成静态页面。

Hexo安装完成后输入以下命令:

1
2
hexo g // 全拼是:hexo generate,可以简写成 hexo g
hexo s // 全拼是:hexo server,可以简写成 hexo s

这样就开启了一个本地博客服务器,打开浏览器,在地址栏输入localhost:4000,就可以查看本地博客了,hexo默认生成了一片hello world博客。注意,以上hexo开头的命令,执行目录必须是你创建的博客文件夹目录。

2.5 同步Hexo博客到github

现在你已经可以在本机查看你的博客了,但是要想让别人通过网络可以查看你的博客,还需要一步,那就是将你的博客发布到github仓库。在terminal终端,将当前目录切换到你的本地博客目录,执行以下命令:

1
npm install hexo-deployer-git --save

安装完成之后,打开本地博客目录的_config.yml文件,编辑其中的deploy节点:

deploy:
type: git
repo: git@github.com:username/username.github.io.git
branch: master

将上面username替换成你的github用户名即可,你也可以去你开始的时候创建的名为username.github.io的仓库去直接复制完整的地址,如下图:

仓库地址

当前复制出来的值,就是通过SSH方式clone的地址,配置完成后,以后提交博客更新不用输用户名和密码(如果你ssh key没有设置密码的话);点击上图右上角Use HTTPS,复制出来的clone地址也可以配置到repository,但是这样提交更新的时候,就需要输入用户名和密码了。
保存配置之后,在本地博客目录执行以下命令:

1
2
3
hexo clean // clean本地项目,防止缓存
hexo g // 根据你编辑的md格式的博客,生成静态网页
hexo d // 将本地博客发布到github

然后,在浏览器地址栏输入username.github.io就可以访问你的博客了,别人也可以通过这个地址访问你的博客。

3.基本操作及设置

3.1 如何删除一篇博文

在Finder中,找到本地博客所在目录,找到/source/_posts文件夹,里面放了所有我们写的博客,想删除哪篇,直接在这里删除,然后再重新发布到github,这篇博文就不见了。

3.2 fork me on github图标

如何你想在页面右上角添加一个倾斜的fork me on github 图标,只需要去这里挑选你喜欢的样式,复制对应的样式代码,然后打开你本地博客目录下的themes/themename/layout/layout.swig文件,然后把你复制过来的样式代码粘贴到如下位置:

1
2
3
4
5
6
7
<body itemscope itemtype="http://schema.org/WebPage"
// ...
<a href="https://github.com/you"><img style="position: absolute; top: 0; left: 0; border: 0;" src="https://camo.githubusercontent.com/82b228a3648bf44fc1163ef44c62fcc60081495e/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f6c6566745f7265645f6161303030302e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_left_red_aa0000.png"></a>
<header id="header" class="header" itemscope itemtype="http://schema.org/WPHeader">
<div class="header-inner"> {%- include '_partials/header.swig' %} </div>
</header>
// ...

其中< a >…< /a>标签就是复制的样式代码,粘贴位置在body内header标签之上。

3.3 给博文添加tag和分类

使用如下命令:

1
hexo new "blog title"

创建的新博文文件,打开之后顶部会有一段自动生成的文本,在其中加入tag和category标签即可指定tag和分类。

---
title: blog title
date: 2016-07-20 10:59:31
tag: hexo
category: hexo
---

4.总结及其它信息

4.1 Hexo命令及设置

init —— 新建一个网站。如果没有设置 folder ,Hexo 默认在目前的文件夹建立网站。

1
hexo init [folder]

new —— 新建一篇文章。如果没有设置 layout 的话,默认使用 _config.yml 中的 default_layout 参数代替。如果标题包含空格的话,请使用引号括起来。

1
hexo new [layout] <title>

generate —— 生成静态文件。

1
$ hexo generate

选项 描述
-d, –deploy 文件生成后立即部署网站
-w, –watch 监视文件变动

该命令可以简写为:

1
hexo g

server —— 启动服务器。默认情况下,访问网址为: http://localhost:4000/。

选项 描述
-p, –port 重设端口
-s, –static 只使用静态文件
-l, –log 启动日记记录,使用覆盖记录格式

deploy —— 部署网站。

参数 描述
-g, –generate 部署之前预先生成静态文件

该命令可以简写为:

1
hexo d

clean —— 清除缓存文件 (db.json) 和已生成的静态文件 (public)。
在某些情况(尤其是更换主题后),如果发现您对站点的更改无论如何也不生效,您可能需要运行该命令。

1
hexo clean

list —— 列出网站资料。

1
hexo list <type>

version —— 显示 Hexo 版本。

1
hexo version

new page —— 创建新的标签项(Home,Archive,Category,About等)

1
hexo new page [pagename]

示例:创建about标签

1
hexo new page "about"

执行命令之后在source里会新增一个目录about,里面有个index.md,其实也可以手动建立。页面的格式和文章一样。然后添加链接,themes/theme_name/_config.yml里面的menu一项,添加一行About: /about。

如果想了解Hexo更多命令和设置信息可以查看Hexo主页文档

4.2 Homebrew介绍

Homebrew 是OS X上强大的软件包管理器,能够从指定的服务器自动下载源码包并且编译安装,可以自动处理依赖性关系,并且一次安装所有依赖的软件包,无须繁琐地一次次下载、安装。Homebrew将所有包都默认安装在目录/usr/local/Cellar中,不会扰乱你的Mac系统,并且可方便的升级相关包和清理历史版本。
Homebrew 常用命令

brew –help #简洁命令帮助
man brew #完整命令帮助
brew install git #安装软件包(这里是示例安装的Git版本控制)
brew uninstall git #卸载软件包
brew search git #搜索软件包
brew list #显示已经安装的所有软件包
brew update #同步远程最新更新情况,对本机已经安装并有更新的软件用*标明
brew outdated #查看已安装的哪些软件包需要更新
brew upgrade git #更新单个软件包
brew info git #查看软件包信息
brew home git #访问软件包官方站
brew cleanup #清理所有已安装软件包的历史老版本
brew cleanup git #清理单个已安装软件包的历史版本

程序安装路径及文件夹

-bin #用于存放所安装程序的启动链接(相当于快捷方式)
-Cellar #所有brew安装的程序,都将以[程序名/版本号]存放于本目录下
-etc #brew安装程序的配置文件默认存放路径
-Library #Homebrew 系统自身文件夹
+–Formula #程序的下载路径和编译参数及安装路径等配置文件存放地
+–Homebrew #brew程序自身命令集

4.3 nmp介绍

在使用node的时候,用npm安装了很多软件,过一段时间没有使用就会忘记,怎么查看自己全局安装过的包,用命令

npm list -g –depth 0

4.4 如何卸载/重装Hexo

卸载Hexo指令:

npm uninstall hexo-cli -g #3.0.0版本执行
npm uninstall hexo -g #之前版本执行

重装Hexo只需要使用上面的指令先卸载已安装的Hexo,再按照正常的安装方法安装即可。

文章说明

文章主要内容来自以下文章及网页:
小马哥Mark的简书:Mac搭建Hexo博客及NexT主题配置优化
乖乖小恒恒的简书: 使用Github搭建Hexo技术博客托管在GitHub Pages上–安装教程
Hexo文档