使用Hexo建立自己的博客网站 ,可以概括为以下几个流程:

  1. 创建GitHub仓库
  2. 购买独立域名
  3. 使用Hexo创建博客网站
  4. 将博客网站部署到GitHub
  5. 将域名和GitHub建立关联
  6. 至此,你的独立域名博客已经建好了

外链一篇整理很全面的关于Hexo建立博客的文章

1. 创建GitHub仓库

不在此详解。

  • 注册GitHub账号
  • 创建Pages仓库

创建一个GitHub Reponsitory,name必须填写为:

username.github.com 或者 username.github.io

username是你GitHub账户的用户名或者组织名,例如:https://github.com/abooc/,username为abooc

注意:如果username填写不正确,GitHub Pages将无法正常使用。

2. 购买独立域名

不在此详解。

域名有很多种不同形式的后缀,有.com .cn .edu .gov .org等几十种,不同后缀代表着不同的意义。如果普通用户使用,后缀意义不大,不会有太大影响,主要能注册到,都可以使用。

2.1 在哪里购买域名?

提供域名购买的网站有很多,不同的网站域名价格可能不一样,主要后期服务支持很重要。

不知道在哪里购买域名的同学可以尝试选择这里:

  • 阿里云(原万网) 有阿里巴巴保障
    • 阿里云域名控制台页面做的比较中国化。
  • GoDaddy 全球最著名域名注册商
    • Go Daddy是一家提供域名注册和互联网主机服务的美国公司,是目前全球最大的域名注册商。购买域名可以使用优惠码,可以自行谷歌或到独特优惠码找。

3. 使用Hexo创建博客网站

1
Hexo 是一个快速、简洁且高效的博客框架。--- Hexo官方的描述。

Hexo 使用 Markdown(或其他渲染引擎)解析文章,在几秒内,即可利用靓丽的主题生成静态网页。

Hexo是Tommy Chen,一位台湾人开发的博客框架。

至于如何使用,请认真阅读Hexo文档,介绍非常详细、实用。

从安装Hexo到部署网站到GitHub共以下5个重要步骤:

  1. 安装
  2. 本地建站
  3. 安装主题
  4. 写文章
  5. 发布

强烈建议,按照Hexo文档一步步,开始…

Hexo可以通过渲染,在本地预览你的网站,并通过一键部署到GitHub上。见后面章节。

3.1 Hexo目录介绍

默认目录结构:

1
2
3
4
5
6
7
8
9
10
11
.
├── .deploy
├── public
├── scaffolds
├── scripts
├── source
| ├── _drafts
| └── _posts
├── themes
├── _config.yml
└── package.json
  • deploy:执行hexo deploy命令部署到GitHub上的内容目录
  • public:执行hexo generate命令,输出的静态网页内容目录
  • scaffolds:layout模板文件目录,其中的md文件可以添加编辑
  • scripts:扩展脚本目录,这里可以自定义一些javascript脚本
  • source:文章源码目录,该目录下的markdown和html文件均会被hexo处理。该页面对应repo的根目录,404文件、favicon.ico文件,CNAME文件等都应该放这里,该目录下可新建页面目录。
  • _drafts:草稿文章
  • _posts:发布文章
  • themes:主题文件目录
  • _config.yml:全局配置文件,大多数的设置都在这里
  • package.json:应用程序数据,指明hexo的版本等信息,类似于一般软件中的关于

引用:http://ibruce.info/2013/11/22/hexo-your-blog/

3.2 Hexo常用命令

常用命令:

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

常用复合命令:

1
2
hexo deploy -g
hexo server -g

简写:

1
2
3
4
hexo n == hexo new
hexo g == hexo generate
hexo s == hexo server
hexo d == hexo deploy

引用:http://ibruce.info/2013/11/22/hexo-your-blog/

注意:在使用过程中如遇问题,查看Hexo问题解答

4. 将博客网站部署到GitHub

将博客网站部署到GitHub有两种操作方法:

  • 手动提交到Git仓库
  • 使用Hexo一键部署

Hexo 提供了快速方便的一键部署功能,让您只需一条命令就能将网站部署到Git服务器上。

基本步骤包括:

  1. 安装部署到Git的程序 $ npm install hexo-deployer-git --save
  2. 配置一键部署
  3. 执行部署命令:hexo deploy

4.1 配置一键部署

在Hexo根目录下,编辑_config.yml配置一键部署信息。

配置和说明:

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

1
2
3
4
5
参数	描述
type 平台名称。如git、Heroku等
repo 库(Repository)地址
branch 分支名称。如果您使用的是 GitHub 或 GitCafe 的话,程序会尝试自动检测。
message 自定义提交信息 (默认为 Site updated: {{ now('YYYY-MM-DD HH:mm:ss') }})

Hexo支持一键部署到多个平台,如 git、Heroku、Rsync、OpenShift、FTPSync等。
您可同时使用多个 deployer,Hexo 会依照顺序执行每个 deployer。

1
2
3
4
5
deploy:
- type: git
repo:
- type: heroku
repo:

更多配置见:[部署]https://hexo.io/zh-cn/docs/deployment.html

5. 将域名和GitHub建立关联

想要达到访问你的域名时,指向你GitHub的仓库,并能正确响应页面,

要把你的域名指向GitHub,同时将GitHub绑定你的域名,这是一个双向关系。

  • 配置域名DNS解析指向GitHub
  • GitHub仓库绑定域名

5.1 配置域名DNS解析指向GitHub

联系你的域名提供商,配置DNS解析。

通常登录你的域名提供商网站控制台,可以自由进行配置。

DNS解析配置如下:

记录类型 主机记录 记录值 TTL
CNAME @ YOUR-USERNAME.github.io 10分钟
CNAME www YOUR-USERNAME.github.io 10分钟

注释:主机记录就是域名前缀,常见用法有:

1
2
3
www :将域名example.com解析为www.example.com;
mail :通常被用作邮箱服务器前缀,解析后的域名为 mail.example.com;
* :泛解析,所有子域名均被解析到同一地址(除单独设置的子域名解析)。

5.2 GitHub仓库绑定域名

在GitHub仓库根目录下,创建名为CNAME文件,文件内容如下:

1
www.your-domain.com

GitHub会自动将your-domain.com的访问指向www.your-domain.com,无需配置。

如果绑定成功,进入该仓库的Settings > Optinogs页面,查看GitHub Pages项中,会有如下提示:

OK, Your site is published at http://www.your-domain.com.`

5.3 确认域名解析配置

使用dig命令确认DNS配置,例如:

1
2
3
4
5
$ dig www.example.com +nostats +nocomments +nocmd
> ;www.example.com. IN A
> www.example.com. 30 IN CNAME YOUR-USERNAME.github.io.
> YOUR-USERNAME.github.io. 30 IN CNAME github.map.fastly.net.
> example.com. 3600 IN A 199.27.XX.XXX

还可以使用dig YOUR-USERNAME.github.io进一步确认,例如:

1
2
3
4
$ dig YOUR-USERNAME.github.io +nostats +nocomments +nocmd
> ;YOUR-USERNAME.github.io. IN A
> YOUR-USERNAME.github.io. 30 IN CNAME github.map.fastly.net.
> YOUR-USERNAME.github.io 3600 IN A 199.27.XX.XXX

如果配置正确,dig www.example.comdig YOUR-USERNAME.github.io显示指向同一个ip地址。

英文原文:Setting up an apex domain

6. 至此,你的独立域名博客已经建好了

如果以上你都确保完成了,那么在浏览器里键入你的域名,尽享奇迹的愉悦吧。

当然,这只是一个开始,后面的路还很长,走很久。。。

也当然,一个好的开始,就是成功的一半。能迈出第一步,是艰难的,了不起的。