利用Hugo+Stack主题快速构建个人网站

Hugo is one of the most popular open-source static site generators. With its amazing speed and flexibility, Hugo makes building websites fun again.
Hugo 是最流行的开源静态站点生成器之一。凭借其惊人的速度和灵活性，Hugo 再次让构建网站变得有趣。

以上是Hugo官方对自家产品的描述，通过这两天的体验，正如上文所述，构建个人网站速度惊人。跟着教程一起快速搭建自己的个人网站吧。

前期准备

操作系统： macOS
依赖工具：Git,Go,Dart Sass
尽管并非在所有情况下都需要，但在使用 Hugo 时通常会使用 Git、Go 和 Dart Sass。所以在安装Hugo之前，你需要先安装git、go、sass

brew install git
brew install go
brew install sass

假设你已安装好 Git、Go 和 Dart Sass。

安装Hugo

hugo为每个操作系统提供了对应的安装方式，具体可以参考Hugo官方安装教程。如果你已安装好，请跳过这个步骤。

我的建议:
找到Prebuilt binaries章节，访问最新版本下载对应操作系统的extended版本，不要问为什么要下extended版本，问就是下就对了。如果你非要犟，我准备了另外一篇文章回答你可能会遇到的问题。

下载后解压，如果你嫌弃配置环境变量麻烦，可以直接把可执行文件hugo扔/usr/local/bin目录下。好了，现在可以使用hugo version命令查看安装版本情况。

$ hugo version
hugo v0.125.5-c8b9f9f81c375f5b391e61bae711ee63fc76c1fd+extended darwin/amd64 BuildDate=2024-05-01T15:22:11Z VendorInfo=gohugoio

hugo v0.125.5-c8b9f9f81c375f5b391e61bae711ee63fc76c1fd+extended不知道你注意没注意。

当然，macOS中可以使用brew install hugo快速安装，因为我本机安装有Homebrew包管理器，如果你使用的是MacPorts包管理器，对应的安装命令用sudo port install hugo。在这个安装过程中也有可能遇到问题，比如操作系统老旧（Warning: You are using macOS 11.We (and Apple) do not provide support for this old version.），所以还是回到我的建议，下载预构建版本。

新建site

好了，到这假设我们的前期准备都已就绪，接下来就可以建站安装主题了。

$ hugo new site hugoblog
Congratulations! Your new Hugo site was created in /path/to/websites/hugoblog.

Just a few more steps...

1. Change the current directory to /path/to/websites/hugoblog.
2. Create or install a theme:
   - Create a new theme with the command "hugo new theme <THEMENAME>"
   - Or, install a theme from https://themes.gohugo.io/
3. Edit hugo.toml, setting the "theme" property to the theme name.
4. Create new content with the command "hugo new content <SECTIONNAME>/<FILENAME>.<FORMAT>".
5. Start the embedded web server with the command "hugo server --buildDrafts".

See documentation at https://gohugo.io/.

安装主题

这里安装一个我觉得很漂亮的stack主题，可以先看下截图

如果你觉得不错，请继续跟着操作。如果你觉得不够漂亮，那学习下解决安装主题问题也是可以的。

$ cd hugoblog
$ git init
$ git submodule add https://github.com/CaiJimmy/hugo-theme-stack/ themes/hugo-theme-stack
Cloning into '/path/to/websites/hugoblog/themes/hugo-theme-stack'...
remote: Enumerating objects: 5096, done.
remote: Counting objects: 100% (367/367), done.
remote: Compressing objects: 100% (210/210), done.
remote: Total 5096 (delta 209), reused 259 (delta 149), pack-reused 4729
Receiving objects: 100% (5096/5096), 1.23 MiB | 1.44 MiB/s, done.
Resolving deltas: 100% (3250/3250), done.
$ cp -r themes/hugo-theme-stack/exampleSite/* ./
$ rm hugo.toml

启动应用

$ hugo server -D

Watching for changes in /path/to/websites/hugoblog/{archetypes,assets,content,data,i18n,layouts,static,themes}
Watching for config changes in /path/to/websites/hugoblog/hugo.yaml, /path/to/websites/hugoblog/themes/hugo-theme-stack/config.yaml
Start building sites … 
hugo v0.125.5-c8b9f9f81c375f5b391e61bae711ee63fc76c1fd+extended darwin/amd64 BuildDate=2024-05-01T15:22:11Z VendorInfo=gohugoio

ERROR render of "page" failed: "/path/to/websites/hugoblog/themes/hugo-theme-stack/layouts/_default/single.html:27:7": execute of template failed: template: _default/single.html:27:7: executing "main" at <partial "article/article.html" .>: error calling partial: "/path/to/websites/hugoblog/themes/hugo-theme-stack/layouts/partials/article/article.html:2:7": execute of template failed: template: partials/article/article.html:2:7: executing "partials/article/article.html" at <partial "article/components/header" .>: error calling partial: "/path/to/websites/hugoblog/themes/hugo-theme-stack/layouts/partials/article/components/header.html:34:7": execute of template failed: template: partials/article/components/header.html:34:7: executing "partials/article/components/header.html" at <partialCached "article/components/details" . .RelPermalink>: error calling partialCached: partial "article/components/details" timed out after 30s. This is most likely due to infinite recursion. If this is just a slow template, you can try to increase the 'timeout' config setting.
Built in 31239 ms
Error: error building site: render: failed to render pages: render of "home" failed: "/path/to/websites/hugoblog/themes/hugo-theme-stack/layouts/index.html:9:15": execute of template failed: template: index.html:9:15: executing "main" at <partial "article-list/default" .>: error calling partial: partial "article-list/default" timed out after 30s. This is most likely due to infinite recursion. If this is just a slow template, you can try to increase the 'timeout' config setting.

上述错误原因提示很明显了，在根目录的hugo.yaml中添加timeout字段，默认30s，增加到5m

timeout: 5m

再次运行

Start building sites … 
hugo v0.125.5-c8b9f9f81c375f5b391e61bae711ee63fc76c1fd+extended darwin/amd64 BuildDate=2024-05-01T15:22:11Z VendorInfo=gohugoio

ERROR error calling resources.GetRemote: Get "https://publish.twitter.com/oembed?dnt=false&omit_script=true&url=https%3A%2F%2Ftwitter.com%2FDesignReviewed%2Fstatus%2F1085870671291310081": dial tcp [2a03:2880:f12c:83:face:b00c:0:25de]:443: i/o timeout
ERROR error calling resources.GetRemote: Get "https://vimeo.com/api/oembed.json?dnt=0&url=https%3A%2F%2Fvimeo.com%2F48912912": dial tcp [2a03:2880:f12c:83:face:b00c:0:25de]:443: i/o timeout
WARN  Search page not found. Create a page with layout: search.
WARN  Archives page not found. Create a page with layout: archives.
Built in 60389 ms
Error: error building site: logged 2 error(s)

这是twitter和vimeo两者shortcode引起的问题，关键字shortcode查找，在/hugoblog/content/post/rich-content目录下index.md文件中，删除以下内容

## Twitter Simple Shortcode
{{< twitter_simple user="DesignReviewed" id="1085870671291310081" >}}
<br>
---
## Vimeo Simple Shortcode
{{< vimeo_simple 48912912 >}}

再次尝试运行

$ hugo server -D
Watching for changes in /path/to/websites/hugoblog/{archetypes,assets,content,data,i18n,layouts,static,themes}
Watching for config changes in /path/to/websites/hugoblog/hugo.yaml, /path/to/websites/hugoblog/themes/hugo-theme-stack/config.yaml
Start building sites … 
hugo v0.125.5-c8b9f9f81c375f5b391e61bae711ee63fc76c1fd+extended darwin/amd64 BuildDate=2024-05-01T15:22:11Z VendorInfo=gohugoio

WARN  Search page not found. Create a page with layout: search.
WARN  Archives page not found. Create a page with layout: archives.

                   | EN | ZH-CN | AR  
-------------------+----+-------+-----
  Pages            | 49 |    18 | 21  
  Paginator pages  |  6 |     0 |  0  
  Non-page files   |  5 |     1 |  1  
  Static files     |  0 |     0 |  0  
  Processed images | 14 |     0 |  0  
  Aliases          | 23 |     7 |  9  
  Cleaned          |  0 |     0 |  0  

Built in 348 ms
Environment: "development"
Serving pages from disk
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/ 看到的就是上面截图页面。至此，我们的个人网站就搭建好了。至于如何修改其中的内容及编写文章，就需要自己填充了。

打赏