hugo-最好用的静态网站生成器

Hugo是由Go语言实现的静态网站生成器。简单、易用、高效、易扩展、快速部署。

快速开始

安装Hugo

1. 二进制安装(推荐:简单、快速)

Hugo Releases 下载对应的操作系统版本的Hugo二进制文件(hugo或者hugo.exe)

Mac下直接使用 Homebrew 安装:

brew install hugo

2. 源码安装

源码编译安装,首先安装好依赖的工具:

设置好 GOPATH 环境变量,获取源码并编译:

$ export GOPATH=$HOME/go
$ go get -v github.com/spf13/hugo

源码会下载到 $GOPATH/src 目录,二进制在 $GOPATH/bin/

如果需要更新所有Hugo的依赖库,增加 -u 参数:

$ go get -u -v github.com/spf13/hugo

生成站点

使用Hugo快速生成站点,比如希望生成到 /path/to/site 路径:

$ hugo new site /path/to/site

这样就在 /path/to/site 目录里生成了初始站点,进去目录:

$ cd /path/to/site

站点目录结构:

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

创建文章

创建一个 about 页面:

$ hugo new about.md

about.md 自动生成到了 content/about.md ,打开 about.md 看下:

+++
date = "2015-10-25T08:36:54-07:00"
draft = true
title = "about"

+++

正文内容

内容是 Markdown 格式的,+++ 之间的内容是 TOML 格式的,根据你的喜好,你可以换成 YAML 格式(使用 --- 标记)或者 JSON 格式。

创建第一篇文章,放到 post 目录,方便之后生成聚合页面。

$ hugo new post/first.md

打开编辑 post/first.md

---
date: "2015-10-25T08:36:54-07:00"
title: "first"

---

### Hello Hugo

 1. aaa
 1. bbb
 1. ccc

安装皮肤

皮肤列表 挑选一个心仪的皮肤,比如你觉得 Hyde 皮肤不错,找到相关的 GitHub 地址,创建目录 themes,在 themes 目录里把皮肤 git clone 下来:

# 创建 themes 目录
$ cd themes
$ git clone https://github.com/spf13/hyde.git

运行Hugo

在你的站点根目录执行 Hugo 命令进行调试:

$ hugo server --theme=hyde --buildDrafts --watch

使用 --watch 参数可以在修改文章内容时让浏览器自动刷新。

浏览器里打开: http://localhost:1313

部署

假设你需要部署在 GitHub Pages 上,首先在GitHub上创建一个Repository,命名为:coderzh.github.io (coderzh替换为你的github用户名)。

在站点根目录执行 Hugo 命令生成最终页面:

$ hugo --theme=hyde --baseUrl="http://coderzh.github.io/"

如果一切顺利,所有静态页面都会生成到 public 目录,将pubilc目录里所有文件 push 到刚创建的Repository的 master 分支。

$ cd public
$ git init
$ git remote add origin https://github.com/coderzh/coderzh.github.io.git
$ git add -A
$ git commit -m "first commit"
$ git push -u origin master

浏览器里访问:http://coderzh.github.io/

这个网站 免费教程网 就是我使用hugo生成的。 这个网站模板是我自己写的(样式部分除外),大家如果有关于hugo的以及go 模板相关的问题可以问我。

时间: 2024-12-09 15:25:29

hugo-最好用的静态网站生成器的相关文章

Hugo 0.21 发布,Go 编写的静态网站生成器

Hugo 0.21 已发布,Hugo 是 Go 编写的静态网站生成器,速度快,易用,可配置.Hugo 有一个内容和模板目录,把他们渲染到完全的 HTML 网站. 该版本全面支持各个 Output Format (#3220) 缩写,这对具有多个自定义 media 标签的 Google AMP 尤其有用. 此外,Hugo 的许多模板功能已引入了 namespaces,现在它们能通过自己的测试和示例能很好地分类到 namespaces 中,并附有一个 API ,可以以此确保它是正确的和最新的. 文章

最全的静态网站生成器(开源项目)

将动态网页静态化,可以有效减轻服务器端的压力,并且静态网页的访问速度要快于动态网页.此外,使用静态网页还有利于搜索引擎的收录,从而提高网站的搜索排名.  下面是StaticSiteGenerators网站收集整理的开源的静态网站生成器,按照编程语言进行分类,每个分类按照Star数进行排序.  目 录 [ - ] JavaScript 版 Ruby 版 Java/Groovy/Scala 版 PHP 版本 Python 版 Go 语言版 Perl 版 C# 版 Shell 版 其他语言版 Java

十个开源的静态站点生成器

本文是从StaticGen网站整理出来的静态站点生成器排行榜.俗话说,不管白猫黑猫,抓到老鼠就是好猫,所以这里整理出来的生成器不分先后,只要是合适的就是最好的. 1. Jekyll 主页|托管地址 Jekyll是一个静态Blog站点生成器,不管是用在个人.项目还是组织站点,都是很棒的,你可以把Jekyll想象成一个基于文件的CMS,没什么复杂性!Jekyll首先会获得你的内容,然后开始渲染Markdown 和 Liquid 模板,接下来会生成一个完整的可以被用在 Apache.Nginx 或者是

快速使用云存储搭建静态网站

背景 随着时代进入DT时代,更低廉的成本和更加易于扩展的特点都是应该成为我们关注的重点.如果您有一个网站,网站的访问量很大.很稳定,恭喜您,请继续保持使用我们的ECS服务器.如果您的网站才刚成立或者网站的平时流量较小,偶尔会有大流量的情况.那么问题来了,继续租一台ECS服务器,流量不敢设置太小了,最低配置加上4Mb的带宽,是不是觉得成本有点高了? 但是换个思路,换成用OSS作服务器话,就可以很好的应对大流量的那几天的访问,而且平时几乎没用费用产生,并且没有带宽限制,真正的按流量掏钱,成本急剧降低

静态网站转换成RSS的工具

本文译自allwebdesignresources.com  原作者Rachel Goldstein   同发译言 你有一个静态网站吗?也许你要把一些内容转换成RSS或者要在你的网站上添加一个RSS种子?那么下面的列表会让你很高兴.这个列表把静态网页转化成XML RSS的所有免费工具一网打尽.这些工具对于很多高手和不知道何为html的菜鸟一样有用.下面看看这些工具,找出最好的一款,能把任何页面转化成完美的RSS种子.如果你还有其他的转换工具,请告诉我.谢谢. The RSS Wizard这是一款

用PHP制作静态网站的模板框架

静态|模板 模板能够改善网站的结构.本文阐述如何通过PHP 4的一个新功能和模板类,在由大量静态HTML页面构成的网站中巧妙地运用模板控制页面布局. 提纲: =================================== 分离功能和布局 避免页面元素重复 静态网站的模板框架 =================================== 分离功能和布局 首先我们来看看应用模板的两个主要目的: 分离功能(PHP)和布局(HTML) 避免页面元素重复 第一个目的是谈论得最多的目的,它

用PHP制作静态网站的模板框架(四)

静态网站的模板框架 首先,我们象前面一样为所有的页面公用元素以及页面整体布局编写模板文件:然后从所有的页面删除公共部分,只留下页面内容:接下来再在每个页面中加上三行PHP代码,如下所示: <?php <!-- home.php --> <?php require('prepend.php'); ?> <?php pageStart('Home'); ?> <h1>你好</h1> <p>欢迎访问</p> <img

用PHP制作静态网站的模板框架(一)

模板能够改善网站的结构.本文阐述如何通过PHP 4的一个新功能和模板类,在由大量静态HTML页面构成的网站中巧妙地运用模板控制页面布局. 提纲: =================================== 分离功能和布局 避免页面元素重复 静态网站的模板框架 =================================== 分离功能和布局 首先我们来看看应用模板的两个主要目的: 分离功能(PHP)和布局(HTML) 避免页面元素重复 第一个目的是谈论得最多的目的,它设想的情形是

如何用PHP制作静态网站的模板框架

第一个目的是谈论得最多的目的,它设想的情形是:一组程序员编写用于生成页面内容的PHP脚本,同时另一组设计人员设计HTML和图形以控制页面的最终外观.分离功能和布局的基本思想就是使得这两组人能够各自编写和使用独立的一组文件:程序员只需关心那些只包含PHP代码的文件,无需关心页面的外观:而页面设计人员可以用自己最熟悉的可视化编辑器设计页面布局,无需担心破坏任何嵌入到页面的PHP代码. 如果你曾经看过几个关于PHP模板的教程,那么你应该已经明白模板的工作机制.考虑一个简单的页面局部:页面的上方是页头,