个人博客widiot’s blog
一、Hexo
1.1 介绍
Hexo是基于NodeJS
的静态博客框架,简单、轻量,其生成的静态网页可以托管在Github
和Heroku
上
- 超快速度
- 支持MarkDown
- 一键部署
- 丰富的插件
1.2 安装node.js
在nodejs官网下载对应系统的安装包,按提示安装
检验安装成功:
$ node -v
1.3 安装hexo
$ npm install hexo-cli -g
注意:Mac系统,则需要
$ sudo npm install hexo-cli -g
二、搭建博客
1.创建博客目录<username>.github.io
$ hexo init username.github.io
$ cd username.github.io
$ npm install
2.生成静态页面
$ hexo clean
$ hexo g
g即generate
3.运行
$ hexo s
s即server
4.打开浏览器,输入地址 localhost:4000 即可看到博客页面
三、发表文章
3.1 命令方式
$ hexo new test
此时会在source/_posts
目录下生成test.md
文件,写入一些内容再保存
然后生成静态页面,访问 localhost:4000 查看效果
$ hexo clean
$ hexo g
$ hexo s
3.2 直接方式
在 source/_posts/下新建.md
文件,然后写入内容
使用上述命令生成静态页面,访问 localhost:4000 查看效果
四、配置
网站的设置大部分都在_config.yml文件中,详细配置可以查看官方文档
下面列出简单常用配置
- title:网站标题
- subtitle:网站副标题
- description:网站描述
- author:你的名字
- language:网站使用的语言
注意:进行配置时,需要在冒号:
后加一个英文空格
title: myblog
五、换主题
Hexo中有很多主题,可以在官网查看。这里推荐hexo-next
下面说明更换主题的一般步骤:
1.下载主题资源
$ git clone https://github.com/theme-next/hexo-theme-next themes/next
2.应用下载的主题
在网站配置文件_config.yml中,配置theme
theme: next
next是主题名称,具体的可查看主题的文档
3.主题其他配置
可在/theme/{theme}/_config.yml
主题的配置文件下进行主题的配置
接下来执行调试命令查看效果
$ hexo clean
$ hexo g
$ hexo s
六、部署到Github
1.创建一个<username>.github.io
的public仓库
如果你的用户名是xxx,则需要创建一个xxx.github.io的public仓库
2.安装 hexo-deployer-git
$ npm install hexo-deployer-git --save
3.网站配置git
在网站的_config.yml
中配置deploy
deploy:
type: git
repo: <repository url>
branch: [branch]
branch
为分支,默认为master
,可以不配置
repo
为仓库地址,在github上新建仓库后,可复制地址
3.部署
$ hexo d
d即deploy
七、标签
7.1 两个确认
- 确认站点配置文件有
tag_dir: tags
- 确认主题配置文件有
tags: /tags
7.2 新建tags页面
$ hexo new page tags
此时会在source/
下生成tags/index.md
文件
7.3 修改source/tags/index.md
title: tags
date: 2015-10-20 06:49:50
type: "tags"
comments: false
7.4 在文章中添加tags
在文章xx.md
中添加:
tags:
- Tag1
- Tag2
- Tag3
多个Tag可按上面的格式添加
其文件头部类似:
title: TagEditText
date: 2016-11-19 10:44:25
tags:
- Tag1
- Tag2
- Tag3
八、分类
8.1 两个确认
- 确认站点配置文件有
category_dir: categories
- 确认主题配置文件有
categories: /categories
8.2 新建categories页面
$ hexo new page categories
此时会在source
目录下生成categories/index.md
文件
8.3 修改categories/index.md
title: categories
date: 2015-10-20 06:49:50
type: "categories"
comments: false
8.4 在文章中添加categories
在文章xx.md中添加:
categories:
- cate
其文件头部类似:
title: TagEditText
date: 2016-11-19 10:44:25
categories:
- cate
九、评论功能
1.安装gitment
$npm install gitment --save
2.在 https://github.com/settings/applications/new 进行注册,获取Client ID和Client Secret
3.打开themes/next目录下的_config.yml文件进行修改并保存
gitment:
enable: true
mint: true # RECOMMEND, A mint on Gitment, to support count, language and proxy_gateway
count: true # Show comments count in post meta area
lazy: false # Comments lazy loading with a button
cleanly: false # Hide 'Powered by ...' on footer, and more
language: # Force language, or auto switch by theme
github_user: <username> # MUST HAVE, Your Github Username
github_repo: <username>.github.io # MUST HAVE, The name of the repo you use to store Gitment comments
client_id: 76xxxxxxxxxxxxxxxx5f # MUST HAVE, Github client id for the Gitment
client_secret: 4axxxxxxxxxxxxxxxxxxxxxxxxxxxxxxca # EITHER this or proxy_gateway, Github access secret token for the Gitment
proxy_gateway: # Address of api proxy, See: https://github.com/aimingoo/intersect
redirect_protocol: # Protocol of redirect_uri with force_redirect_protocol when mint enabled
4.生成网站和提交网站
$hexo g
$hexo d
5.点击文章下方的初始化评论按钮
6.文章名太长会导致评论功能开放失败出现Error: Validation Failed
错误
修改文件next/layout/_third-party/comments/gitment.swig
,将id
部分修改为id: '{{ page.date }}'
{% if page.comments %}
<script type="text/javascript">
function renderGitment(){
var gitment = new {{CommentsClass}}({
id: '{{ page.date }}',
owner: '{{ theme.gitment.github_user }}',
repo: '{{ theme.gitment.github_repo }}',
{% if theme.gitment.mint %}
lang: "{{ theme.gitment.language }}" || navigator.language || navigator.systemLanguage || navigator.userLanguage,