在本地部署一个伪静态博客网站

手把手教你用 Nginx 在本地搭建伪静态博客

大家好，我是33blog的技术博主。今天想和大家分享一个我最近折腾的小项目 – 在本地环境部署一个伪静态博客网站。这个方案特别适合那些想要快速搭建轻量级博客，又不想折腾动态网站框架的朋友。

为什么选择伪静态博客？

记得我刚入行时，为了搭建个人博客，试过WordPress、Typecho等各种动态博客系统。后来发现，对于内容更新不频繁的个人博客来说，静态网站生成器(SSG)才是真香！但有时候我们想要一些”伪动态”的效果，比如URL重写、自定义路由等，这时候伪静态方案就派上用场了。

伪静态博客的特点是：

• 内容实际上是静态HTML文件
• 通过服务器配置实现”动态URL”效果
• 部署简单，性能极高
• 安全性好，没有数据库注入风险

准备工作

我们需要准备以下工具：

• Nginx (我用的1.18.0版本)
• 一个文本编辑器(VSCode或Sublime都行)
• 基础的HTML/CSS知识

如果你是Windows用户，建议使用Nginx官方Windows版；Mac用户可以通过Homebrew安装：

brew install nginx

配置Nginx实现伪静态

这里有个小坑我踩过 – 默认的Nginx配置不支持伪静态，需要手动修改。找到nginx.conf文件(通常在/usr/local/etc/nginx/或/etc/nginx/目录下)，在server块中添加以下配置：

server {
    listen       8080;
    server_name  localhost;

    location / {
        root   html;
        index  index.html;
        try_files $uri $uri/ /index.html;
    }
    
    # 伪静态规则示例 - 将/post/123映射到/post.html?id=123
    location ~ ^/post/(d+)$ {
        rewrite ^/post/(d+)$ /post.html?id=$1 last;
    }
}

这个配置做了两件事：

1. 设置了基本的静态文件服务
2. 添加了一个伪静态规则，将/post/123这样的URL重写到post.html?id=123

创建博客内容

接下来，我们在html目录下创建几个基本文件：

/html
├── index.html
├── post.html
├── about.html
└── assets/
    ├── style.css
    └── main.js

post.html中可以这样获取URL参数：

<script>
// 获取URL参数
const urlParams = new URLSearchParams(window.location.search);
const postId = urlParams.get('id');

// 根据ID加载内容
document.addEventListener('DOMContentLoaded', () => {
    document.getElementById('post-title').innerText = `文章${postId}`;
    // 这里可以添加AJAX请求获取实际内容
});
</script>

本地运行与调试

启动Nginx服务：

nginx

如果修改了配置，需要重新加载：

nginx -s reload

访问http://localhost:8080就能看到你的博客了！试试访问http://localhost:8080/post/123，应该会显示”文章123″。

进阶技巧

1. 美化URL：可以通过更多rewrite规则去掉.html扩展名

2. 预生成静态页：写个简单的脚本批量生成文章页

3. 添加评论系统：集成Disqus或Valine等第三方服务

我自己的博客就用了这个方案，配合Git Hook实现了”git push”自动部署，简直不要太爽！

总结

伪静态博客是个折中的好方案，既保留了静态网站的高性能，又能实现一些动态效果。虽然功能上不如真正的动态博客强大，但对于个人博客来说完全够用了。

如果你在实践过程中遇到问题，欢迎在评论区留言。下次我会分享如何将这个本地博客部署到云服务器上，敬请期待！