标签 Blog 下的文章

给女儿搭建一个博客站点

时光荏苒。转眼间女儿已经成为一名小学生了,依稀还记得当年果果呱呱坠地的情景,独自回味,感慨万千。

果果3岁前,都是我来记录她的生活点滴和成长历程,那个时候她是我们生活舞台的主角。3岁后,果果学会了说话,上了幼儿园,开始学习各种知识、技能以及各种才艺。尤其是在幼儿园中班之后,她学会了写字、组词、造句和写日记,果果完全可以自己用文字来表达自己了! 我觉得是时候让她自己来记录她的成长历程了,我和她妈妈只是辅助和指导就好了。这种想法日益迫切,尤其是果果今年上了小学后,果果的成长更快了。我觉得迫切需要给她一个平台去表达她自己和记录她的成长。传统手段不能满足需求,于是我就想到给她搭建了一个博客站点,辅助她用网络文字、图片的形式记录自6岁上学之后的成长历程。于是这个周末就花了些时间,给女儿搭了一个博客站点。

下面以“流水账”的形式,记录一下这个站点的搭建过程,也许能给和我有同样需求的家长们带来一些帮助^_^。

一、选型和准备工作

博客站点,我首选静态页面的。静态页面,又要快速搭建,我首选github page。github page一般情况下在国内访问相对较为稳定,访问速度也不错,ping延迟一般在100多ms,比我独立购买的Digital Ocean的主机的延迟低很多。还有另外一个原因就是市面上几乎所有主流静态页面生成工具都对github pages有着不错的支持。由于采用静态页面,即便将来迁移到VPS,也几乎是无缝的。于是给果果在github上申请了账号

用与搭建博客、个人站点的静态页面生成工具很多,比如:jekylloctopresshexo以及hugo,用哪个呢?作为Gopher,我首选hugo。接下来,我们来看看用hugo是否能搭建出满足我们需求的基于github page的博客站点吧。

hugo的安装参考hugo github主页上的说明即可。由于hugo import了很多第三方package,有些package可能在墙外,因此配置上加速器是更好的、更快的^_^。

二、基于hugo搭建博客站点

去年曾写过一篇《使用Hugo搭建静态站点(http://tonybai.com/2015/09/23/intro-of-gohugo/)》,讲述如何通过hugo这个golang开发的工具搭建一个属于自己的静态站点(static websites)。不过那篇文章并没有谈到hugo如何与github page结合。

hugo官方文档中,对如何使用hugo创建基于github page站点有着较为详尽的描述,这是由一位名为Spencer Lyon的外国开发者贡献的文章,并且Spencer Lyon给出hugo github page的工程template: hugo-gh-blog。我这里就直接使用了该工程模板,并基于hugo_gh_blog做一些定制化修改,比如“汉化”之类的。

下面是详细的步骤:

1、clone hugo_gh_blog

我们首先将Spencer Lyon的hugo_gh_blog代码库clone到本地,这是我们博客搭建的基础:

$mkdir GuoGuoBlog
$cd GuoGuoBlog
$git clone https://github.com/spencerlyon2/hugo_gh_blog.git
Cloning into 'hugo_gh_blog'...
remote: Counting objects: 489, done.
remote: Total 489 (delta 0), reused 0 (delta 0), pack-reused 489
Receiving objects: 100% (489/489), 84.50 KiB | 24.00 KiB/s, done.
Resolving deltas: 100% (232/232), done.
Checking connectivity... done.
$cd hugo_gh_blog/
$ls
LICENSE        README.md    config.yaml    content/    deploy.sh*    static/        themes/

2、编辑config.yaml和本地调试

进入hugo_gh_blog目录,编辑config.yaml,设置站点的一些元数据:

---
contentdir: "content"
layoutdir: "layouts"
publishdir: "public"
indexes:
  category: "categories"
baseurl: "http://baisibei.github.io"
title: "果果的成长历程"
canonifyurls: true
theme: "Lanyon"
...

接下来,我们来生成我们的静态博客页面:

$hugo
0 draft content
0 future content
2 pages created
0 paginator pages created
2 categories created
in 48 ms

hugo将创建public目录,并将生成的页面放入该目录:

$ls public
404.html    categories/    css/        favicon.ico    img/        index.html    index.xml    posts/        sitemap.xml

public/index.html就是站点首页。

我们在本地可以启动hugo server,并查看生成的站点情况:

$hugo server -t Lanyon
0 draft content
0 future content
2 pages created
0 paginator pages created
2 categories created
in 54 ms
Serving pages from /Users/tony/GuoGuoBlog/hugo_gh_blog/public
Web Server is available at http://localhost:1313/ (bind address 127.0.0.1)

打开浏览器,输入localhost:1313。不出意外,你就可以看到类似下面的站点:

img{512x368}

3、创建github page repository

默认情况,github账号xxxx对应的github page repository是xxxx.github.io。于是我在女儿的github账号下创建public repository:baisibei.github.io。

接下来,我们需要将上步中生成的静态页面push到baisibei.github.io这个repository中。在本地进入到hugo_gh_blog/public目录下,执行:

$git init
$git add -A
$git commit -m"initial commit" .
$git remote add origin https//github.com/baisibei.github.io.git
$git push -u origin master

如果你是用自己的github账号替孩子提交,那么请在该repository下设置collaborator。

push一旦成功后,你就可以直接访问:https://xxxx.github.io查看站点页面了。我这里要访问的是baisibei.github.io。

4、样式问题

问题出现了。在本地样式良好的首页,一旦push到github page上,再用浏览器(chrome)打开,我发现样式全部丢失了,首页被render为“全文字”版本。我一开始怀疑css文件路径不对或无法访问到某个css文件,通过“显示网页源代码”,单独试着访问所有css文件,发现这些文件都是可访问的。还有一个现象是:通过mac safari浏览器、手机上的ucweb、微信内置浏览器浏览,均没有样式问题,显示一切正常(Firefox、IE也均有问题)。将hugo_gh_blog放在我的VPS上,并用hugo作为web server,任何浏览器访问都是没有问题的。

针对这个问题,谷歌和度娘了半天,也没有解决掉。于是我有了换工具的想法。在搜索其他工具资料的过程中,我发现了基于hexo的maupassant theme!没错,就是那个和我目前博客同源的主题:maupassant。这个主题采用响应式的设计,对不同屏幕的访问均有很好的适配。

之前我的博客为了适应智能终端的浏览,采用了WPtouch插件,效果差强人意。这次我特地停用了该插件,直接用手机访问我的博客,发现maupassant的显示效果是棒棒的。于是下一步,我将hugo更换为hexo,主题由Lanyon更换为maupassant。

hugo_gh_blog和baisibei.github.io依然保留在github.com上,后者的名字被rename为baisibei.github.io.using.hugo。

三、基于hexo搭建博客站点

1、安装hexo相关工具

第一次用hexo,安装hexo过程需要一些耐心:

$npm install hexo-cli -g
{耐心的等待... ...}

$which hexo
/usr/local/bin/hexo

$hexo -v
hexo-cli: 1.0.2
os: Darwin 13.1.0 darwin x64
http_parser: 2.7.0
node: 6.9.1
v8: 5.1.281.84
uv: 1.9.1
zlib: 1.2.8
ares: 1.10.1-DEV
icu: 57.1
modules: 48
openssl: 1.0.2j

2、创建blog

使用hexo init在本地创建blog repository目录:

$hexo init hexo_gh_blog
{耐心等待...}
... ...
INFO  Start blogging with Hexo!

进入hexo_gh_blog目录:

$cd hexo_gh_blog
$ls
_config.yml    node_modules/    package.json    scaffolds/    source/        themes/

没完,我们还需要install一下相关的依赖:

$npm install
{耐心等待....}

通过”hexo g”命令生成blog文件:

$hexo g
INFO  Start processing
INFO  Files loaded in 270 ms
INFO  Generated: index.html
INFO  Generated: archives/index.html
INFO  Generated: fancybox/blank.gif
INFO  Generated: fancybox/jquery.fancybox.css
INFO  Generated: fancybox/fancybox_sprite.png
INFO  Generated: fancybox/fancybox_loading.gif
INFO  Generated: fancybox/fancybox_overlay.png
INFO  Generated: fancybox/fancybox_loading@2x.gif
INFO  Generated: fancybox/jquery.fancybox.pack.js
INFO  Generated: fancybox/jquery.fancybox.js
INFO  Generated: fancybox/fancybox_sprite@2x.png
INFO  Generated: archives/2016/12/index.html
INFO  Generated: css/fonts/fontawesome-webfont.eot
INFO  Generated: css/fonts/fontawesome-webfont.svg
INFO  Generated: css/style.css
INFO  Generated: css/fonts/fontawesome-webfont.ttf
INFO  Generated: fancybox/helpers/fancybox_buttons.png
INFO  Generated: css/fonts/FontAwesome.otf
INFO  Generated: js/script.js
INFO  Generated: fancybox/helpers/jquery.fancybox-buttons.css
INFO  Generated: archives/2016/index.html
INFO  Generated: css/fonts/fontawesome-webfont.woff
INFO  Generated: fancybox/helpers/jquery.fancybox-media.js
INFO  Generated: fancybox/helpers/jquery.fancybox-buttons.js
INFO  Generated: fancybox/helpers/jquery.fancybox-thumbs.css
INFO  Generated: fancybox/helpers/jquery.fancybox-thumbs.js
INFO  Generated: css/images/banner.jpg
INFO  Generated: 2016/12/16/hello-world/index.html
INFO  28 files generated in 867 ms

$ls
_config.yml    db.json        node_modules/    package.json    public/        scaffolds/    source/        themes/

和hugo命令类似,hexo g也创建了public目录,并将站点的静态文件生成在这个目录下面。

通过hexo s可以启动一个web server,在本地查看生成的静态站点:

$hexo s
INFO  Start processing
INFO  Hexo is running at http://localhost:4000/. Press Ctrl+C to st

hexo自带的landscape theme真的是不咋好看。

3、更换主题为maupassant

先清理一下生成文件,再clone maupassant主题:

$hexo clean
INFO  Deleted database.
INFO  Deleted public folder.

$git clone https://github.com/tufu9441/maupassant-hexo themes/maupassant
Cloning into 'themes/maupassant'...
remote: Counting objects: 1310, done.
remote: Total 1310 (delta 0), reused 0 (delta 0), pack-reused 1309
Receiving objects: 100% (1310/1310), 562.88 KiB | 382.00 KiB/s, done.
Resolving deltas: 100% (747/747), done.
Checking connectivity... done.

$ls themes/
landscape/    maupassant/

编辑hexo_gh_blog/_config.yml文件,修改theme为:maupassant

//_config.xml
theme: landscape

=>

theme: maupassant

重新生成站点静态文件之前,我们还需要安装下面两个工具,否则hexo生成出来的静态页面也是不可用的:

$ npm install hexo-renderer-jade --save
$ npm install hexo-renderer-sass --save

hexo g和hexo s后,你就可以在本地:localhost:4000地址上看到生成的静态页面了:

img{512x368}

仿效上面章节中的步骤,将public目录push到baisibei.github.io repository中,看看我们上传后的站点通过公网访问是否还有“失真”现象,结果:一切正常。

4、定制站点

a) 定制hexo_gh_blog/_config.yml

这个_config.xml中的配置都是站点全局范畴的,这里仅我将我修改过的一些定制属性贴出来:

# Site
title: Amy Bai
subtitle: 果果的成长历程
description: 记录一个小女孩儿在学习、生活、家庭、情感方面的成长经历
author: Amy Bai
language: zh-CN
timezone: Asia/Shanghai
since: 2016
avatar: https://avatars0.githubusercontent.com/u/24524343?v=3&s=400

# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: http://daughter.tonybai.com

默认情况下,maupassant主题的menu中包含rss菜单项(站点的订阅feed),对应的访问路径是/atom.xml,但要生成atom.xml,需要安装另外两个plugins:hexo-generator-feed和hexo-generator-sitemap:

在_config.xml中添加:

plugins:
- hexo-generator-feed
- hexo-generator-sitemap

安装这两个插件;

$npm install hexo-generator-feed --save
hexo-site@0.0.0 /Users/tony/GuoGuoblog/hexo_gh_blog
└── hexo-generator-feed@1.2.0

$npm install hexo-generator-sitemap --save
hexo-site@0.0.0 /Users/tony/GuoGuoblog/hexo_gh_blog
└── hexo-generator-sitemap@1.1.2

安装后,执行hexo g,会看到atom.xml的生成。不过由于hexo版本似乎与feed插件有兼容性问题,当执行hexo s时,命令报错。我暂时在_config.xml中先注释掉这两个插件,待后期看是否能解决,不过这不影响站点的主要功能。

b) about页面

在maupassant主题的menu中默认还包含了about菜单项,但在生成的站点静态页面中点击about菜单项,将返回失败页面。如何给站点添加about页面呢?

在hexo_gh_blog/source下创建about目录,进入about目录,创建index.md文件,内容诸如:

---
title: 关于我
---
我是Amy Bai,小名果果。

这样hexo g和hexo s后,你就有about页面可供访问了。

5、写post

hexo通过hexo new 命令来创建一篇post,我更喜欢简单粗暴,直接再hexo_gh_blog/source/_post创建一个xxx.md文件,这就是一篇post。post内的markdown格式和很多工具都是类似的:

以initial-post.md为例:
---
title: "第一篇(待写)"
date: "2016-12-15"
description: "第一篇博文,敬请期待^O^"
categories:
    - "日记"
    - "感悟"
---

## 标题一

第一篇文章,敬请期待

### 子标题

## 小结

^O^

hexo按md文件头中的date对post进行排序。title就是显示在文章中的标题。description是文章摘要。默认情况下,maupassant主题在首页只是展示文章摘要而不是全文。

四、域名绑定

还没有申请顶级域名下的二级域名,目前打算绑定daughter.tonybai.com这个子域名。怎么做呢?

在public目录下,创建CNAME文件,文件内容:daughter.tonybai.com。然后将文件Push到github上去。

在你的域名管理站点,创建”daughter.tonybai.com”子域名,并将其CNAME值设置为”baisibei.github.io”。生效后,打开浏览器,访问”daughter.tonybai.com”,你就可以看到你刚刚生成的新站点了。

五、小结

站点搭建好了!用各种终端访问,感觉效果还不错。post发布也很方便,如果你想自动发布,定义一下hexo deploy即可。我个人习惯手动提交,也就没这个步骤了。

接下来,把内容创作的任务就交给果果了^_^。

使用Hugo搭建静态站点

虽然前一篇Blog宣称自己要用Markdown开始写Post,但实际操作起来还是发现了诸多不兼容问题(插件与主题间、插件与插件间的),让编写和修改文章变得十分繁琐,于是我研究了一下静态Web站点生成工具Hugo。Hugo是由前Docker的重量级员工(2015年8月末从Docker离职):Steve Francia实现的一个开源静态站点生成工具框架,类似于JekyllOctopressHexo,都是将特定格式(最常见的是Markdown格式)的文本文件转换为静态html文件而生成一个静态站点,多用于个人Blog站点、项目文档(Docker的官方manual Site就是用Hugo生成的)、初创公司站点等。这类工具越来越多的受到程序员等颇具“极客”精神的群体的欢迎,结合github.com等版本控制服务,采用具有简单语法格式但强大表达力的Markdown标记语言,人们可以在很短时间内就构建出一个符合自己需求的静态Web站点。在这些工具中,Hugo算是后起之秀了,它最大的优点就是Fast! 一个中等规模的站点在几分之一秒内就可以生成出来。其次是良好的跨平台特性、配置简单、使用方便等。这一切均源于其良好的基因:采用Go语言实现。Steve Francia除了Hugo平台自身外,还维护了一个Hugo Theme的Repo,这个Hugo主题库可以帮助Hugo使用者快速找到自己心仪的主题并快速搭建起静态站点。目前国内使用Hugo的人还不多,但感觉其趋势是在逐渐增多。这里写下这篇Post,也算是为大家入个门,引个路吧。

一、安装Hugo

Hugo托管在github.com上,因此获取Hugo很方面,目前有至少两种方法可以安装Hugo。

1、安装包

对于普通用户(无git、无开发经验)而言,直接下载安装包是最简单的方式。我们可以下载Hugo的Release版,截至目前为止最新版本是v0.14,可以在这里下载你的平台(支持linux, windows, darwin, netbsd, freebsd和arm等)对应的版本。不过我发现0.14版本似乎有Bug,在我的MacOsX上生成Hugo Docs站点总是panic。

2、源码编译

对于开发者而言,源码编译是最Geek的方式:

go get -u -v github.com/spf13/hugo
go build -o hugo main.go
mv hugo $GOPATH/bin

在命令行下执行hugo命令,如果得到类似下面结果,则说明你已经成功安装了Hugo:

$hugo version
Hugo Static Site Generator v0.15-DEV BuildDate: 2015-09-20T23:53:39+08:00

二、生成静态站点

1、创建静态站点

我们来创建一个名为”tonybai.com”的静态站点:

$hugo new site tonybai.com
$tree
.
└── tonybai.com
    ├── archetypes
    ├── config.toml
    ├── content
    ├── data
    ├── layouts
    └── static

我们看到,通过hugo new site命令,我们建立了tonybai.com站点的后台目录结构。但细心的你会发现:这里的目录都是空的。除了config.toml中可怜的三行内容:

baseurl = "http://replace-this-with-your-hugo-site.com/"
languageCode = "en-us"
title = "My New Hugo Site"

不过即便目录为空,这也是一个完整的静态站点源文件,我们可以基于这些文件生成我们的站点。

$cd tonybai.com
$hugo server

0 draft content
0 future content
0 pages created
0 paginator pages created
0 tags created
0 categories created
in 6 ms
Serving pages from /Users/tony/test/hugotest/tonybai.com/public
Web Server is available at http://localhost:1313/ (bind address 127.0.0.1)
Press Ctrl+C to stop

上面的hugo命令在将repo转换为静态Site文件放入public目录:

├── public
│   ├── 404.html
│   ├── index.html
│   ├── index.xml
│   └── sitemap.xml

之后Hugo启动了一个server作为该Site的Web Server。通过浏览器访问http://localhost:1313,你将看到一个完全空白的站点首页。虽然这个站点没啥实用价值(一片空白),但这却是一个良好的起点。

2、添加Theme

添加了Theme后的站点才有血有肉,丰富多彩。

添加Theme的步骤如下,我们以Hyde Theme为例:

首先创建themes目录,并下载Hyde Theme文件:

$ mkdir themes
$ cd themes
$ git clone https://github.com/spf13/hyde.git

接下来,我们需要对Site进行一些配置,tonybai.com/config.toml是Site的顶层配置文件,配置后的config.toml文件如下:

baseurl = "http://tonybai.com/"
languageCode = "en-us"
title = "Tony Bai"
theme = "hyde"

[params]
    description = "这里是Tony Bai的个人博客"
    themeColor = "theme-base-08" # for hyde theme

其中:
theme = “hyde” 指定站点使用Hyde主题;
themeColor = “theme-base-08″ 指定了站点的主题颜色(默认是黑色的,这里改成一种红色)

在tonybai.com目录下重新执行hugo server,并打开浏览器查看站点首页,你会发现视野里有内容了:

站点截图1

3、第一个Post

结构和样式有了,我们还没有内容。我们来创建站点的第一个Post:

$hugo new welcome.md
/Users/tony/Test/hugotest/tonybai.com/content/welcome.md created

hugo在content下创建welcome.md文件,我们编写一些文件内容:

+++
Categories = ["Development", "GoLang"]
Description = ""
Tags = ["Development", "golang"]
date = "2015-09-23T16:30:37+08:00"
menu = "main"
title = "你好,Hugo"

+++

这是使用Hugo创建的站点中的第一篇文章。

保存后,重新执行hugo server命令,打开浏览器,你将看到下面的情形:

站点截图2

至此,如果你是极简主义者,你对其他没有任何要求,你就可以用这个站点写Post了。

三、调试与部署站点

1、调试站点

采用Hugo的静态站点在编辑文章、调试站点时十分方便,你要做的就是编辑文本,保存后,打开浏览器看渲染后的结果。不过反复执行hugo server命令还是有些烦,hugo早想到了这一点,hugo提供了:
-w, --watch[=false]

执行hugo server命令时加上-w选项,hugo就可以自动检测本地站点文件的变更,并自动执行md -> html转换。这样刷新浏览器页面就可以看到你修改后的结果了:

$hugo server -w
0 draft content
0 future content
1 pages created
0 paginator pages created
2 tags created
2 categories created
in 16 ms
Watching for changes in /Users/tony/test/hugotest/tonybai.com/{data,content,layouts,static,themes/hyde}
Serving pages from /Users/tony/test/hugotest/tonybai.com/public
Web Server is available at http://localhost:1313/ (bind address 127.0.0.1)
Press Ctrl+C to stop

通过hugo server -w的输出日志来看,hugo可以自动检测data,content,layouts,static,themes/hyde目录下的变更,但站点顶层config.toml的改动无法被检测,还需要重启hugo server。

2、部署站点

和Jekyll类似,使用hugo的静态站点可以部署到github page中,不过这里不详细描述这种方法,可以看官方文档

如果是在vps下部署,那么hugo转换后的public文件夹可以被直接用于部署到像nginx、apache、caddy这样的Web Server下面。

当然hugo本身也可以作为一个Web server来支撑你的静态站点,就像上面提到的,你可以在你的站点目录(比如上面的”tonybai.com”)下执行:

$sudo hugo server --bind="0.0.0.0" -v -w -p 80 -b http://tonybai.com

如果无法使用80端口(比如通过apache2反向代理),那么需要加上–appendPort=false,否则转换后的public下面的url地址都会带上你的hugo端口(1313):

$hugo server -v -w -p 1313 -b http://tonybai.com --appendPort=false

四、配置和维护站点

大多数人不会止步于上面那个仅仅能写Post的站点,配置分类、标签;修改字体样式;添加评论功能;增加统计代码;增加代码高亮(程序员最爱);甚至定制主题是Geek们最喜欢折腾的事情,这里无法全表,列举几个常见的配置和维护方法,还是已hyde主题为例。

1、配置分类、标签

在浏览器中输入:http://localhost:1313/categories/或http://localhost:1313/tags,你会看到站点输出了一个类似目录列表似的页面:

development/
golang/

development和golang从何而来呢?

隐藏得再深,也要给它揪出来:

tonybai.com/themes/hyde/archetypes/default.md

+++
Description = ""
Tags = ["Development", "golang"]
Categories = ["Development", "GoLang"]
menu = "main"
+++

由于我们使用了hyde theme,所以我们只需看themes/hyde下面的目录结构即可,tonybai.com下面的除content之外的其他layout, data等可忽略不计。在hyde/archetypes下存放着这个主题下文章的默认分类和tags集合。这个default的作用是每次new post后,hugo会将default中的tags和categories自动copy到Post头中的tags和categories中。

每个Post的分类和tag在post自身的.md文件头中指定,见Categories和Tags两个配置项:

tonybai.com/content/welcome.md

+++
Categories = ["Development", "GoLang"]
Description = ""
Tags = ["Development", "golang"]
date = "2015-09-23T16:30:37+08:00"
menu = "main"
title = "你好,Hugo"

+++

你可以根据需要在你的post md文件中灵活增删你的tags和categories,不局限于default.md中的那些已知项。

2、修改字体样式

hyde主题的字体样式在tonybai.com/themes/hyde/layouts/partials/head.html中指定:

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=PT+Sans:400,400italic,700|Abril+Fatface">

由于googleapis在国内无法访问,因此要么注释掉这行(使用浏览器默认字体样式),要么将其换为其他字体公共服务,比如:

<link rel="stylesheet" href="http://fonts.useso.com/css?family=PT+Sans:400,400italic,700|Abril+Fatface">

字体的设置在tonybai.com/themes/hyde/static/css下的各个css文件中,谨慎调整。

3、添加评论功能

Hugo没有内置评论功能,要增加评论功能需要集成第三方评论服务,比如国外最流行的Disqus。hyde主题内置了disqus评论插件,不过需要你按如下操作配置一下,否则页面下方的disqus插件总是显示无法连接。

获取disqusShortname

这里用disqus主账号不行,需要用主账号login后:add a newsite to disqus,比如加入tonybaicom.disqus.com,这样你的disqusShortname就为:tonybaicom;

配置disqusShortname

在tonybai.com/config.toml中配置disqusShortname:

[params]
    disqusShortname = "tonybaicom"

如果你要使用国内的评论服务,比如:多说,你可以参考tonybai.com/themes/hyde/layouts/partials/disqus.html,用多说提供的install code替换disqus的code,形成duoshuo.html:

<!-- 多说评论框 start -->
<div class="ds-thread" data-thread-key="{{ .URL }}" data-title="{{ .Title }}" data-url="{{ .Permalink }}"></div>
<!-- 多说评论框 end -->

<!-- 多说公共JS代码 start (一个网页只需插入一次) -->
<script type="text/javascript">
    var duoshuoQuery = {short_name:"{{.Site.Params.duoshuoShortname}}"};

    (function() {
     var ds = document.createElement('script');
     ds.type = 'text/javascript';ds.async = true;
     ds.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') + '//static.duoshuo.com/embed.js';
     ds.charset = 'UTF-8';
     (document.getElementsByTagName('head')[0]
      || document.getElementsByTagName('body')[0]).appendChild(ds);
     })();
    </script>
<!-- 多说公共JS代码 end -->

再在tonybai.com/themes/hyde/layouts/_default/single.html中替换下面的代码:

{{ if and (isset .Site.Params "disqusShortname") (ne .Site.Params.disqusShortname "") }}
                <h2>Comments</h2>
                {{ partial "disqus" . }}
            {{ end }}

为类似下面的代码:

{{ if and (isset .Site.Params "duoshuoShortname") (ne .Site.Params.duoshuoShortname"") }}
                <h2>Comments</h2>
                {{ partial "duoshuo" . }}
            {{ end }}

注意:一旦用上面多说代码,config.toml中就需要配置duoshuoShortname了:

[params]
    duoshuoShortname = "tonybaicom"

4、代码高亮

Hugo官方说明中采用Pygments来进行代码高亮的支持,在部署机上安装Pygments,个人觉得这个方法不好。于是换另一外一种js代码法,即采用highlightjs的方法支持代码高亮。

highlightjs同样很强大,支持135种语言(关键是支持Golang)和60多种样式(有我喜爱的github样式和monokai_sublime样式),但不支持linenumber。

我们首先将highlightjs下载到本地:

tonybai.com/themes/hyde/static/css/highlight.js/8.8.0/styles/github.min.css
tonybai.com/themes/hyde/static/js/highlight.js/8.8.0/highlight.min.js

然后在tonybai.com/themes/hyde/layouts/partials/head.html添加如下代码:

    <!-- Highlight.js and css -->
    <script src="{{ .Site.BaseURL }}js/highlight.js/8.8.0/highlight.min.js"></script>
    <link rel="stylesheet" href="{{ .Site.BaseURL }}css/highlight.js/8.8.0/styles/github.min.css">
    <script>hljs.initHighlightingOnLoad();</script>

highlightjs会自动检测语言类型,并使用github样式。

5、统计代码

提供统计服务的站点,比如statcounter.com一般都会提供安装代码(js)的,将那段代码copy到tonybai.com/themes/hyde/layouts/partials/head.html中即可。

四、进阶

1、index.html、single.html和list.html

站点的首页模板在themes/hyde/layouts/index.html中。除首页外,其他Post或叫Page,都被Hugo抽象为两类:单体页面和列表页面,对应这两种页面的默认模板都在themes/hyde/layouts/_default中,分别对应着single.html和list.html。

我们之前通过hugo new welcome.md创建的Post使用的是single.html模板,而查看tags或categories的页面默认采用的是list.html,比如查看tonybai.com/categories/golang,你会在浏览器中看到分类在golang这一类的所有Post列表。

2、type和section

我们执行如下两个命令:

$hugo new post/firstpost.md
tonybai.com/content/post/firstpost.md created
$hugo new post/secondpost.md
tonybai.com/content/post/secondpost.md created

创建后我们可以看到站点的源文件结构变成了:

... ...
├── archetypes
├── config.toml
├── content
│   ├── post
│   │   ├── firstpost.md
│   │   └── secondpost.md
│   └── welcome.md
... ...

hugo中源码文件的布局影响着最终生成的html文件的结构布局。有些时候我们的站点可能会分成若干个部分,每部分通过目录隔离开,比如这里content下的post目录,这样hugo转换后,firstpost.html和secondpost.html也会在public的post目录下。这里的“post”被称为一个section。

hugo会为每个section自动生成index.html页,采用的是index.html模板。

至于是否采用的是hyde/layouts/_default下的list.html,这要看host的匹配order,官方给出的是:

/layouts/section/SECTION.html
/layouts/_default/section.html
/layouts/_default/list.html
/themes/THEME/layouts/section/SECTION.html
/themes/THEME/layouts/_default/section.html
/themes/THEME/layouts/_default/list.html

这个例子中THEME=hyde, SECTION=post

在本例子中,/layouts/下是空的,不予考虑。/themes/hyde/layouts下没有建立section/post.html模板,/themes/hyde/layouts/_default/section.html也不存在,因此用的是_default/list.html。

hugo官方建议静态站点源码文件按section组织,每个section使用相应(同名)的type,这样section下面的.md就会自动使用响应type的meta data。

当我们hugo new post/firstpost.md时,hugo会到archetypes下找是否有post.md文件,如果有则使用post.md文件的categories和tags来初始化content/post/firstpost.md的元数据,如果没有post.md,则使用archetypes/default.md的。

3、模板语言

Hugo使用Golang的模板语法,表达能力很强大;配合Hugo predefined的变量或自定义变量,你可以玩转模板。关于模板内容较多,这里不赘述,需要时查看官方详细的manual

开始使用Markdown写Blog

近期发了一些带有大量代码的Go技术文章,结果文章中的代码样式被大家鄙视了,比如评论中的“不忍直视”、“这代码看得让人难受”等。于是我决定花些时间尝试做些改变。

博客系统

目前使用的这个博客系统是放在DigitalOcean VPS的Wordpress 3.2.1。在迁移到VPS之前,我的博客是一直托管在同事的一个托管主机上的,当初从blogbus迁移到他的托管WordPress主机时使用的就是WordPress 3.2.1版本,这两年一直未动,目前WordPress版本都4.3.1了。WordPress 3.2.1有很多bug,尤其是其安全漏洞,今年就被黑过几次,为此在后台将blog纳入git version管理,这样被黑后就可以很容易恢复。但将版本升级到WordPress新版我还是担心的,主要是担心升级失败,尤其是>数据库表变化较大,担心无法恢复。

不过由于历史“负重”太大(900多篇),我很难将WordPress顺利平滑的切换到一些新博客系统,比如golang开发的hugoJekyllOctopress等,只能继续坚守WordPress。

由于经常在文章里贴代码,也曾尝试过使用一些语法高亮的插件,但目前使用的富文本编辑器CKEditor似乎总是与语法高亮不兼容,试了N多都不好用,尤其是在html编辑器和富文本编辑器切换时高亮>部分代码内容被自动转码,于是放弃。这样在文章中只能暂时用Courier New字体来“高亮”代码部分。

Crayon Syntax Highlighter

在尝试之初思路主要还是想找到一款与CKEditor兼容的好用的语法高亮插件,在网上找到一个插件组合:CKEditor + SyntaxHighlighter CKEditor Button + Auto-SyntaxHighlighter。安装后简单>测试了一下发现的确比之前找的几款插件强。输入代码时只需要点击CKEditor工具栏上的一个Code Button,SyntaxHighlighter CKEditor Button会打开一个源码输入对话框,选择源码的语言种类贴入源码即可,还可以在”高级”tab中设置一些选项,是否带行号等。这个组合最大的好处就是无需切换到html编辑器手工输入html tag。

不过测试一段时间后还是发现了这个插件组合的问题,那就是不支持Go语法。Auto-SyntaxHighlighter内部使用的是syntaxhighligter的js,后者已经停止更新,并且即便是最新版本也不支持golang。我只能fork一个Auto-SyntaxHighlighter的repo,并“照猫画虎”的Auto-SyntaxHighlighter增加Go语法文件:shBrushGo-min.js和shBrushGo.js,并修改SyntaxHighlighter CKEditor Button的js文件,增加Go选项。不过try后,发现高亮格式依旧不对,最初以为是我修改的不正确,后来发现即便是用其支持的C/C++代码,高亮格式依旧有问题,我怀疑是与我当前的theme不兼容所致。

在知乎上看到人们都推荐Crayon Syntax Highlighter这个语法高亮插件,于是想最后再尝试一下。安装后发现Crayon Syntax Highlighter的确强大,我将字体设置为monaco, 字号14,主题:monokai,其渲染出来的高亮代码和我在本地mac上的几乎一模一样。不过小问题还是有的,比如: 行号无法去掉,浮动工具栏不好用等。

Crayon插件的最大的问题还是使用不便:需要切换到html源码editor中手工加入:
<pre lang:"go"> </pre>

如果再切换到富文本编辑器后,再切回来,

<pre> </pre>

之间的文本就会被转码,这极大增加了使用门槛。在没有理想办法之前,只能将就着用吧。

以上已经让我折腾我几个小时了,凌晨一点,睡。

Markdown on Save Improved

早上醒来,想到了Markdown,也许是最后稻草了。以前一直以为WordPress版本较低,很多Markdown plugin都不支持。但今天先不管那些了,装上试试。我找到了Markdown on Save Improved,这款插件最大的好处就是可以在每篇文章级别上加markdown开启选项。目前该插件已>经停更,并且其作者基于该插件开发了”Jetpack’s Markdown module”,Jetpack太大,对WordPress版本要求也太高,于是我就选择了”Markdown on Save Improved”,满足我使用就可以了。安装插件后,有一个“Markdown on Save Improved Convert to Jetpack”提示,似乎点击一个按钮,就可以将该插件转换为”Jetpack’s Markdown module”,不过我>也不能肯定,因为从表面上看不出来,没有什么变化。

“Markdown on Save Improved”给我的最大惊喜是它居然兼容Crayon Syntax Highlighter,我将Crayon的默认语言设置为go,这样markdown标记的代码块后者渲染后展现出很理想的高亮效果。

package main

import "fmt"

func main() {
    fmt.Println("Hello, MarkDown and SyntaxHighlighter")
}

至于Markdown的预览,可以在stackedit.io上来做。




这里是Tony Bai的个人Blog,欢迎访问、订阅和留言!订阅Feed请点击上面图片

如果您觉得这里的文章对您有帮助,请扫描上方二维码进行捐赠,加油后的Tony Bai将会为您呈现更多精彩的文章,谢谢!

如果您希望通过比特币或以太币捐赠,可以扫描下方二维码:

比特币:


以太币:


如果您喜欢通过微信App浏览本站内容,可以扫描下方二维码,订阅本站官方微信订阅号“iamtonybai”;点击二维码,可直达本人官方微博主页^_^:



本站Powered by Digital Ocean VPS。

选择Digital Ocean VPS主机,即可获得10美元现金充值,可免费使用两个月哟!

著名主机提供商Linode 10$优惠码:linode10,在这里注册即可免费获得。

阿里云推荐码:1WFZ0V立享9折!

View Tony Bai's profile on LinkedIn


文章

评论

  • 正在加载...

分类

标签

归档











更多