搭建hexo博客——部署到GitHub及coding全教程

搭建hexo博客——部署到GitHub及coding全教程

环境准备

安装git;官网
安装node.js;官网

注册GitHub

  • 注册一个『GitHub』帐号,已有的请忽略
  • 建立与你用户名对应的仓库,仓库名必须为『your_user_name.github.io』

如:shiermo/shiermo.github.io

注册Coding

  • 注册一个『Coding』帐号,已有的请忽略
  • 建立与你用户名对应的仓库

转到page服务,从部署来源部署master分支

添加ssh到GitHub、Coding

设置用户名和密码

(使用git工具,不是命令行工具,在空白处点击鼠标右键,点击Git Bash Here)首先设置你的用户名密码:

1
2
git config --global user.email "shier.mo@qq.com"
git config --global user.name "shiermo"

生成密钥

1
ssh-keygen -t rsa -C "shier.mo@qq.com"

过程中

1
2
3
4
5
6
Generating public/private rsa key pair.  #生成公共/私有密钥对
Enter file in which to save the key (/c/Users/jiang/.ssh/id_rsa): #输入保存密钥文件(直接回车)
Created directory '/c/Users/jiang/.ssh'.
Enter passphrase (empty for no passphrase): #输入密码(密码不显示)
Enter same passphrase again: #再次输入相同密码
……

添加SSH Key到GitHub

在本机设置SSH Key之后,需要添加到GitHub上,以完成SSH链接的设置。

1、打开本地C:\Documents and Settings\Administrator.ssh\id_rsa.pub文件。此文件里面内容为刚才生成人密钥。如果看不到这个文件,你需要设置显示隐藏文件。准确的复制这个文件的内容,才能保证设置的成功。

Mac用户请在下面查找:

Find前往文件夹~/.ssh/id_rsa.pub打开id_rsa.pub文件,里面的信息即为SSH key,将这些信息复制到Github的Add SSH key页面即可。

2、登陆Github。点击右上角的用户头像, Settings—>SSH and GPG keys —> New SSH key

3、把你本地生成的密钥复制到里面(key文本框中), 点击 Add SSH key 就ok了

打开:

添加:

验证一下:

1
ssh -T git@github.com

验证期间需要输入yes及ssh密码

添加SSH Key到Coding

conding有别于GitHub,需要在账户添加ssh key,而不是仓库。

验证一下:

1
ssh -T git@git.coding.net

验证结果同上一步。

安装hexo

执行如下命令:

1
npm install hexo-cli -g

Mac请执行下列命令

1
$ sudo npm install -g hexo

由于众所周知的原因,国内访问官方默认 npmjs.org 源速度不是十分理想,所以建议切换成国内的,利用以下命令将其替换为淘宝的 npm 源,然后再安装hexo。

1
npm config set registry http://registry.npm.taobao.org/

初始化

在自己认为合适的地方创建一个文件夹(自定义文件夹名),然后在文件夹内的空白处按住Shift+鼠标右键,然后点击在此处打开命令行窗口。(同样要记住啦,下文中会使用在当前目录打开命令行来代指上述的操作)

然后,执行init命令初始化hexo到你指定的目录:

1
hexo init

也可以cd到目标目录,执行hexo init。

生成静态页面

cd 到你的init目录,执行如下命令,生成静态页面至hexo\public\目录。

1
hexo generate

命令必须在init目录下执行,否则不成功,但是也不报错。

当你修改文章Tag或内容,不能正确重新生成内容,可以删除hexo\db.json后重试,还不行就到public目录删除对应的文件,重新生成。

在此过程中如出现

1
2
3
$ hexo generate
ERROR Local hexo not found in E:\Dropbox\Hexo
ERROR Try running: 'npm install hexo --save'

请执行

1
npm install hexo --save

再次生成静态页面

1
hexo generate

本地启动

执行如下命令,启动本地服务,进行文章预览调试。

1
hexo server

浏览器输入http://localhost:4000就可以看到效果。

如打开失败,请运行下列代码,换个端口

1
hexo s -p 3600

http://localhost:3600

写文章

执行new命令,生成指定名称的文章至hexo\source_posts\postName.md。

1
hexo new 新建文章

文章摘要

在需要显示摘要的地方添加如下代码即可:

1
2
3
以上是摘要
<!-- more -->
以下是余下全文

自定义页面

执行new page命令

1
hexo new page "about"

在hexo\source\下会生成about目录,里面有个index.md,直接编辑就可以了,然后在主题的_config.yml中将其配置显示出来。

上述步骤,也可以手工生成,在hexo\source\下手工新建about和index.md也是完全等价的。

部署到git

修改_config.yml文件

1
2
3
4
5
deploy:
type: git
repo:
github: git@github.com:shiermo/shiermo.github.io.git,master #你的GitHub Pages仓库
coding: git@git.coding.net:shiermo/shiermo.git,master #你的coding仓库

执行

1
hexo deploy

在执行 hexo deploy 后,若出现 error deployer not found:git 的错误,执行:

1
npm install hexo-deployer-git --save

再次执行

1
2
hexo g
hexo d

主题安装

安装主题的方法就是一句git命令:

1
git clone https://github.com/iissnan/hexo-theme-next themes/next    # next为主题名称

目录是否是modernist无所谓,只要与_config.yml文件一致即可。

安装完成后,打开hexo_config.yml,修改主题theme: modernist

域名绑定

域名配置文件

在source目录下创建一个CNAME文件,不带后缀。创建后写入你的域名.里面的内容为域名不要http以及www等前缀,只需写入域名本身,例如

1
shierm.com

随后执行,这个是和coding关联的

1
2
cd source/
touch Staticfile #名字必须是Staticfile

解析

域名服务商修改dns

向你的 DNS 配置中添加 4 条记录

1
2
3
4
5
主机记录  记录类型  记录值
www CNAME username.github.io #线路类型:国外
@ CNAME username.github.io #线路类型:国外
@ CNAME pages.coding.me #线路类型:国内
www CNAME pages.coding.me #线路类型:国内

修改域名

  • 打开Coding的page服务,绑定自定义域名。
  • 打开hexo_config.yml,修改域名设置。