(一) 使用 Hugo 搭建个人博客保姆级教程（上篇）

手把手教你如何从0开始构建一个静态网站，这不需要有太多的编程和开发经验和时间投入，也基本不需要多少成本（除了个性化域名），使用GitHub和Hugo模板即可快速构建和上线一个网站。

目标读者

本文档适用于以下用户：

• 对网站构建不太了解，没有Web开发经验的用户
• 希望快速构建一个网站，个性化需求不多，不想花费太多精力打理，更新不多的用户
• 希望学习网站构建、网站模板、Web开发的用户
• 对Go语言感兴趣，希望从事开源项目的用户

原理

静态网站构建原理

世界上的网站上千万，网页数量更是如天上的星星数也数不清。那么这些网站都是如何构建的？都包括哪些类型呢？笼统的概括世界上的网站分为两种类型：

• 静态网站：仅提供展示功能，不能与用户交互，不需要后端数据库存储用户信息
• 交互式网站：需要与用户交互，保存用户信息

大多数现代Web应用程序使用层叠样式表（CSS）、JavaScript、图片甚至是特殊的字体和字形库，如Awesome字体，这也是我们工具箱中最常用的库之一。

几乎所有的网站中都会包含一个静态文件目录 static，这个目录下包含三个目录，分别保存着三类文件：

• js：Javascript
• images：图片
• css：层叠样式表和字体

我们不会为每个网站分别导入不同的样式信息，而是使用模板来生成网页的不同部分。

我们在下一章中将分别介绍三款流行的静态网站生成工具。

静态网站构建工具

静态网站构建工具简介

使用静态网站构建工具不但可以让我们构建静态网站的工作大大简化，而且还可以迅速验证自己的想法，以最高效的方式开发网站。

这一章中将分别介绍三款流行的开源静态网站构建工具，然后说明为什么我们选择使用 Hugo 来构建静态网站。

对比

下面是三款静态网站构建工具的简要对比：

• Jekyll 简介

Jekyll 是最早开始流行的静态网站构建工具，使用Ruby语言开发，开源已有9个年头了，是Github Pages默认的静态网站构建工具。当前互联网上有大量基于jekyll构建的静态网站，包括现在流行的开源容器编排调度引擎kubernetes的官网。

• Jekyll的理念

  Jekyll网站构建的理念就是只做用户告诉它要做的事情，不多也不少：

  • No Magic：简单易懂
  • It “Just Works”：初始化网站配置，不需要为让用户操心
  • Content is King：内容为王，这是用于应该真正关心的部分
  • Stability：向后兼容，容易维护
  • Small & Extensible：核心功能满足90%用户的需求，其它功能使用插件形式，易于集成
    以上理念也被后来出现的其它静态网站构建工具所传承。

• Hexo简介

  Hexo 是一款使用node.js开发的静态网站构建工具，便于构建华丽绚烂的页面。

  截止今日， Hexo 已经有386个主题框架。

• Hugo简介

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

  Hugo以速度快著称，号称是世界上最快的网站生成框架。

  The world’s fastest framework for building websites

以上工具都可以将markdown内容转换为静态页面。

为什么选择Hugo

来自1Password的评价

这里有一段来自1Password的对hugo的评价，很有代表性。

内容翻译自 https://gohugo.io/showcase/1password-support/

在1Password，我们过去每个月都会经历一个不同的文档平台：博客引擎，电子书，维基，用Ruby和JavaScript编写的网站生成器。 每个方式都有自己的不足。然后我们找到了hugo。我们做了最后一次切换，我们很高兴我们做到了。

并非所有静态站点生成器都是相同的

找到一个能让您的客户，作者，设计师和DevOps团队满意的工具并非易事，但我们通过Hugo进行了管理：

• Hugo是静态的。我们是一家安全公司，所以我们坚持静态网站并尽可能地使用它们。我们觉得客户在HTML文件上比在需要强化的复杂服务器上更安全。

• Hugo是基于Go的。在1Password我们喜欢Go编程语言，我们很高兴得知Hugo使用了我们的设计师和前端开发人员已经掌握的相同的Go模板语法。

• Hugo很快。我们以前的静态站点生成器花费将近一分钟来编译我们的（那时还小得多）站点。开发人员可能已经习惯了这一点，但对于希望看到工作实时预览的作家来说，这并不合适。Hugo在几毫秒内完成了同样的工作，到现在，转瞬之间就可以编译五种语言编写的400多个页面。

• Hugo很灵活。感谢Hugo的内容和布局系统，我们能够保留现有的文件和文件夹结构，并在几天内移植整个生产站点。然后我们可以创建以前不可能的新内容类型，比如这些时髦的陈列柜。

• Hugo非常适合作家。我们的文档团队已经对Markdown和Git感到满意，并且可以开始为Hugo创建内容而无需停顿。一旦我们添加了短代码，我们的作者就可以通过少量的新语法来使用类似平台盒(platform boxes)的功能来装饰文章。

• Hugo有一个惊人的开发者社区。Hugo更新频繁，充满了功能和修复。在我们开发网站的多语言版本时，我们提交了所需功能的PR，并通过@bep和其他人的流程得到了帮助。

• Hugo易于部署。 Hugo拥有适量的配置选项，可以适应我们的构建系统而不会太复杂。

好了，话不多说，正式开始Hugo搭建教程👇

Hugo博客搭建教程