梳理:怎样使用Hexo搭建博客并部署到GitHub。

作者 _Nomo 日期 2016-03-13
梳理:怎样使用Hexo搭建博客并部署到GitHub。

在学习前段技术后,自己有一个想搭建自己博客的想法。随后上网查询,发现目前比较火的是使用 HexoGitHub 来完成整个静态博客的搭建与部署。但是经过一天的学习和查询网上资料,发现有很多的错误和不详细的地方,很容易让阅读者产生误解。所以准备第一篇文章用来写 HexoGitHub 的搭建部署过程,希望能够帮助到有同样想法的人。:)

准备工作

网站 链接 作用
Node.js http://nodejs.org/ *Hexo运行的必要条件
Git http://git-scm.com/ *Hexo运行的必要条件
GitHub https://github.com/ 把博客文件部署到GitHub

了解Hexo

  • Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown(或其他渲染引擎)解析文章,在几秒内,即可利用靓丽的主题生成静态网页。

安装Git

  • 选择自己电脑系统合适的版本并下载(上面是桌面版,下面是便携闪存版)。这个安装很简单,一路跟着点Next就好了。

安装Node.js

  • 如果无法打开上面Node.js的链接可以去我的网盘下载
    点击左边是稳定版。这个和上面Git一样跟着点Next就好了。

安装Hexo

  • 所有必备的应用程序安装完成后,即可使用 npm 安装 Hexo。
    1
    $ npm install -g hexo-cli

Hexo初始化配置

创建Hexo文件夹

  • 安装完成后,根据自己喜好建立目录(如E:\kuaipan\GitHub\hexo),进入Git Shell切换到该路径下E:\kuaipan\GitHub\hexo执行以下指令。(使用cd命令可以指定切换目标,cd ../ 可以返回上级目录)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
hexo init
#安装 Hexo 完成后,请执行下列命令,Hexo 将会在指定文件夹中新建所需要的文件。
$ hexo init <folder>
$ cd <folder>
$ npm install
#新建完成后,指定文件夹的目录如下
.
├── _config.yml
├── package.json
├── scaffolds
├── scripts
├── source
| ├── _drafts
| └── _posts
└── themes

配置 _config.yml

  • 网站的配置信息,您可以在此配置大部分的参数。
参数 描述
title 网站标题
subtitle 网站副标题
description 网站描述
author 您的名字
language 网站使用的语言
timezone 网站时区。Hexo 默认使用您电脑的时区。
author 您的名字

更多参数设置请参考官方帮助文档 Hexo配置

常用命令

  • init
    1
    $ hexo init [folder]

新建一个网站。如果没有设置 folder ,Hexo 默认在目前的文件夹建立网站。

  • new
    1
    $ hexo new [layout] <title>

新建一篇文章。如果没有设置 layout 的话,默认使用 _config.yml 中的 default_layout 参数代替。如果标题包含空格的话,请使用引号括起来。

  • generate
1
$ hexo generate

生成静态文件,文件在hexo文件下的public目录下。

  • deploy
1
$ hexo deploy

文件生成后立即部署网站(部署之前需要先生成静态文件),如果要GitHub上的话需要设置好_config.yml内的deploy属性。

  • publish
1
$ hexo publish [layout] <filename>

发表为草稿。

  • server
1
$ hexo server

启动服务器。默认情况下,访问网址为: http://localhost:4000/。

更多参数设置请参考官方帮助文档 Hexo命令

使用Hexo主题

安装主题

  • 以yelee为例,在hexo下输入代码可以直接下载,或者去GitHub下载相对应的主题数据。
1
git clone https://github.com/MOxFIVE/hexo-theme-yelee.git themes/yelee
  • 修改 Hexo 根目录_config.yml配置文件文件。
1
theme: yelee
  • Update 更新
1
2
cd themes/yelee
git pull

配置主题_config.yml文件

主题的_config.yml在主题文件根目录下。比如 D:\GitHub\Hexo\themes\yelee。

  • 文章摘要

目前主题可使用两种方式在首页显示文章摘要而不是全文。

1
2
3
4
5
6
7
#a: <!-- more -->
title: Hello World
date: 2015-12-03 00:00:00
---
<Excerpt in index | 首页摘要>
+ <!-- more -->
<The rest of contents | 余下全文>

1
2
3
4
5
6
#b: description in Front-matter
title: Hello World
date: 2015-12-03 00:00:00
+ description: "Welcome to Hexo! This is your very first post."
---
<Contents>

其他主题设置

其他主题下载请去Hexo的主题页面。Hexo主题

yelee主题的更多设置请参考作者的博客 MOxFIVE ,或者作者主题的GitHub

部署到GitHub

注册 GitHub

  • 首先进入GitHub 的网站进行注册,注册比较简单就不一一赘述了。

注册完后点击右上角的加号,创建新库。(不要忘记后面的 .github.io,后续才可访问)

  • 进入你新创建的repository后,查看这个库的SSH链接,并复制它。

配置 Hexo下的_config.yml

  • 进入Hexo下的_config.yml,找到deploy,修改为以下代码。(自己替换isnomo为你的repository名字)
1
2
3
4
deploy:
type: git
repository: git@github.com:isnomo/isnomo.github.io.git
branch: master

使用命令部署到 GitHub

  • 进入Hexo下使用以下命令进行部署。
1
2
3
hexo clean
hexo generate
hexo deploy

部署成功后你即可就可以访问xxx.github.io。去浏览你的新博客啦!


分享到: