技术范

0成本搭建独立技术博客网站

Posted on 2025-06-25

概述

作为开发者，你是不是每天都会在查阅资料的时候浏览别人那些设计精美、内容硬核的独立技术博客？看着别人分享的代码解析、架构思考、开源项目，是否也曾想过——“我也该有一个这样的博客网站” ？

别再犹豫了！零成本、零服务器、零运维 ，只需一点代码和Markdown，你就能拥有一个高速、自由、完全可控的技术博客。用Jekyll 生成静态页面，用GitHub Pages 托管全球访问，无需担心数据库、服务器、CDN，甚至域名都可以先不买——你的技术表达，值得被更多人看见。

现在，就让我们用开发者最熟悉的方式，从命令行开始，构建你的数字名片吧！

常规思路

如果让你搭建一个独立技术博客时，脑海中浮现的方案很可能是这样的：

img

  1. 购买云服务器

  • 选购阿里云/腾讯云/AWS的ECS
  • 纠结配置：1核1G还是2核4G？
  • 比较年付优惠，最终花费500-1000元/年

  1. 搭建运行环境

  • 配置Nginx虚拟主机
  • 调试PHP与MySQL连接
  • 申请SSL证书配置HTTPS

  1. 安装博客系统

  • WordPress ：占全球43%网站份额
  • Typecho ：轻量级PHP博客
  • Hexo ：需要Node.js环境

  1. 日常维护

  • 凌晨3点的MySQL崩溃告警
  • WordPress插件安全漏洞
  • 蜘蛛爬虫耗尽服务器资源
  • 数据备份焦虑

这套方案最大的悖论在于：你只是想写博客，却不得不先成为运维专家 。每次想写新文章时，都要先解决一堆技术问题。

那怎么办？没关系，我有绝招教你！

Github Pages

  1. Github Pages是什么？

GitHub Pages 本质上是一个开箱即用的托管服务 —— 你可以把它理解为 GitHub 官方维护的、面向所有人免费开放的 Nginx 服务器。你的代码仓库就是它的网站根目录，每次提交代码都会自动触发部署，就像把静态文件直接上传到一台配置完善的 Web 服务器上一样简单。

你可以在这个Nginx上可以部署任何静态的HTML页面，甚至Github还给你提供一个免费的公网域名~

img

  1. GitHub 为什么提供这个功能？

GitHub 的核心是代码协作，而开发者除了写代码，还需要展示代码的成果、分享技术见解。GitHub Pages 的初衷很简单：

  • 降低技术分享的门槛：让开发者专注于内容，而不是折腾服务器；
  • 无缝衔接开源生态：项目文档、教程、Demo 页面可以直接和代码仓库绑定，形成闭环；
  • 推广 GitHub 生态：吸引更多人用 GitHub 管理内容，形成社区效应。

  1. 为什么用它搭技术博客？

  2. 零成本启动：不需要租 VPS 或备案域名（当然也支持自定义域名），一个 GitHub 账号就是全部“基础设施”。
  3. 极简工作流：写文章 = 提交 Markdown 文件，更新博客 = git push，内容和代码版本同步管理，再也不会遇到“本地稿子丢了”的悲剧。
  4. 天生适合技术人：如果你习惯用 Git，那它就是最自然的博客工具；如果还不熟悉 Git，正好借此学习——毕竟，哪个开发者能绕开版本控制呢？
  5. 可扩展性：虽然开箱即用是静态页面，但通过简单的配置，能实现主题、分页、标签等动态功能，甚至用 GitHub Actions 自动化构建。

GitHub Pages 当然不是万能的，但它对技术博客来说刚刚好。

如果你只是写写技术文章、记录学习笔记，或者展示项目文档，GitHub Pages 的轻量和简洁反而成了优势。不用操心服务器维护，不用怕数据库崩掉，改几个文件、推一次代码，更新就生效了。

  1. Github Pages怎么用？

  2. 创建专属仓库

新建Github仓库，命名必须为：<username>.github.io（例如用户devuser就命名为devuser.github.io）

https://github.com/new

img

试试这个：https://github.com/flyforeverth/flyforeverth.github.io

  1. 克隆仓库到本地

git clone https://github.com/devuser/devuser.github.io

  1. 添加HTML文件

在仓库根目录创建index.html：

<!DOCTYPE html>
<html>
<body>
  <h1>Hello World!</h1>
</body>
</html>

  1. 推送代码

提交代码到GitHub：

git add .
git commit -m "First website"
git push -u origin main

  1. 自动生效

访问 https://<username>.github.io（首次部署约等待1-2分钟）

试试这个：https://flyforeverth.github.io/

  1. 自定义域名

Github默认提供<username>.github.io形式的域名供页面访问，如果你自己有域名，可以在自己的域名上添加一个CNAME记录。

比如将flyforeverth.dewu.com通过CNAME记录映射到flyforeverth.github.io，后续就可以使用flyforeverth.dewu.com来打开Github Pages啦。

img

Jekyll模板引擎

  1. Jekyll是什么？

Jekyll 是一个静态站点生成器，内置 GitHub Pages 支持和简化的构建过程。 Jekyll 使用 Markdown 和 HTML 文件，并根据您选择的布局创建完整静态网站。 Jekyll 支持 Markdown 和 Lick，这是一种可在网站上加载动态内容的模板语言。 有关详细信息，请参阅 Jekyll。

img

  1. Jekyll怎么用？

  2. 本地安装 Jekyll 工具链

# 安装 Ruby（版本 ≥ 2.5）
brew install ruby               # macOS

# 安装 Jekyll 和 Bundler
gem install jekyll bundler

# 验证安装
jekyll -v  # 应输出版本号（如 4.3.2）

  1. 挑选现成博客主题

推荐从这些热门主题起步：

网上浏览别人博客的时候，只要发现别人的博客域名是github.io结尾，那大概率也是基于Jekyll架设的个人博客。

你就用域名的第一段userName去搜索用户，然后去把他的博客仓库克隆下来，改吧改吧你就可以用了。

  1. 克隆主题到本地

以 Minimal Mistakes 为例：

git clone https://github.com/mmistakes/minimal-mistakes.git myblog
cd myblog
bundle install  # 安装依赖

⚠️ 注意：删除原主题的 .git 文件夹（避免冲突）：

rm -rf .git

  1. 修改个人信息

关键配置文件：_config.yml

title: "你的博客名"  
description: "这里是博客描述"  
url: "https://你的用户名.github.io"  

author:
  name: "你的名字"
  avatar: "/assets/images/avatar.jpg"  # 替换头像图片
  links:
    - label: "GitHub"
      icon: "fab fa-github"
      url: "https://github.com/你的用户名"

  1. 预览静态网站

bundle exec jekyll serve  # 本地启动

访问 http://localhost:4000 预览效果：

自动化

我们现在有了一个可以公网访问Nginx、博客也变成成了静态网站(HTML/CSS/JS)，现在就是要想办法将这个静态网站部署到Nginx了！

借助Github提供的【持续集成】能力和对Jekyll的原生支持，我们可以实现，代码push就编译。

  1. 切换部署源

img

  1. 配置CI工作流

imgimg

  1. 推送Jekyll项目到仓库

将上述基于【Jekyll模板】修改的个人站点代码，推送到Github Pages仓库。

等待几分钟，就可以看到你的博客站点啦~

总结

好了，你现在可以开始写自己的技术博客了！

参考

  1. 关于 GitHub 页面和 Jekyll - GitHub 文档
  2. Jekyll使用指南
目录
    标签
    Java 代码风格 Linux 字符编码 Dubbo 编解码 JVM RPC 实用技巧