Mac+Hexo+GitHub博客搭建教程

发表于 | 分类于

博客本地环境搭建

1.安装Node.js和Git

Mac上安装可以选择图形化方式和终端安装，此处直接使用客户端方式安装。Node.js官网下载文件，根据提示安装即可，安装成功后在目录/usr/local/bin目录下。
测试Node.js和npm，出现下述信息则安装成功。

1
2
3
4
node -v
v8.10.0
npm -v
5.6.0

Git官网下载相应文件根据提示直接进行安装，检查git是否安装成功，直接查看git版本。

1
2
Git --version 
git version 2.15.0

2.安装Hexo

Node.js和Git都安装成功后开始安装Hexo。安装时注意权限问题，加上sudo，其中-g表示全局安装。

1
sudo npm install -g hexo

3.博客初始化

创建存储博客的文件，比如命名为blog，然后进入到blog之中。

1
cd blog

执行下述命令初始化本地博客，下载一系列文件。

1
hexo init

执行下述命令安装npm。

1
sudo npm install

执行下述命令生成本地网页文件并开启服务器，然后通过http://localhost:4000查看本地博客。

1
2
hexo g
hexo s

Mac-Hexo-GitHub博客搭建教程图1.png

4.本地博客关联GitHub

4.1本地博客代码上传GitHub

注册并登陆GitHub账号后，新建仓库，名称必须为user.github.io，如snailms.github.io。

Mac-Hexo-GitHub博客搭建教程图2.png

终端cd到blog文件夹下，打开_config.yml文件。或者用其他文本编辑器打开也可以。

1
vim _config.yml

打开后到文档最后部分，将deploy配置如下。

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

其中将repository中SnailMS改为自己的用户名，注意type、repository、branch后均有空格。通过如下命令在blog下生成静态文件并上传到服务器。

1
2
hexo g
hexo d

若执行hexo g出错则执行

1
npm install hexo --save

若执行hexo d出错则执行

1
npm install hexo-deployer-git --save

错误修正后再次执行hexo g和hexo d上传到服务器。
若未关联GitHub，执行hexo d时会提示输入GitHub账号用户名和密码，即:

1
2
username for 'https://github.com':
password for 'https://github.com':

hexo d执行成功后便可通过https://SnailMS.github.io.git访问博客，看到的内容和http://localhost:4000相同。

4.2添加ssh keys到GitHub

添加ssh key后不需要每次更新博客再输入用户名和密码。首先检查本地是否包含ssh key。如果存在则直接将ssh key添加到GitHub之中，否则新生成ssh key。
执行下述命令生成新的ssh key，将`your_email@example.com改成自己注册的GitHub邮箱地址。默认会在~/.ssh/id_rsa.pub中生成id_rsa和id_rsa.pub`文件。

1
ssh-keygen -t rsa -C "your_email@exampl"

Mac下利用open ~/.ssh打开文件夹，打开id_rsa.pub文件，里面的信息即为ssh key，将此信息复制到GitHub的Add ssh key路径GitHub->Setting->SSH keys->add SSH key中即可。Title里填写任意标题，将复制的内容粘贴到key中，点击Add key完成添加。
此时本地博客内容便已关联到GitHub之中，本地博客改变之后，通过hexo g和hexo d便可更新到GitHub之中，通过https://SnailMS.github.io.git访问便可看到更新内容。

5.更换Hexo主题

可以选择Hexo主题官网页面搜索喜欢的theme，这里我选择hexo-theme-next当作自己主题，hex-theme-next主题是GitHub中hexo主题star最高的项目，非常推荐使用。
终端cd到blog目录下执行如下所示命令。

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

将blog目录下_config.yml里的theme的名称landscape更改为next。
执行如下命令（每次部署文章的步骤）

1
2
hexo g  //生成缓存和静态文件
hexo d  //重新部署到服务器

当本地博客部署到服务器后，网页端无变化时可以采用下述命令。

1
hexo clean  //清楚缓存文件(db.json)和已生成的静态文件(public)