自己动手搭建个人博客到优化

背景

Hexo

什么是Hexo

安装要求

第一步

$ npm install hexo-cli -g  //在本地安装hexo的环境

第二步

$ hexo init <folder>   //推荐 ，这里的folder参数如果指定，便会在终端当前的资料夹建立一个名为 folder 的新资料夹；
$ hexo init  //直接使用当前目录初始化

$ cd folder
$ npm install  //在当前目录下安装hexo核心文件
$ npm install hexo --no-optional --save

floder

.
├── _config.yml   站点配置文件
├── package.json
├── scaffolds    存放模板的地方
├── source       原文件夹，存放网站内容
|   ├── _drafts  存放临时草稿文件的地方
|   └── _posts   已经发布的文章
└── themes       主题文件夹

source

generate

public

public

floder

_config.yml

站点配置文件

主题配置文件

站点配置文件

Site

# Site
title: SimpleLifee  #网站标题
subtitle: code, mylife   #网站副标题
description: start from zero     #网站描述
author: Nimon        #你的名字
language: zh-Hans    #语言，
timezone: Asia/Shanghai  #时区

Deployment

# Deployment
## Docs: https://hexo.io/docs/deployment.html deploy:
type: git
repo: git@github.com:SimpleLifee/SimpleLifee.github.io.git
branch: master

type

repo

ssh

https

注意

deploy

ssh

$ ssh-keygen -p -f /root/.ssh/id_dsa -N ''

命令

写作

$ hexo new [layout] <title>

layout

post

page

draft

Scaffold

layout.md

title

文件名称

Writing

new_post_name: :year-:month-:day-:title.md

:month

:i_month

04

草稿

draft

source/_drafts

source/_posts

$ hexo publish [layout] <filename>

filename

layout

post

模版（Scaffold）

$ hexo new photo "My Gallery"

layout

title

date

布局（Layout）

post

page

draft

post

source/_posts

Front-matter

title: Hello World
date: 2017/5/1 20:46:25
---

"title": "Hello World",
"date": "2017/5/1 20:46:25"
;;;

layout

title

date

updated

comments

description

tags

categories

permalink

分类和标签

tags:
- List
- Dictionary
- ArraryList
- hashtable
- Stack
- Queue

tags:
[Python, Javascript, Hexo]

引用块（Block Quote）

{% blockquote [author[, source]] [link] [source_link_title] %}
content
{% endblockquote %}

{% blockquote stormzhang %}
今天，是你未来所有剩余的日子中，最早的一天
{% endblockquote %}

代码块（Code Block）

{% codeblock [title] [lang:language] http://www.runoob.com/java/java-tutorial.html" target=_blank> [link text]%}
code snippet
{% endcodeblock %}[/code]

例如：

{% codeblock  main.java lang:java  http://www.runoob.com/java/java-tutorial.html Java%}
public static void main(String []args){
}
{% endcodeblock  %}


{% codeblock  main.java lang:java  [url=http://www.runoob.com/java/java-tutorial.html]http://www.runoob.com/java/java-tutorial.html Java%}

public static void main(String []args){

}

{% endcodeblock  %}

醒目引文（Pull Quote）
{% pullquote [class] %}
something important
{% endpullquote %}


如下

{% pullquote [class] %}

something important

{% endpullquote %}

图片（Image）
有两种方式，一种是markdown格式的

![](/images/avatar.jpg)


另一种是hexo支持的格式

{% img [class names] /path/to/image [width] [height][title text [alt text]] %}


链接（Link）
在文章中插入链接，并自动给外部链接添加 target=”_blank” 属性。

{% link text url [external] [title] %}

{% link 谷歌 http://www.google.com google %}


如{% link 谷歌 [url=http://www.google.com]http://www.google.com google %}

外部引用（Include Code）
可以引入其他文件中的代码，例如下面语句

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


hexo支持的语法还有很多，如

jsFiddle、Gist、iframe、Youtube、Vimeo等等，有需要的建议自行查阅官方文档

服务器
安装与使用
要使用hexo的服务器，首先要安装

{% blockquote  %}

npm install hexo-server –save

{% endblockquote %}

安装完成后，默认在 http://localhost:4000 下启动。在服务器启动期间，Hexo 会监视文件变动并自动更新，无须重启服务器。

$ hexo server -p 5000 //启动服务器， 可以简写 hexo s

参数 
-p
 覆盖默认端口，参数 
-w
 查看文件改动

看到下面的信息，说明已经成功，可以查看你的博客了。



静态模式
在静态模式下，服务器只处理 public 文件夹内的文件，而不会处理文件变动，一般性用于你正在写博客的情况下。

$ hexo server -s


生成文件(Generating)
$ hexo generate


生成静态文件，参数 
-d
 生成完成后部署，参数 
-w
 查看文件改动，下面两种写法都一样

$ hexo g -d
$ hexo d -g


监视文件变动
$ hexo generate--watch


Hexo 能够监视文件变动并立即重新生成静态文件，在生成时会比对文件的 SHA1 checksum，只有变动的文件才会写入。

部署（Deployment）
$ hexo deploy


部署你的网站，在使用之前，需要在
站点配置文件
 进行配置。可以有多个deployer

deploy:
- type: git
repo:
- type: heroku
repo:


缩进

YAML依靠缩进来确定元素间的从属关系。因此，请确保每个deployer的缩进长度相同，并且使用空格缩进。

Git
部署提示找不到Git , 直接使用这个命令从 hexo-deployer-git 上安装git的部署插件

$ npm install hexo-deployer-git --save


修改配置。

{% codeblock    lang:yaml%}

deploy:

type: git

repo:

branch: [branch]

message: [message]

{% endcodeblock  %}

​

参数
描述
repo
库（Repository）地址
branch
分支名称。如果您使用的是 GitHub 或 GitCafe 的话，程序会尝试自动检测。                   最好填ssh，这样就每次deploy的时候都要输入密码了。
message
自定义提交信息 (默认为 
Site updated: { { now('YYYY-MM-DD HH:mm:ss') }}
)
其他
其他部署方案，可以参见官方文档

$ hexo clean


清除缓存文件（db.json）和生成的文件（public）

$ hexo list <type>


type
 可以是
page
, 
post
,
route
, 
tag
, 
category


$ hexo version


显示版本信息

$ hexo --config custom.yml
$ hexo --config custom.yml，custom2.json


使用自定义配置文件（而不是_config.yml），还可以接受将文件合并为一个的JSON或YAML配置文件的逗号分隔列表（无空格）

自动更新文件

$ hexo g     //也可以这样写hexo generate


部署到git

$ hexo d


一般可以这样简写，就是说在部署到git之前，先进行更新

$ hexo d -g


可以查看hexo的版本

hexo -v


这时候万一遇到这个错误

ERROR Deployer not found: git


试试

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


如果是下面这个问题：

{ [Error: Cannot find module './build/Release/DTraceProviderBindings'] code: 'MODULE_NOT_FOUND' }
{ [Error: Cannot find module './build/default/DTraceProviderBindings'] code: 'MODULE_NOT_FOUND' }
{ [Error: Cannot find module './build/Debug/DTraceProviderBindings'] code: 'MODULE_NOT_FOUND' }


那就

npm install hexo --no-optional


NexT
如果你熟悉 Git， 建议你使用 克隆最新版本 的方式，之后的更新可以通过 git pull 来快速更新， 而不用再次下载压缩包替换。

下载主题



cdyour−hexo−site git clone https://github.com/iissnan/hexo-theme-next themes/next

2. 启用主题
与所有 Hexo 主题启用的模式一样。 当 克隆/下载 完成后，打开 `站点配置文件`， 找到` theme `字段，并将其值更改为` next`。


theme: next

到此，NexT 主题安装完成。下一步我们将验证主题是否正确启用。在切换主题之后、验证之前， 我们最好使用 `$ hexo clean` 来清除 Hexo 的缓存。

### 一些好用的插件 ###

{% blockquote %}
hexo可视化后台管理，很方便 - [hexo-hey](https://github.com/nihgwu/hexo-hey)
在 hexo 中无痛使用本地图片 - [hexo-asset-image](https://github.com/CodeFalling/hexo-asset-image)
备份整个博客包括主题 - [hexo-git-backup](https://github.com/coneycode/hexo-git-backup)

{% endblockquote %}

### 参考 ###

{% blockquote %}
网易云音乐 - [Hexo中播放网易云音乐的实践](http://weqeo.com/2016/10/11/Hexo中播放网易云音乐的实践)
网易云音乐 - [GitHub Ribbons](https://github.com/blog/273-github-ribbons)
字数统计WordCount 、阅读时长预计Min2Read、总字数统计TotalCount - [hexo-wordcount](https://github.com/willin/hexo-wordcount)

{% endblockquote %}