如何在GitHub Pages上用Jekyll搭建含博客板块的主网站？

方案一：单仓库多目录整合（最直接） #

GitHub Pages允许你在同一个绑定自定义域名的仓库（通常是username.github.io）里同时部署主网站和博客，核心是通过Jekyll的目录结构和配置区分内容：

1. 调整项目结构

   • 主网站的页面、样式、配置等文件保留在仓库根目录
   • 博客文章统一放在/_posts目录（Jekyll默认的博客文章目录），或者新建/_blog目录作为自定义集合
   • 新增blog.html作为博客板块的入口页面，在这个页面里编写Jekyll循环逻辑展示博客列表：

     ---
     layout: default
     title: 博客
     ---
     <h1>我的博客</h1>
     {% for post in site.posts %}
       <div class="post-item">
         <h2><a href="{{ post.url }}">{{ post.title }}</a></h2>
         <p>{{ post.date | date_to_string }} | {{ post.excerpt }}</p>
       </div>
     {% endfor %}
     

2. 配置Jekyll路由
   如果用默认的/_posts，Jekyll会自动生成/年份/月份/日期/文章标题.html的路径，你可以在_config.yml里修改permalink规则，让博客路径更简洁：

   permalink: /blog/:title/
   

   这样所有博客文章都会生成在yourdomain.com/blog/文章标题路径下。

   要是用自定义集合（比如/_blog），需要在_config.yml里添加：

   collections:
     blog:
       output: true
       permalink: /blog/:title/
   

   此时博客文章要放在/_blog目录，入口页面的循环逻辑改成{% for post in site.blog %}。

3. 本地验证与部署
   运行bundle exec jekyll serve本地测试，确认localhost:4000/blog能正常访问博客列表和文章，没问题后推送到GitHub Pages仓库即可。

方案二：子仓库反向代理（适合主站与博客分开维护） #

如果想把主站和博客放在不同仓库，可通过主站仓库的自定义域名配置反向代理：

1. 分别部署主站与博客

   • 主站仓库（username.github.io）绑定自定义域名，正常部署主站内容
   • 博客仓库（比如username/blog）开启GitHub Pages，默认路径为username.github.io/blog

2. 主站添加反向代理规则
   在主站仓库的根目录新建_redirects文件（需启用jekyll-redirect-from插件），添加规则：

   /blog/* https://username.github.io/blog/:splat 200
   

   这样访问yourdomain.com/blog/xxx会自动转发到博客仓库的对应页面，用户看不到真实的GitHub Pages子域名。

更优替代方案 #

如果GitHub Pages的限制让你觉得麻烦，可以考虑用Netlify、Vercel这类静态站点托管平台：

• 支持多个站点绑定同一个域名的不同路径（比如主站在根域名，博客在/blog路径）
• 自动构建部署，支持分支预览，比GitHub Pages更灵活
• 无需担心单仓库的内容臃肿，主站和博客可以分开维护，通过平台的路由配置整合

内容的提问来源于stack exchange，提问作者msemaska