W3C SVG

快速上手指南

章节目标

  1. 创建一个网站
  2. 添加内容
  3. 配置网站
  4. 生成网站

开始前需要准备

  1. 安装 Hugo
  2. 安装 Git

如何创建一个网站

命令行

以下命令创建一个由Hugo驱动的，使用Ananke主题的网站。

hugo new site quickstart
cd quickstart
git init
git submodule add https://github.com/theNewDynamic/gohugo-theme-ananke themes/ananke
echo "theme = 'ananke'" >> config.toml
hugo server

运行后可以在命令行控制台看到网址。使用快捷键 ctrl+c 可以停止Hugo内建的开发服务器。

每条命令的说明

hugo new site quickstart

创建网站的命令，运行后会在quickstart目录中建立基本的hugo需要的目录结构。

cd quickstart

切换当前工作目录到项目目录quickstart。

git init

初始化一个git仓库，使用git管理quickstart项目。

git submodule add https://github.com/theNewDynamic/gohugo-theme-ananke themes/ananke

以git submodule的方式将ananke主题下载到对应目录中。

echo "theme = 'ananke'" >> config.toml

在网站的配置文件中设置将ananke作为当前主题。

hugo server

使用hugo内建的开发服务器预览网站。 快捷键ctrl+c关闭开发服务器。

添加内容

hugo new posts/my-first-post.md

以上命令会添加一个页面，hugo会在content/posts目录中创建my-first-post.md。 文件内容：

---
title: "My First Post"
date: 2022-11-20T09:03:20-08:00
draft: true
---

此内容称为前置部分，用来标记页面的属性信息。 默认的draft标记为true，标记当前页面是草稿状态，正常生成网站的时候，hugo不会发布草稿页面。 现在可以在后面添加我们页面的内容了。

---
title: "My First Post"
date: 2022-11-20T09:03:20-08:00
draft: true
---
## Introduction

This is **bold** text, and this is *emphasized* text.

Visit the [Hugo](https://gohugo.io) website!

保存文件，现在可以启动hugo内建服务器，看一看效果了。 下面两条命令是等价的，可以在预览内容中包含标记为草稿的页面。

hugo server --buildDrafts
hugo server -D

现在可以使用终端中显示的地址预览你的网站了。 更改内容时可以不用关闭服务器，前端会自动更新变更内容，这一点很方便。

Hugo渲染引擎使用CommonMark标准的markdown语法。

CommonMark提供了一个实时测试预览markdown的工具方便使用。

配置网站

网站的配置文件是项目根目录的config.toml，内容如下：

baseURL = 'http://example.org/'
languageCode = 'en-us'
title = 'My New Hugo Site'
theme = 'ananke'

现在做一些修改：

  1. 将baseURL改为你自己的网站地址，注意不要忘了开头的http和最后的/。
  2. 将languageCode改为自己的语言和地区。
  3. 将title改为自己网站的标题。 打开服务器程序，看一下修改之后的效果。
hugo server -D

大部分主题提供了主题自己特殊的配置选项，要参靠具体主题的文档说明。

Ananke 主题作者 The New Dynamic 提供了配置选项的文档说明，还有一个演示网站。

生成网站

这一步是生成网站，不是发布网站。 命令很简单：

hugo

hugo会在项目目录中的public目录下生成一个完整的静态网站，包括所有的HTML文件、图片、CSS、JavaScript文件等。