关于本文的介绍，请查看第一部分。
部署到Heroku
如果你没有使用Netlify，你需要选择一个供应商来托管API。许多云计算供应商同时支持PAAS和FAAS模式，我们可以自由决定采取什么方式来部署我们的网站。因为Netlify使用FAAS解决方案，所以我们展示的是PAAS解决方案。Heroku被用作PAAS平台，尽管我们很少使用它的功能，因此代码应该可以在我们选择的任何PAAS平台上运行。
Heroku与Node.js生态系统和GitHub都有集成，使我们的部署工作变得简单。Heroku还为我们的代码提供了持续的集成和部署，而不需要我们在GitHub的行动中写任何东西，这使我们的工作变得更加容易。配置完成后，我们需要将代码推送到GitHub，使其在Heroku中上线。
- 一旦你注册了Heroku，你就会进入dashboard.heroku.com/apps，在那里你可以…
图7.在Heroku中创建一个新的应用程序来承载我们的API
- 接下来，我们需要给这个应用程序起一个名字。应用程序的名字在Heroku中是唯一的。latex2svg已被保留给本文。
图8.给Heroku中的应用程序起一个名字
- 现在我们可以决定集成的模式。直接与GitHub集成是最简单的，我们的用例就采用这种方式。要连接到GitHub，你可以进入部署>部署方式>GitHub，然后点击连接到GitHub
图9.连接Heroku和GitHub
- 提供凭证后，我们可以搜索要连接到Heroku的仓库，选择正确的仓库，然后点击连接。
图10.从GitHub找到并连接正确的仓库到Heroku
- 在触发部署之前，我们需要进入设置标签，在Buildpacks部分选择node.js。因为我们同时有
go.sum和package.json，Heroku会感到困惑。
图11.Heroku的设置选项卡包含Buildpacks，这是Heroku的编程平台的配置。
我们的API需要node.js Buildpack。
图12.Heroku支持多种平台来部署我们的应用程序。Node.js是其中之一，它是让我们的MathJax代码启动和运行所需要的。
- 在设置中，还有一个config vars部分，我们可以在这里定义我们的环境变量。我们需要定义LATEX2SVG_PASSWORD来获取密码以限制访问。
图13.Hugo中的config vars是作为环境变量传递给运行中的代码的。
- 一旦构建设置完成，我们就可以从Deploy>Manual Deploy触发部署了。在开启自动部署之前，我们应该先做一次手动部署，以验证一切是否正确。
图14.Heroku中的手动和自动部署。手动部署应该用于验证，一旦我们知道一切正常，我们就可以回到自动部署。
代码上线后，我们可以调用https://<endpoint>.herokuapp.com/latex2svg?tex=%5Cfrac%7Ba%7D%7Bb%7D&password=<password> ，得到与之前在本地运行时相同的响应。
图15.当我们在Heroku中触发手动部署时，会提供一步一步的进展，直到一切准备就绪。
我们可以通过查看应用程序的日志来解决任何问题，日志在右上方的更多菜单中提供，我们可以点击查看日志
图16.查看Heroku上的日志。Heroku提供了对机器日志和构建日志的单独访问，我们可以进入这些日志来找出问题。
图17.Heroku中运行的node.js进程的日志样本。我们可以使用console.log来获取node.js的所有日志。所有的崩溃和错误日志也都可以得到。
单一资源库与独立的API和标记资源库的比较
我们决定将用于网站的仓库也用于API代码。这有一个明显的缺点，就是把不必要的标记代码推送到Heroku，每次基于标记的文件有变化时，都要重建基于Heroku的API。如果这变成了一个大问题，我们可以选择为API建立一个单独的分支，或者一个单独的仓库。我们也可以改变我们的整合，通过GitHub的行动而不是直接的Heroku导入，我们可以建立智能来识别API是否有变化。如果API不经常变化，我们可以转为手动部署。
选择一个单一的repo与Hugo或Jamstack没有关系。这是一个个人偏好的问题。Netlify在一个版本库中工作得更好，如果使用单版本库，管理跨API的变化和它们在核心模板代码中的调用可能会更容易。
创建渲染LaTeX的短代码
有了一个功能性的API，在网站上呈现LaTeX所需的主要工作就完成了。我们需要调用它，然后渲染结果。现在我们需要创建一个短码来调用API并在基于Hugo的网站上显示结果。
虽然我们在编译时使用API，但如果我们想在运行时使用它们，设置API的步骤是完全一样的。我们不通过Hugo调用API，而是使用fetch函数。
在短码中，我们把LaTeX代码作为短码的内部内容，然后调用latex2svg API来获取这个LaTeX文档的SVG版本，我们可以使用resources.FromString ，将其转换为资源，或者内联渲染为SVG文档。在我们的用例中，我们将内联渲染SVG。
尽管在使用Netlify的情况下，我们可以在端点中使用site.baseURL ，但当网站之前从未被推送上线时，它对编译时的API访问不起作用。这就导致需要有两次部署--一次是为了让功能上线，第二次是为了调用它。除非从JavaScript调用，否则最好在配置中为API设置一个固定的URL。
API的其他参数可以被转换为短码的参数。我们使用官方MathJax文档中提供的默认值：docs.mathjax.org/en/latest/w…
相应的文件也存在于资源中(https://github.com/hugoinaction/hugoinaction/tree/ch11-resources/4)
{{/* layouts/shortcodes/latex.html */}}
{{/* layouts/shortcodes/latex.html */}}
{{/* defaults taken from http://docs.mathjax.org/en/latest/web/typeset.html
{{/* a Boolean specifying whether the math is in display-mode or inline mode */
{{ $display := true }}
❶ 用有意义的默认值设置所有参数
❷ 如果没有 LATEX2SVG_PASSWORD 或没有定义端点，不允许调用服务器。
❸ 嵌入数据，不对 SVG 内容进行内联转义。
接下来，我们需要在网站配置中输入Latex2Svg端点，这取决于你是使用Heroku还是Netlify进行部署。
# config/_default/params.yaml
Latex2Svg: https://<endpoint>.herokuapp.com/latex2svg
# or
Latex2Svg: https://<endpoint>/.netlify/functions/latex2svg
如果我们不想调用云服务，我们可以在config/development/params.yaml里面使用http://localhost:3000/latex2svg作为URL。我们也可以在开发过程中通过将其设置为空白来禁用该调用。
在我们的网站上添加一些Latex
在完成了所有的辛勤工作后，我们要做的就是在我们的网站上编写一些Latex。在我们的博客中，我们有一个关于三角形的页面。
让我们在那里添加三角形的面积公式。
<!-- content/blog/tropical triangles/index.md -->
{{< latex>}}\text{Area} = \frac{b \times h}{2}{{</latex>}}
让我们在圆中做同样的事情。
content/blog/community/circle.md ->
{{< latex>}}\text{Area} = \pi r^2{{}}。
我们还可以做复杂的数学方程，比如贝塞尔曲线的数学定义：
{{< latex>}}
<!-- content/blog/community/curve.md -->
\mathbf {B} (t)=\sum _{i=0}^{n}{n \choose i}(1-t)^{n-i}t^{i}\mathbf {P} _{i}
{{</ latex>}}
我们也可以做内联的LaTeX：
<!-- content/blog/community/circle.md -->
The area of a circle is {{<latex display="false">}} \pi r^2 {{</latex>}}
图18.在网站的曲线网页中，LaTeX被渲染成SVG。使用编译时的API访问，我们可以将LaTeX转换成SVG，而不需要在客户端使用任何JavaScript。
| 代码检查点。 在https://ch11-2.hugoinaction.com 上直播。 源代码在github.com/hugoinactio… |
