XAMPP环境下部署Hexo博客 XAMPP静态网页托管教程

落墨酱_7399

落墨酱_7399

2026-04-29

1032人浏览

原创

hexo生成静态文件,xampp仅托管public目录;不能直接放整个hexo项目进htdocs,因其不支持node.js及源码结构;需配置url和root、启用mod_rewrite并设置.htaccess以解决路径与404问题。

xampp环境下部署hexo博客 xampp静态网页托管教程

Hexo 生成的是纯静态文件,XAMPP 本身不参与 Hexo 构建过程,只负责托管 public 目录下的 HTML/CSS/JS 文件;直接把 public 整个目录丢进 htdocs 就能访问,但默认端口、路径和权限问题会卡住很多人。

为什么不能直接把 hexo init 的整个项目扔进 htdocs

因为 XAMPP 的 Apache 只服务静态资源,不执行 Node.js 环境,也不识别 _config.yml、source/、scaffolds/ 这些 Hexo 源码结构。它只认编译后的输出——也就是运行 hexo generate(或 hexo g)后生成的 public/ 文件夹内容。

常见错误现象:

  • 浏览器打开 http://localhost/ 显示“Index of /”,而不是博客首页
  • 点进某个文章链接变成 404,因为 Apache 默认不支持 Hexo 的伪静态路径(如 /posts/hello-world/)
  • CSS/JS 路径错乱,页面白屏或样式丢失

根本原因:Hexo 默认生成的相对路径假设部署在根域名下(如 https://example.com/),而你若把 public 放在 htdocs/blog/ 子目录,所有资源引用就全偏了。

必须改的两个配置项:url 和 root

在 Hexo 项目根目录的 _config.yml 中,这两个字段决定生成文件里所有链接和资源的前缀,不改它们,本地预览正常,一放进 XAMPP 就崩。

假设你想通过 http://localhost/blog/ 访问博客,那么:

  • url: 必须设为 http://localhost/blog(结尾不加斜杠)
  • root: 必须设为 /blog/(开头和结尾都带斜杠)

改完保存,再执行:

npx hexo clean && npx hexo generate

此时 public/ 下所有 HTML 里的 <link>、<script></script>、文章链接都会带上 /blog/ 前缀,Apache 才能正确定位资源。

XAMPP 8.0.30
XAMPP 8.0.30

XAMPP 8.0.30 是一款免费、开源的跨平台 Web 服务器集成包,专为快速搭建本地 PHP 开发环境而设计。该版本核心组件包括:Apache 2.4.56、MySQL 8.0.33、PHP 8.0.30、phpMyAdmin 5.2.1 等。它支持 Windows、Linux 和 macOS 系统,可让开发者在个人电脑上轻松模拟服务器环境,无需复杂配置即可运行 WordPress、Thin

下载

Apache 不支持 /post/name/ 这种路径?加一个 .htaccess

Hexo 默认用目录形式生成文章页(比如 public/posts/my-post/index.html),对应 URL 是 /posts/my-post/。但 Apache 默认不会自动找子目录下的 index.html,除非开启 DirectoryIndex 并配置重写规则。

在 XAMPP 的 htdocs/blog/(即你放 public 内容的地方)下新建一个 .htaccess 文件,内容如下:

DirectoryIndex index.html
RewriteEngine On
RewriteBase /blog/
RewriteRule ^(.*)/$ /blog/$1/index.html [L]

注意:RewriteBase 必须和你的 root: 配置一致(这里是 /blog/)。如果放在 htdocs/ 根目录,就写 RewriteBase /。

还要确认 XAMPP 的 Apache 已启用 mod_rewrite:打开 apache/conf/httpd.conf,取消这行的注释:

LoadModule rewrite_module modules/mod_rewrite.so

Windows 下 XAMPP 启动失败或端口被占?别硬刚 4000

Hexo 自带的 hexo server 默认用 4000 端口,但 XAMPP 的 Apache 默认用 80 或 443。这两者完全无关,别混淆。

你只需要关心 Apache 是否跑起来:

  • 启动 XAMPP Control Panel,确保 Apache 显示 Running
  • 如果启动失败,大概率是 80 端口被 IIS、Skype 或其他服务占用;改 Apache 端口更稳妥:编辑 apache/conf/httpd.conf,找到 Listen 80 改成 Listen 8080,再改 ServerName localhost:80 为 ServerName localhost:8080
  • 改完重启 Apache,然后访问 http://localhost:8080/blog/

最后提醒一句:每次改完 Hexo 源文件(比如写新文章),都要重新执行 npx hexo generate,再刷新浏览器——XAMPP 不会自动监听源码变化。

相关文章

PHP速学视频免费教程(入门到精通)
PHP速学视频免费教程(入门到精通)

PHP怎么学习?PHP怎么入门?PHP在哪学?PHP怎么学才快?不用担心,这里为大家提供了PHP速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!

下载

相关标签:

xampp

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

相关专题

更多
XAMPP用法详解
XAMPP用法详解

本专题整合了XAMPP相关用法介绍,阅读专题下面的文章了解更多详细内容。

2026.04.08

253

20

XAMPP 安装与快速入门指南
XAMPP 安装与快速入门指南

面向零基础用户,详细介绍 XAMPP 在 Windows、macOS、Linux 三大平台上的下载、安装步骤、首次启动配置、控制面板使用以及 Apache/MySQL 服务的基本启停操作,帮助初学者在最短时间内搭建起可用的本地开发环境。

2026.04.08

230

23

XAMPP Apache 与 MySQL 核心配置实战
XAMPP Apache 与 MySQL 核心配置实战

深入讲解 XAMPP 中 Apache 和 MySQL 的核心配置技巧,包括 httpd.conf 端口修改、虚拟主机(VirtualHost)多站点配置、MySQL 用户权限管理与远程连接设置、php.ini 关键参数调优,以及 SSL 证书的本地配置方法,适合有一定基础的开发者进阶使用。

2026.04.08

425

21

XAMPP 本地项目部署与调试全流程
XAMPP 本地项目部署与调试全流程

以 WordPress、Laravel、ThinkPHP 等主流 PHP 框架和 CMS 为例,演示如何在 XAMPP 环境中完成项目部署、本地域名绑定(hosts配置)、数据库导入、伪静态规则配置以及 Xdebug 断点调试的完整流程,让本地开发与线上环境无缝衔接。

2026.04.08

122

21

XAMPP 常见问题排查与故障解决
XAMPP 常见问题排查与故障解决

汇总 XAMPP 使用过程中最常遇到的故障场景及其解决方案,涵盖 80/443 端口被占用、Apache 或 MySQL 无法启动、phpMyAdmin 访问报错、文件权限不足、日志分析方法等问题,提供逐步排查思路与一键修复技巧,减少开发者的排错时间。

2026.04.08

290

22

XAMPP 安全加固与生产环境迁移
XAMPP 安全加固与生产环境迁移

聚焦 XAMPP 的安全实践与环境迁移,包括修改 MySQL 默认 root 密码、关闭目录列表浏览、限制 phpMyAdmin 外部访问、配置防火墙规则等安全加固措施,同时讲解如何将 XAMPP 本地开发完成的项目平滑迁移部署到 Linux 生产服务器。

2026.04.08

284

30

XAMPP 与 phpMyAdmin 数据库管理实操
XAMPP 与 phpMyAdmin 数据库管理实操

专注于 XAMPP 内置的 phpMyAdmin 数据库管理工具,系统讲解数据库和数据表的创建与设计、SQL 语句执行、CSV/SQL 格式数据的导入导出、定时备份与一键还原、多数据库批量管理等日常操作,帮助开发者高效管理本地 MySQL 数据。

2026.04.08

335

26

Kratos框架Protobuf接口定义与代码生成合集
Kratos框架Protobuf接口定义与代码生成合集

本专题讲解Kratos框架接口定义体系,涵盖proto编写规范、proto add/client/server生成命令、http注解路由、validate校验、OpenAPI文档生成、跨服务proto复用与兼容性设计。

2026.10.10

0

15

C++虚函数怎么定义和调用
C++虚函数怎么定义和调用

C++虚函数是实现运行时多态的重要机制。本专题从virtual关键字的基本用法入手,介绍基类与派生类之间的函数重写、基类指针调用派生类方法,以及动态绑定的执行过程,帮助初学者掌握虚函数的核心语法。

2026.10.10

0

26

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程