Hugo:快速开始

250 阅读2分钟

在 Hugo 的官方网站中,它自称是全球最快的网页构建框架,以其惊人的构建速度和灵活性成为最受欢迎的开源静态站点生成器之一。

开发环境

Git:2.28.0

macOS:10.14.6

安装 Hugo

brew install hugo

# 或者

port install hugo

如何验证安装是否成功?

hugo version

# Hugo Static Site Generator v0.75.1/extended darwin/amd64 BuildDate: unknown

创建新站点

现在我们进入指定的文件夹目录 Developer 中新建一个取名为 quickstart 的新项目:

# 查看当前目录路径
pwd
# /Users/Bowie/Developer

hugo new site quickstart

添加主题模板

Hugo 提供了一个官方的主题平台,收录了不同风格的主题模板。本项目中使用 Ananke 主题进行演示。

  1. 从 GitHub 下载主题并添加到目录:

    # 进入项目目录
    cd quickstart
    # /Users/Bowie/Developer/quickstart
    
    # 初始化 Git
    git init
    git submodule add https://github.com/theNewDynamic/gohugo-theme-ananke.git themes/ananke
    
  2. 在项目配置项中添加主题:

    # /Users/Bowie/Developer/quickstart
    echo 'theme = "ananke"' >> config.toml
    

创建新帖子

使用命令行新建文本,每一个文件就是你网站中的一篇文章。

hugo new posts/first-post.md

# /Users/Bowie/Developer/quickstart/content/post/first-post.md

你也可以参考下面的格式手动在目录中创建文本:

# /Users/Bowie/Developer/quickstart
/content/分类(可选)/文件标题.文件格式后缀

# 比如:
# /content/about.md
# /content/blog/first-post.md

打开使用命令行新建的文件,你会发现里面包含了一些信息:

---
title: "First Post"	# 文章标题
date: 2020-09-22T12:37:53+08:00	# 创建时间
draft: true	# 是否已发布,当值为 false 则表示已发布
---

启动 Hugo 服务器

运行 Hugo 服务器,你可以访问并浏览未发布的草稿。

hugo server -D

# 以下内容为命令行执行后返回信息
# 启动并运行 Hugo 服务器
Start building sites … 

                   | EN  
-------------------+-----
  Pages            | 10  
  Paginator pages  |  0  
  Non-page files   |  0  
  Static files     |  6  
  Processed images |  0  
  Aliases          |  1  
  Sitemaps         |  1  
  Cleaned          |  0  

Built in 25 ms
Watching for changes in /Users/Bowie/Developer/quickstart/{archetypes,content,data,layouts,static,themes}
Watching for config changes in /Users/Bowie/Developer/quickstart/config.toml
Environment: "development"
Serving pages from memory
Running in Fast Render Mode. For full rebuilds on change: hugo server --disableFastRender
Web Server is available at http://localhost:1313/ (bind address 127.0.0.1)
Press Ctrl+C to stop

打开浏览器并访问 http://localhost:1313/ ,可以看到你的站点已经成功启动并运行了。