从零搭建个人独立博客 (二)：发文工作流与排版美化实战

从零搭建个人独立博客 (二)：发文工作流与排版美化实战

上一篇教程中，我们一起经历了激动人心的“极速建站”与“手撕 Bug”之旅，成功在 GitHub 上拥有了一套带全球 CDN 加速的“海景房”。

房子建好了，以后的日常就是写文章和装修。这篇文章就来手把手教你如何建立一套极速发文工作流，以及如何利用 AI 工具让你的文章排版瞬间高大上！

📖 文章总览

[TOC]

板块一：日常发文“三步曲” (复习与巩固)

很多人搭完博客后，发第二篇文章时就忘了命令。其实日常发文根本不需要重新走一遍繁琐的配置，只需要记住这最核心的“三步曲”：

步骤 1：一键新建文章

打开终端，进入你的博客根目录，敲下新建命令：

1
hexo new "你的新文章标题"

（Hexo 会自动在 source/_posts 目录下为你生成一个同名 .md 文件，并且已经帮你写好了带有时间戳的 Front-matter 头部信息。）

步骤 2：专注内容创作

打开刚刚生成的 Markdown 文件，保留最上方被 --- 包围的两行配置区域。直接在下方尽情挥洒你的灵感，写代码、插图片、做记录。

步骤 3：一键终极连招上云

写完保存后，回到终端，敲下这句你最熟悉的“魔法咒语”：

1
hexo clean && hexo g && hexo d

（清空本地旧缓存 -> 重新生成所有静态页面 -> 推送部署到 GitHub。看到 Deploy done，你的新文章就已经在全球网络上同步更新了！）

板块二：图片语法进阶与 AI 提效黑魔法

你是不是也遇到过这种情况：辛辛苦苦写了一篇干货，用 Markdown 默认语法 ![图片名字](链接) 插进去的配图，却像个毫无美感可言的“傻大黑粗”，直愣愣地铺满整个屏幕，让文章显得非常廉价？

想让你的博客中也出现像下面这样大小精致、边缘温润、甚至带有高级悬浮 3D 质感的图片吗？

其实，在 Markdown 编辑器（如 Typora）中，你复制粘贴看到的所谓“图片”，本质上其实是一条条底层的源代码。 如果你只是用 Markdown 默认的 ![图片名字](链接) 语法，图片往往会死板地铺满整个屏幕，不仅比例失调，直愣愣的边角也毫无美感可言。想要让博客看起来像专业技术专栏，我们需要降维打击——直接抛弃 Markdown 死板的默认语法，深入这层源代码，使用 HTML 的 <img> 标签来进行精细化控制。

别听到 HTML 就头大，其实核心的控制魔法只有三个属性。看看下面这张我整理的代码拆解图：

如上图所示，我们主要通过三个维度来拿捏图片的颜值：

  1. 宽度 (width)： 比如 20%、30%，用来控制图片大小，给网页留出呼吸感。
  2. 平滑圆角 (border-radius)： 比如 8px，告别死板的直角，让图片边缘变得温润。
  3. 外框或阴影 (border / box-shadow)： 用来给图片增加边界感或立体的悬浮感。

空谈无益，我们直接来看这三组代码渲染出的实际效果对比：

  • Figure 1 (小巧精致风)：

    • 代码：<img src="..." width="20%" style="border-radius: 8px; border: 5px solid green;" />

    • 效果： 宽度设为 20%，配合 8px 的圆角和 5px 的绿色实线边框 (solid green)。非常适合用来展示一些小巧的图标或强调某个局部细节。

  • Figure 2 (活泼虚线风)：

    • 代码： <img src="..." width="20%" style="border-radius: 8px; border: 5px solid green;" />

    • 效果： 宽度放大到 30%，边框换成了 5px 的蓝色虚线 (dashed blue)。这种样式视觉上比较跳跃，很适合用来圈出文章里的“易错点”或“补充说明”。

  • Figure 3 (质感悬浮风 - 强烈推荐！)：

    • 代码： <img src="..." width="40%" style="border-radius: 0px; box-shadow: 0 8px 24px rgba(0,123,255,0.4);" />

    • 效果： 宽度设为 40%，取消了圆角（设为 0px），但加入了一层淡蓝色的弥散阴影 (box-shadow)。这个阴影参数会让图片产生一种极其优雅的 3D 悬浮错觉，科技感和高级感瞬间拉满！

🚀 我的独家偷懒秘籍（AI 极速批量排版）

虽然上面的悬浮和圆角效果极其好看，但每次发博客都要手动敲这么多 HTML 和 CSS 样式，简直是反人类！作为一名追求极致效率的开发者，我摸索出了一套无敌的工作流：

1. 暴力白嫖： 像上篇文章教的那样，把图片拖进 GitHub Issue 获取原始的纯净图片直链。

2. 光速粘贴： 不用管格式，把你获取到的纯链接（或者默认的 Markdown 图片代码）一股脑地全扔进本地的 Markdown 文章里。 3. 召唤 AI 批量施法： 打开你的 AI 编程助手，直接甩给它下面这段**“万能 Prompt”**。这里我用的是 Cursor（直接按 Ctrl + K 或在右侧 Chat 面板输入），但请注意，这招在 Claude Code、GitHub Copilot、Cline 等任何主流 AI 代码助手中都完美通用！

👇 直接复制这段极速排版 Prompt：

当前文件中有 [填入具体数字] 张图片，请帮我保留它们原本的 src 链接，并将所有图片的 HTML 格式批量替换为以下高级样式： <img src="原来的链接" width="90%" style="border-radius: 8px; box-shadow: 0 8px 24px rgba(0, 123, 255, 0.4);" />

4. 一键 Apply (见证奇迹)： 不要用抽象的词汇去让 AI “加个好看的阴影”，直接把写好的 HTML 模板喂给它。AI 看到模板就会瞬间顿悟，精准提取出每张图片的原始链接，然后像套壳一样，把这些高级属性完美地套上去！

看看上面这张图，只需一键 Apply，全篇几十张图的格式瞬间统一被替换！排版质感秒出，极其优雅，再也不用去背那些繁琐的 CSS 属性了！

板块三：给你的代码仓库挂上“专属招牌”

现在你的博客已经完美运行，但如果别人偶然逛到了你的 用户名.github.io 代码仓库，他们面对一堆源码可能不知道去哪里看实际的网页。

我们需要在 GitHub 仓库主页挂上你的网站直达链接：

  1. 打开你的 GitHub 仓库主页。
  2. 在页面右侧边栏找到 About 区域，点击旁边的齿轮图标（⚙️ Edit repository details）。
  3. 在弹出的菜单中，找到 Website 一栏。
  4. 勾选 Use your GitHub Pages website，或者手动填入你的博客地址（例如 https://Qiushi0919.github.io）。
  5. 点击 Save changes 保存。

现在，你的仓库主页右侧就会出现一个亮眼的链接图标，任何路过的大佬都能一键直达你的极客大本营！

下集预告：颜值即正义！

目前我们用的还是 Hexo 官方那套极简（简陋）的初始皮肤。既然是个人独立博客，怎么能没有炫酷的夜间模式、酷炫的侧边栏和极具个人风格的 UI 呢？

在下一篇的“终极美化篇”中，我将为你揭秘：

  • 如何为 Hexo 注入灵魂，换上业内顶级的高颜值主题（Theme）。
  • 如何在你的博客导航栏中添加一个优雅的“GitHub 图标”，让读者在欣赏文章之余，一键穿越回你的开源仓库一探究竟！

敬请期待，我们下期见！