入门

2020-10-19
4分钟阅读时长

在本文中你将了解到如何快速搭建一个 Eureka 主题的 Hugo 网站。

如果你的区域存在难以访问GitHub的问题,你可以将所有涉及到GitHub的网址替换为[Gitee镜像](https://gitee.com/wangchucheng/hugo-eureka/)。例如将`https://github.com/wangchucheng/hugo-eureka/`替换为`https://gitee.com/wangchucheng/hugo-eureka/`即可。

前提

正常使用 Eureka 需要安装以下内容:

快速安装

Eureka 可以通过使用 Github 模板Hugo Eureka Starters快速安装。

使用此种方式时请点击页面上的Use this template按钮,并设置你的仓库信息。

如果你希望使用 Hugo Modules 的方式进行安装,在输入信息后直接点击Create repository from template按钮即可。

如果你希望使用 Git Submodules 的方式进行安装,请参考手动安装的使用 Git Submodules 安装

手动安装

Eureka 可以快速集成于 Hugo 项目中,目前 Eureka 可以通过Git SubmodulesHugo Modules两种方式进行安装。

Hugo Modules需要Go 1.12及以上版本,推荐所有拥有或愿意安装 Go 的用户使用此方式进行安装。

使用 Git Submodules 安装

如果当前环境下拥有或愿意安装Go 1.12及以上版本,可以使用更为方便快捷的Hugo Modules进行安装。

使用 Git Submodules 安装时您只需在项目位置下执行:

git submodule add https://github.com/wangchucheng/hugo-eureka.git themes/eureka

此时使用的默认为主分支的内容。我们推荐使用Releases中的版本,因为主分支可能包含不稳定的功能甚至错误。切换版本只需运行如下指令:

cd themes/eureka
git checkout <eureka_version>

接下来,将exampleSite中的config文件夹复制到项目根目录下,对config文件夹的内容进行配置。配置后删除原先的config.toml文件即可。

如果你是新建的 Hugo 项目,content文件夹下默认没有内容。你可以将exampleSite中的content文件夹复制到项目根目录下预览主题效果。

完成以上步骤后使用以下命令即可在浏览器中预览项目:

hugo server

如果你遇到了例如Error: Error building site: POSTCSS: failed to transform "css/eureka.css" (text/css): resource "css/css/eureka.css_09b9b8e200b8c676e85ddca87a9596ca" not found in file cache的报错请将 Hugo 升级至 0.100.0 或以上版本。

草稿不会被 Hugo 部署,所以你需要将内容头部的draft属性设为false或使用hugo server -D预览网站。

如果你对 Hugo 的基础用法并不熟悉或想了解更多 Hugo 相关的内容,可以参考Hugo Basic Usage

使用 Hugo Modules 安装

使用 Hugo Modules 安装 Eureka 时需要Go 1.12及以上版本,推荐所有满足依赖要求的用户使用此方式进行安装。

首先,在项目根目录下初始化一个新的 Hugo Module:

hugo mod init <module_name>

接下来,将exampleSite中的config文件夹复制到项目根目录下,对config文件夹的内容进行配置。

最后将config/_default/config.yaml中的theme: eureka注释并将theme: wangchucheng.com/hugo-eureka取消注释。配置后删除原先的config.toml文件即可。

如果你是新建的 Hugo 项目,content文件夹下默认没有内容。你可以将exampleSite中的content文件夹复制到项目根目录下预览主题效果。

完成以上步骤后使用以下命令即可在浏览器中预览项目:

hugo server

草稿不会被 Hugo 部署,所以你需要将内容头部的draft属性设为false或使用hugo server -D预览网站。

如果你对 Hugo 的基础用法并不熟悉或想了解更多 Hugo 相关的内容,可以参考Hugo Basic Usage

添加内容

安装 Eureka 后,即可开始向网站中添加相应内容。你可以在content文件夹中手动创建文件并添加信息。同时你也可以使用hugo new为你完成以上内容。

在项目中添加一篇默认类型的内容:

hugo new posts/hello-world.md

这会帮助你在content/post文件夹下生成一篇内容如下的文件。

---
title: Hello World
description:
toc: true
authors: []
tags: []
categories: []
series: []
date: "2020-10-20T10:30:48+08:00"
lastmod: "2020-10-20T10:30:48+08:00"
featuredImage: ""
draft: false
---

你可以对其中的值进行修改或在文件最后的+++后开始编写你的正文内容。

Eureka 还为你提供了其他类型的模板,你可以通过-k KIND指定类型:

hugo new -k authors authors/new-author

这会在content/authors文件夹下生成作者类型的内容。

Eureka 提供的全部内容类型可以参考archetypes

修改配置

由于 Eureka 致力于提供一个高度可定制且功能丰富的主题,因此我们将自动生成的config.toml文件替换为config文件夹以提供更清晰的结构。你可以修改配置文件中的任意内容:

title: My Own Title

关于主页的相关配置可参考主页配置

生成网站

生成网站只需:

hugo

类似于hugo serverhugo不会生成草稿内容。生成的网页位于public文件夹内。你可以将其部署于 Github Pages 或 Netlify 等静态网页部署平台上。


喜欢Eureka就请点个Star吧! Star
下一页 主页配置