Bloger

一个帮助你在眨眼之间构建博客的工具。

Who use?

• isweety.me
• litiantian1202.github.io

如何使用

npm i bloger -g

Cli

Usage: bloger [options]

Options:

  -V, --version    output the version number
  init [blogName]  init blog project
  new [blog]       Create a new blog
  build            Build blog
  dev              Writing blog, watch mode.
  iconfonts        Generate iconfonts.
  -h, --help       output usage information

初始化博客项目

bloger init <projectName>

这个命令会在你当前所在的目录创建一个名为<projectName>的文件夹，这个文件夹就是一个全新的博客项目。

新建一篇博客

# 注意：使用这个命令需要在博客项目的根目录
bloger new <blogName>

这个命令会在_posts目录的当前年份的文件夹中创建一个名为blogName的markdown文件，这个文件就是要书写的博客的源文件。

生成博客网站

# 注意：使用这个命令需要在博客项目的根目录
bloger build

或者

npm run build

这个命令会编译出网站的博客网站。

本地查看博客网站

npm start

打开localhost:5000即可

监听模式

# 注意：使用这个命令需要在博客项目的根目录
bloger dev

或者

npm run dev

这个命令会监听_posts中markdown文件的改动和static中less文件的改动，并且自动编译。

编译iconfonts

# 注意：使用这个命令需要在博客项目的根目录
bloger iconfonts

这个命令会把static/iconfonts/svgs中的svg图片打包为iconfonts到static/iconfonts/icons下。

使用的时候只需要引用/static/iconfonts/icons/icons.css即可。

用法：

<i class="icon icon-name"></i>

配置博客

在生成的博客根目录有一个my.json文件，在这个文件中配置网站的一些基本属性。

{
  // XXX' Blog
  "name": "XXX",
  "homepage": "localhost:5000",
  "intro": "这里是简介",
  // 首页图标和跳转地址
  "links": [{
    "name": "github",
    "link": "/"
  }, {
    "name": "zhihu",
    "link": "/"
  }, {
    "name": "twitter",
    "link": "/"
  }, {
    "name": "email",
    "link": "/"
  }],
  // 菜单列表
  "menus": [{
    "name": "博客",
    "link": "/"
  }],
  // 关注我列表
  "followMe": [{
    "name": "Github",
    "link": "https://github.com"
  }],
  "disqus": false
}

博客markdown文件中的配置

在每个博客的markdown文件的头部，都需要包含一个定义该篇博客详细信息的一个metadata(使用bloger new <blogName>生成的博客会自动生成一个模版)，格式如下：

title: 博客的标题
date: 2018-08-14
author: 作者名字
tag: 标签，分类
intro: 简述一下这篇博客
type: 原创 | 转载 | 翻译
top: true (是否置顶)

开启disqus评论

在my.json中，修改disqus字段，填上你申请到得disqus的src文件地址，比如:

{
  "disqus": {
    "src": "https://xxx.disqus.com/embed.js"
  }
}

disqus字段为false表示不开启disqus评论系统。

增加自定义页面

Bloger支持添加自定义页面，比如你想添加一个关于我的页面，同时给这个页面一个独立的路由，那么你只需要在项目下新建一个模版文件。

比如你新建一个templates/about-me.ejs文件，同时在build.json中配置所要生成的页面，配置如下：

{
  "pages": [{
    "name": "关于我",
    "path": "about-me",
    "template": "templates/opensource.ejs",
    "entry": "about-me.md"
  }]
}

以上配置表示以templates/opensource.ejs为模版，生成一个页面，路由为/about-me.

如果指定entry，需要在about-me文件加中新建一个about-me.md文件，会自动将about-me.md编译高亮，并且插入到模版指定位置。

about-me.ejs模版可包含如下字段（会在编译时自动替换）。

• <%- htmlMenu %> - 通用的菜单
• <%- pureHtml %> - markdown编译后的html
• <%= name %> - my.json中配置的Username

这个页面的样式怎么写？

在/static文件下创建一个less文件夹，在less文件夹下创建一个less文件，bloger build或者bloger dev的时候会把这个less文件编译成css(经过autoprefixer和minify处理)到/static/css目录下。

Gh-pages

Github的gh-pages可以为我们免费托管静态网站，如何将Bloger生成的博客发布到gh-pages托管呢？

1. 执行bloger init xxx 之后会生成一个项目文件夹
2. 进入这个文件夹之后执行 git init，新建一个git仓库
3. 如果你的github仓库有你的同名仓库（比如你的用户名是jay, 那么你的同名仓库就是 jay.github.io），使用git remote add origin [email protected]:jay/jay.github.io.git将远程地址添加到本地。
4. 将博客推送到github. git commit -am 'init' && git push

通过以上的步骤，你的博客就已经被托管到gh-pages了，访问jay.github.io即可看到。

FAQ

Issues and Pull Request Welcome!

LICENSE

MIT © PengJiyuan