使用Hugo和Netlify构建你的第一个Jamstack应用
关于部署，您可以将其部署到GitHub Pages、Netlify、Azure Static Web Apps等等。
我们将使用Hugo进行Jamstack开发，并使用Netlify来托管我们的站点。
本教程假设您对Web有基本的了解，并且知道如何使用Git。
让我们开始吧。
#1. 安装前提条件：Go和Git
要安装Hugo，您需要两样东西：Git和Go。我们需要Git来简化我们的构建工作流程（稍后您将在Netlify中看到它）。Hugo是基于Go构建的，所以需要Go。
我们使用在Windows 11上运行的WSL 2上的Ubuntu。我们直接从Windows访问Ubuntu内核。
还阅读： Windows 11 Meets Linux: A Deep Dive into WSL2 Capabilities
您可以选择操作系统，Windows、Linux或Mac。
安装Git
在Ubuntu中，您可以通过运行以下命令来安装Git。
$ sudo apt update
$ sudo apt install git对于Windows，您需要下载Windows二进制安装程序。请查看我们的完整的 Git installation guide.
要验证Git是否正确安装，请键入以下命令。
nitt@logan99:~$ git --version
git version 2.34.1安装Go
现在，是时候安装Go了。为此，在Linux上运行几个命令。所以让我们逐步进行。
步骤1：删除先前的Go安装并创建本地Go树。
$ rm -rf /usr/local/go && tar -C /usr/local -xzf go1.20.4.linux-amd64.tar.gz步骤2：自定义PATH环境变量
export PATH=$PATH:/usr/local/go/bi
步骤3：最后，检查Golang是否正确安装。
$ go version.
#output
go version go1.18.1 linux/amd64太棒了，现在我们准备安装Hugo！
安装Hugo
根据您使用的是 Homebrew 还是Chocolately，您将需要使用以下其中一条命令。
对于Homebrew：
$ brew install hugo对于Chocolatey：
$ brew install hugo -confirm如果您没有使用它们中的任何一个，您可以直接从源代码安装。
$ mkdir $HOME/src
cd $HOME/src
git clone https://github.com/gohugoio/hugo.git
cd hugo
go install --tags extended要检查Hugo是否成功安装，请运行以下命令。
$ hugo -version开始构建站点...
hugo v0.92.2+extended linux/amd64 BuildDate=2023-01-31T11:11:57Z VendorInfo=ubuntu:0.92.2-1ubuntu0.1
INFO 2023/05/05 12:20:38 syncing static files to /home/nitt/yaoweibin/public/
| EN
-------------------+-----
Pages | 35
Paginator pages | 0
Non-page files | 0
Static files | 23
Processed images | 0
Aliases | 0
Sitemaps | 1
Cleaned | 0
Total in 117 ms#2. 创建Hugo站点
Hugo提供了一种创建站点的简单方法。要这样做，请运行以下命令。
$ hugo new site yaoweibin-jamstack恭喜！您的新 Hugo 网站已创建在 /home/nitt/yaoweibin-jamstack。
还有几个步骤，您就可以开始了：
1. 在同名文件夹中下载一个主题。
从 https://themes.gohugo.io/ 选择一个主题，
或使用 “hugo new theme ” 命令创建自己的主题。
2. 或许您想要添加一些内容。您可以使用 “hugo new /.” 添加单个文件。
3. 通过 “hugo server” 启动内置的实时服务器。
请访问 https://gohugo.io/ 查阅快速入门指南和完整文档。
#3. 选择一个 Hugo 主题
Hugo 提供了访问 tons of themes。这些主题为您的项目提供了一个起点。要使用 Hugo 构建 Jamstack 网站，您需要一个主题。
#4. 使用 Jamstack 创建一个小型企业网站
在本教程中，我们将使用 Hugo Hero 主题。这个多功能主题提供了全宽度区块和通过 Markdown 创建作品集等功能。
要安装主题，请复制其仓库链接并克隆。在继续之前，请确保您在根目录中。
git clone https://github.com/zerostaticthemes/hugo-hero-theme.git themes/hugo-hero-theme#output
Cloning into 'themes/hugo-hero-theme'...
remote: Enumerating objects: 1141, done.
remote: Total 1141 (delta 0), reused 0 (delta 0), pack-reused 1141
Receiving objects: 100% (1141/1141), 28.17 MiB | 58.00 KiB/s, done.
Resolving deltas: 100% (489/489), done.复制默认内容
要使用网站的默认内容，请运行以下命令。
$ cp -a themes/hugo-hero-theme/exampleSite/. .它将内容从 exampleSite 文件夹复制到您的网站的根目录中。
更新 Config.toml 文件
接下来，我们需要编辑 Config.toml 文件。它存储项目的配置信息，为了使 Jamstack 网站正常工作，正确设置这个文件是必要的。
现在，您需要编辑以下行。
baseURL = "/"
themesDir = "themes"
theme = "hugo-hero-theme"注意：随着项目的进展，您需要不断更新 Config.toml 文件。另外，由于使用了默认内容，您的 Config.toml 已经更新以适应示例内容。
测试我们的 Jamstack 网站
要运行我们的网站，我们需要再次使用 hugo 命令生成 Hugo 网站。
$ hugo接下来，我们启动服务器。为此，请运行 hugo serve 命令。
$ hugo serve#输出
nitt@logan99:~/yaoweibin$ hugo server
端口1313已被占用, 尝试使用可用端口
开始构建站点 ...
hugo v0.92.2+extended linux/amd64 BuildDate=2023-01-31T11:11:57Z VendorInfo=ubuntu:0.92.2-1ubuntu0.1
| EN
-------------------+-----
页面 | 35
分页器页面 | 0
非页面文件 | 0
静态文件 | 23
处理的图片 | 0
别名 | 0
站点地图 | 1
清理 | 0
构建完成，共耗时 71 毫秒
正在监视更改 /home/nitt/yaoweibin/{archetypes,content,data,layouts,static,themes}
正在监视配置更改 /home/nitt/yaoweibin/config.toml
环境: "development"
从内存中加载页面
正在运行快速渲染模式。要进行完整重建，请执行 hugo server --disableFastRender
Web 服务器可在 //localhost:42229/ 访问（绑定地址 127.0.0.1）
按 Ctrl+C 停止
注意：您的站点现在已托管并可在127.0.0.1上访问。如果由于某种原因未打开，请尝试打开提供的备用地址。在本例中，它是localhost:42973
编辑主题默认内容
从这里开始，您可以自由编辑默认内容。您可以通过进入Content文件夹来进行编辑。让我们编辑索引页面的内容。要这样做，请转到Content > Work > Index.md
编辑后的内容如下所示。
创建一个博客站点
如果您只想创建一个博客，那么您必须选择一个合适的主题。为此，让我们使用Hyde主题。
与设置新站点的方式类似，您需要运行以下命令。
$ hugo new site yaoweibin-jamstack
$ cd yaoweibin-jamstack/themes
$ git clone https://github.com/spf13/hyde /themes/hyde接下来，编辑Config.toml文件以添加theme = ‘hyde'值。
创建一个新文章
您必须运行hugo new命令来创建一个新的文章，然后是Markdown文件。
$ hugo new helloyaoweibin.md#输出
nitt@logan99:~/geefklare-jamstack$ hugo new helloyaoweibin.md
内容 "/home/nitt/geefklare-jamstack/content/helloyaoweibin.md" 已创建
nitt@logan99:~/geefklare-jamstack$编辑文章
要编辑新创建的hellogeefklare.md 文章，请在首选的文本编辑器中打开helloyaoweibin.md 文件。
它将显示以下内容。
---
title: "Hello Geekflare"
date: 2023-05-04T11:39:10+05:30
draft: true
---在这里，您可以在Markdown中添加任何内容。
让我们在Markdown中添加以下内容。
### Hello, World!
This is a new post created to show how easy it is to create **Jamstack website**.
We’re using Hugo and Netlify to create our *basic Jamstack site*.将上述内容放入.md文件后，它应该如下所示（根据您的编辑器而定，我们正在使用Visual Studio Code）。
但是，当我们提供服务时，它的外观将完全不同。
注意：确保将draft值从”true”更改为”false”
太棒了！我们创建了两个Jamstack网站，一个小型业务网站和一个博客。
在编辑网站后，您可以通过运行hugo命令生成文件。它将创建文件并将其放在/public文件夹中。
$ hugo#5. 将Jamstack站点部署到Netlify
创建完我们的站点后，让我们来部署它们。为此，我们将使用Netlify。
Netlify是一个由CDN支持的服务，为用户提供快速的托管站点。您可以将Netlify与Github连接并自动化该过程。它是一个免费的服务，但某些功能需要付费。
我们的工作是将代码推送到Netlify并让Netlify处理一切。
在本地设置Git仓库
现在是时候设置Git仓库了。
要初始化Git仓库，请在项目的根目录下运行以下命令。
$ git init接下来，我们需要将主题设置为子模块。这是一个重要的步骤。从技术上讲，它在仓库中创建子仓库。（还记得你是如何通过git clone获取Hugo主题的吗？）这将为您的Jamstack站点提供更多控制权。
例如，您可以下载主题的更新。您还需要这样做，因为Netlify需要作为子模块托管主题。
因此，要将主题添加为子模块，请运行以下命令。
$ git rim --cached themes/hyde
$ git submodule add https://github.com/spf13/hyde themes/hyde#output
nitt@logan99:~/yaoweibin-jamstack$ git submodule add https://github.com/spf13/hyde themes/hyde
Adding existing repo at 'themes/hyde' to the index
nitt@logan99:~/yaoweibin-jamstack$在GitHub上创建一个仓库
本地设置完成后，是时候创建一个新的GitHub仓库了。
创建完成后，您需要将其添加到本地仓库中。
$ git remote add origin https://github.com/logan99/yaoweibin-jamstack-tutorial.git现在进行拉取。
$ git branch -M main
$ git pull origin main创建新的提交
现在，是时候创建一个新的提交了。运行以下命令将所有文件添加到主分支。
$ git add .现在，运行提交命令来提交更改。
$ git commit -m “First commit”最终，将更改推送到GitHub。
#Output
nitt@logan99:~/yaoweibin-jamstack$ git commit -m “First commit”
[main (root-commit) fa69ab2] First commit21个文件更改，插入1135个
创建模式100644 .gitmodules
创建模式100644 .hugo_build.lock
创建模式100644 archetypes/default.md
创建模式100644 config.toml
创建模式100644 content/helloyaoweibin.md
创建模式100644 public/404.html
创建模式100644 public/apple-touch-icon-144-precomposed.png
创建模式100644 public/categories/index.html
创建模式100644 public/categories/index.xml
创建模式100644 public/css/hyde.css
创建模式100644 public/css/poole.css
创建模式100644 public/css/print.css
创建模式100644 public/css/syntax.css
创建模式100644 public/favicon.png
创建模式100644 public/helloyaoweibin/index.html
创建模式100644 public/index.html
创建模式100644 public/index.xml
创建模式100644 public/sitemap.xml
创建模式100644 public/tags/index.html
创建模式100644 public/tags/index.xml
创建模式160000 themes/hyde
最后，将更改推送到GitHub。
$ git push --set-upstream origin main
注意：您必须输入GitHub用户名和密码才能正常进行工作。
#6. 使用Netlify
非常好，我们的存储库现在已创建。现在，我们转到Netlify。如果您已经拥有帐户，请登录或创建一个新帐户。
对于新帐户，它将立即为您运行向导。否则，您将进入帐户仪表板。如果您进入仪表板，请单击“添加新站点”选项。
在添加新站点下，选择“导入现有项目。”
然后它会要求您选择一个Git提供商。由于我们使用的是GitHub，我们将选择它。您还可以选择Bitbucket、GitLab和Azure DevOps。
然后，它会列出您的所有项目。从这里，选择您为此项目创建的GitHub存储库。对于我们来说，它是“yaoweibin-jamstack-tutorial”。您还可以选择上传其他我们创建的项目。
然后它会要求您选择要部署的分支并选择基本的构建设置。现在，您可以将所有设置都设置为默认值。
点击“部署网站”进行部署。
现在，您需要等待Netlify完成操作。部署完成后，消息将显示“您的站点已部署。”
现在，点击左上角的网站。
然而，您会注意到网站未正确加载。这是因为Config.toml文件中的基本URL设置不正确。由于Netlify生成了一个新的项目URL，您必须将其添加到Config.toml文件中。
在我们的例子中，网站位于https://animated-beijinho-2baa8b.netlify.app/
这意味着我们需要将baseURL添加到其中。
要这样做，请转到您的本地设置并更改值。
baseURL = 'https://animated-beijinho-2baa8b.netlify.app/'
languageCode = 'en-us'
title = 'My new Jamstack site'
theme = 'hyde'要推送更改，您需要运行以下命令。
$ git add .
$ git commit -m “changed baseURL to make it work on Netlify”Netlify很聪明。当它检测到新的提交时，它会自动重新部署您的网站。
如果您现在加载您的站点，它将完美加载。
太棒了！您已经做到了。我知道有很多东西要学习。但是，一旦您做了几次，您会发现整个过程都很直观。
最后的话
Jamstack已经吸引了新时代的开发人员。它提高了性能，同时也改进了网站的部署方式。像Hugo和Netlify这样的优秀生态系统成员，使Jamstack得以发展壮大。毫无疑问，它将继续蓬勃发展。
