如何开发一个简单的博客系统_搭建基础博客网站的流程

9次阅读

推荐用 Hugo 等静态博客生成器而非动态框架,因其编译快、部署简、安全稳定;配合 git+CI 可自动更新,借助 Netlify cms 可视化编辑,markdown 专业可靠;最小步骤包括创建站点、引入主题、写 Markdown、本地预览、ghp-import 部署至 github Pages。

如何开发一个简单的博客系统_搭建基础博客网站的流程

直接用现成的静态博客生成器(比如 HugoJekyll)搭一个可发布的博客网站,比从零写后端+数据库快得多,也更安全稳定。除非你明确想练手全开发,否则不建议自己实现用户登录、文章存储、评论系统这些模块。

选静态生成器还是动态框架?

静态生成器把 Markdown 写的文章编译成纯 html 文件,部署到 GitHub Pages、Vercel 或任意静态托管服务即可访问;动态框架(如 Djangoexpress)需要服务器运行、数据库维护、http 路由和模板渲染——对个人博客属于过度设计。

常见误判点:

  • 以为“静态 = 不能更新”:其实配合 Git 提交 + CI 自动构建,git push 就能刷新网站
  • 以为“没后台就难管理”:可以用 Netlify CMSForestry 接入可视化编辑界面
  • 以为“Markdown 不够专业”:主流技术博客(如 vue 官方文档、rust Book)全靠 Markdown + 静态生成

用 Hugo 搭建的最小可行步骤

Hugo 编译极快、单二进制无依赖、主题生态丰富,适合快速启动。

实操要点:

  • 安装后运行 hugo new site myblog 创建项目目录
  • hugo new theme mytheme 或直接 git submodule add 引入成熟主题(如 anankehello-friend-ng
  • content/posts/first-post.md 里写带 front matter 的 Markdown,例如:
    --- title: "我的第一篇博客" date: 2024-05-20 draft: false ---
  • 运行 hugo server -D 本地预览,hugo 命令生成 public/ 目录用于部署

部署到 GitHub Pages 的关键配置

GitHub Pages 默认只认 gh-pages 分支或 docs/ 目录,但 Hugo 输出的是整个 public/ 内容。容易卡住的环节:

  • 必须在项目根目录创建 .gitignore,排除 public/resources/,否则 git 会报错
  • ghp-import -b gh-pages public(需先 pip install ghp-import)把 public/ 推送到 gh-pages 分支
  • GitHub 仓库 Settings → Pages → Source 选 gh-pages branch / (root)
  • 自定义域名要配 CNAME 文件,并在 dns 设置 A 记录指向 185.199.108.153 等 GitHub IP

真正花时间的不是写代码,而是决定 URL 结构(/posts/xxx 还是 /2024/05/xxx)、选字体、调暗色模式切换逻辑、处理图片懒加载——这些细节才影响读者是否愿意多停留几秒。

text=ZqhQzanResources