Logo

菜单

发布于 2026-01-06 6 阅读
0

Creating a Hugo site on GitHub Pages Quick Backstory What is Hugo? Introduction & Necessary Installations Getting started with Hugo DEV's Worldwide Show and Tell Challenge Presented by Mux: Pitch Your Projects!

在 GitHub Pages 上创建 Hugo 网站

简要背景介绍

雨果是什么？

简介及必要安装

Hugo入门

由 Mux 主办的 DEV 全球展示挑战赛：展示你的项目！

简要背景介绍

我刚刚开始我的网页开发之旅，在磕磕绊绊地尝试创建一个网站时，我偶然发现了一个很棒的静态网站生成器，叫做 Hugo！

这是我的第一篇帖子，希望对大家有用:)

雨果是什么？

Hugo 自称是“最快的网站搭建框架”，我不得不说，即使像我这样的新手也能轻松上手！经过一番摸索和观看一些 YouTube 视频后，我很快就在 GitHub Pages 上搭建并运行了一个网站！不过，我还是遇到了一些不清楚的地方，所以我打算把我的搭建过程写成一份详细的步骤指南，希望能帮助其他人更顺利地搭建网站！

简介及必要安装

您也可以参考适用于 Windows 或 Linux 的Hugo 安装页面，因为本文是在 macOS 系统上进行的！如果您这样做，可以直接跳到本文的“Hugo 入门”部分！

注意：如果您已经安装了 Homebrew 和 Go，请跳至此处；如果您尚未配置 Git或拥有GitHub帐户，请先完成这两项操作。请使用您创建 GitHub 帐户时使用的邮箱地址来配置 Git！

安装 Homebrew

注意：如果您已安装 Homebrew，则可以跳至下载部分。

我这里不做任何假设，所以我们先从安装 macOS 版 Homebrew 开始。这非常简单，而且以后执行其他任务也会轻松很多！按下 Command + 空格键，输入“terminal”，然后按回车键打开终端。接下来，复制并粘贴以下命令（你应该位于你的主目录中）：

 /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
Enter fullscreen mode Exit fullscreen mode

接受所有提示，然后砰！搞定！现在你可以开始酿造了！（注：请查看Homebrew，我的代码就是从那里获得的）。这将使接下来的几个步骤更加轻松！

安装 Go

注意：如果您已经安装了 Go，则可以跳过此步骤！

现在你已经安装了 Homebrew，要安装 Go，你需要在终端中输入以下命令：


brew install go
Enter fullscreen mode Exit fullscreen mode

再次提醒，请接受所有提示，直到下载完成，Go 就会安装成功！如果您还不了解 Go，它是由 Google 开发的一种编程语言，如今越来越受欢迎。Hugo 将利用这种语言来创建网站框架。如果您想了解更多关于 Go 的信息，请点击这里（此处双关） 。

Hugo入门

如果您看到这里，说明您已安装以下软件：

  • 自制啤酒
  • 去

安装 Hugo

现在来说说 Hugo 的安装，正如你可能已经猜到的，Hugo 的安装与前两个安装步骤一样简单。只需输入以下命令：

brew install hugo
Enter fullscreen mode Exit fullscreen mode

就这样！我们准备开始和雨果一起工作了！

为雨果做准备

让我们创建一个目录来存放所有工作。在终端中输入以下命令，进入你的主目录：

cd ~

然后，要创建名为“Sites”的目录，请键入：mkdir Sites

进入该目录cd Sites

现在您已进入站点目录，可以开始在这里使用 Hugo 了。
第一步非常简单，只需输入：


hugo new site yoursitename
Enter fullscreen mode Exit fullscreen mode

`hugo new site` 命令将创建您网站的框架。执行该命令后，您应该会看到以下提示。

Congratulations! Your new Hugo site is created in /Users/YourName/Sites/yoursitename.

Just a few more steps and you're ready to go:

1. Download a theme into the same-named folder.
   Choose a theme from https://themes.gohugo.io/, or
   create your own with the "hugo new theme <THEMENAME>" command.
2. Perhaps you want to add some content. You can add single files
   with "hugo new <SECTIONNAME>/<FILENAME>.<FORMAT>".
3. Start the built-in live server via "hugo server".

Visit https://gohugo.io/ for quickstart guide and full documentation.
Enter fullscreen mode Exit fullscreen mode

这些步骤将引导您完成网站建设，达到预期目标。我们将简要介绍这些步骤，以便您了解这些组件及其交互方式。现在，您应该cd yoursitename查看ls目录，您将看到以下内容：

archetypes content layouts static config.toml themes data
Enter fullscreen mode Exit fullscreen mode

这是你的 Hugo 网站的框架，你可以在这里创建新的网站内容，等网站上传到 GitHub 后我会详细讲解。这里需要注意的是目录theme结构。主题目录是你自定义网站的地方。

雨果主题

Hugo 允许你创建自己的主题，或者下载其他人制作的预制开源主题！预制主题非常适合 Hugo 的入门用户，所以我们在这里就选择这种方式。

预制主题可在Hugo Themes页面找到。

选择一个主题。

（本教程将展示我网站使用的 Coder 主题）。

GitHub 标志 luizdepra / hugo-coder

一款适用于 Hugo 的极简主义博客主题。

雨果主题徽章 MIT许可证徽章

Hugo Coder 标志

一款简洁清爽的Hugo博客主题。

在线演示

请看这里。

快速入门

  1. 将该存储库作为子模块添加到您的 Hugo 项目存储库中git submodule add https://github.com/luizdepra/hugo-coder.git themes/hugo-coder。
  2. 配置您的系统hugo.toml。您可以以此最小配置为基础，也可以点击此处查看所有配置的完整说明。hugo.toml系统内部的配置exampleSite说明也是一个很好的参考。
  3. 使用我们的网站搭建您的网站hugo server，并查看结果http://localhost:1313/。

文档

请查看docs文件夹。

执照

Coder 采用MIT 许可证授权。

维护

该主题由其作者Luiz de Prá维护，并得到了以下优秀贡献者的帮助下。

赞助

如果您喜欢我的项目或觉得它对您有用，请考虑支持其开发。只需：

请我喝杯咖啡

特别鸣谢

  • 感谢 Gleen McComb 撰写了关于自定义分页的精彩文章。
  • 所有贡献者，针对报告的每个 PR 和 Issue。


在 GitHub 上查看


选择主题后，点击页面上的“下载”按钮，即可跳转到其 GitHub 仓库。进入仓库后，点击绿色的“克隆或下载”按钮。注意：请务必在弹出的对话框中勾选“使用 SSH”，然后复制 SSH 密钥。复制 SSH 密钥后，返回终端，确保当前目录为themes主题目录git clone，然后按回车键control + v将密钥粘贴到终端中，最后按回车键。注意：如果您尚未配置 Git，请查看这篇文章。现在您应该会看到一个以您选择的主题名称命名的仓库coder；cd coder然后运行 ​​`ls` 命令查看仓库目录的内容。

这些就是你让网站外观与你选择的主题完全一致的所有文件！现在cd exampleSite就去查看这些文件吧。

现在，我发现让网站快速启动并运行的最简单方法是，将原目录中的文件exampleSite替换为您运行hugo new site sitename命令时创建的文件。换句话说，将原目录content中的所有文件移动exampleSite到您运行命令后创建的目录中content。yoursitename您需要对原目录中的所有文件执行此操作，exampleSite直到该目录完全为空。如果存在重复文件（例如config.toml文件），请删除命令创建的重复文件hugo new site。然后，将所有其他文件移出 coder 目录，即使它们没有对应的位置，也只需将它们从 coder 目录移到您的网站目录即可。以下文件无需移动：

theme.toml README.md Makefile LICENSE.md
Enter fullscreen mode Exit fullscreen mode

务必将所有物品正确搬运！

完成上述步骤后，请打开 config.toml 文件并查看。如果您使用的是 coder 主题，它应该看起来像这样（不包括我添加在右侧的注释，这些注释前面带有 <-，告诉您需要更改文件中的哪些内容来自定义网站）。

重要提示：您需要将 baseurl 更改为下面指定的值！

baseurl = "http://examplesite" <- Change to http://yourgithubusername.github.io

title = "johndoe" <- Name your website here

theme = "hugo-coder" 

languagecode = "en" 

paginate = 20
canonifyurls = true

pygmentsstyle = "b2"
pygmentscodefences = true
pygmentscodefencesguesssyntax = true

disqusShortname = "yourdiscussshortname" <- Your short name for commenting

[params]
    author = "John Doe" <- Your name
    description = "John Doe's personal website" <- How you would describe the site
    keywords = "blog,developer,personal"
    info = "Full Stack DevOps and Magician" <- A small description of what your are
    avatarurl = "images/avatar.jpg" <- your image
    footercontent = "Enter a text here." <- a footer (quotes are nice)

    hideCredits = false
    hideCopyright = false

    rtl = false

    # Custom CSS
    custom_css = []

[[params.social]]
    name = "Github"
    icon = "fab fa-github fa-2x"
    weight = 1
    url = "https://github.com/johndoe/" <- Change to your Github profile url
[[params.social]]
    name = "Gitlab"
    icon = "fab fa-gitlab fa-2x"
    weight = 2
    url = "https://gitlab.com/johndoe/" <- Change to your GitLab profile url
[[params.social]]
    name = "Twitter"
    icon = "fab fa-twitter fa-2x"
    weight = 3
    url = "https://twitter.com/johndoe/" <- Change to your twitter profile url
[[params.social]]
    name = "LinkedIn"
    icon = "fab fa-linkedin fa-2x"
    weight = 4
    url = "https://www.linkedin.com/in/johndoe/" <- Change to your Linkedin profile url
[[params.social]]
    name = "Medium"
    icon = "fab fa-medium fa-2x"
    weight = 5
    url = "https://medium.com/@johndoe" <- Change to your medium profile url

[[menu.main]]
    name = "Blog"
    weight = 1
    url  = "/posts/"
[[menu.main]]
    name = "About"
    weight = 2
    url = "/about/"
[[menu.main]]
    name = "Projects"
    weight = 3
    url = "/projects/"
[[menu.main]]
    name = "Contact me"
    weight = 5
    url = "/contact/"

[languages]
    [languages.en]
        languagename = "English" # The language name to be displayed in the selector.
        title = "John Doe"

        # You can configure the theme parameter for each language.
        [languages.en.params]
        author = "John Doe" <- Your name
        info = "Full Stack DevOps and Magician" <- What you do
        description = "John Doe's personal website" <- quick description
        keywords = "blog,developer,personal"

        [languages.en.menu] # It is possible to change the menu too.

        [[languages.en.menu.main]]
        name = "About"
        weight = 1.0
        url = "/about/"

        [[languages.en.menu.main]]
        name = "Blog"
        weight = 2.0
        url = "/posts/"

        [[languages.en.menu.main]]
        name = "Projects"
        weight = 3
        url = "/projects/"
        [[languages.en.menu.main]]
        name = "Contact me"
        weight = 5
        url = "/contact/"

------------------------delete below (unless you know polish) ----------------
    [languages.pl]
        languagename = "Polski"
        title = "John Doe po polsku"

        [languages.pl.params]
            author = "John Doe"
            description = "Strona domowa John'a Doe"
            keywords = "blog,developer,strona domowa"
            info = "Full Stack DevOps i Magik"

        [languages.pl.menu]

            [[languages.pl.menu.main]]
            name = "O mnie"
            weight = 1.0
            url = "/pl/about/"

            [[languages.pl.menu.main]]
            name = "Blog"
            weight = 2.0
            url = "/pl/posts/"

            [[languages.pl.menu.main]]
            name = "projektowanie"
            weight = 3
            url = "/projektowanie/"
            [[languages.pl.menu.main]]
            name = "kontakt"
            weight = 5
            url = "/kontakt/"
-------------------------------------------------------------------
Enter fullscreen mode Exit fullscreen mode

保存更改后的文件。现在打开终端并进入该目录。yoursitename

在本地托管您的 Hugo 网站

现在您已经完成了网站的基本修改，是时候将网站托管到本地了！这样您就可以在将网站发布到互联网供他人访问之前，先看看它的效果！

请确保您位于该目录中yoursitename，然后输入

hugo server
Enter fullscreen mode Exit fullscreen mode

请阅读那里的说明，然后将本地主机地址粘贴到浏览器中！

搞定！你现在有了自己的网站！恭喜！所有链接都应该有效，并且包含exampleSite文章和信息！如果链接失效，你需要检查并确保已将所有内容正确移出目录exampleSite。

现在你已经拥有了一个很棒的网站，打开about.md文件，写上你的个人简介，然后在“关于我”页面刷新浏览器。你应该会看到网站在浏览器中自动更新！这对于测试文章原型非常方便！稍微摆弄一下这些文件，开始了解目录结构以及它们在浏览器中的显示方式。理解布局将使你以后使用 Hugo 更加直观。

创建新内容的基础知识

在 Hugo 站点中创建新文件非常简单。首先，创建新内容时，您始终需要位于您的yoursitename目录下，然后始终使用相应的hugo new (contentpathhere)命令。尝试使用以下命令创建新文章。

hugo new posts/firstpost.md
Enter fullscreen mode Exit fullscreen mode

找到 firstpost.md 文件并进行编辑，确保draft将 header 中的设置更改为 而false不是true。保存该文件，然后在浏览器中刷新页面，接着访问博客，搞定！你的第一篇文章就创建成功了！这就是在 Hugo 网站上创建新文章的基本流程。当你更熟悉 Hugo 的基础知识后，可以阅读更多关于创建新内容的内容！

在 GitHub Pages 上托管

现在你已经完成了网站的基本搭建，我们会把它托管在 GitHub 上，供所有人查看！GitHub 提供这项服务是免费的，所以不用担心任何费用！

首先，你需要做的就是前往 GitHub 创建两个仓库。

1. A repository with the exact name as your website directory 'yoursitename'
2. A repository with the name 'yourgithubusername.github.io'
Enter fullscreen mode Exit fullscreen mode

创建这些存储库后，从与您的网站名称完全一致的存储库中获取 SSH 密钥，然后转到您的网站目录yoursitename，输入 `<command>` git init，然后输入git add remote并粘贴 SSH 密钥。然后输入 ` git pull origin master.`

现在cd ..进入Sites目录，输入git clone并添加来自“yourgithubusername.github.io”的 SSH 密钥。克隆完成后cd yoursitename，输入hugo -d ../yourgithubusername.github.io。然后cd ../yourgithubusername.github.io，再输入。

git add .
git commit -m "your message"
git push origin master
Enter fullscreen mode Exit fullscreen mode

然后cd ../yoursitename输入

git add .
git commit -m "your message"
git push origin master
Enter fullscreen mode Exit fullscreen mode

现在前往 GitHub，找到名为“yourgithubusername.github.io”的仓库，点击设置，向下滚动直到看到指向您网站的链接：http://yourgithubusername.github.io。现在您应该可以在网页上看到您的网站了！恭喜！您现在已经在 GitHub Pages 上创建了一个网站！现在您可以将此地址分享给您的朋友、家人和潜在雇主，让他们看到您发布和完成的所有精彩内容！

剧终

希望这篇文章对那些想要快速创建第一个网站的朋友有所帮助，欢迎留言提出修改建议或疑问！我会尽力解答！

非常感谢您阅读我的第一篇文章！

文章来源：https://dev.to/dgavlock/creating-a-hugo-site-on-github-pages-3cjo
选择合适的技术栈：开发者决策指南
掌握 Next.js 的 5 个必...