Hexo配合GitHub搭建博客

在本地安装Hexo

简介

Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用Markdown(或其他渲染引擎)解析文章,在几秒内,即可利用靓丽的主题生成静态网页。
Github pages支持静态页面的解析功能,可以将生成好的博客上传到Github中,并通过Github访问。

配置基于Windows

Hexo基于Node开发,故要先安装Node.js
还要安装Git将Blog部署到Github上。安装时均使用默认选项即可。

Hexo安装

先在想要保存Blog的地方新建一个文件夹如:D:\Blog,再到此目录下点击右键选择 BaseHere

在Bash中输入:

1
$ npm install -g hexo-cli

安装 Hexo 完成后输入:

1
$ hexo -v

可以查看版本。

然后执行下列命令,Hexo 将会在指定文件夹中新建所需要的文件。

1
2
$ hexo init
$ npm install //(==hexo init && npm install)

新建完成后,指定文件夹的目录如下:

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

其中:

1
2
3
4
5
6
7
8
node_modules:是依赖包
public:存放的是生成的页面
scaffolds:命令生成文章等的模板
source:用命令创建的各种文章
themes:主题
_config.yml:整个博客的配置
db.json:source解析所得到的
package.json:项目所需模块项目的配置信息

用编辑器如Sublime Text 3打开_config.yml可以看到如下配置:

1
2
3
4
5
6
7
8
title: #网站名称
subtitle: #副标题
description: #网站描述
author: #作者
language: #语言,中文填写'zh-Hans',没有引号
timezone: #网站时区。Hexo 默认使用您电脑的时区。中国可以填写'Asia/Shanghai',没有引号
url: #你的网址
theme: #主题选择

具体可以参考官网给出的配置
不过暂时不用管这些。
先进行一个小测试:
在Blog根目录下依次输入:

1
2
3
$ hexo generate//(==hexo g) 生成博客

$ hexo server //启动本地服务器

如果第二条报错,则需安装:

1
2
$ sudo npm install hexo-server//如果报错,输入下面的那条语句
$ npm install hexo-server --save

再执行$ hexo server
默认情况可从http://localhost:4000/ 在本地访问你的Blog.
正常状态你应该看到: BaseHere

进入Blog应该是这样的:(视版本有所不同) BaseHere

  • 如果提示端口被占用,可以用如:
    $ hexo server -p 5000
    更换到5000端口。

  • 如果进入localhost发现:

    网页显示 Cannot Get /

    就需要再配置一些东西,再依次输入:

    1
    2
    3
    $ npm install hexo-renderer-ejs --save
    $ npm install hexo-renderer-stylus --save
    $ npm install hexo-renderer-marked --save

    等待安装完成后再重新进行:

    1
    2
    $ hexo generate
    $ hexo server

    如果一切正常,就说明本地的Hexo安装成功了。

把本地Hexo 托管到 Github

建立仓库

注册Github账号

然后选择:BaseHere

创建一个代码仓库:BaseHere

这里有几个要注意的地方:
username处最好与你Github账号注册名相同或是一个比较生僻的名字,避免将来出现问题。
Description和是否创建README文件随意。
最好选择该项目为Node语言,并选择GUN 3.0证书(其实这些都无所谓)。。。

生成并建立本地Git与Github的SSL连接:

  • 配置本地Git用户信息

打开GIt Bash,配置本地Git的Github信息,依次输入:

1
2
$ git config --global user.name "yourname" //yourname填你Github的注册名
$ git config --global user.email "youremail" //youremail填你Github的注册邮箱
  • 创建SSH
    在Git Bash中输入:
1
ssh-keygen -t rsa -C "youremail@example.com //中间会有许多选项都选确认即可

在~/.ssh目录下(~代表本机用户名,具体路径Bash会显示),找到id_rsa.pub用编辑器打开将里面的字符(不要多复制空格和换行了)全部复制,回到你的Github主页,选择: BaseHere

Title随意填写,将刚才的字符全部复制进Key点击添加即可。
再打开Git Bash,输入:

1
$ ssh -T git@github.com    //建立ssh连接

有选项的话选确定,建立ssh连接。

  • 部署Blog:
    先修改Blog根目录下的_config.yml,用编辑器打开后在最下方(注意:后一定要有一个空格)
1
2
3
4
deploy:
type: git
repo: https://github.com/Yourgithubname/YourName.github.io.git
branch: master //Yourgithubname填你Github的注册名,YourName填刚才建立代码仓库时的username

再在Blog的根目录打开Git Bash,安装部署器:

1
$ npm install hexo-deployer-git --save

安装完成后依次执行:

1
2
3
$ hexo clean   //清理缓存,建议使用
$ hexo generate //==hexo g
$ hexo deploy //==hexo d

在执行第三条时,可能会出现:BaseHere

这样的错误,回到Github点击设置:BaseHere

将图所示箭头所指的√去掉再重试即可.

完成了这些,你的Blog就成功部署在了Github上,访问http://username.github.io/ ,将username换成你刚才建立仓库时自己填写的就可以访问Blog了。
以后只要对Blog修改,就要在Blog根目录下用Bash执行:

1
2
3
$ hexo clean
$ hexo generate
$ hexo deploy

重新生成并部署Blog.

其他

绑定个人域名

首先要注册域名,推荐在国内的阿里云腾讯云上注册一个。
以阿里云为例,先用cmd ping一下你的Blog地址,如username.github.io,得到你Blog的ipv4地址,再到阿里云的后台云解析处,点击: BaseHere

再输入刚才得到的IP地址,即可将你注册的域名指向Blog。
同时,还要在Blog根目录下的source目录下创建一个CNAME文件(没有后缀名),里面的内容为你注册的域名,只能有一个。
完成之后利用刚才说的3条命令重新部署Blog,访问你的个人域名,就能看到Blog啦!

2.一些常用命令(需要Git Bash在Blog根目录下):

1
2
3
4
5
6
7
$ hexo new "postName" #新建文章
$ hexo new page "pageName" #新建页面
$ hexo generate #生成静态页面至public目录
$ hexo server #开启预览访问端口(默认端口4000,'ctrl + c'关闭server)
$ hexo deploy #将.deploy目录部署到GitHub
$ hexo help #查看帮助
$ hexo version #查看Hexo的版本

 文章在 source/_posts,编辑器可以用 Sublime Text 3(如果你掌握了Markdown语法的话)。想修改头像可以直接在主题的 _config.yml 文件里面修改,友情链接,之类的都在这里,修改名字在 public/index.html 里修改。
 想修改主题的话在Hexo官网 参考其他教程。
 如果在使用Git下载主题时出错,如输入:

1
$ git clone https://github.com/iTimeTraveler/hexo-theme-hiero.git themes/hiero

时,往往是因为http.postBuffer默认上限为1M,及只能上传或下载1M的文件,所以要修改设置为:

1
$ git config --global http.postBuffer 524288000

就可以将这一上限改为500M。

Markdown编辑器推荐在线版的如:马克飞象CSDNMarkdown 等。
还可以选择为你的Blog安装一些插件来管理文章,添加分类和标签,也可以一键部署到pages。

一个好的个人Blog我认为至少要包含以下要素:
主页、目录、归档、标签、关于、友链、联系方式、评论、访问统计。
并且是采用极简风格的,毕竟访客不可能学着去适应每个人的Blog。

文章已到末尾,感谢阅读.