通过 Hugo 在本地使用 PHP Web 服务器

设置一个支持 Hugo 的 PHP 本地服务器环境。

通过 Hugo 在本地使用 PHP Web 服务器

更新: 2024年9月30日
作者: Tim
6 阅读时间：分钟
Hugo, php, 设置

Open Server Panel (OSPanel) 是专为 Web 开发人员创建的便携式软件环境。该应用程序在 Windows 操作系统上运行，支持 Apache 和 Nginx 作为 Web 服务器，并提供运行各种版本的 PHP、MySQL、PostgreSQL、MongoDB 和其他流行模块的能力。 OSPanel 是一个非商业项目，免费分发。您可以从官方网站下载适用于 Windows 的此程序。有关安装和配置的详细文档位于[此处](https://github.com/OSPanel/OpenServerPanel/wiki/%D0%94%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%B0%D1%86%D0%B8%D1%8F“OSPanel 文档”)。

1.1.1. 将 Hugo 连接到本地 OSPanel 服务器

例如，将 OSPanel 安装到 D: 驱动器的 OSPanel 文件夹中。 OSPanel 安装后会创建以下目录结构：

. │ └── ospanel_data # 服务文件（设置和配置源）
│ └── bin # 通用可执行文件
│ └── config # 设置
│ └── <module_name> # 模块设置
│ │ └── default # 默认配置文件目录
│ │ │ └── templates # 配置模板
│ │ │ └── settings.ini # 默认配置文件的模块设置
│ │ └── module.ini # 基本模块设置（开/关 + 配置文件名称）
│ └── menu.ini # 菜单设置
│ └── program.ini # 程序设置
│ └── data # 数据存储（数据库等）
│ └── home # 用户项目（域）
│ └── licenses # 第三方组件的许可证
│ └── logs # 日志文件
│ └── domains # 项目日志
│ └── mail # 邮件存储
── modules # 模块
│ └── <module_name> # 主模块目录
│ └── ospanel_data # 服务文件（设置和配置的来源）
── system # 程序的服务目录
│ └── lang # 语言文件
── temp # 临时文件
└── user # 用户数据
└── ssl # 用户 SSL 文件（密钥、证书等）

首先，在 home 目录中创建一个新项目名称的子目录，例如：webpractica。

接下来，在项目的根目录中，创建子目录 .osp 和 public。

项目设置存储在文件 \.osp\project.ini 中。在 .osp 目录中，创建一个项目设置文件 project.ini，其内容如下：

[domain_name]

php_engine = ...
public_dir = {base_dir}\public

将 [domain_name] 替换为您项目所需的域名。

在 php_engine 参数中指定要用于处理此域的 PHP 文件的 PHP 引擎版本。

重要的

[domain_name] 的值必须与 Hugo 项目设置文件 config.toml 中 baseURL 行中指定的域名匹配。

例如，如果 baseURL = "https://www.webpractica.ru/"，则 project.ini 文件的内容应为：

[www.webpractica.ru]

php_engine = PHP-8.3
public_dir = {base_dir}\public

以下是我们示例的目录结构。

D:
└── OSPanel
│── addons # 附加组件
│ └── <add-on_name> # 附加组件主目录
│ └── ospanel_data # 服务文件（设置和配置源）
│ └── bin # 通用可执行文件
│ └── config # 设置
│ └── <module_name> # 模块设置
│ │ └── default # 默认配置文件目录
│ │ │ └── templates # 模板配置
│ │ │ └── settings.ini # 默认配置文件的模块设置
│ │ └── module.ini # 基本模块设置（开/关 + 配置文件名称）
│ └── menu.ini # 菜单设置
│ └── program.ini # 程序设置
│ └── data # 数据存储（数据库等）
│ └── home # 用户项目（域）
│ └── webpractica # 域名示例
│ │ │ └── project.ini # 项目设置文件
│ │ └── public # 存放 Hugo 生成的站点文件夹和文件的目录
│ │ └── licenses # 第三方组件的许可
│ │ └── domains # 项目日志
│ └── mail # 邮件存储
│ └── modules # 模块
│ └── <module_name> # 主模块目录
│ └── ospanel_data # 服务文件（设置和配置的来源）
│ └── system # 程序的服务目录
│ └── lang # 语言文件
│ └── temp # 临时文件
└── user # 用户数据
└── ssl # 用户 SSL 文件（密钥、证书等）

1.1.2.将公共（Public）Hugo目录重定向到本地服务器目录。

为了让Hugo在我们需要的目录中生成文件夹和站点文件，我们需要在Hugo配置文件中的publishDir参数中指定路径。

下面是config.toml文件中的配置，作为我们的示例：

baseURL = "https://www.webpractica.ru/"
publishDir = "D:/OSPanel/home/webpractica/public"

现在，从我们的Hugo项目的根目录执行命令hugo后，站点文件夹和文件将在自定义域OSPanel的目录中生成。

作为我们的示例，我们将在命令行窗口（cmd）中执行：

d:
cd D:\Hugo\Sites\webpractica
hugo --gc --minify

1.2. MAMP

MAMP 是一个用于 macOS 和 Windows 的 Web 开发的本地服务器环境，使用 Apache、Nginx、PHP 和 MySQL，有付费和免费解决方案。

1.2.1. 安装 MAMP

从 [网站](https://www.mamp.info/en/downloads/“下载 MAMP 和 MAMP PRO”) 下载 MAMP 并运行安装。默认情况下，本地安装在 Programs 文件夹中（可以更改安装路径）。

制造商使用户感到困惑，以便将他们引导到付费版本的 MAMP Pro。在 Programs 文件夹中，只有一个 MAMP Pro 版本的图标。MAMP.app 应用程序隐藏在 Programs/MAMP 目录中。但是，启动器上还有一个用于启动 MAMP 版本的图标。该图标具有灰色背景，而 MAMP Pro 版本则具有青绿色背景。

1.2.2. 配置 MAMP

配置 MAMP 并连接到 Hugo 时最重要的是根目录。它在 Server 部分的设置中配置。

单击 MAMP 图标将启动一个最小界面。在这里，您可以设置 Web 服务器 - Apache 或 Nginx - 以及 PHP 版本。左上角的齿轮打开设置对话框。

在“设置”-“常规”部分中，您可以启用“启动服务器”、“检查更新”和“停止服务器”。禁用“缓存”，并且只有在您需要 phpMyAdmin MySQL 数据库时才需要“打开 WebStart 页面”。也可以从应用程序的起始页启动“WebStart”。

您可以保持端口不变。Apache 端口为 8888，Hugo 项目在浏览器中称为 localhost:8888。

在“设置”-“服务器”部分，可以使用“选择”小按钮设置 Hugo 网页的根目录。这是最重要的设置。您可以将项目保存在本地，例如保存在目录 /Users/myWeb/mamp-sites/mySite 中。

设置 - 云 - MAMP 的免费版本无法访问云。如果您选择云，系统将提示您购买付费版本。

1.2.3. 将 Hugo 连接到 MAMP

通常，public 目录的内容通过 sFTP 复制到 Web 服务器的根目录中。Hugo 项目配置文件 config.toml 包含 baseurl 域名参数。

对于本地安装的 MAMP，您需要在 config.toml 中设置：baseURL = ""。

1.2.4. 将 Hugo 公共目录重定向到本地 MAMP 目录

Hugo 项目目录中的 hugo 终端 CLI 命令会创建一个新的 Hugo 网站静态版本。默认情况下，此数据位于 Hugo project/public 目录中。现在您可以在每次构建后将 public 的内容复制到 MAMP 根目录。但这非常不方便。

您可以在 Apple iCloud 等中编辑和保存您的 Hugo 项目。这样就可以从所有具有 iCloud 访问权限的设备访问项目。使用这种方法，MAMP 当然必须在所有设备上的相同路径上安装。

如上所述，例如，MAMP 项目的本地根目录是 /Users/myWeb/mamp-sites/mySite。现在您需要让 Hugo 在创建静态版本时将文件写入此目录。为此，请将行 publishDir = "/Users/myWeb/mamp-sites/mySite" 插入 config.toml。

以下是 config.toml 中的设置示例：

# baseURL = "https://mySite.ru/"
baseURL = ""
publishDir = "/Users/myWeb/mamp-sites/mySite"

1.2.5。 MAMP 日志

如果某些东西不起作用，查看 MAMP 日志会很有用。Apache、MySQL 和 PHP 日志位于 Programs/MAMP/logs 目录中。

1.2.6. 删除 MAMP

可以通过从 Programs 目录中删除 Programs/MAMP 目录和“MAMP PRO.app”应用程序，将 MAMP 以及已安装的 MAMP Pro 完全从 Programs 目录中删除。

1.2.7. 结论

如果您的网站不需要 PHP，那么 Hugo 集成 IDE 就足够了。但如果您需要使用 PHP 进行一些动态操作，MAMP 是一个免费且有效的解决方案。使用 publishDir 进行重定向非常方便。

警告

重要的是，一旦 Hugo 项目发布，您必须记住将 baseURL 参数重新设置为域名。这应该不是问题，因为您不必继续开发 PHP 代码。在某个时候，这部分将完成，您将不再需要运行 MAMP。Hugo IDE 仍然在 localhost:1313 下提供所有内容。

通过 Hugo 在本地使用 PHP Web 服务器