代码高亮

hugo提供了两种代码高亮处理方式

  • 方式一:server side

需要在hugo服务器端安装python,稍显麻烦,不过py所支持的代码种类和样式应该是最丰富的。对于强迫症患者尤其适用。

  • 方式二:client side

目前有好多用于浏览器渲染代码的js,比较有名的是highlight.js

一般可以在themeslayouts/head.html中添加:

1
2
3
  <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.7.0/styles/default.min.css">
  <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.7.0/highlight.min.js"></script>
  <script>hljs.initHighlightingOnLoad();</script>

然后重启hugo,ctrl+c,接着hugo server -w -D,随后使用浏览器访问http://localhost:1313,浏览器会自动去cdn下载相应的css、js,最后在本地渲染代码。

如果你对默认的样式不满意,highlight还提供了多种style可供选择,包括我所喜欢的monokai。你可以将上文代码中的default.min.css变更为monokai.min.css。然后在config.toml的[params]中设置highlight="monokai"

图床

我的博客将承载在github上,然而github免费账户仅支持100M,放不了几张图和视频。迫切需要一个第三方图床,七牛是一个很好的选择,免费账号支持10G容量和每月10G流量。

命令行

如何通过web方式使用七牛详见官网说明文档,本文仅探讨命令行方式。七牛提供了一个命令行:qshell,下载后根据OS解压相应的版本,我的操作系统是win7 64bit,所以选择了qshell_windows_amd64.exe,解压路径为d:\qshell,为了少敲几个字母,我将可执行文件更名为qshell.exe。最后将d:\qshell添加到windows的系统变量中。

本地图片存放位置

我的博客系统选用的是hugo,这是一个类似octopress、hexo的静态博客系统,博客的路径为d:\zlinuxboy-blog-hugo\,图片存放在d:\zlinuxboy-blog-hugo\themes\rapid\static\media中。

图片命名规则建议

图片的命名方式建议为:日期-图片名称.后缀。日期跟博文的文件名前缀一致,譬如本篇博文的文件名为2016-10-30-七牛图床.md,里面有张图片叫2016-10-30-七牛logo.jpg,这样是为了后续方便查找。

基本使用

  • 添加七牛账号的access key和secret key

    1
    
    $ qshell account <access key> <secret key>
  • 创建config.txt

     1
     2
     3
     4
     5
     6
     7
     8
     9
    10
    
    $ vim d:\qshell\config.txt
    -----------8<----------
    {
        "src_dir"       :   "E:\\zlinuxboy-blog-hugo\\themes\\rapid\\static\\media",
        "access_key"    :   "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
        "secret_key"    :   "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
        "bucket"        :   "zlinuxboy",
        "rescan_local"  :   true
    }
    ----------->8----------

    注意:一定要有rescan_local这个参数,否则后续新增的图片就无法上传。

  • 上传图片

    1
    
    $ qshell qupload config.txt
  • 获取bucket下文件列表

    1
    
    $ qshell listbucket <Bucket> [<Prefix>] <ListBucketResultFile>

    比如说,我想获得zlinuxboy这个bucket下全部文件的列表:

    1
    2
    3
    4
    5
    6
    7
    8
    
    $ qshell listbucket zlinuxboy allfile.txt
    $ vim allfile.txt
    2010-10-10-h3c_admin策略.jpg    83435   FkIHFDKN1Z_DwHzv1IWejPlplVes    14778201447947017       image/jpeg
    2010-10-10-sw_core属性.jpg      31825   FhRVw1luFNuKWl-7X5dhEAAeN1vy    14778201450383573       image/jpeg
    2010-10-10-编辑拨入配置文件.jpg 29772   FgibCxoLD-58L8Gi4S1gI987nB3O    14778201452312944       image/jpeg
    2010-10-10-配置VSA-cisco.jpg    16691   Fo_uspKuhKWji_IVLgWoe7ug_hnH    14778201453696672       image/jpeg
    2010-10-10-配置VSA.jpg  17925   FsrfWiyhBRRaagD2y8PDxsl_jeJr    14778201456208891       image/jpeg
    2014-03-29-wget进程.jpg 97678   FsF4nHpHGNRAhlrSUKFf-KdxXfWD    14778302556180796       image/jpeg

外链

前面说了那么多,都是为了得到最后的外链,以便贴入到博文中。在七牛的web管理页面下很容易获得图片的外链,但是每张图片都要登陆web,未免太繁琐,是否有可能直接通过qshell直接获得外链呢?答案是否定的,qshell并无相关参数,不过我们可以采用曲线救国的方式来实现。

实际上外链有一定的规则:

http://domain/key

  • domain,七牛提供两种域名:默认和自定义。自定义域名需要在中国备案,默认域名在七牛的web管理页面就可以获得,该域名是固定的,也就是说同一个bucket下的公共外链,其domain是一样的;
  • key,指的是文件名。

那就很简单了,知道了domain和文件名,就可以自行组合成外链了,譬如有个文件名为:2010-10-10-h3c_admin策略.jpg,domain为ofugtm1dt.bkt.clouddn.com,那么该文件的外链就是:http://ofugtm1dt.bkt.clouddn.com/2010-10-10-h3c_admin策略.jpg,需要注意的是,如果文件名是中文,那么通过web所获得的外链中的中文部分是乱码(经过转码?),但是手工组合的外链和web生成的外链是同一个东西,都能找到该图片。

静态博客的承载

几年前,github page是一个免费的静态博客聚集地。不过随着静态博客的流行,已经有越来越多的saas提供了host服务,最著名的是github的page,不过node.js的盛行,还涌现出了vercel、netlift、surge等一众优秀的saas厂家,它实现的是auto deploy服务,譬如说,saas可以安装hugo,然后关联github中的repository,当repository有更新时,vercel会自动调动hugo来对repository进行解析生成最终的静态博客,并承载在vercel的服务器上。vercel相对于github的一个最大的卖点是它在台湾有服务器,国内用户访问速度良好,优于netlify和github page。

github page

hugo的文件分为输入文件和输出文件两大类,其中输入文件是hugo new site时所创建的文件结构,包括:archetyps、config.{toml, yaml, json}、content、data、layouts、static、themes,输出文件指的是hugo运行时所生成的public这个文件夹。

传统的做法是租个虚拟主机,提供web server,并手工将public上传至该虚拟主机。这种方式未免过于陈旧。现在很多代码托管网站,譬如github、bitbucket、gitcafe(code)都提供了个人主页功能。该功能相当于一台虚拟主机。而且这些代码托管网站都提供免费的账号、空间和流量,用来承载静态blog是非常合适的。本blog就承载在github上。

前面提到hugo有两类文件,在github中需要创建一个项目仓库和一个个人主页仓库,分别用于承载输入文件和输出文件。

输入文件的仓库取名为zlinuxboy-blog-hugo,输出文件的仓库则有特定的格式:<account>.github.io,github还为每个个人主题一个专属三级域名:http://<account>.github.io

下面主要解释如何使用git命令完成本地仓库和远程仓库的关联和更新。

安装git-bash

下载git-bash,安装就是一路next。

创建本地仓库

为了方便起见,输入文件的本地仓库文件夹名称跟远程仓库名一致,均为zlinuxboy-blog-hugo

1
$ hugo new site zlinuxboy-blog-hugo

该命令相当于创建了一个zlinuxboy-blog-hugo的目录。

如何在本地跑hugo blog请参考blog迁移至hugo,hugo blog可以正常跑起来之后,目录结构如下:

1
2
3
4
5
6
7
|-- archetypes
|-- config.toml
|-- content
|-- data
|-- layouts
|-- static
`-- themes

NOTICE: 先别生成public目录。

最后,初始化本地仓库:

1
$ git init

创建远程仓库

需要在github的webUI中创建,名字跟本地仓库相同:zlinuxboy-blog-hugo

NOTICE: github的账号申请请查阅官方文档。

关联输入文件夹

在将本地的修改推送到github之前,需要将本地仓库和远程仓库进行关联。

1
$ git remote add origin git@github.com:zlinuxboy/zlinux-blog-hugo.git

关联输出文件夹

由于public文件夹位于本地仓库zlinuxboy-blog-hugo下,然而我们又希望将public关联到github的另外一个仓库zlinuxboy.github.io,所以需要将public作为子模块而存在。

1
$ git submodule add -b master git@github.com:<username>/<username>.github.io.git public

首次同步

由本地首次推送至远程。

1
2
3
4
5
$ cd /e/zlinuxboy-blog-hugo
$ git push -u origin master
$ cd public
$ git push -u origin master
$ cd ..

完整的更新流程

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
# 更新blog输入文件
$ cd /e/zlinuxboy-blog-hugo
$ git add -A
$ git commit -m "update blog"
$ git push origin master

# 更新blog输出文件
$ hugo
$ cd public
$ git add -A
$ git commit -m "rebuild site 2016.10.11 12:31"
$ git push origin master
$ cd ..

参考:http://nanshu.wang/post/2015-01-31/