Fork me on GitHub

Hugo静态网站生成不完全教程(不定期更新)

参考资料

阅读官方文档

相信你读了上面的资料就会很轻松的搭建自己的博客了.如果还不是很明白,那么恭喜你,跟我一样笨. 笨就没办法了,去hugo官方网站读Docs.读完之后你大概能明白到底是怎么回事了,每个文件都是干什么的,怎么改模板等等,从一个小白变成一个不太白,顺便了解一下 Go 语言的语法.

我主要写一些小技巧或者不常用,或者大家在别处没有找到的.

官网上值得推荐给大家的是:

  • 关于hugo的博客,英文居多,也有少量中文的,自己斟酌选读.
  • hugo的主题模板,非常符合hugo的设计理念to be the perfect balance betweensimplicity and functionality.
  • 关于如何方便快捷地发布到 Github Pages 上,有很多方案.利用 wercker , webhook 等等,上面的博客和官网都有提到,不再赘述.

GitHub Ribbons

设置GitHub Ribbons,Github官网给出解决方案.在这里 选中你喜欢的 Ribbons .代码中href属性中的字段换成自己的Github网址,复制到 /layouts/partials/head_includes.html/ 中即可生效.

添加YouTube

https://www.youtube.com/watch?v=w7Ft2ymGmfc格式是介样的.

<!--在文种中插入类似以下代码即可,注意后边的字符串跟你想要加入链接的YouTube的最后一段字符串对应-->
{{ < youtube w7Ft2ymGmfc > }}

实际代码中 {{}} 前面是没有空格的,这里是为了不让被系统识别成YouTube视频才故意这样写的,加入时注意去掉.

添加RSS

参考: http://gohugo.io/templates/rss/

RSS2.0模板

<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
  <channel>
    <title>{{ with .Title }}{{.}} on {{ end }}{{ .Site.Title }}</title>
    <link>{{ .Permalink }}</link>
    <description>Recent content {{ with .Title }}in {{.}} {{ end }}on {{ .Site.Title }}</description>
    <generator>Hugo -- gohugo.io</generator>{{ with .Site.LanguageCode }}
    <language>{{.}}</language>{{end}}{{ with .Site.Author.email }}
    <managingEditor>{{.}}{{ with $.Site.Author.name }} ({{.}}){{end}}</managingEditor>{{end}}{{ with .Site.Author.email }}
    <webMaster>{{.}}{{ with $.Site.Author.name }} ({{.}}){{end}}</webMaster>{{end}}{{ with .Site.Copyright }}
    <copyright>{{.}}</copyright>{{end}}{{ if not .Date.IsZero }}
    <lastBuildDate>{{ .Date.Format "Mon, 02 Jan 2006 15:04:05 -0700" | safeHTML }}</lastBuildDate>{{ end }}
    <atom:link href="{{.URL}}" rel="self" type="application/rss+xml" />
    {{ range first 15 .Data.Pages }}
    <item>
      <title>{{ .Title }}</title>
      <link>{{ .Permalink }}</link>
      <pubDate>{{ .Date.Format "Mon, 02 Jan 2006 15:04:05 -0700" | safeHTML }}</pubDate>
      {{ with .Site.Author.email }}<author>{{.}}{{ with $.Site.Author.name }} ({{.}}){{end}}</author>{{end}}
      <guid>{{ .Permalink }}</guid>
      <description>{{ .Content | html }}</description>
    </item>
    {{ end }}
  </channel>
</rss>

把上面这段代码分别复制到

  • /layouts/rss.xml
  • /layouts/_default/rss.xml
  • /layouts/section/SECTION.rss.xml
  • /layouts/_default/rss.xml
  • /themes/THEME/layouts/section/SECTION.rss.xml
  • /themes/THEME/layouts/_default/rss.xml
  • /layouts/taxonomy/SINGULAR.rss.xml
  • /layouts/_default/rss.xml
  • /themes/THEME/layouts/taxonomy/SINGULAR.rss.xml
  • /themes/THEME/layouts/_default/rss.xml

然后在 /layouts/partials/header.html 中的 head 标签内加入下面这段代码即可.

{{ if .RSSlink }}
  <link href="{{ .RSSlink }}" rel="alternate" type="application/rss+xml" title="{{ .Site.Title }}" />
  <link href="{{ .RSSlink }}" rel="feed" type="application/rss+xml" title="{{ .Site.Title }}" />
{{ end }}

最后将你的RSS链接 (yourwebsite/index.xml) 加入你想加到的地方就行了.

自定义图片的css样式

yourwebsite/static/static/css/style.css 中找到img标签定义想要生成的图片效果.

就像这样:

figure{position:relative}
figure img,figure object,figure embed,figure video{max-width:100%;display:block}
img{border:0;-ms-interpolation-mode:bicubic;}

添加过后:

figure{position:relative}
figure img,figure object,figure embed,figure video{max-width:100%;display:block}
img{border:0;-ms-interpolation-mode:bicubic;display: block;
    box-shadow: 0 0 10px #555;
    border-radius: 4px;
    margin-left: 0px;
    margin-right: auto;
    margin-top: 5px;
    margin-bottom: 5px;
    -webkit-box-shadow: 0 0 10px #555;}

这个是扒王垠博客的图片的样式,看着高上大就拿过来用了.稍微改了下,自己觉得喜欢就好.当修改过后博客右上角的 GitHub Ribbons 也变成了这种样式,如果不喜欢的话可以单独在你定义 GitHub Ribbons 的html中修改回来.

<img style="position: absolute; top: 0; right: 0; border: 0;display: block;
    box-shadow: 0 0 0px #000;
    border-radius: 0px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0px;
    margin-bottom: 0px;
    -webkit-box-shadow: 0 0 0px #000;"
    alt="..."
    src="...">

定义图片大小

<figure>
    <img src="/media/alipay.jpg" alt="alipay"
    <!--图片大小-->
    attr width="40%"  />
     <figcaption>
     	  <!--标题-->
        <h4> alipay </h4>
    </figcaption>
</figure>

支持下拉刷新( Mobile )

  1. res: pulltorefresh.js
  2. 使用方法:
<script src="//cdnjs.cloudflare.com/ajax/libs/pulltorefreshjs/0.1.14/pulltorefresh.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/pulltorefreshjs/0.1.14/pulltorefresh.min.js"></script>
<script>
var ptr = PullToRefresh.init({
  mainElement: 'body',
  onRefresh: function(){ window.location.reload(); }
});
</script>
<script>hljs.initHighlightingOnLoad();</script>

添加以上代码到 /layouts/partials/footer.html 中即可。

排序

如果你想让自己的某些文章置顶或者让某些文章不那么排在前边的话,就可以用到这段介绍了.像我写些日记什么的,没什么价值,就希望放在后边啦.

参考: http://gohugo.io/content/ordering/

config.toml 中添加 weight 属性,weight的值越高越排在后边.至于最大最小我也不知道,有兴趣的可以去看源码.尝试过1-100都可以,好像这基本就够大家的需要了.

示例:

+++
weight = 100
date = "2015-12-15T00:38:58+08:00"
draft = false
title = "title"
tags = ["tags"]
+++

制作icon

推荐 http://www.faviconer.com/

域名选择

  • 推荐西部数码,阿里云,Goddy.
  • DNS解析推荐 dnspod.
  • 我自己选的域名是xyz,第一年4元.流量用的 Github Pages .
  • 推荐云存储空间使用 七牛云 ,不仅免费而且速度也很快.

建站心得

  • 第一次运行时,命令用 hugo 即可.如果用 hugo server ,那么生成的文件BaseURL都是 localhost:1313 .就因为这个问题我纠结过一天,甚至写了个java文件遍历所有的文件替换字符串…
  • 有的东西多试试就明白了,看着怎么都不懂,把东西改改看网页有什么变化就清晰明了了.
  • 上传到 Github Pages 会有延迟,如果刷不出网页,请耐心等待.

结语

马上就两点了,明儿还得早起上班.就先写到这儿了,如果有什么不明白的. Hugo交流群:512499080.

Hugo中文文档网站:http://www.gohugo.org/.

相信这里的朋友会帮你解决问题的. 第一次这么隆重地写博客,想想也挺开心的.

最后,祝好:)