使用Github+Hexo+七牛云实现个人博客搭建

用到的工具

Github 存放博客文件，相当于免费的个人空间吧。
Hexo 博客引擎，依赖Nodejs，运行在本地或者服务器都可以。他的作用就是把你用Markdown格式写的文章，生成html静态文件，并且能生成目录、支持主题样式
七牛云用来处理图片，提供图片处理功能，比如缩放、裁剪、加水印等。
七牛云Hexo插件能自动把图片同步到七年云上，省得手动上传。

Github

上去注册一个账号，username
创建一个仓库，名称设为：username.github.io，只有这样才能在根目录https://username.github.io 访问博客。如果设置成别的名称，访问地址就是 https://username.github.io/repository_name
这就行了

Hexo

安装 Hexo

安装Nodejs
安装 Hexo ，打开命令行，输入
$ npm install hexo-cli -g
初始化博客，命令行：
$ hexo init blog
$ cd blog
$ npm install
一个博客就成了，当然现在只是本地的。可以启动本地服务试试：
$ hexo server

然后访问 http://localhost:4000，默认端口是4000，如果已经占用了（福昕PDF阅读器有个服务会占用这个）,使用参数 -p 端口号 来更改。

$ hexo server -p 8888

Hexo就是这么简单，详细请参考官方文档: Hexo Docs

写新文章

在博客的根目录使用命令：

$ hexo new "文章标题"

Hexo会在 source/_posts 文件夹下生成一个文章标题.md 的文件，用文本编辑器编辑保存就可以了。
写好文章要重新生成才能看到效果，命令如下：

$ hexo clean
$ hexo generate

上传到Github

hexo支持多种一键部署方式，包括 git、ftp、sftp 等等，这里只说 git。
在博客根目录下有个文件 _config.yml ，这是 Hexo的配置文件。
打开这个文件，找到 deploy，把github的仓库地址配置好。

deploy:
type: git
repo: https://github.com/xxxxxx.git
branch: master

安装 git deploy 插件：

$ npm install hexo-deployer-git --save

以后写了新文章需要发布，在博客根目录下使用 deploy 命令就可以了

$ hexo deploy

七牛云

注册，
创建对象存储空间，名称随便起，记住一会要用，得到一个测试域名：xxxx.bkt.clouddn.com。现在创建对象存储空间要求账户有10块钱，充值进去并不会扣
在个人中心——密钥管理，里找到 AcessKey 和 SecretKey
安装七牛云Hexo插件，在根目录使用命令：
$ npm install hexo-qiniu-sync --save

在 _config.yml 中加入配置

#七牛云存储设置
##offline       是否离线. 离线状态将使用本地地址渲染
##sync          是否同步
##bucket        空间名称.
##access_key    上传密钥AccessKey
##secret_key    上传密钥SecretKey
##secret_file   秘钥文件路径，可以将access_key secret_key 两个属性配置到文件内，防止泄露，json格式。绝对路径相对路径均可。不使用文件形式配置的话留空
##dirPrefix     上传的资源子目录前缀.如设置，需与urlPrefix同步 
##urlPrefix     外链前缀.
##up_host      上传服务器路径,一般为 http://upload.qiniu.com，华北区域为 http://up-z1.qiniu.com
##local_dir     本地目录.
##update_exist  是否更新已经上传过的文件(仅文件大小不同或在上次上传后进行更新的才会重新上传)
##image/js/css  子参数folder为不同静态资源种类的目录名称，一般不需要改动
##image.extend  这是个特殊参数，用于生成缩略图或加水印等操作。具体请参考http://developer.qiniu.com/docs/v6/api/reference/fop/image/ 
##              可使用基本图片处理、高级图片处理、图片水印处理这3个接口。例如 ?imageView2/2/w/500 即生成宽度最多500px的缩略图
qiniu:
  offline: false
  sync: true
  bucket: bucket_name
  secret_file: sec/qn.json or C:
  access_key: AccessKey
  secret_key: SecretKey
  dirPrefix: static
  urlPrefix: http://bucket_name.qiniudn.com/static
  up_host: http://upload.qiniu.com
  local_dir: static
  update_exist: true
  image: 
    folder: images
    extend: 
  js:
    folder: js
  css:
    folder: css

插件装好，配置好之后，要在根目录执行一次命令：
$ hexo server

插件会在根目录生成一个 static 文件夹，把图片拷贝到 static/images 下，下次运行 hexo qiniu sync 或者 hexo server 命令时，插件会自动上传图片

在文章里引用图片时使用如下标记

{% qnimg imageFile attr1:value1 attr2:value2 'attr3:value31 value32 value3n' [extend:?imageView2/2/w/600 | normal:yes] %}

例：

{% qnimg test/demo.png title:图片标题 alt:图片说明 'class:class1 class2' extend:?imageView2/2/w/600 %}

翻译成HTML就是：

<img title="图片标题" alt="图片说明" class="class1 class2" src="http://xxxx.u.qiniudn.com/images/test/demo.png?imageView2/2/w/600">

测试：
图片说明

用到的工具
Github
Hexo
七牛云