使用Hexo和git仓库建立博客

简要介绍

本人自己的博客建立也有些时间了，总算找到时间来整理一下我建立博客的流程，方便需要的读者。

博客使用的是Hexo+github+coding，建立静态博客站点，主题使用的是material design的风格的主题。

我对于深入的优化并不了解，只是将简单完成站点建立的流程介绍给大家。

开始前的准备

工欲善其事 必先利其器

由于该站点是基于Hexo，因此需要安装Nodejs。当然Git也是不可少的，无论是将来下载仓库中的代码还是用来更新仓库。

• Nodejs
• Git

我是将站点部署到github和coding上面的，因此对于读者需要某一站点则必须有账号，这里就不赘述，自行百度。

接下来我们就可以进入正题啦。

Hexo安装和测试

安装hexo使用npm命令。打开你的Git Bash（右击有选择，安装完Git后就会有），然后输入以下命令安装hexo：

npm install -g hexo

接下来在你想要使用hexo的文件夹下面打开Git Bash，然后依次输入以下命令来安装所需内容：

hexo init
npm install

接着执行一下命令检验刚才的步骤是否成功：

hexo g
hexo s

上面的命令hexo g是用于生成静态文件，hexo s用于启动服务器，主要用来本地预览。

这个时候可以打开浏览器，访问http://localhost:4000 ，可以看到博客已经成功生成，若是失败则之前的步骤肯定没正确运行。

Hexo配置

虽然我们的博客已经完成，不过还是想要博客的风格更适合自己，而且我们还需要将博客部署到github或者coding上，才能让别人看到我们的博客，否则只能孤芳自赏了。

在那个你使用的文件夹根目录下，有个_config.yml文件，使用文本编辑器打开，我用的Notepad++。

下面引用自官方的文档，按照自己的想法来即可。

相关配置选项介绍

网站Site

参数	描述
title	网站标题
subtitle	网站副标题
description	网站描述
author	您的名字
language	网站使用的语言
timezone	网站时区。Hexo 默认使用您电脑的时区。时区列表。比如说：America/New_York,Japan, 和 UTC 。

网址Url

参数	描述	默认值
url	网址
root	网站根目录
permalink	文章的 永久链接 格式	:year/:month/:day/:title/
permalink_default	永久链接中各部分的默认值

目录Directory

参数	描述	默认值
source_dir	资源文件夹，这个文件夹用来存放内容。	source
public_dir	公共文件夹，这个文件夹用于存放生成的站点文件。	public
tag_dir	标签文件夹	tags
archive_dir	归档文件夹	archives
category_dir	分类文件夹	categories
code_dir	Include code 文件夹	downloads/code
i18n_dir	国际化（i18n）文件夹	:lang
skip_render	跳过指定文件的渲染，您可使用 glob 表达式来匹配路径。

文章Writing

参数	描述	默认值
new_post_name	新文章的文件名称	:title.md
default_layout	预设布局	post
auto_spacing	在中文和英文之间加入空格	false
titlecase	把标题转换为 title case	false
external_link	在新标签中打开链接	true
filename_case	把文件名称转换为 (1) 小写或 (2) 大写	0
render_drafts	显示草稿	false
post_asset_folder	启动 Asset 文件夹	false
relative_link	把链接改为与根目录的相对位址	false
future	显示未来的文章	true
highlight	代码块的设置

分类和标签Category & Tag

参数	描述	默认值
default_category	默认分类	uncategorized
category_map	分类别名
tag_map	标签别名

日期/时间格式Date / Time format

参数	描述	默认值
date_format	日期格式	YYYY-MM-DD
time_format	时间格式	H:mm:ss

分页Pagination

参数	描述	默认值
per_page	每页显示的文章量 (0 = 关闭分页功能)	10
pagination_dir	分页目录	page

拓展Extensions

参数	描述
theme	当前主题名称。值为false时禁用主题
deploy	部署部分的设置

重要配置介绍

主要的几项内容就是网站、网址、文章和拓展。这里对网站、网址和文章就不介绍了，上面的介绍已经很详细了。下面介绍拓展的两个部分：主题和部署。

主题theme

默认使用的是landscape这个主题，我换成了indigo。这是一个material design风格的主题，你也可以选取自己喜欢的主题，这里给出主题站点。

主题配置indigo

除了对hexo进行配置，还可以对主题进行配置以到达不同的效果。需要安装这个主题的可以点这里，有详细安装和配置教程。

现有两个主题分支，我的博客中使用的是 card 分支卡片风格主题，master 分支是旧版平铺式风格主题。

需要card分支需要进行切换，使用以下命令（当然确保你已经进入到indigo主题文件夹下面了）：

git checkout -b card origin/card

依赖安装

可能会用到的有less（用作css预处理工具），feed（生成rss）和json-content（生成静态站点数据，用作站内搜索的数据源）。安装分别命令如下：

npm install hexo-renderer-less --save
npm install hexo-generator-feed --save
npm install hexo-generator-json-content --save

标签页开启

这个功能还是推荐的，默认没有开启，所以需要手动输入下面的命令来开启：

hexo new page tags

接着到hexo/source/tags/index.md修改内容为：

layout: tags
noDate: true
comments: false

保存运行，点你的tags即可看到标签页。

分类页开启

这个只有在card theme 才支持。

手动输入下面的命令来开启：

hexo new page tags

接着到hexo/source/tags/index.md修改内容为：

layout: tags
noDate: true
comments: false

保存运行，点你的tags即可看到标签页。

启用和配置

首先要启用该主题。

基本配置

为了得到更好的使用体验，以下内容请务必填写完整，因为这些内容会在主题中得到展示。

title: your title
subtitle: your subtitle
description: your description
keywords: your keywords
author: your name
email: your email
url: your site url

主题配置

编辑主题配置文件，themes/indigo/_config.yml。

左侧菜单

默认配置如下

menu:
  home:
    text: 主页
    url: /
  archives:
    url: /archives
  tags:
    url: /tags
  github:
    url: https://github.com/yscoder
    target: _blank
  weibo:
    url: http://www.weibo.com/ysweb
    target: _blank
  link:
    text: 测试
    url: /

添加新菜单项时，在 menu 下增加子属性即可。属性说明如下：

menu:
 link:               fontawesome图标，省略前缀，本主题前缀为 icon-，必须
   text: About       菜单显示的文字，如果省略即默认与图标一致，首字母会转大写
   url: /about       链接，绝对或相对路径，必须
   target: _blank    是否跳出，省略则在当前页面打开

fontawesome 图标已集成到主题中，你可以到 这个页面 挑选合适的图标。

favicon

站点 logo，显示在浏览器当前标签页左上角。

favicon: /favicon.ico

头像

位于左侧菜单上方

avatar: /img/logo.jpg

email

头像下方

email: 634206017@qq.com

color

设置 Android L Chrome 浏览器状态栏颜色，不需要可去除此项或设为 false。

color: '#3F51B5'

标签页 (old)

配置标签页标题

tags:
  title: 标签

页面标题 (card theme)

自定义归档、标签、分类页的大标题。

tags_title: Tags
archives_title: Archives
categories_title: Categories

文章摘要

可以在 Markdown 文件中加 <!--more--> 以分割摘要与文章正文。未设置时，按 excerpt_length设置截取。

# 文章摘要渲染方式: 为 true 时将渲染为 html，否则为文本
excerpt_render: false
# 截断长度
excerpt_length: 200
# 文字正文页链接文字
excerpt_link: 阅读全文...

mathjax

开启后，使你的站点支持公式渲染，by mathjax。 请按需开启，因为此项需要加载额外的 js 文件。

mathjax: false

分享

文章分享开关，by jiathis-api。

share: true

站内搜索

是否开启搜索

search: true

布局

开启后，文章页在大屏下会隐藏左侧菜单，专注阅读。

hideMenu: true

Toc

开启文章内容导航。

#toc: false  #关闭
toc:
  list_number: false  # 决定导航使用的标签， true 为 ol， false 为 ul。

less

设置 less 编译时的入口文件路径，hexo-renderer-less。

less:
  compress: true    # 是否压缩css
  paths:
    - source/css/style.less

评论

集成了多说和 disqus，开启其一即可。duoshuo-key 即多说站点名称。

duoshuo: duoshuo-key 

或

disqus_shortname: disqus_shortname

数据统计

集成的有谷歌和 CNZZ，请填写你的站点标识。

google_analytics: key
cnzz: 站点id

谷歌站点验证 (card theme)

google_site_verification: false

部署deploy

这个部分就是讲我们本地的博客部署到网上，这样别人就能通过互联网来看我们的博客啦。需要其他部署情况的可以看官方文档。

我将自己的两个部署写在下面，作为参考。在仓库里面选择你自己建立的仓库（这个仓库名需要和你的github，coding账号相同），然后选择分支，这里是master：

deploy:
  type: git
  repo: 
    coding: git@git.coding.net:Zhakel/Zhakel.git,master
    github: git@github.com:Zhakel/Zhakel.github.io.git,master

配置完成以后执行以下命令来部署：

hexo d

上面的命令hexo d是用于将本地文件发布到仓库上（github和coding）。

若出现ERROR与git相关，那么需要hexo-deployer-git这个模块，以下命令可以获取：

npm install hexo-deployer-git --save

接着继续执行hexo d即可完成部署。访问你的主页可以看到博客已经生成，默认网址为username.github.io和username.coding.me，其中username改为自己的用户名即可。

Hexo指令

hexo的常用指令并不多，这里就介绍几个常用的指令，对于需要深入了解的可以到官方文档查看。

重要指令介绍

新建new

hexo new [layout] <title>

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

生成generate

hexo generate

以上命令用于生成静态文件，同hexo g。

服务器server

hexo server

以上命令用于启动服务器，同hexo s。默认情况下，访问网址为： http://localhost:4000/。

部署deploy

hexo deploy

以上命令用于部署网站，同hexo d。

清理clean

以上命令用于清理缓存文件和生成的静态文件。

域名绑定

对于买了域名的读者可以参考一下我绑定域名的流程。

我是在万网上面购买的域名，配置比较简单，具体步骤如下：

1. 实现国内的走coding，海外的走github，域名解析如下：​

1. 在source文件夹下面新建CNAME文件（无后缀），文本编辑器打开输入你的域名（我的是zhakel.win）,保存

   ​

以下是部署到coding上需要做的：

1. 在博客的source目录下需要创建一个空白文件,至于原因，是因为coding.net需要这个文件来作为以静态文件部署的标志。就是说看到这个Staticfile就知道按照静态文件来发布。

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

2. coding网址的项目下，选择Pages服务，部署分支为master，接着绑定自定义域名(刚才的域名)

   效果：

测试

执行一下命令：

hexo clean
hexo g
hexo d

访问你的域名，如果解析完成，那么你就可以看到你的博客。

结尾

虽然很长，其实做起来并不难，各位加油哦。