如何搭建一个同样的网站（Hugo+Bootstrap）

我喜欢的风格大约是这样的：http://justinvincent.com/ 每页都敲代码或DW去写，不是没可能，但是太麻烦了，那样注意力就是在代码上，而不是内容上了。 而且，如果以后改栏目或风格，也要改之前的老文件，完全手工写不现实。也曾用过WordPress之类的动态系统，但最后都不了了之。不停的升级更新，慢慢的就没兴趣了。

大致了解了一下静态网页生成器Hugo，较契合自己的需要。大约浏览了一下模板，找最简约的。

按照下面网址提示，安装Hugo http://blog.coderzh.com/2015/08/29/hugo/ http://gohugo.io/tutorials/installing-on-windows/ 重点： 解压后将Hugo.exe的路径加入到系统环境变量PATH中

在查bootstrap的资料时，发现这么一个个人网站： http://www.chingli.com/ 主人很大方的提供了模板：https://github.com/chingli/rockrock

下面是总结的常用的命令，根据情况替换成你的。

建立站点：

hugo new site liufei.com

首页：

hugo new index.md

然后修改这个生成的位于Sites/*/content/下对应的md文件即可，在里面填上内容就行了。

建立一级子栏目并一级子栏目下第一个网页：

hugo new coding/howtocopy.md

建立一级网页：

hugo new about.md

启动本地浏览：

hugo server --theme=rockrock --buildDrafts --watch

在浏览器中打开：

http://localhost:1313/

生成最终静态网页：

hugo  --theme=rockrock  --baseUrl="http://www.liufei.com/liufei"

常见问题：

1.样式不一样：检查css的路径并调整: Hugo\Sites\liufei.com\themes\rockrock\layouts\partials中<link href=“/css/style.css” rel=“stylesheet”>

2.汉字乱码：把md文件另存为utf-8格式的即可。

3.插入代码：放在<code>和</code>之间即可高亮显示。<和>等特殊字符会被自动转意，在其前加上\即可

4.插入代码：把代码放在{{< highlight html >}}<pre>和</pre>{{< /highlight >}}之间

5.插入代码：``` html和```之间，则之间的所有字符，会被原样显示在网页中。