开源项目 在 Hugo 中使用 GitFx

gingerhot · 2022年01月06日 · 235 次阅读

文章原文:https://gitx.io/post/hugo-with-gitfx-zh_cn/

GitFx 是我写的一个可以运行多种语言的代码片段的工具。同时提供了 ActionServerless 这个 action 方便在 GitHub 的 workflow 里运行 GitFx。之所以把它命名为 ActionServerless 这样的 “热词”,除了蹭热度之外,你的确可以把用它实现的程序看作是一个 async 的 Serverless 应用。

使用 GitFx/ActionServerless 可以方便快速地为开发、测试创建一个静态资源的 API 服务。而且只需要把代码推到 GitHub 上就可以使用了。

我曾经想在博客中嵌入代码,同时通过一些服务去运行该代码,然后再把结果展示到文章里。可以使用 Docker 创建类似的功能,可以达到类似 Go playground 的那种效果。但是这对于个人博客不但有服务器开销,还会有安全问题。我们现在很多技术博客都是运行在 GitHub pages 上,所以用 GitFx 就方便多了:

  1. 使用 GitFx 运行代码,把运行的输出存到一个路径
  2. 对于 Hugo 的使用者,我们提供了一个 shortcode 插件可以很方便地把插入代码、展示运行结果变成一行代码

这样你就可以轻松地写技术博客了。下面我们通过一个 Hello world 的示例看下如何使用。

Hello world 示例

在 GitHub action 中运行 GitFx

在本例我们把代码放到根目录下的 'app' 目录中。 我们创建一个名为 hello.py 的源文件,写上一行简单的 print("Hello world!") 再加上一行用注释定义的存储输出的文件路径(具体写法可见下文的代码或参考 GitFx 的文档)。

然后我们需要创建一个 GitHub action workflow,其中和 GitFx 有关的部分配置如下:

...
- uses: gitx-io/[email protected]
  with:
    filepath: './app'
...

完整的配置可参考这里

在 Hugo 博客中展示代码和结果

我们提供了一个 Hugo shortcode 的插件 hugo-gitfx 来展示 hello.py 和它的运行结果。你只需要在文章需要插入代码的地方写上:

{{< gitfx "app/hello.py" >}}

然后就会有下面这样的效果:

如果你也恰好使用 Hugo 架设博客,也可以试一下哦!

暂无回复。
需要 登录 后方可回复, 如果你还没有账号请 注册新账号