这是一篇个人总结，不适合用作入门教程；
需要更详细的资料请点击这里
安装
系统环境 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 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 目录下
推荐使用图床
自定义页面
以关于页面为例
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
支付宝扫码打赏
微信打赏
如果文章对你有帮助，欢迎点击上方按钮打赏作者
