Hexo

使用Hexo搭建博客

这是一篇个人总结，不适合用作入门教程；
需要更详细的资料请点击这里

安装

系统环境 win8.1 64bit

文本编辑器推荐使用Sublime Text;
Hexo的文件编码格式为 UTF-8

Git

安装 GitHub for Windows,
登录后会自动在本地配置好 SSH,执行 git shell时也不需要-config用户名和邮箱

新建仓库，Github Pages 的仓库名必须为your_user_name.github.io

配置 SSH，参考 SSH配置教程

Node.js

安装 Node.js, Node 安装包里带有npm

Hexo

安装 Hexo

npm install -g hexo

查看 Node 版本

node -v

查看 Hexo 版本

hexo version

创建项目

hexo init Hexo

进入目录

cd Hexo

也可以先进目录再初始化项目

cd Hexo
hexo init

安装依赖包

npm install

以后所有的命令都在该目录下进行

启动服务

hexo server

用浏览器打开 http://localhost:4000/ 或者 http://127.0.0.1:4000/ 就能看到网页了
推荐使用现代化浏览器(Chrome)获得最佳效果

按 Ctrl+C 停止本地预览

使用

目录结构

.
├── .deploy       #需要部署的文件
├── node_modules  #Hexo插件
├── public        #生成的静态网页文件
├── scaffolds     #模板
├── source        #博客正文和其他源文件，404、favicon、CNAME 都应该放在这里
|   ├── _drafts   #草稿
|   └── _posts    #文章
├── themes        #主题
├── _config.yml   #全局配置文件
└── package.json

全局配置 _config.yml

配置文件的冒号“:”后面有空格

# Hexo Configuration
## Docs: http://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/
# Site #站点信息
title: JiangangLu's Blog #标题
subtitle: 做人不卖萌和咸鱼有什么区别 #副标题
description: JiangangLu's blog #站点描述，给搜索引擎看的
author: jianganglu #作者
email:  #电子邮箱
language: zh-CN #语言
# URL #链接格式
url: http://jianganglu.github.io/ #网址
root: / #根目录
permalink: :year/:month/:day/:title/ #文章的链接格式
tag_dir: tags #标签目录
archive_dir: archives #存档目录
category_dir: categories #分类目录
code_dir: downloads/code
permalink_defaults:
# Directory #目录
source_dir: source #源文件目录
public_dir: public #生成的网页文件目录
# Writing #写作
new_post_name: :title.md #新文章标题
default_layout: post #默认的模板，包括 post、page、photo、draft（文章、页面、照片、草稿）
titlecase: false #标题转换成大写
external_link: true #在新选项卡中打开连接
filename_case: 0
render_drafts: false
post_asset_folder: false
relative_link: false
highlight: #语法高亮
  enable: true #是否启用
  line_number: true #显示行号
  tab_replace:
# Category & Tag #分类和标签
default_category: uncategorized #默认分类
category_map:
tag_map:
# Archives
2: 开启分页
1: 禁用分页
0: 全部禁用
archive: 2
category: 2
tag: 2
# Server #本地服务器
port: 4000 #端口号
server_ip: localhost #IP 地址
logger: false
logger_format: dev
# Date / Time format #日期时间格式
date_format: YYYY-MM-DD #参考http://momentjs.com/docs/#/displaying/format/
time_format: H:mm:ss
# Pagination #分页
per_page: 10 #每页文章数，设置成 0 禁用分页
pagination_dir: page
# Disqus #Disqus评论，替换为多说
disqus_shortname:
# Extensions #拓展插件
theme: landscape-plus #主题
exclude_generator:
plugins: #插件，例如生成 RSS 和站点地图的
- hexo-generator-feed
- hexo-generator-sitemap
# Deployment #部署，将 jianganglu 改成用户名
deploy:
  type: git
  repo: https://github.com/jianganglu/jianganglu.github.io.git

命令行使用

常用命令：

hexo help #查看帮助
hexo init #初始化一个目录
hexo new "postName" #新建文章
hexo new page "pageName" #新建页面
hexo generate #生成网页，可以在 public 目录查看整个网站的文件
hexo server #本地预览，'Ctrl+C'关闭
hexo deploy #部署.deploy目录
hexo clean #清除缓存，**强烈建议每次执行命令前先清理缓存，每次部署前先删除 .deploy 文件夹**

复合命令：

hexo deploy -g
hexo server -g

简写：

hexo n == hexo new
hexo g == hexo generate
hexo s == hexo server
hexo d == hexo deploy

安装插件，为插件名

npm install <plugin-name> --save
npm update #升级
npm uninstall <plugin-name> #卸载

安装主题，为主题的 git 仓库，为要存放在本地的目录名

git clone <repository> themes/<theme-name>

编辑文章

新建文章

hexo new "标题"

在 _posts 目录下会生成文件标题.md

title: 标题
date: 2014-11-11 11:11:11
tags:
- 标签1
- 标签2
- 标签3
categories: [分类1,分类2,分类3]
---
正文，使用Markdown语法书写

编辑完后保存，hexo server 预览

发布

以发布到 Github 为例

编辑全局配置文件 _config.yml 中的 deploy 部分，jianganglu为用户名

deploy:
  type: git
  repo: https://github.com/jianganglu/jianganglu.github.io.git
  branch: master

或者

deploy:
  type: git
  repository: git@github.com:jianganglu/jianganglu.github.com.git
  branch: master

项目主页需要把 branch 设置为 gh-pages

托管到 Gitcafe 的话修改为

deploy:
  type: github
  repository: git@gitcafe.com:jianganglu/jianganglu.git
  branch: gitcafe-pages

部署

hexo deploy

以下提示说明部署成功

[info] Deploy done: github

点击 Github 上项目的 Settings，GitHub Pages，提示Your site is published at http://jianganglu.github.io/
第一次上传网站的话需要等十分钟左右，以后每次更新都能马上打开

绑定域名

不绑定域名的话只能通过your_user_name.github.io访问
申请域名推荐GoDaddy，域名解析推荐DNSPod

绑定顶级域名

新建文件 CNAME，无后缀，纯文本文件，内容为要绑定的域名jianganglu.com
如果要使用www.jianganglu.com的形式，文件内容改为www.jianganglu.com

DNS设置
主机记录@，类型A，记录值192.30.252.153
主机记录www，类型A，记录值192.30.252.153
参考 https://help.github.com/articles/tips-for-configuring-an-a-record-with-your-dns-provider

绑定子域名

比如使用域名jianganglu.com的子域名blog.jianganglu.com
CNAME文件内容为blog.jianganglu.com

DNS设置
主机记录blog，类型CNAME，记录值jianganglu.github.io
参考 https://help.github.com/articles/tips-for-configuring-a-cname-record-with-your-dns-provider

Gitcafe 绑定域名

项目管理界面，左侧的导航栏中有自定义域名设置

优化

配置主题

Hexo 的主题列表

下载主题

$ git clone <repository> themes/<theme-name>

也可以手动下载后解压到 themes 目录

在全局配置文件 _config.yml 中 theme 一行改成想要的主题

主题目录结构

.
├── languages          #国际化
|   ├── default.yml    #默认
|   └── zh-CN.yml      #中文
├── layout             #布局
|   ├── _partial       #局部的布局
|   └── _widget        #小挂件的布局
├── script             #js脚本
├── source             #源代码文件
|   ├── css            #CSS
|   |   ├── _base      #基础CSS
|   |   ├── _partial   #局部CSS
|   |   ├── fonts      #字体
|   |   ├── images     #图片
|   |   └── style.styl #style.css
|   ├── fancybox       #fancybox
|   └── js             #js
├── _config.yml        #主题配置文件
└── README.md          #主题介绍

以下是主题 landscape-plus 的配置文件

# Header #顶部导航
menu:
  Home: / #主页
  Archives: /archives #存档
  About: /about #关于
rss: /atom.xml #RSS 订阅
# Content
excerpt_link: 阅读全文 #"Read More"要显示的文字
fancybox: true #fancybox 看图效果
# Sidebar #侧边栏
sidebar: right #位置，右边
widgets:
- weibo
- recent_posts
- recent_comments
- recent_visitors
- archive
- category
- tag
- tagcloud
#- links #在 widget 前加"#"禁用
# Links #友情链接
links:
  Hexo: http://hexo.io
# Miscellaneous
google_analytics: UA-xxxxxxxx-1 #Google Analytics ID
favicon: /favicon.ico #favicon 路径
twitter: jianganglu
google_plus: 
fb_admins: 
fb_app_id: 
# Duoshuo #多说通用代码
duoshuo_shortname:
# Baidu share #百度分享
baidushare: true

评论

在 Disqus官网 申请新网站的 shortname
配置 _config.yml 文件

disqus_shortname: xxxxxxxx

替换为多说，landscape-plus 已经配置好了多说，填写duoshuo_shortname即可

RSS 订阅

安装插件

npm install hexo-generator-feed

全局配置文件开启插件

plugins:
- hexo-generator-feed

主题配置文件添加入口

rss: /atom.xml

浏览http://localhost:4000/atom.xml查看是否生效

Sitemap 网站地图

安装插件

npm install hexo-generator-sitemap

开启插件

plugins:
- hexo-generator-sitemap

浏览http://localhost:4000/sitemap.xml查看是否生效

mathjax 数学公式

新建文件 themes/pacman/layout/_partial/mathjax.ejs
添加以下内容

<!-- mathjax config similar to math.stackexchange -->
<script type="text/x-mathjax-config">
  MathJax.Hub.Config({
    tex2jax: {
      inlineMath: [ ['$','$'], ["\\(","\\)"] ],
      processEscapes: true
    }
  });
</script>
<script type="text/x-mathjax-config">
    MathJax.Hub.Config({
      tex2jax: {
        skipTags: ['script', 'noscript', 'style', 'textarea', 'pre', 'code']
      }
    });
</script>
<script type="text/x-mathjax-config">
    MathJax.Hub.Queue(function() {
        var all = MathJax.Hub.getAllJax(), i;
        for(i=0; i < all.length; i += 1) {
            all[i].SourceElement().parentNode.className += ' has-jax';
        }
    });
</script>
<script type="text/javascript" src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
</script>

在themes/pacman/layout/_partial/after_footer.ejs增加对mathjax的引用

<%- partial('mathjax') %>

文章摘要

在摘要文字后面插入

<!--more-->

可以在主题的配置文件中设置要显示的文字

excerpt_link: 阅读全文

图片显示

把图片放到 source/images 目录下

![](images/xxx.jpg)

推荐使用图床

自定义页面

以关于页面为例

hexo new page "about"

编辑 source/about/index.md：

title: About
date: 2014-11-1 11:11:11
---
About Me

在主题的配置文件里添加入口

menu:
  About: /about

自定义 404 页面

添加 source/404.html

404 页面不需要 Hexo 解析

layout: false
--------
<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>404</title>
    <link rel="icon" href="/favicon.ico">
  </head>
  <body>
    <div align="center">
      <p>404 你懂的</p>
    </div>
  </body>
</html>

腾讯公益404
404公益_益云(公益互联网)社会创新中心
失蹤兒童少年資料管理中心404

添加小图标

将 favicon.ico 文件放在 source 目录下
配置 landscape-plus 主题里的 _config.yml

favicon: /favicon.ico

添加robots.txt

source 目录下添加 robots.txt

User-agent: Baiduspider
Disallow: 
User-agent: Googlebot
Disallow: 
User-agent: *
Disallow: /

生成 post 时默认生成 categories 配置项

在 scaffolds/post.md 中添加

categories:

添加新浪微博秀

在微博秀设置和生成代码
在主题 /layout/_widget 中新建 weibo.ejs 文件，保存刚刚复制的代码
在主题配置文件添加

widgets:
- weibo

设置网站统计

百度统计

编辑文件 hexo\themes\modernist_config.yml ，增加配置选项：

baidu_tongji: true

新建文件 hexo\themes\modernist\layout_partial\baidu_tongji.ejs ，内容如下：

<% if (theme.baidu_tongji){ %>
<script type="text/javascript">
#你的百度统计代码
</script>
<% } %>

注册并登录百度统计获取你的统计代码。

编辑文件 hexo\themes\modernist\layout_partial\head.ejs ，在 『/head』 之前增加：

<%- partial('baidu_tongji') %>

不出意外的话，在你的站点的每个页面的左上角都会看到一个恶心的百度LOGO。你只能在『百度统计首页->网站列表->获取代码->系统管理设置->统计图标设置->显示图标』，把那个勾去掉。

Google Analytics

landscape-plus 主题直接配置

google_analytics: UA-xxxxxxxx-1

添加”fork me on github”

官方教程
将代码插入到 layout.ejs

分享

landscape-plus 主题开启百度分享

baidushare: true

迁移

参考官方文档 Hexo Migration

赏 支付宝扫码打赏 微信打赏

如果文章对你有帮助，欢迎点击上方按钮打赏作者