找回密码
 立即注册
搜索
查看: 1455|回复: 0

Hugo 使用笔记

[复制链接]

267

主题

0

回帖

1176

积分

管理员

积分
1176
发表于 2024-1-10 01:24:49 | 显示全部楼层 |阅读模式

什么是 Hugo

Hugo 是一个用 Go 语言编写的静态网站生成器。它具有简单、易用、高效、易扩展和快速部署等特点。与其他动态网站生成系统(如 WordPress、Ghost 和 Drupal)不同,Hugo 在创建内容时就已经生成了静态页面,这大大优化了网站的访问速度,并提供了出色的写作体验。

Hugo 适用于构建各种高性能的静态网站,特别是博客、文档和个人网站等。它使用简单的 Markdown 和 HTML 等标记语言来创建内容,并使用 Go 语言的模板引擎来自定义主题和布局。这使得用户能够轻松地创建和定制自己的网站。

Hugo 还具有跨平台性,可以在不同的操作系统上运行,包括 Windows、Linux 和 macOS 等。它对于资源消耗较低,不依赖昂贵的运行环境,如 Ruby、Python 或 PHP,也不依赖任何数据库。这使得 Hugo 成为一个轻量级且易于维护的网站生成器。

另外,Hugo 还支持多种部署方式,可以将生成的静态网站部署到各种托管服务上,如 Heroku、GoDaddy、DreamHost、GitHub Pages、Google Cloud Storage、Amazon S3 和 CloudFront 等。这使得用户能够灵活地选择适合自己的托管方案。

在使用 Hugo 时,用户可以通过简单的命令行操作来创建和管理自己的网站项目。Hugo 提供了丰富的命令和选项,使得用户能够轻松地生成、预览和部署网站。

总的来说,Hugo 是一个功能强大、易用和高效的静态网站生成器,适用于个人和小型团队搭建高性能的网站。它提供了优秀的写作体验、快速的网站访问速度和灵活的部署选项,使得用户能够轻松地创建和管理自己的静态网站。

配置环境

Linux

Linux 用户可以直接使用包管理器安装 apt, yum, dnf, zypper, pacman 等等, 包名就是 hugo

Windows

Windows 用户可以在 GitHub 的 release 下载对应的安装包。

在下载安装包时,有 hugo 和 hugo_extended 两种可运行文件下载,其中 hugo 仅支持 js,hugo_extended 是 hugo 的扩展版本,在支持 js 的基础上还支持 ts。

解压后将 hugo.exe 的路径添加到系统环境变量 Path 中。

创建站点

使用命令 hugo new site blog 即可创建一个名称为 blog 的 hugo 站点项目,存放目录就是 blog。如果想在当前目录下创建需要加上--force参数,也就是hugo new site . --force。创建的项目默认使用的是 toml 配置文件,我比较喜欢用 yaml,所以呢,加一个参数:hugo new site blog --format yaml

目录结构:

$ tree . -A
.
├── archetypes
│   └── default.md
├── assets
├── content
├── data
├── hugo.yaml
├── i18n
├── layouts
├── static
└── themes

8 directories, 2 files

然后可以从主题站 https://themes.gohugo.io/ 选择一款主题。

下载到的主题解压到 themes 目录(带着主题根文件夹),然后就可以使用了。

配置站点

通常获取到的主题都会提供示例,里边会有配置文件 config.toml 或 hugo.toml,扩展名也可能是 yaml 等。按照这个文件修改我们站点根目录下的配置文件即可。

发布内容

使用以下命令创建一篇内容:

hugo new posts/article.md

posts:自定义的一个文件夹,当然也可以是别的,或者不指定文件夹都可以。

article.md:文章文件名,运行 hugo 时将会被渲染成一个页面。

生成的文件会被存放到 content 目录中。

自动生成的内容文件:

+++
title = 'Article'
date = 2024-01-10T00:53:04+08:00
draft = true
+++

这个自动生成的内容是 markdown 的 front-matter,这里是 toml 格式的,也可以手工改成 yaml 格式的。

实际上没必要使用 hugo new 命令创建内容,直接在相应目录手工创建 markdown 文件就行了。这里只是为让大家了解一下标准做法。

需要注意一下这里的 draft 参数,它是草稿的意思。如果发布时没有用 --buildDrafts,那么这个内容是不不会被渲染的。发布时改成 false 即可。

调试站点

如何在本地查看运行效果呢?在站点根目录运行 Windows 命令行 或 git bash  都可以,执行命令:

hugo server --buildDrafts
...
                   | EN
-------------------+-----
  Pages            |  3
  Paginator pages  |  0
  Non-page files   |  0
  Static files     |  0
  Processed images |  0
  Aliases          |  0
  Sitemaps         |  1
  Cleaned          |  0

Built in 4 ms
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

--buildDrafts:构建时包含标记为 draft(草稿) 的内容

默认使用了 --watch 参数,可以在修改文章内容时让浏览器自动刷新

根据提示,在浏览器中打开网址 http://localhost:1313/ 即可查看网页结果。上边创建的那篇内容的 URL 则是:http://localhost:1313/posts/article/

发布站点

本地调试完后就可以生成静态页面,然后传到服务器了。

生成静态页面的指令 :

hugo --gc --minify --cleanDestinationDir
--gc:开启在构建之后运行某些清理任务(例如删除无用的缓存文件)
--minify:对任何能够支持的输出格式(HTML、XML 等)进行压缩
--cleanDestinationDir: 先删除目标文件夹中的文件,不然改为 draft 的生成文件不会被自动删除

将 public 文件夹中生成的所有文件上传服务器。


您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

Archiver|手机版|小黑屋|棱讯科技 ( 粤ICP备2024228160号-2|粤公网安备44030002003510号 )

GMT+8, 2024-12-30 22:19 , Processed in 0.021609 second(s), 4 queries , Redis On.

Powered by Discuz! X3.5

© 2001-2024 Discuz! Team.

快速回复 返回顶部 返回列表