当前位置: 代码迷 >> 综合 >> 创建在线文档网站之二—学习使用Hugo(附错误解决you need the extended version to build SCSS/SASS)
  详细解决方案

创建在线文档网站之二—学习使用Hugo(附错误解决you need the extended version to build SCSS/SASS)

热度:39   发布时间:2023-12-14 07:44:34.0

Hugo 是基于 Go 语言的静态网站生成器。

我们可以把Hugo放到服务器上提供Web服务;还有一种免费的方法—把Hugo网站代码托管到GitHub上,利用其GitHub Pages的功能,建立静态网站。

下面实际操作是在Windows环境中。


1. 下载Hugo安装包

下载路径:https://github.com/gohugoio/hugo/releases

1)安装包解压后直接运行hugo.exe。

       说明:Hugo有二进制安装和源码安装两种方法,二进制显示是最快的。

       中文参考文档:https://www.gohugo.org/

       官方参考文档:https://gohugo.io/getting-started/

说明:对于Windows系统,在后续启动Hugo服务器时有报错,找到解决办法是下载扩展版(应该是有些Hugo主题在基础版上不支持),所以建议下载扩展版。

2)将Hugo安装包的解压路径(即hugo.exe的存放路径)添加至环境变量->系统变量->Path

说明:存放路径最好是英文的,以避免程序运行出错。

3)验证安装

在cmd窗口执行hugo version,如果显示版本,则表示安装正确。

hugo version

       说明:官方文档是说输入hugo help来检查安装是否成功了,此时会输出hugo相关的命令指导。

2. 创建站点

cd进入到我们想要保存网页的文件夹中(这里是我们上篇文章创建在线文档网站之一—学习使用GitHub中创建的abc文件夹,已托管到GitHub上)。

d: //将磁盘路径切换到D盘
cd Web //进入D盘的Web文件夹
cd abc //进入Web文件夹下的abc文件夹
hugo new site myblog //创建myblog站点

此时可以看到abc文件夹下创建了一个myblog文件夹,并包含以下文件。

其中config.toml是网站的配置文件,content文件夹放Markdown文档,data文件夹放数据,layouts文件夹放网站模板文件,static文件夹放图片、css、js 等静态资源,themes文件夹存放主题。

3. 设置站点的主题

根据上面屏幕的提示信息我们也知道,接下来需要下载主题。

hugo主题地址:https://themes.gohugo.io/

1)下载主题

比如我选择了下面这个主题。

单击“Download”跳转到主题地址:https://github.com/alex-shpak/hugo-book

单击Code,将该主题代码下载下来。

首先进入创建站点文件夹themes目录,然后有两种下载方式:

  • 使用Git Bash Here窗口,执行git clone https://github.com/alex-shpak/hugo-book.git命令
git clone https://github.com/alex-shpak/hugo-book.git
  • 单击Download ZIP,将文件夹保存在themes目录,并解压。

2)为站点设置主题

在站点的主目录找到config.toml并编辑其中的theme参数,将其修改为下载的皮肤的名称(如果没有此行参数,请按下图添加),如theme = "hugo-book-master"。

3)为站点添加页面

进入保存网页的文件夹并执行命令。

hugo new post/myfirst.md //content目录下新建post目录并创建myfirst.md文件(新建目录是为了利于网站页面的聚合)

可以看到content\post目录下已生成myfirst.md文件。

使用Markdown编辑软件(例如MarkdownPad)编辑myfirst.md文件:

       注意:draft参数值需要为true,否则这个页面会被忽略。

---
title: "Myfirst"
date: 2021-07-05T17:13:35+08:00
draft: true
---
这是我的第一篇博客。

4. 启动hugo服务器

在站点的主目录下执行hugo server启动服务器

hugo server

此时又遇到了错误:)

这个报错是由于Hugo安装造成的,重新下载扩展版,解压覆盖至原来hugo.exe的保存路径(之所以这么做是牵涉到之前设置环境变量),并运行hugo.exe后执行hugo server,服务启动成功。

5. 访问hugo站点

站点显示如下。

目前本地的Hugo页面是工作正常了。接下来我们要关联Hugo和GitHub。

  相关解决方案