Fork me on GitHub

Hello-Hexo

Welcome to Hexo! This is a guide post to use Hexo. Check documentation for
more info. If you get any problems when using Hexo, you can find the answer in
troubleshooting or you can ask me on
GitHub.

Quick Start

Create a new post

1
$ hexo new "My New Post"

More info: Writing

Run server

1
$ hexo server

More info: Server

Generate static files

1
$ hexo generate

More info: Generating

Deploy to remote sites

1
$ hexo deploy

More info: Deployment

How to use Hexo and deploy to GitHub Pages

1. Install Hexo

1
2
3
4
5
6
7
8
9
10
11
12
$ sudo npm install -g hexo-cli

$ hexo -v
hexo-cli: 0.1.9
os: Darwin 14.3.0 darwin x64
http_parser: 2.3
node: 0.12.7
v8: 3.28.71.19
uv: 1.6.1
zlib: 1.2.8
modules: 14
openssl: 1.0.1p

2. Create a project for your GitHub Pages

1
2
3
4
5
6
7
$ hexo init fuhailin.github.io
INFO Copying data to ~/***/fuhailin.github.io
INFO You are almost done! Don't forget to run 'npm install' before you start blogging with Hexo!

$ cd fuhailin.github.io

$ npm install

3. Run a test server for your page on Mac

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

hexo s --draft # 预览Draft

4. Set information for your new blog

https://hexo.io/docs/configuration.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
$ vi _config.yml

~~~~~~~~~~~~~~~~~ _config.yml ~~~~~~~~~~~~~~~~~~
# Site
title: fuhailin's note
subtitle:
description: fuhailin's personal blog
author: fuhailin
language:
timezone: Japan

# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: http://fuhailin.github.io/
root: /
permalink: :year/:month/:day/:title/
permalink_defaults:

5. Set information to use Git

https://github.com/hexojs/hexo-deployer-git

1
2
3
4
5
6
7
8
9
10
$ npm install hexo-deployer-git --save
$ vi _config.yml

~~~~~~~~~~~~~~~~~ _config.yml ~~~~~~~~~~~~~~~~~~
# Deployment
## Docs: http://hexo.io/docs/deployment.html
deploy:
type: git
repo: git@github.com:fuhailin/fuhailin.github.io.git
branch: master

6. Set “watch” before starting your work

“watch” command can monitor your files.
https://hexo.io/docs/generating.html

1
$ hexo generate --watch

7. Create a new post file

1
2
$ hexo new first-post
INFO Created: ~/***/fuhailin.github.io/source/_posts/first-post.md

8. Edit the above file with Markdown or Hexo’s Helper

Hexo’s Helper
https://hexo.io/docs/helpers.html
I use Atom with “shift + control + m” when I use Markdown :-)
https://atom.io/

9. Delete “source/_posts/hello-world.md”

It’s not necessary to deploy.

10. Deploy your new blog!!

https://hexo.io/docs/deployment.html

1
2
$ hexo clean
$ hexo deploy

After writting the above command, you can see your new blog on GitHub Pages.
http://******.github.io/

11. Change your blog theme

https://github.com/hexojs/hexo/wiki/Themes

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
For instance, How to use the following theme.
https://hexo.io/hexo-theme-light/

## Install it
$ cd fuhailin.github.io
$ git clone https://github.com/theme-next/hexo-theme-next themes/next

## Update the above files
$ themes/light
$ git pull

## Set information to use the theme
$ cd fuhailin.github.io
$ vi _config.yml

~~~~~~~~~~~~~~~~~ _config.yml ~~~~~~~~~~~~~~~~~~
# Extensions
## Plugins: http://hexo.io/plugins/
## Themes: http://hexo.io/themes/
theme: light

12. Create a new page file

https://hexo.io/docs/writing.html

1
2
3
4
5
6
$ hexo new page aboutme
INFO Created: ~/***/fuhailin.github.io/source/aboutme/index.md

$ cd source/aboutme/

$ vi index.md

13. Use “Read More”

Write <!-- more --> in your articles.

14. Use Plugins

https://github.com/hexojs/hexo/wiki/Plugins

为blog添加评论区

hexo添加gitment评论系统:
http://kuring.me/post/gitment/

给 Github 添加 README

默认情况下,Github中每一个项目,我们希望有一份 README.md 的文件来作为项目的说明,但是我们在项目根目录下的 blog\source
目录下创建一份 README.md 文件,写好说明介绍,部署的时候,这个 README.md 会被 hexo 解析掉,而不会被解析到 Github 中去的。
正确的解决方法其实很简单:
把 README.md 文件的后缀名改成 “MDOWN” 然后扔到blog/source文件夹下即可,这样 hexo 不会解析,Github 也会将其作为 MD
文件解析。
https://neveryu.github.io/2016/09/30/hexo-next-two/

添加Fork Me on github书签

https://www.jianshu.com/p/2002f4881353


NexT主题下修改文章底部#号tag标签

~hexo/themes/next/layout/_macro中找到post.swig文件,在内搜索el="tag">#,将#换成即可.

想使用其他图标可在Fontawesome内自行查找。

前:
后:


添加分享按钮NeedMoreShare2 for NexT

theme-next-needmoreshare2


显示每篇文章的更新时间

最新版本的next主题已经加入了配置博文更新时间的代码。在主题配置文件中,post_meta中有一个updated_at属性,如果enable就是开启这个功能。所以我们在博文开头开头部分加入updated定义就行:

post Markdown code 效果

在文章中插入图片

https://fuhailin.github.io/%E5%9C%A8Hexo%E5%8D%9A%E5%AE%A2%E4%B8%AD%E6%8F%92%E5%85%A5%E5%9B%BE%E7%89%87%E7%9A%84%E5%90%84%E7%A7%8D%E6%96%B9%E5%BC%8F/


How to create and sync your hexo blog in one repo

https://xiaoyuliu.github.io/2018/03/28/how-to-sync-hexo-blog/


Hexo标签插件的使用

https://wuchenxu.com/2015/12/08/Static-Blog-hexo-github-6-tag-plugins/


在文章中插入代码

http://octopress.org/docs/plugins/codeblock/

插入代码文件

把整个文件作为代码插入,这样做的好处是作为可运行的代码后续如果修正了bug,重新hexo g一下文章中的代码就会自动更新;不需要每次从文件中拷贝粘贴代码到文章中。

配置code存放路径
在hexo的配置文件hexo/_config.yml中看到code_dir: downloads/code,说明所有的code文件都放到source/downloads/code文件夹下。
语法

1
{% include_code [title] [lang:language] path/to/file %}

[title]:可选,标题名,默认是文件名
[lang:language]:可选设置语言后,根据不同的语言设置语法高亮

举例
代码文件存放在source/uploads/code/hello_world.c.

1
{% include_code lang:c hello world in c lang hello_world.c %}
hello world in c langview raw
1
2
3
4
5
6
#include <stdio.h>
int main(int argc, char *argv[])
{
printf("hello world!");
return 0;
}

插入gist代码

1
{% gist d27c69e5852f3d0f4e7dc15bb90a2e24 trie.py %}

插入github代码

1
{% ghcode github_code_link start_line end_line %}


搜索引擎优化SEO

https://fuhailin.github.io/Hexo%E6%90%AD%E5%BB%BA%E5%8D%9A%E5%AE%A2%E8%BF%9B%E9%98%B6%E4%B9%8BSEO%E6%90%9C%E7%B4%A2%E5%BC%95%E6%93%8E%E4%BC%98%E5%8C%96/


Hexo博客文章添加置顶属性

使用插件hexo-generator-index-pin-top
安装:

$ npm uninstall hexo-generator-index —save
$ npm install hexo-generator-index-pin-top —save

使用:在需要置顶的Front-matter中加上top: 数字即可,数字越大,置顶越靠前。


自定义Hexo博客的文章模板

博客模版存放在scaffolds文件夹
scaffolds文件夹:

1
2
3
4
├── scaffolds					//保存着默认模板,自定义模板就是修改该目录下的文件
│ ├── draft.md //默认的草稿模板
│ ├── page.md //默认的页面模板
│ └── post.md //默认的文章模板

在新建文章时,Hexo 会根据 scaffolds 文件夹内相对应的文件来建立文件,例如:
hexo new draft "My Gallery"
在执行这行指令时,Hexo 会尝试在 scaffolds 文件夹中寻找 draft.md

http://www.mashangxue123.com/Hexo/353523292.html


博文中嵌入PDF插件

https://github.com/superalsrk/hexo-pdf


在博客中显示LaTeX数学公式

我这里使用的是MathJax LaTeX渲染引擎和hexo-renderer-markdown-it hexo-renderer-kramed Markdown解析器
https://theme-next.org/docs/third-party-services/math-equations/


扩展支持emoji表情

https://github.com/crimx/hexo-filter-github-emojis

1
npm install hexo-filter-github-emojis --save

emoji使用方法

这里有一份emoji与markdown编码的对照表:
Complete list of github markdown emoji markup · GitHub

Emoji test:😊💘💩:+1:🐷🇨🇳🔞🎓😍

但是发现在主页上的emoji表情没有显示出来


Good References:

Hexo+NexT 打造一个炫酷博客:https://juejin.im/post/5bcd2d395188255c3b7dc1db
Hexo官方中文文档:https://hexo.io/zh-cn/docs/
hexo进阶: http://stevenshi.me/2017/05/09/hexo-advance/
博客写作模板: https://blog.baoyukun.win/%E6%8A%80%E6%9C%AF/%E5%89%8D%E7%AB%AF/a-writing-model/
搭建 Hexo 博客的填坑经历和必要的优化:https://kris2d.info/posts/b706980b/
Hexo程序archive页面数量设置:http://www.yuzhewo.com/2015/11/21/Hexo%E7%A8%8B%E5%BA%8Farchive%E9%A1%B5%E9%9D%A2%E6%95%B0%E9%87%8F%E8%AE%BE%E7%BD%AE/
Hexo博客归档不分页显示设置方法:https://sobaigu.com/hexo-archives-show-all-in-one-page.html
搭建Hexo博客进阶篇—-主题自定义(三):https://www.jianshu.com/p/4b9ee8fec3a3
Git Pages 使用指南

您的支持将鼓励我继续创作!