用Hexo+Github搭建网站过程记录

发表于

参考博客.
Github给每个用户提供了免费域名来搭建网站，正好拿来玩一玩。

node

Hexo是node.js写的，所以先要安装node。

Github

免费域名怎么玩

创建一个仓库，命名为username.github.io，然后把静态网页放在仓库中，访问username.github.io就可以解析为网站了。

生成公钥

在终端（Terminal）输入：

1
ssh-keygen -t rsa -C "Github的注册邮箱地址" -f ~/.ssh/github_rsa

-f用于指定生成的私钥文件名，公钥文件名在这个基础上自动加后缀.pub。这种指定文件名的方法可以生成多个公钥用于不同的地方。

添加公钥到github

将github_rsa.put中的公钥添加到github，流程简单，不讲述了。

添加ssh配置文件

新增ssh的配置文件，并修改权限

1
2
touch ~/.ssh/config
chmod 600 ~/.ssh/config

修改config文件，添加以下内容

1
2
3
Host github.com  
    IdentityFile ~/.ssh/id_rsa  
    User git

启动ssh-agent

1
2
$ eval "$(ssh-agent -s)"
Agent pid 59566

将生成的ssh-key添加到ssh-agent中

1
ssh-add -K ~/.ssh/id_rsa

安装git

xcode中自带git，如果电脑没有git，自行百度。

安装配置hexo

这是整个工作的重点，可以参考官方文档

强调：强烈建议不要选择需要管理员权限才能创建文件（夹）的文件夹。

下载安装Hexo

1
$ npm install -g hexo-cli

安装好hexo以后，在终端输入：$ hexo 如果出现命令提示，说明安装成功

初始化博客

1
2
3
4
5
6
// 建立一个博客文件夹，并初始化博客，<folder>为文件夹的名称，可以随便起名字
$ hexo init <folder>
// 进入博客文件夹，<folder>为文件夹的名称
$ cd <folder>
// node.js的命令，根据博客既定的dependencies配置安装所有的依赖包
$ npm install

配置博客

基于上一步，我们对博客修改相应的配置，我们用到_config.yml文件。里面配置项很多，主要用到的是以下几项。

1 修改网站相关信息

1
2
3
4
5
6
title: flushmeteor
subtitle: the stack of it nerds
description: xxx
author: flushmeteor
language: zh-CN
timezone: Asia/Shanghai

注意：每一项的填写，其:后面都要保留一个空格，下同

2 配置统一资源定位符（个人域名） 

1
https://flushmeteor.github.io/

对于root（根目录）、permalink（永久链接）、permalink_defaults（默认永久链接）等其他信息保持默认。

3 配置部署

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

其中repo项是之前Github上创建好的仓库的地址，可以在github上该仓库中clone or download处复制这个地址

发表一篇文章

在终端输入：

1
2
// 新建一篇文章
hexo new "文章标题"

我们可以在本地博客文件夹source->_post文件夹下看到我们新建的markdown文件。

可以用markdown编辑器打开文件进行编辑。

在本地发布

在终端输入

1
$ hexo server

在浏览器中访问http://localhost:4000/就可以看到发布的网站。

发布到github

在终端执行：

1
2
3
$ hexo generate
$ npm install hexo-deployer-git --save  （安装一次即可，之后不用再次安装）
$ sudo hexo deploy

更换主题

默认的主题实在是丑，幸好hexo可以自己修改主题。网上有很多主题，最终选择了next。
next的中文注释清晰明了，不再记录，附链接

添加标签页

hexo new page tags
确认站点配置文件里有tag_dir: tags
确认主题配置文件里有tags: /tags
编辑站点的source/tags/index.md，添加

1
2
3
4
title: tags
date: 2017-10-20 06:49:50
type: "tags"
comments: false

遇到的坑

第一次按照上面的步骤执行的时候是没有问题的。过了一段时间，写了一篇新文章，发现hexo deploy不管用了，一直报错说没法连接到远程仓库。后来查到说是：git版本太高，我也是醉了。。
想着重装git吧，mac竟然不让删除/usr/bin下面的文件！那干脆将生成的文件手动push到github上。在 .deploy_git 目录下执行下面的命令（第一条命令是担心没有正确连接github，创建的远程分支，不用每次都执行）

1
2
# git remote add origin git@github.com:flushmeteor/flushmeteor.github.io.git
# git push origin master

注意：如果要一直使用这种方法，每次需要先执行下面的命令进行生成和部署操作，这样才能保证 .deploy_git 目录下是最新的

1
2
$ hexo generate
$ sudo hexo deploy