Hexo+Github搭建博客指南

希望在成长的过程中留下足迹，也希望自己的学习笔记能帮助到其他人，所以有了本站。

使用Hexo和Github搭建本站，从众多主题中选择Maupassant，简洁好看，甚是喜欢。

在Github中创建仓库

使用自己账户登录Github，点击New repository创建仓库，仓库名应为用户名.github.io（用户名必须与自己Github用户名保持一致）。比如我的Github链接为Blueschang，博客的仓库命名如图：

安装Hexo

1	$ sudo npm install -g hexo-cli

创建博客项目

1	$ hexo init yourblogname.github.io

1	$ cd yourblogname.github.io

1	$ npm install

在Mac上为你的页面运行测试服务器

首先初始化博客

1	$ hexo init blog

生成一篇测试博文

1	$ hexo new test_my_site

生成静态文件

1	$ hexo generate

此命令可以简写为

$ hexo g

启动服务器

1 2	$ hexo server INFO Hexo is running at http://0.0.0.0:4000/. Press Ctrl+C to stop.

此命令可以简写为

1	`$ hexo generate`

配置Git

从Git官网上下载最新版本，设置user.name和user.email信息，生成ssh密钥文件，记得将id_rsa.pub密钥内容复制到Github账户SSH key中。

安装Git部署插件

1	$ npm install hexo-deployer-git --save

部署网站

依次输入一下命令

1	$ hexo clean

$ hexo g

1	$ hexo deploy

更改主题

安装主题和渲染器

1
2
3

$ git clone https://github.com/tufu9441/maupassant-hexo.git themes/maupassant
$ npm install hexo-renderer-pug --save
$ npm install hexo-renderer-sass --save

编辑Hexo目录下的 _config.yml，将theme的值改为maupassant。

maupassant主题功能配置

_config.yml默认配置：

fancybox: true ## If you want to use fancybox please set the value to true.
disqus: ## Your disqus_shortname, e.g. username
uyan: ## Your uyan_id. e.g. 1234567
livere: ## Your livere data-uid, e.g. MTAyMC8zMDAxOC78NTgz
changyan: ## Your changyan appid, e.g. cyrALsXc8
changyan_conf: ## Your changyan conf, e.g. prod_d8a508c2825ab57eeb43e7c69bba0e8b
gitment:
  enable: false ## If you want to use Gitment comment system please set the value to true.
  owner: ## Your GitHub ID, e.g. username
  repo: ## The repository to store your comments, make sure you're the repo's owner, e.g. imsun.github.io
  client_id: ## GitHub client ID, e.g. 75752dafe7907a897619
  client_secret: ## GitHub client secret, e.g. ec2fb9054972c891289640354993b662f4cccc50
gitalk:
  enable: false ## If you want to use Gitment comment system please set the value to true.
  owner:  ## Your GitHub ID, e.g. username
  repo:  ## The repository to store your comments, make sure you're the repo's owner, e.g. gitalk.github.io
  client_id:  ## GitHub client ID, e.g. 75752dafe7907a897619
  client_secret:  ## GitHub client secret, e.g. ec2fb9054972c891289640354993b662f4cccc50
  admin:  ## Github repo owner and collaborators, only these guys can initialize github issues.
valine: ## https://valine.js.org
  enable: false ## If you want to use Valine comment system, please set the value to true.
  appid: ## Your LeanCloud application App ID, e.g. pRBBL2JR4N7kLEGojrF0MsSs-gzGzoHsz
  appkey: ## Your LeanCloud application App Key, e.g. tjczHpDfhjYDSYddzymYK1JJ
  notify: false ## Mail notifier, see https://github.com/xCss/Valine/wiki/Valine-评论系统中的邮件提醒设置
  verify: false ## Validation code.
  placeholder: Just so so ## Comment box placeholders.
  avatar: 'mm' ## Gravatar type, see https://github.com/xCss/Valine/wiki/avatar-setting-for-valine
  pageSize: 10 ## Number of comments per page.
  guest_info: nick,mail,link ## Attributes of reviewers.

google_search: true ## Use Google search, true/false.
baidu_search: false ## Use Baidu search, true/false.
swiftype: ## Your swiftype_key, e.g. m7b11ZrsT8Me7gzApciT
tinysou: ## Your tinysou_key, e.g. 4ac092ad8d749fdc6293
self_search: false ## Use a jQuery-based local search engine, true/false.
google_analytics: ## Your Google Analytics tracking id, e.g. UA-42425684-2
baidu_analytics: ## Your Baidu Analytics tracking id, e.g. 8006843039519956000
show_category_count: false ## If you want to show the count of categories in the sidebar widget please set the value to true.
toc_number: true ## If you want to add list number to toc please set the value to true.
shareto: false ## If you want to use the share button please set the value to true, you must have hexo-helper-qrcode installed.
busuanzi: false ## If you want to use Busuanzi page views please set the value to true.
widgets_on_small_screens: false ## Set to true to enable widgets on small screens.
canvas_nest:
  enable: false ## If you want to use dynamic background please set the value to true, you can also fill the following parameters to customize the dynamic effect, or just leave them blank to keep the default effect.
  color: ## RGB value of the color, e.g. "100,99,98"
  opacity: ## Transparency of lines, e.g. "0.7"
  zIndex: ## The z-index property of the background, e.g. "-1"
  count: ## Quantity of lines, e.g. "150"
donate:
  enable: false ## If you want to show the donate button after each post, please set the value to true and fill the following items according to your need. You can also enable donate button in a page by adding a "donate: true" item to the front-matter.
  github: ## GitHub URL, e.g. https://github.com/Kaiyuan/donate-page
  alipay_qr: ## Path of Alipay QRcode image, e.g. /img/AliPayQR.png
  wechat_qr: ## Path of Wechat QRcode image, e.g. /img/WeChatQR.png
  btc_qr: ## Path of Bitcoin QRcode image, e.g. /img/BTCQR.png
  btc_key: ## Bitcoin key, e.g. 1KuK5eK2BLsqpsFVXXSBG5wbSAwZVadt6L
  paypal_url: ## Paypal URL, e.g. https://paypal.me/tufu9441

menu:
  - page: home
    directory: .
    icon: fa-home
  - page: archive
    directory: archives/
    icon: fa-archive
  - page: about
    directory: about/
    icon: fa-user
  - page: rss
    directory: atom.xml
    icon: fa-rss

widgets: ## Six widgets in sidebar provided: search, category, tag, recent_posts, rencent_comments and links.
  - search
  - category
  - tag
  - recent_posts
  - recent_comments
  - links

links:
  - title: site-name1
    url: http://www.example1.com/
  - title: site-name2
    url: http://www.example2.com/
  - title: site-name3
    url: http://www.example3.com/

timeline:
  - num: 1
    word: 2014/06/12-Start
  - num: 2
    word: 2014/11/29-XXX
  - num: 3
    word: 2015/02/18-DDD
  - num: 4
    word: More

# Static files
js: js
css: css

# Theme version
version: 0.0.0

ancybox - 是否启用Fancybox图片灯箱效果
disqus - Disqus评论 shortnam
uyan - 友言评论 id
livere - 来必力评论 data-uid
changyan - 畅言评论 appid
gitment - Gitment评论相关参数
gitalk - Gitalk评论相关参数
valine - Valine评论相关参数
google_search - 默认使用Google搜索引擎
baidu_search - 若想使用百度搜索，将其设定为true。
swiftype - Swiftype 站内搜索key
tinysou - 微搜索 key
self_search - 基于jQuery的本地搜索引擎，需要安装hexo-generator-search插件使用。
google_analytics - Google Analytics 跟踪ID
baidu_analytics - 百度统计跟踪ID
show_category_count - 是否显示侧边栏分类数目
toc_number - 是否显示文章中目录列表自动编号
shareto - 是否使用分享按钮，需要安装hexo-helper-qrcode插件使用
busuanzi - 是否使用不蒜子页面访问计数
widgets_on_small_screens - 是否在移动设备屏幕底部显示侧边栏
canvas_nest - 是否使用canvas动态背景
donate - 是否启用捐赠按钮
menu - 自定义页面及菜单，依照已有格式填写。填写后请在source目录下建立相应名称的文件夹，并包含index.md文件，以正确显示页面。导航菜单中集成了FontAwesome图标字体，可以在这里选择新的图标，并按照相关说明使用。
widgets - 选择和排列希望使用的侧边栏小工具。
links - 友情链接，请依照格式填写。
timeline - 网站历史时间线，在页面front-matter中设置layout: timeline可显示。
Static files - 静态文件存储路径，方便设置CDN缓存。
Theme version - 主题版本，便于静态文件更新后刷新CDN缓存。

主题特性

网站图标

若要设置网站Favicon，可以将favicon.ico放在Hexo根目录的source文件夹下，建议的大小：32px*32px。

若要为网站添加苹果设备图标，请将命名为apple-touch-icon.png的图片放在同样的位置，建议的大小：114px*114px。

主题自带Font Awesome主题图标，可在网站中选择后更改代码调用。

文章摘要

首页默认显示文章摘要而非全文，可以在文章的front-matter中填写一项description:来设置你想显示的摘要，或者直接在文章内容中插入以隐藏后面的内容。
若两者都未设置，则自动截取文章第一段作为摘要。

添加页面

在source目录下建立相应名称的文件夹，然后在文件夹中建立index.md文件，并在index.md的front-matter中设置layout为layout: page。若需要单栏页面，就将layout设置为 layout: single-column。

文章目录

在文章的front-matter中添加toc: true即可让该篇文章显示目录。

文章评论

文章和页面的评论功能可以通过在front-matter中设置comments: true或comments: false来进行开启或关闭（默认开启）。

语法高亮

要启用代码高亮，请在Hexo目录的_config.yml中将highlight选项按照如下设置：

highlight:
  enable: true
  auto_detect: true
  line_number: true
  tab_replace:

数学公式

要启用数学公式支持，请在Hexo目录的_config.yml中添加：

1	mathjax: true

并在相应文章的front-matter中添加mathjax: true，例如：

title: Test Math
date: 2016-04-05 14:16:00
categories: math
mathjax: true
---

数学公式的默认定界符是$$...$$和\\[...\\]（对于块级公式），以及 $...$ 和\$...\$（对于行内公式）。

但是，如果你的文章内容中经常出现美元符号“$”, 或者说你想将“$”用作美元符号而非行内公式的定界符，请在Hexo目录的_config.yml中添加：

1	mathjax2: true

而不是mathjax: true。相应地，在需要使用数学公式的文章的front-matter中也添加mathjax2: true。

示例。

支持语言

目前支持简体中文（zh-CN），繁体中文（zh-TW），英语（en），法语（fr-FR），德语（de-DE），韩语（ko）和西班牙语（es-ES），欢迎翻译至其它语言。

本章节内容参考博文——大道至简——Hexo简洁主题推荐

问题解决

检查一下终端当前的目录是否为Hexo的根目录，并包含source/和themes/。
使用过程中遇到问题欢迎提交issue。

图床

可以考虑七牛云、新浪微博等，我目前采用新浪微博图床，配合chrome插件食用。

添加文章版权信息和推荐阅读

参考博文——给 maupassant 主题添加文章版权信息和推荐阅读功能。

创建”分类“页

在博客项目所在文件夹，执行命令：

1	$ hexo new page categories

在生成的index.md文件中添加type: "categories"，保存并关闭文件。

---
title: 文章分类
date: 2017-05-27 13:47:40
type: "categories"
---

新建文章时，在文章index.md文件Front-matter属性中添加categories，注明所属分类。PS:Hexo一篇文章只能属于一个分类，如果在“- 深度学习”下方添加“-TensorFlow”，Hexo不会产生两个分类，而是分类嵌套（即该文章属于 “- 深度学习”下的 “-TensorFlow ”分类）。

---
title: TensorFlow实战
date: 2018-10-25 12:03:01
categories: 
- 深度学习
---

创建”标签”

打开需要添加标签的文章，为其添加tags属性。下方的- TensorFlow - 深度学习就是这篇文章的标签。

---
title: TensorFlow实战
date: 2018-10-25 12:03:01
categories: 
- 深度学习
tags:
- TensorFlow
- 深度学习
---

如果本博文对您有帮助，可以赞助支持一波博主~