这里是我的第4篇文章，用来记忆美化博客的过程。

用 GitHub Pages + Jekyll 折腾一个好看一点的个人博客

这篇记录一下我今天把 huanyuheng.github.io 从默认样式，改成现在这个带侧边导航、卡片式文章列表、按钮风格「网址库」页面的过程。主要改了三处：

配置文件 _config.yml
自定义样式 assets/css/style.scss
新建一个 links.md 页面并做成按钮样式的链接库

1. 配置：_config.yml

Jekyll 的站点配置都写在根目录的 _config.yml 里。我最后用的是这样一份配置：

title: 幻欲恒
description: 学习 / 科研 / 工具 / 网址库
theme: minima

# 站点主地址（有自定义域名就写自己的域名）
url: "https://huanyuheng.com"

# 顶部导航要显示的页面（文件名要和仓库里的对应）
header_pages:
  - index.md    # 首页
  - links.md    # 网址库
  - about.md    # 关于
  - archive.md  # 归档

# 首页文章显示摘要
show_excerpts: true

一开始翻车的地方就是： 把这些内容误写到了 links.md 里面，导致：

links.md 不再是一个页面，
/links/ 访问直接 404。

经验：

跟站点相关的配置都写在 _config.yml；
单个页面的东西（标题、布局、永久链接）放在页面自己的 front-matter 里。

2. 自定义主题样式：style.scss

站点用了 minima 主题，然后在 assets/css/style.scss 里做「二次装修」。

文件头两行是 Jekyll 的前言区，接着引入主题默认样式，再覆盖自己的样式：

---
---

/* 先加载 minima 主题的默认样式 */
@import "minima";

完整的 style.scss 内容如下（目前在用的版本）：

---
---

/* 先加载 minima 主题的默认样式 */
@import "minima";

/* ====== 全局基础样式 ====== */

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI",
               "PingFang SC", "Hiragino Sans GB",
               "Microsoft YaHei", "Noto Sans SC", sans-serif;
  background-color: #f3f4f6;
  color: #111827;
  line-height: 1.7;
}

/* 链接色统一一下 */
a {
  color: #2563eb;
  text-decoration: none;
}

a:hover {
  color: #1d4ed8;
  text-decoration: underline;
}

/* ====== 顶部导航条 ====== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: #ffffffcc;
  backdrop-filter: blur(12px);
  border-bottom: 1px solid #e5e7eb;
  box-shadow: 0 4px 18px rgba(15, 23, 42, 0.06);
}

/* 用一个内部容器控制宽度 */
.header-inner {
  max-width: 1120px;
  margin: 0 auto;
  padding: 12px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

/* 兼容 minima 默认 .wrapper */
.site-header .wrapper {
  max-width: 1120px;
}

/* 标题 */
.site-title {
  font-weight: 700;
  font-size: 22px;
  letter-spacing: 0.5px;
}

/* 顶部右侧链接（若使用 .top-nav） */
.top-nav a {
  margin-left: 14px;
  font-weight: 600;
  padding: 6px 10px;
  border-radius: 999px;
}

.top-nav a:hover {
  background: #e5edff;
  text-decoration: none;
}

/* ====== 主体布局：侧边栏 + 正文 ====== */

.site-shell {
  width: 100%;
  max-width: 1120px;
  margin: 0 auto 40px;
  padding: 28px 18px 40px 18px;
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 32px;
  align-items: flex-start;
  justify-content: flex-start;   /* 网格靠容器左边 */
}

/* 大屏幕时整体稍微向左挪一点，让侧边栏更靠页面左边 */
@media (min-width: 1280px) {
  .site-shell {
    margin-left: 60px;
    margin-right: auto;
  }
}

/* minima 默认的 .wrapper 稍微收窄一点 */
.page-content .wrapper {
  max-width: 1120px;
}

/* 主内容区：右侧这一列内部再居中放文章卡片 */
.site-main {
  display: flex;
  justify-content: center;       /* 正文在右侧这一列居中 */
}

.site-main .content-wrapper {
  max-width: 780px;
  width: 100%;
  margin: 0 auto;
}

/* ====== 侧边栏样式 ====== */

.site-sidebar {
  position: sticky;
  top: 76px;
  height: fit-content;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  background: linear-gradient(145deg, #f9fafb, #f3f4f6);
  padding: 16px 14px 10px 14px;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.06);
}

.sidebar-title {
  font-size: 11px;
  color: #6b7280;
  margin: 6px 0 4px 2px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
}

.sidebar-section {
  margin-bottom: 14px;
}

.sidebar-link {
  display: block;
  padding: 8px 10px;
  margin: 2px 0;
  border-radius: 9px;
  font-weight: 600;
  font-size: 14px;
  color: #111827;
  transition: background 0.12s ease, transform 0.08s ease;
}

.sidebar-link:hover {
  background: #ffffff;
  text-decoration: none;
  transform: translateY(-1px);
}

/* 当前页高亮，可在 HTML 里给当前链接加 active 类 */
.sidebar-link.active {
  background: #2563eb;
  color: #ffffff;
}

/* ====== 内容区细节：文章列表卡片化 ====== */

/* 首页 / 归档的列表 */
ul.post-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

ul.post-list > li {
  background: #ffffff;
  border-radius: 14px;
  padding: 1.2rem 1.5rem 1.1rem;
  margin-bottom: 1.3rem;
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.06);
  transition: transform 0.1s ease, box-shadow 0.1s ease;
}

ul.post-list > li:hover {
  transform: translateY(-2px);
  box-shadow: 0 20px 50px rgba(15, 23, 42, 0.08);
}

ul.post-list > li .post-meta {
  font-size: 0.82rem;
  color: #6b7280;
  margin-bottom: 0.35rem;
}

ul.post-list > li .post-link {
  font-size: 1.05rem;
}

/* 单篇文章正文卡片 */
.post, .page {
  background: #ffffff;
  border-radius: 14px;
  padding: 1.6rem 1.8rem 2rem;
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.06);
}

/* 标题间距更舒适一点 */
.post-title, .page-title {
  margin-top: 0.2rem;
  margin-bottom: 0.8rem;
}

/* ====== 页脚 ====== */

.site-footer {
  margin-top: 24px;
  border-top: 1px solid #e5e7eb;
  color: #6b7280;
  font-size: 12px;
  padding: 16px 0 30px 0;
}

.site-footer .wrapper {
  max-width: 1120px;
}

/* ====== links 页面：按钮风格链接 ====== */

.link-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 8px 0 20px 0;
}

.link-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid #d1d5db;
  background: #ffffff;
  font-size: 14px;
  font-weight: 500;
  color: #111827;
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.06);
  cursor: pointer;
  white-space: nowrap;
  min-width: 140px;
  transition:
    background 0.1s ease,
    color 0.1s ease,
    border-color 0.1s ease,
    box-shadow 0.1s ease,
    transform 0.08s ease;
}

.link-button:hover {
  background: #2563eb;
  color: #ffffff;
  border-color: #2563eb;
  text-decoration: none;
  transform: translateY(-1px);
  box-shadow: 0 12px 30px rgba(37, 99, 235, 0.45);
}

/* 小屏幕上按钮一行一个，更好点按 */
@media (max-width: 640px) {
  .link-grid {
    flex-direction: column;
  }
  .link-button {
    justify-content: flex-start;
    width: 100%;
  }
}

/* ====== 移动端：整体单栏布局 ====== */

@media (max-width: 900px) {
  .site-shell {
    grid-template-columns: 1fr;
    padding-top: 18px;
    margin-left: auto;
    margin-right: auto;
  }

  .site-sidebar {
    position: static;
    order: -1;
    margin-bottom: 4px;
  }

  .top-nav {
    display: none; /* 手机上使用侧边栏即可 */
  }

  .post, .page {
    border-radius: 10px;
    padding: 1.2rem 1.2rem 1.5rem;
  }

  ul.post-list > li {
    border-radius: 10px;
  }
}

布局上我在默认 default.html 里，把内容区域包了一层：

<main class="page-content" aria-label="Content">
  <div class="wrapper">
    <div class="site-shell">
      <aside class="site-sidebar">
        <div class="sidebar-section">
  <div class="sidebar-title">导航</div>
  <nav>
    <a class="sidebar-link" href="/">首页</a>
    <a class="sidebar-link" href="/links/">网址库</a>
    <a class="sidebar-link" href="/about/">关于</a>
    <a class="sidebar-link" href="/archive/">归档</a>
  </nav>
</div>

<div class="sidebar-section">
  <div class="sidebar-title">快速入口</div>
  <a class="sidebar-link" href="https://github.com/huanyuheng" target="_blank">GitHub</a>
  <a class="sidebar-link" href="https://www.bilibili.com" target="_blank">哔哩哔哩</a>
</div>

      </aside>
      <div class="site-main">
        <div class="content-wrapper">
          <article class="post h-entry" itemscope itemtype="http://schema.org/BlogPosting">

  <header class="post-header">
    <h1 class="post-title p-name" itemprop="name headline">怎么建博客</h1>
    <p class="post-meta">
      <time class="dt-published" datetime="2025-12-06T14:32:16+00:00" itemprop="datePublished">Dec 6, 2025
      </time></p>
  </header>

  <div class="post-content e-content" itemprop="articleBody">
    <p>怎么建博客
你直接在 <code class="language-plaintext highlighter-rouge">_posts</code> 里新建一个文件：
<code class="language-plaintext highlighter-rouge">2025-12-06-build-blog.md</code></p>

<p>内容就用下面这一整段 markdown（包含 front matter）：</p>

<div class="language-markdown highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nn">---</span>
<span class="na">layout</span><span class="pi">:</span> <span class="s">post</span>
<span class="na">title</span><span class="pi">:</span> <span class="s2">"</span><span class="s">从零到自己的博客：域名、GitHub</span><span class="nv"> </span><span class="s">Pages、博客和网址库"</span>
<span class="na">date</span><span class="pi">:</span> <span class="s">2025-12-06</span>
<span class="nn">---</span>

今天终于把自己的个人主页 + 博客折腾起来了，中间踩了不少小坑，这里做一个完整记录，方便以后自己回顾，也希望能帮到以后想搭博客的自己。
<span class="p">
---
</span>
<span class="gu">## 1. 域名和 GitHub Pages 绑定</span>

<span class="gu">### 1.1 购买域名</span>
<span class="p">
-</span> 在腾讯云买了自己的域名：<span class="sb">`huanyuheng.com`</span>  
<span class="p">-</span> 在 DNS 解析控制台里添加解析记录。

<span class="gu">### 1.2 域名验证（TXT 记录）</span>

GitHub 需要先验证我对域名的所有权，在仓库设置里添加自定义域名时，会给出一条 TXT 记录，例如：
<span class="p">
-</span> 主机记录：<span class="sb">`_github-pages-challenge-xxxx`</span>
<span class="p">-</span> 记录值：<span class="sb">`一串很长的 token`</span>

我在腾讯云 DNS 里：
<span class="p">
1.</span> 新增 <span class="gs">**TXT 记录**</span>，把 GitHub 给的主机记录和记录值填进去；
<span class="p">2.</span> 等待一会儿，在 GitHub 里点“Check again”，显示验证通过。

<span class="gu">### 1.3 CNAME 到 GitHub Pages</span>

之后，在腾讯云 DNS 再添加一个 <span class="gs">**CNAME 记录**</span>：
<span class="p">
-</span> 主机记录：<span class="sb">`@`</span>（或者空）
<span class="p">-</span> 记录值：<span class="sb">`huanyuheng.github.io`</span>

GitHub 仓库这边，在根目录新建 <span class="sb">`CNAME`</span> 文件，内容只有一行：

<span class="p">```</span><span class="nl">text
</span>huanyuheng.com
</code></pre></div></div>

<p>这样 <code class="language-plaintext highlighter-rouge">huanyuheng.com</code> 就指向了 <code class="language-plaintext highlighter-rouge">huanyuheng.github.io</code> 的 GitHub Pages 服务。</p>

<hr />

<h2 id="2-建立-github-pages-仓库和博客">2. 建立 GitHub Pages 仓库和博客</h2>

<h3 id="21-创建仓库">2.1 创建仓库</h3>

<p>GitHub 上新建了一个公开仓库：</p>

<ul>
  <li>仓库名：<code class="language-plaintext highlighter-rouge">huanyuheng.github.io</code>（必须和用户名对应）</li>
</ul>

<p>最开始只是放了一个简单的 <code class="language-plaintext highlighter-rouge">index.html</code>，验证 GitHub Pages 部署正常。</p>

<h3 id="22-启用-jekyll-博客功能">2.2 启用 Jekyll 博客功能</h3>

<p>我想要的是 <strong>博客形式</strong>，而不是单页面，于是用 GitHub 自带的 Jekyll + <code class="language-plaintext highlighter-rouge">minima</code> 主题：</p>

<ol>
  <li>
    <p>新建 <code class="language-plaintext highlighter-rouge">_config.yml</code>，配置大致如下：</p>

    <div class="language-yml highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="na">title</span><span class="pi">:</span> <span class="s">幻欲恒</span>
<span class="na">description</span><span class="pi">:</span> <span class="s">个人博客 · 学习与科研记录</span>
<span class="na">theme</span><span class="pi">:</span> <span class="s">minima</span>

<span class="c1"># 顶部导航显示的页面</span>
<span class="na">header_pages</span><span class="pi">:</span>
  <span class="pi">-</span> <span class="s">index.md</span>
  <span class="pi">-</span> <span class="s">links.md</span>
  <span class="pi">-</span> <span class="s">about.md</span>
  <span class="pi">-</span> <span class="s">archive.md</span>
</code></pre></div>    </div>
  </li>
  <li>
    <p>新建首页 <code class="language-plaintext highlighter-rouge">index.md</code> 作为博客主页：</p>

    <div class="language-md highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nn">---</span>
<span class="na">layout</span><span class="pi">:</span> <span class="s">home</span>
<span class="na">title</span><span class="pi">:</span> <span class="s">幻欲恒的博客</span>
<span class="nn">---</span>

这里会更新我的学习与研究记录。
</code></pre></div>    </div>
  </li>
  <li>
    <p>在 <code class="language-plaintext highlighter-rouge">_posts/</code> 目录里新建第一篇文章，比如：</p>

    <div class="language-md highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nn">---</span>
<span class="na">layout</span><span class="pi">:</span> <span class="s">post</span>
<span class="na">title</span><span class="pi">:</span> <span class="s2">"</span><span class="s">第一篇博客"</span>
<span class="nn">---</span>

这里是我的第一篇文章，用来确认博客发布流程正常。
</code></pre></div>    </div>
  </li>
</ol>

<p>提交后，主页自动显示出了 <strong>Posts 列表</strong>，第一篇文章点击也能打开，这一步说明博客结构跑通了。</p>

<hr />

<h2 id="3-网址库links">3. 网址库（links）</h2>

<p>我希望有一个专门的“网址笔记库”，把常用的网站整理在一个页面里，点一下就能跳转。</p>

<p>新建 <code class="language-plaintext highlighter-rouge">links.md</code>：</p>

<div class="language-md highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nn">---</span>
<span class="na">layout</span><span class="pi">:</span> <span class="s">page</span>
<span class="na">title</span><span class="pi">:</span> <span class="s">网址库</span>
<span class="na">permalink</span><span class="pi">:</span> <span class="s">/links/</span>
<span class="nn">---</span>

<span class="gu">## 学习</span>
<span class="p">-</span> <span class="p">[</span><span class="nv">Google Scholar</span><span class="p">](</span><span class="sx">https://scholar.google.com/</span><span class="p">)</span>{:target="_blank"}
<span class="p">-</span> <span class="p">[</span><span class="nv">Zotero</span><span class="p">](</span><span class="sx">https://www.zotero.org/</span><span class="p">)</span>{:target="_blank"}

<span class="gu">## 科研/工具</span>
<span class="p">-</span> <span class="p">[</span><span class="nv">GitHub</span><span class="p">](</span><span class="sx">https://github.com/</span><span class="p">)</span>{:target="_blank"}
<span class="p">-</span> <span class="p">[</span><span class="nv">Overleaf</span><span class="p">](</span><span class="sx">https://www.overleaf.com/</span><span class="p">)</span>{:target="_blank"}

<span class="gu">## 娱乐</span>
<span class="p">-</span> <span class="p">[</span><span class="nv">哔哩哔哩</span><span class="p">](</span><span class="sx">https://www.bilibili.com/</span><span class="p">)</span>{:target="_blank"}
</code></pre></div></div>

<p>这里用了：</p>

<div class="language-md highlighter-rouge"><div class="highlight"><pre class="highlight"><code>{:target="_blank"}
</code></pre></div></div>

<p>让外部链接在 <strong>新标签页</strong> 打开，而不是把博客当前页面替换掉。</p>

<hr />

<h2 id="4-加侧边栏和导航">4. 加侧边栏和导航</h2>

<p>原始的 <code class="language-plaintext highlighter-rouge">minima</code> 主题是只有上方导航，没有侧边栏的。我想要一个左侧导航栏，可以放：</p>

<ul>
  <li>首页 / 网址库 / 关于 / 归档</li>
  <li>快速入口：GitHub、B 站等</li>
</ul>

<h3 id="41-自定义布局">4.1 自定义布局</h3>

<p>我新增了一个自定义布局 <code class="language-plaintext highlighter-rouge">default.html</code>，替换主题默认布局，让所有页面都套用自己的结构：</p>

<ul>
  <li>顶部是醒目的导航条</li>
  <li>中间是 <strong>左侧侧边栏 + 右侧内容</strong></li>
</ul>

<h3 id="42-侧边栏-_includessidebarhtml">4.2 侧边栏 <code class="language-plaintext highlighter-rouge">_includes/sidebar.html</code></h3>

<p>侧边栏的内容集中放在这里，以后要改导航，改这一份就行，例如：</p>

<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt">&lt;nav</span> <span class="na">class=</span><span class="s">"sidebar-nav"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"sidebar-section"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"sidebar-title"</span><span class="nt">&gt;</span>导航<span class="nt">&lt;/div&gt;</span>
    <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"sidebar-link"</span> <span class="na">href=</span><span class="s">"/"</span><span class="nt">&gt;</span>首页<span class="nt">&lt;/a&gt;</span>
    <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"sidebar-link"</span> <span class="na">href=</span><span class="s">"/links/"</span><span class="nt">&gt;</span>网址库<span class="nt">&lt;/a&gt;</span>
    <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"sidebar-link"</span> <span class="na">href=</span><span class="s">"/about/"</span><span class="nt">&gt;</span>关于<span class="nt">&lt;/a&gt;</span>
    <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"sidebar-link"</span> <span class="na">href=</span><span class="s">"/archive/"</span><span class="nt">&gt;</span>归档<span class="nt">&lt;/a&gt;</span>
  <span class="nt">&lt;/div&gt;</span>

  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"sidebar-section"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"sidebar-title"</span><span class="nt">&gt;</span>快速入口<span class="nt">&lt;/div&gt;</span>
    <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"sidebar-link"</span> <span class="na">target=</span><span class="s">"_blank"</span> <span class="na">href=</span><span class="s">"https://github.com/huanyuheng"</span><span class="nt">&gt;</span>GitHub<span class="nt">&lt;/a&gt;</span>
    <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"sidebar-link"</span> <span class="na">target=</span><span class="s">"_blank"</span> <span class="na">href=</span><span class="s">"https://www.bilibili.com"</span><span class="nt">&gt;</span>哔哩哔哩<span class="nt">&lt;/a&gt;</span>
  <span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/nav&gt;</span>
</code></pre></div></div>

<p>这样，我可以很方便地把常用网站放在左边导航中。</p>

<h3 id="43-自定义样式-assetscssstylescss">4.3 自定义样式 <code class="language-plaintext highlighter-rouge">assets/css/style.scss</code></h3>

<p>为了让侧边栏固定在左侧，而正文区域更舒服，我创建了自定义样式文件，例如：</p>

<div class="language-scss highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt">---</span>
<span class="nt">---</span>

<span class="o">@</span><span class="nt">import</span> <span class="s2">"minima"</span><span class="p">;</span>

<span class="cm">/* 布局：左侧侧边栏 + 右侧内容 */</span>
<span class="nc">.site-shell</span><span class="p">{</span>
  <span class="nl">width</span><span class="p">:</span> <span class="m">100%</span><span class="p">;</span>
  <span class="nl">max-width</span><span class="p">:</span> <span class="nb">none</span><span class="p">;</span>
  <span class="nl">margin</span><span class="p">:</span> <span class="m">0</span><span class="p">;</span>
  <span class="nl">padding</span><span class="p">:</span> <span class="m">28px</span> <span class="m">18px</span> <span class="m">10px</span> <span class="m">18px</span><span class="p">;</span>
  <span class="nl">display</span><span class="p">:</span> <span class="n">grid</span><span class="p">;</span>
  <span class="na">grid-template-columns</span><span class="p">:</span> <span class="m">240px</span> <span class="m">1fr</span><span class="p">;</span>
  <span class="na">gap</span><span class="p">:</span> <span class="m">22px</span><span class="p">;</span>
<span class="p">}</span>

<span class="cm">/* 侧边栏样式 */</span>
<span class="nc">.site-sidebar</span><span class="p">{</span>
  <span class="nl">position</span><span class="p">:</span> <span class="n">sticky</span><span class="p">;</span>
  <span class="nl">top</span><span class="p">:</span> <span class="m">70px</span><span class="p">;</span>
  <span class="nl">border</span><span class="p">:</span> <span class="m">1px</span> <span class="nb">solid</span> <span class="mh">#eee</span><span class="p">;</span>
  <span class="nl">border-radius</span><span class="p">:</span> <span class="m">12px</span><span class="p">;</span>
  <span class="nl">background</span><span class="p">:</span> <span class="mh">#fafafa</span><span class="p">;</span>
  <span class="nl">padding</span><span class="p">:</span> <span class="m">14px</span> <span class="m">14px</span> <span class="m">6px</span> <span class="m">14px</span><span class="p">;</span>
<span class="p">}</span>

<span class="cm">/* 正文宽度控制 */</span>
<span class="nc">.site-main</span> <span class="nc">.content-wrapper</span><span class="p">{</span>
  <span class="nl">max-width</span><span class="p">:</span> <span class="m">820px</span><span class="p">;</span>
  <span class="nl">width</span><span class="p">:</span> <span class="m">100%</span><span class="p">;</span>
<span class="p">}</span>
</code></pre></div></div>

<p>还有顶部导航的加粗、高亮等等，就不一一展开。</p>

<hr />

<h2 id="5-以后怎么发新博客和维护">5. 以后怎么发新博客和维护</h2>

<p>折腾完这些之后，日常使用就非常简单了：</p>

<h3 id="51-发新博客">5.1 发新博客</h3>

<ol>
  <li>在 <code class="language-plaintext highlighter-rouge">_posts/</code> 里新建文件：<code class="language-plaintext highlighter-rouge">YYYY-MM-DD-标题.md</code></li>
  <li>
    <p>内容模板：</p>

    <div class="language-md highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nn">---</span>
<span class="na">layout</span><span class="pi">:</span> <span class="s">post</span>
<span class="na">title</span><span class="pi">:</span> <span class="s2">"</span><span class="s">文章标题"</span>
<span class="nn">---</span>

正文内容……
</code></pre></div>    </div>
  </li>
</ol>

<p>提交以后，首页 <code class="language-plaintext highlighter-rouge">Posts</code> 区域会自动出现新文章。</p>

<h3 id="52-维护网址库">5.2 维护网址库</h3>

<ul>
  <li>只要编辑 <code class="language-plaintext highlighter-rouge">links.md</code>，按 Markdown 格式继续往下面加条目即可；</li>
  <li>想要新标签页打开，就在链接后加 <code class="language-plaintext highlighter-rouge">{:target="_blank"}</code>。</li>
</ul>

<h3 id="53-导航--侧边栏">5.3 导航 / 侧边栏</h3>

<ul>
  <li>顶部导航：由 <code class="language-plaintext highlighter-rouge">_config.yml</code> 的 <code class="language-plaintext highlighter-rouge">header_pages</code> 控制；</li>
  <li>左侧导航：改 <code class="language-plaintext highlighter-rouge">_includes/sidebar.html</code> 就能全部生效。</li>
</ul>

<hr />

<h2 id="6-小结">6. 小结</h2>

<p>今天做完的事情大概有：</p>

<ol>
  <li>买域名并和 GitHub Pages 绑定成功；</li>
  <li>使用 Jekyll + minima 主题搭建了一个完整的博客结构；</li>
  <li>建好了一个“网址库”页面，方便集中管理常用网站；</li>
  <li>自定义了布局：顶部导航 + 左侧侧边栏；</li>
  <li>解决了链接在新标签页打开的问题；</li>
  <li>整理了以后发博客、更新网址库的固定流程。</li>
</ol>

<p>接下来，这个站可以用来做：</p>

<ul>
  <li>γ 源定位 / 超表面 / 微型光谱等方向的<strong>研究笔记</strong>；</li>
  <li>自己常用工具、文献网站、软件的<strong>网址整理</strong>；</li>
  <li>以后也可以加“日记 / 随笔 / 教程”等模块，把它当成一个长期维护的<strong>个人知识库</strong>。</li>
</ul>

<p>总之，今天算是把基础设施搭起来了，后面要做的，就是持续往里面“填内容”。</p>

<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>
你把这个文件保存到 `_posts` 目录下，提交后博客首页就会出现这篇总结。
::contentReference[oaicite:0]{index=0}
</code></pre></div></div>

  </div><a class="u-url" href="/2025/12/06/build-blog.html" hidden></a>
</article>

        </div>
      </div>
    </div>
  </div>
</main>

侧边栏的 HTML 放在 _includes/sidebar.html 里，里面就是几组链接而已。

3. 网址库页面：links.md

然后就是这次改动里比较显眼的一页：按钮风格的「网站库」。

根目录新建 links.md（或者用 GitHub 的 Add file），内容如下：

---
layout: page
title: 网站库
permalink: /links/
---

## 学习

<div class="link-grid">
  <a class="link-button" href="https://scholar.google.com" target="_blank">Google Scholar</a>
  <a class="link-button" href="https://www.zotero.org" target="_blank">Zotero</a>
</div>

## 科研 / 工具

<div class="link-grid">
  <a class="link-button" href="https://github.com" target="_blank">GitHub</a>
  <a class="link-button" href="https://www.overleaf.com" target="_blank">Overleaf</a>
</div>

## 娱乐

<div class="link-grid">
  <a class="link-button" href="https://www.bilibili.com" target="_blank">哔哩哔哩</a>
</div>

注意几点：

开头的三条 front-matter：layout / title / permalink 很重要；
permalink: /links/ 对应的就是浏览器访问的 /links/；
正文部分直接用 HTML 标签 <div> + <a>，然后配合 style.scss 里 .link-grid 和 .link-button 的样式，就能显示成一排排圆角按钮。

4. 小坑总结

今天踩到/顺手解决的几个点：

配置和页面混淆
- _config.yml：站点级别的东西；
- *.md：单个页面，自己有自己的 front-matter。
404 调试办法 如果新建了一个页面，但是 /xxx/ 访问 404：
- 先看 links.md 这类页面的 front-matter 有没有写错；
- 再去仓库右侧 Deployments → github-pages 看构建是否是绿色的 deployed。如果是红色 failed，点进去会看到具体哪一行出错。
CSS 一定要补全大括号 之前在 @media 里面打断了一个 .pos，忘记关 }，后面的所有样式都不生效了。这种时候浏览器按 F12 看一下 Console，会提示哪一行 CSS 解析失败，很快能定位。

现在整体效果：

顶部是透明模糊的导航条；
左侧是固定的圆角侧边导航卡片；
右侧文章和页面都是白色卡片、有阴影；
/links/ 页面用按钮形式整理常用网站。

后面有空再折腾一下文章页的代码高亮、数学公式、以及自动生成的归档页，就可以当一个轻量级的学习/科研博客来用了。