2025-12-07 ·

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

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

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

  1. 配置文件 _config.yml
  2. 自定义样式 assets/css/style.scss
  3. 新建一个 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">
          

<!DOCTYPE html>

<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=Edge">

  <link rel="stylesheet" href="/assets/css/just-the-docs-default.css">

  <link rel="stylesheet" href="/assets/css/just-the-docs-head-nav.css" id="jtd-head-nav-stylesheet">

  <style id="jtd-nav-activation">
  
    .site-nav ul li a {
      background-image: none;
    }

  </style>

  

  
    <script src="/assets/js/vendor/lunr.min.js"></script>
  

  <script src="/assets/js/just-the-docs.js"></script>

  <meta name="viewport" content="width=device-width, initial-scale=1">

  



  <!-- Begin Jekyll SEO tag v2.8.0 -->
<title>怎么建博客 | 幻欲恒知识库</title>
<meta name="generator" content="Jekyll v3.10.0" />
<meta property="og:title" content="怎么建博客" />
<meta property="og:locale" content="zh_CN" />
<meta name="description" content="怎么建博客 你直接在 _posts 里新建一个文件： 2025-12-06-build-blog.md" />
<meta property="og:description" content="怎么建博客 你直接在 _posts 里新建一个文件： 2025-12-06-build-blog.md" />
<link rel="canonical" href="https://huanyuheng.com/2025/12/06/build-blog.html" />
<meta property="og:url" content="https://huanyuheng.com/2025/12/06/build-blog.html" />
<meta property="og:site_name" content="幻欲恒知识库" />
<meta property="og:type" content="article" />
<meta property="article:published_time" content="2025-12-06T14:32:16+00:00" />
<meta name="twitter:card" content="summary" />
<meta property="twitter:title" content="怎么建博客" />
<script type="application/ld+json">
{"@context":"https://schema.org","@type":"BlogPosting","dateModified":"2025-12-06T14:32:16+00:00","datePublished":"2025-12-06T14:32:16+00:00","description":"怎么建博客 你直接在 _posts 里新建一个文件： 2025-12-06-build-blog.md","headline":"怎么建博客","mainEntityOfPage":{"@type":"WebPage","@id":"https://huanyuheng.com/2025/12/06/build-blog.html"},"url":"https://huanyuheng.com/2025/12/06/build-blog.html"}</script>
<!-- End Jekyll SEO tag -->


  

</head>

<body>
  <a class="skip-to-main" href="#main-content">Skip to main content</a>
  <svg xmlns="http://www.w3.org/2000/svg" class="d-none">
  <symbol id="svg-link" viewBox="0 0 24 24">
  <title>Link</title>
  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-link">
    <path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path>
  </svg>
</symbol>

  <symbol id="svg-menu" viewBox="0 0 24 24">
  <title>Menu</title>
  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-menu">
    <line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="18" x2="21" y2="18"></line>
  </svg>
</symbol>

  <symbol id="svg-arrow-right" viewBox="0 0 24 24">
  <title>Expand</title>
  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-right">
    <polyline points="9 18 15 12 9 6"></polyline>
  </svg>
</symbol>

  <!-- Feather. MIT License: https://github.com/feathericons/feather/blob/master/LICENSE -->
<symbol id="svg-external-link" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-external-link">
  <title id="svg-external-link-title">(external link)</title>
  <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path><polyline points="15 3 21 3 21 9"></polyline><line x1="10" y1="14" x2="21" y2="3"></line>
</symbol>

  
    <symbol id="svg-doc" viewBox="0 0 24 24">
  <title>Document</title>
  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-file">
    <path d="M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"></path><polyline points="13 2 13 9 20 9"></polyline>
  </svg>
</symbol>

    <symbol id="svg-search" viewBox="0 0 24 24">
  <title>Search</title>
  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-search">
    <circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line>
  </svg>
</symbol>

  
  
    <!-- Bootstrap Icons. MIT License: https://github.com/twbs/icons/blob/main/LICENSE.md -->
<symbol id="svg-copy" viewBox="0 0 16 16">
  <title>Copy</title>
  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-clipboard" viewBox="0 0 16 16">
    <path d="M4 1.5H3a2 2 0 0 0-2 2V14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3.5a2 2 0 0 0-2-2h-1v1h1a1 1 0 0 1 1 1V14a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3.5a1 1 0 0 1 1-1h1v-1z"/>
    <path d="M9.5 1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5h3zm-3-1A1.5 1.5 0 0 0 5 1.5v1A1.5 1.5 0 0 0 6.5 4h3A1.5 1.5 0 0 0 11 2.5v-1A1.5 1.5 0 0 0 9.5 0h-3z"/>
  </svg>
</symbol>
<symbol id="svg-copied" viewBox="0 0 16 16">
  <title>Copied</title>
  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-clipboard-check-fill" viewBox="0 0 16 16">
    <path d="M6.5 0A1.5 1.5 0 0 0 5 1.5v1A1.5 1.5 0 0 0 6.5 4h3A1.5 1.5 0 0 0 11 2.5v-1A1.5 1.5 0 0 0 9.5 0h-3Zm3 1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5h3Z"/>
    <path d="M4 1.5H3a2 2 0 0 0-2 2V14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3.5a2 2 0 0 0-2-2h-1v1A2.5 2.5 0 0 1 9.5 5h-3A2.5 2.5 0 0 1 4 2.5v-1Zm6.854 7.354-3 3a.5.5 0 0 1-.708 0l-1.5-1.5a.5.5 0 0 1 .708-.708L7.5 10.793l2.646-2.647a.5.5 0 0 1 .708.708Z"/>
  </svg>
</symbol>

  
</svg>

  
    <header class="side-bar">
  <div class="site-header">
    <a href="/" class="site-title lh-tight">
  幻欲恒知识库

</a>
    <button id="menu-button" class="site-button btn-reset" aria-label="Menu" aria-expanded="false">
      <svg viewBox="0 0 24 24" class="icon" aria-hidden="true"><use xlink:href="#svg-menu"></use></svg>
    </button>
  </div>

  <nav aria-label="Main" id="site-nav" class="site-nav">
  
  
    <ul class="nav-list"><li class="nav-list-item"><a href="/" class="nav-list-link">书房</a></li><li class="nav-list-item"><button class="nav-list-expander btn-reset" aria-label="工具方法 submenu" aria-expanded="false">
        <svg viewBox="0 0 24 24" aria-hidden="true"><use xlink:href="#svg-arrow-right"></use></svg>
      </button><a href="/methods/" class="nav-list-link">工具方法</a><ul class="nav-list"><li class="nav-list-item"><a href="/methods/site-building/" class="nav-list-link">建站与发布</a></li><li class="nav-list-item"><a href="/methods/ai-workflow/" class="nav-list-link">AI 工作流</a></li><li class="nav-list-item"><a href="/methods/simulation/" class="nav-list-link">仿真与实验</a></li></ul></li><li class="nav-list-item"><a href="/research/" class="nav-list-link">科研笔记</a></li><li class="nav-list-item"><a href="/ai/" class="nav-list-link">AI 收藏</a></li><li class="nav-list-item"><a href="/links/" class="nav-list-link">资源库</a></li><li class="nav-list-item"><a href="/life/" class="nav-list-link">生活随笔</a></li><li class="nav-list-item"><a href="/archive/" class="nav-list-link">归档</a></li><li class="nav-list-item"><a href="/about/" class="nav-list-link">关于</a></li><li class="nav-list-item"><a href="/%E5%8D%9A%E5%AE%A2%E5%8F%91%E5%B8%83%E8%AF%B4%E6%98%8E.html" class="nav-list-link">幻欲恒博客发布说明（GitHub Pages + Jekyll 最简版）</a></li></ul>
  
</nav>


<div class="d-md-block d-none site-footer">
  
  
    This site uses <a href="https://github.com/just-the-docs/just-the-docs">Just the Docs</a>, a documentation theme for Jekyll.
  
  </div>
</header>

  
  <div class="main" id="top">
    <div id="main-header" class="main-header">
  
    

<div class="search" role="search">
  <div class="search-input-wrap">
    <input type="text" id="search-input" class="search-input" tabindex="0" placeholder="Search 幻欲恒知识库" autocomplete="off">
    <label for="search-input" class="search-label">
      <span class="sr-only">Search 幻欲恒知识库</span>
      <svg viewBox="0 0 24 24" class="search-icon" aria-hidden="true"><use xlink:href="#svg-search"></use></svg>
    </label>
  </div>
  <div id="search-results" class="search-results"></div>
</div>

  
  
  
    <nav aria-label="Auxiliary" class="aux-nav">
  <ul class="aux-nav-list">
    
      <li class="aux-nav-list-item">
        <a href="/ai-toyroom/" class="site-button"
          
        >
          AI Toyroom
        </a>
      </li>
    
      <li class="aux-nav-list-item">
        <a href="https://github.com/huanyuheng" class="site-button"
          
        >
          GitHub
        </a>
      </li>
    
  </ul>
</nav>

  
</div>

    <div class="main-content-wrap">
      
      <div id="main-content" class="main-content">
        <main>
          
            <p class="text-small text-grey-dk-100">
    2025-12-06
    
      ·
      
    
  </p>


<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-仓库和博客">
  
  
    <a href="#2-建立-github-pages-仓库和博客" class="anchor-heading" aria-labelledby="2-建立-github-pages-仓库和博客"><svg viewBox="0 0 16 16" aria-hidden="true"><use xlink:href="#svg-link"></use></svg></a> 2. 建立 GitHub Pages 仓库和博客
  
  
</h2>
    
<h3 id="21-创建仓库">
  
  
    <a href="#21-创建仓库" class="anchor-heading" aria-labelledby="21-创建仓库"><svg viewBox="0 0 16 16" aria-hidden="true"><use xlink:href="#svg-link"></use></svg></a> 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-博客功能">
  
  
    <a href="#22-启用-jekyll-博客功能" class="anchor-heading" aria-labelledby="22-启用-jekyll-博客功能"><svg viewBox="0 0 16 16" aria-hidden="true"><use xlink:href="#svg-link"></use></svg></a> 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">
  
  
    <a href="#3-网址库links" class="anchor-heading" aria-labelledby="3-网址库links"><svg viewBox="0 0 16 16" aria-hidden="true"><use xlink:href="#svg-link"></use></svg></a> 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-加侧边栏和导航">
  
  
    <a href="#4-加侧边栏和导航" class="anchor-heading" aria-labelledby="4-加侧边栏和导航"><svg viewBox="0 0 16 16" aria-hidden="true"><use xlink:href="#svg-link"></use></svg></a> 4. 加侧边栏和导航
  
  
</h2>
    

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

<ul>
  <li>首页 / 网址库 / 关于 / 归档</li>
  <li>快速入口：GitHub、B 站等</li>
</ul>
<h3 id="41-自定义布局">
  
  
    <a href="#41-自定义布局" class="anchor-heading" aria-labelledby="41-自定义布局"><svg viewBox="0 0 16 16" aria-hidden="true"><use xlink:href="#svg-link"></use></svg></a> 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">
  
  
    <a href="#42-侧边栏-_includessidebarhtml" class="anchor-heading" aria-labelledby="42-侧边栏-_includessidebarhtml"><svg viewBox="0 0 16 16" aria-hidden="true"><use xlink:href="#svg-link"></use></svg></a> 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">
  
  
    <a href="#43-自定义样式-assetscssstylescss" class="anchor-heading" aria-labelledby="43-自定义样式-assetscssstylescss"><svg viewBox="0 0 16 16" aria-hidden="true"><use xlink:href="#svg-link"></use></svg></a> 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-以后怎么发新博客和维护">
  
  
    <a href="#5-以后怎么发新博客和维护" class="anchor-heading" aria-labelledby="5-以后怎么发新博客和维护"><svg viewBox="0 0 16 16" aria-hidden="true"><use xlink:href="#svg-link"></use></svg></a> 5. 以后怎么发新博客和维护
  
  
</h2>
    

<p>折腾完这些之后，日常使用就非常简单了：</p>
<h3 id="51-发新博客">
  
  
    <a href="#51-发新博客" class="anchor-heading" aria-labelledby="51-发新博客"><svg viewBox="0 0 16 16" aria-hidden="true"><use xlink:href="#svg-link"></use></svg></a> 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-维护网址库">
  
  
    <a href="#52-维护网址库" class="anchor-heading" aria-labelledby="52-维护网址库"><svg viewBox="0 0 16 16" aria-hidden="true"><use xlink:href="#svg-link"></use></svg></a> 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-导航--侧边栏">
  
  
    <a href="#53-导航--侧边栏" class="anchor-heading" aria-labelledby="53-导航--侧边栏"><svg viewBox="0 0 16 16" aria-hidden="true"><use xlink:href="#svg-link"></use></svg></a> 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-小结">
  
  
    <a href="#6-小结" class="anchor-heading" aria-labelledby="6-小结"><svg viewBox="0 0 16 16" aria-hidden="true"><use xlink:href="#svg-link"></use></svg></a> 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>

          

          
            
          
        </main>
        
<hr>
<footer>
  

  <p class="text-small mb-0">幻欲恒知识库：记录工具方法、科研学习与长期收藏。</p>

  <div class="d-md-none mt-4 fs-2">
    
    
      This site uses <a href="https://github.com/just-the-docs/just-the-docs">Just the Docs</a>, a documentation theme for Jekyll.
    
  </div>
</footer>

      </div>
    </div>
    
      

<div class="search-overlay"></div>

    
  </div>

  
</body>
</html>


        </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. 小坑总结

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

  1. 配置和页面混淆

    • _config.yml：站点级别的东西；
    • *.md：单个页面，自己有自己的 front-matter。

  2. 404 调试办法 如果新建了一个页面，但是 /xxx/ 访问 404：

    • 先看 links.md 这类页面的 front-matter 有没有写错；
    • 再去仓库右侧 Deployments → github-pages 看构建是否是绿色的 deployed。 如果是红色 failed，点进去会看到具体哪一行出错。

  3. CSS 一定要补全大括号 之前在 @media 里面打断了一个 .pos，忘记关 }，后面的所有样式都不生效了。 这种时候浏览器按 F12 看一下 Console，会提示哪一行 CSS 解析失败，很快能定位。

现在整体效果：

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

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

幻欲恒知识库：记录工具方法、科研学习与长期收藏。

This site uses Just the Docs, a documentation theme for Jekyll.