Hexo github 搭建 blog

使用 Hexo githbub搭建 blog

github配置

1 注册githug 用户名 username
2 创建仓库仓库名 username.github.io
注册名和仓库名中 username 必须保持一致

本地环境搭建

1 install git

1	brew install git // 安装Git

2 install nodejs
3 install Hexo

1	sudo npm install hexo-cli -g

创建项目

1 创建项目

1 2	hexo init <folder> hexo init kylinhuang.github.io

2 主题

1 2	cd kylinhuang.github.io git clone https://github.com/iissnan/hexo-theme-next themes/next

修改 kylinhuang/_config.yml

title: dimsky 的 9 维空间    //你博客的名字
 author: dimsky  //你的名字
 language: zh-Hans    //语言 中文
 theme: next   //刚刚安装的主题名称
 deploy:
   type: git    //使用Git 发布
   repo: https://github.com/username/username.github.io.git    // 刚创建的Github仓库

3 写文章
在在username.github.io/source/_posts 下创建博客

编译

1 测试

hexo s

or
hexo clean && hexo g && hexo s

浏览器中输入https://localhost:4000 访问了

2 发布
安装hexo-deployer-git自动部署发布工具

1	npm install hexo-deployer-git --save

测试没问题后，我们就生成静态网页文件发布至我们的Github pages 中。

1	hexo clean && hexo g && hexo d

第一次需要输入github邮箱密码

5分钟后应该能访问了
http://kylinhuang.github.io

插件

npm install --save hexo-admin
hexo server -d

hexo s &  后台运行


http://localhost:4000/   - 预览页面
http://localhost:4000/admin  - 编辑页面

语法

https://hexo.io/zh-cn/docs/front-matter.html

hexo 添加流程图

hexo 添加时序图

hexo-filter-sequence 插件:

1	npm install --save hexo-filter-sequence

2.配置

站点配置文件 _config.yml 中增加如下配置:

sequence:
  webfont: https://cdn.bootcss.com/webfont/1.6.28/webfontloader.js
  raphael: https://cdn.bootcss.com/raphael/2.2.7/raphael.min.js
  underscore: https://cdn.bootcss.com/underscore.js/1.8.3/underscore-min.js
  sequence: https://cdn.bootcss.com/js-sequence-diagrams/1.0.6/sequence-diagram-min.js
  css: # optional, the url for css, such as hand drawn theme 
  options: 
    theme: simple
    css_class:

Hexo plugins

https://hexo.io/plugins/

1 HEXO-browsersync

适用于Hexo的BrowserSync插件

npm install hexo-browsersync --save

_config.yml 中 

browsersync:
  logLevel: "warn"
  ghostMode:
    scroll: true
  instanceName: "uniqueString"

2 Hexo博客文章影藏 hexo-generator-index2

在Hexo插件库找到一个产生首页的插件，自带过滤功能，hexo-generator-index2。

安装

1 2	npm install hexo-generator-index2 --save npm uninstall hexo-generator-index --save

修改hexo的配置文件

打开hexo博客根目录下的_config.yml
添加以下内容，过滤分类或者标签为hide的文章

# index2 generator是否包含官方的hexo-generator-index，默认true（包含）
index2_include_index: true
index2_generator:
per_page: 8
order_by: -date # 按发布时间排序
exclude:
- tag hide # 不包含标签为hide的文章
- category hide # 不包含分类为hide的文章