美文网首页我爱编程
Hugo 静态网站快速生成

Hugo 静态网站快速生成

作者: 行业碧油鸡 | 来源:发表于2018-04-13 15:40 被阅读379次

+++
Categories = ["tool",]
Tags = ["tool","Hugo",]
date = "2014-06-21T00:12:23+08:00"
title = "Hugo 静态网站快速生成"

+++

安装

如果说速度快是Hugo的第一大优点,那么安装简单应该就是Hugo的第二大优点。对于Mac用户,没有brew的话先安装brew,在命令行里敲:

$ ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

然后再敲一行安装Hugo:

$ brew new Hugo

你也可以直接下载对应系统的binary文件,解压就行了:下载地址

建站

首先建立自己的网站,mysite是网站的路径

$ hugo new site mysite

然后进入该路径

$ cd mysite

在该目录下你可以看到以下几个目录和config.toml文件

 ▸ archetypes/ 
 ▸ content/
 ▸ layouts/
 ▸ static/
   config.toml

config.toml是网站的配置文件,包括baseurl, title, copyright等等网站参数。

这几个文件夹的作用分别是:

  • archetypes:包括内容类型,在创建新内容时自动生成内容的配置
  • content:包括网站内容,全部使用markdown格式(/post)
  • layouts:包括了网站的模版,决定内容如何呈现
  • static:包括了css, js, fonts, media等,决定网站的外观

Hugo提供了一些完整的主题可以使用,下载这些主题:

$ git clone --recursive https://github.com/spf13/hugoThemes themes

此时现成的主题存放在themes/文件夹中。

现在我们先熟悉一下Hugo,创建新页面:

$ hugo new about.md

进入content/文件夹可以看到,此时多了一个markdown格式的文件about.md,打开文件可以看到时间和文件名等信息已经自动加到文件开头,包括创建时间,页面名,是否为草稿等。

---
+++
date = "2015-02-01T18:19:54+08:00"
draft = true
title = "about"

+++

contents here

我在页面中加入了主题,然后运行Hugo:

$ hugo server -t hyde --buildDrafts

-t参数的意思是使用hyde主题渲染我们的页面,注意到about.md目前是作为草稿,即draft参数设置为true,运行Hugo时要加上--buildDrafts参数才会生成被标记为草稿的页面。 在浏览器输入localhost:1313,就可以看到我们刚刚创建的页面。

注意观察当前目录下多了一个文件夹public/,这里面是Hugo生成的整个静态网站,如果使用Github pages来作为博客的Host,你只需要将public/里的文件上传就可以,这相当于是Hugo的输出。

评论功能

Hugo默认支持Disqus的评论,需要在模版中添加以下代码:

{{ template "_internal/disqus.html" . }}

spf13在/layouts/partials/disqus.html中已经添加好了。
只需要去Disqus注册一个账号,然后在config.toml里加上:

disqusShortname = "yourdisqusShortname"

插入图片

图片文件放在static/media文件中,插入图片:

{{ % img src="/media/example.jpg" alt="example" %}}

注意这里的{{和%之间也加上了空格,避免这行代码起作用,实际使用也需要把空格去掉。

官方网站

Hugo

Hugo 中文网站

Hugo themes

相关文章

网友评论

    本文标题:Hugo 静态网站快速生成

    本文链接:https://www.haomeiwen.com/subject/ttockftx.html