![](http://osoa5juml.bkt.clouddn.com/avatar.jpg)
今天,是你未来所有剩余的日子中,最早的一天
背景
个人博客地址:http://nijun.me
我为什么要写这篇文章?是因为大学三年了,感觉学了这么多知识,但是并没有真正地去消化和总结过,最近又看到了stormzhang大神写的这篇我为什么坚持写博客?。我真的感触很深,以前花了很多时间学的东西,不久之后便会印象模糊,想要回忆的时候,又不能快速找到。所以我决定从今天开始写博客,总结和梳理自己的知识。
stormzhang在他的文章里推荐了hexo,基于Node框架,可以和Github Pages结合起来搭建个人博客。而且主题样式非常多,可以自己选择搭配的东西很多。当我第一次把博客跑起来的时候,真的惊呆了,没想到个人博客也可以这么轻松的搭建。我用了五一这个假期,自己动手搭建了现在您正看到的这个博客,虽然现在很粗糙,但是我会不断的学习和优化它的。
Hexo
什么是Hexo
Hexo是一个快速,简单和强大的博客框架。可以使用Markdown进行写作,Hexo会在几秒钟内生成具有美丽主题的静态文件。
安装要求
这里具体的操作步骤可以到hexo官网。
如果已经装好了这些,那么我们现在就开始吧!
第一步
一旦安装了所有要求,可以用npm安装Hexo。
$ npm install hexo-cli -g //在本地安装hexo的环境
第二步
首先选择一个目录作为hexo博客的根目录,使用git bash cd到这个目录,然后输入
$ 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
标签,与Github Pages进行关联
# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
type: git
repo: git@github.com:SimpleLifee/SimpleLifee.github.io.git
branch: master
其中type
必须填git,repo
填写你在git上创建的库的ssh
地址,或者https
地址。注意
如果是https的那么以后每次deploy
的时候都要求你输入用户名和密码,如果改成ssh
并且你没有给你的id_rsa设置密码(空密码也一样)的话,就不用每次都输入密码了。
$ ssh-keygen -p -f /root/.ssh/id_dsa -N ''
如果你之前设置了密码,那么使用这条命令就可以更改你的私钥的密码了。参考superuser
命令
写作
$ hexo new [layout] <title>
创建一个新文章,layout
可以有三个参数post
、page
、draft
, hexo 会在 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 会根据 scaffolds 文件夹内相对应的文件来建立文件,例如:
$ hexo new photo "My Gallery"
在执行这行指令时,Hexo 会尝试在 scaffolds 文件夹中寻找 photo.md,并根据其内容建立文章
变量 | 描述 |
---|---|
layout | 布局 |
title | 标题 |
date | 文件建立日期 |
布局(Layout)
Hexo 有三种默认布局:post
、page
、draft
,它们分别对应不同的路径,自定义的其他布局和 post
相同,都将储存到 source/_posts
文件夹。
布局 | 路径 |
---|---|
post | source/_posts |
page | source |
draft | source/_drafts |
不要处理我的文章
可以在Front-Matter 中的layout: 设为 false。
Front-matter
Front-matter 是文件最上方以 — 分隔的区域,用于指定个别文件的变量,例如
title: Hello World
date: 2017/5/1 20:46:25
---
也可以使用JSON 格式,只需要把 — 换成 ;;;
"title": "Hello World",
"date": "2017/5/1 20:46:25"
;;;
Front-matter的参数列表
参数 | 描述 | 默认值 |
---|---|---|
layout | 布局 | |
title | 标题 | |
date | 建立日期 | 文件建立日期 |
updated | 更新日期 | 文件更新日期 |
comments | 开启文章的评论功能 | true |
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 %}
{% blockquote stormzhang %}
今天,是你未来所有剩余的日子中,最早的一天
{% endblockquote %}
代码块(Code Block)
模板如下
{% codeblock [title] [lang:language] [url] [link text]%}
code snippet
{% endcodeblock %}
例如:
{% 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 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 谷歌 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 %}