🚀 全栈起飞：Hexo + Stellar + Vercel + 国内极速访问指南

👋 元气满满的开场 (Hook)

嘿！朋友！是不是厌倦了千篇一律的博客样式？是不是想拥有一个既能写技术文档又能记录生活的“赛博小窝”？今天教你从零开始，搭建一个属于你的顶级个人博客！

不用担心不会写代码，只要你会 Ctrl+C 和 Ctrl+V，剩下的交给我的热情和逻辑！🔥

🛠️ 环境/前置准备 (Prerequisites)

在开始之前，请确保你的电脑里装好了以下工具（如果没有，请先去下载安装哦！😉）

  1. Node.js ：下载地址
    • 验证方式：终端（最好以管理员身份启动）输入 node -v，看到版本号就 OK。
  2. Git：下载地址，没多大体量，建议直接默认C盘安装，会省去一些麻烦。
    • 验证方式：终端（最好以管理员身份启动）输入 git --version。
  3. VS Code：下载地址，一会儿操作起来会方便很多。
  4. GitHub 账号：应该人人都有吧，用来存放你的博客源码。
  5. Vercel 账号：直接用 GitHub 登录授权即可，它是我们免费的服务器。
  6. 一个国内域名：阿里云、腾讯云买一个，十几块钱一年的 .top 或 .xyz 都行，预算充足就上.com或者.cn（记得实名认证哦）。

💻 保姆级步骤 (Step-by-Step)

📦 阶段一：建立博客网站源码在本地存放的文件夹 (Setup Workspace)

  1. 准备博客文件夹

    • 在你的电脑里（建议 D 盘或非系统盘），手动新建一个文件夹，命名为 BlogSpace（或者你喜欢的名字，千万别带中文）。

  2. 用 VS Code 打开它

    • 启动 VS Code。
    • 点击左上角菜单：File (文件) -> Open Folder... (打开文件夹)。
    • 选择刚才建立的 BlogSpace。
    • 此时你的 VS Code 左侧资源管理器应该是空的，这是对的！

  3. 唤醒集成终端 (Git Bash) ⚡

    • 快捷键：按下 Ctrl + ~ (就是波浪号，Esc 下面那个键)。底部会弹出一个小窗口。
    • 切换 Shell：如果默认出来的不是 git bash，请看终端窗口右上角有个 +⌄ 箭头，点击它，选择 Git Bash。
    • 现在，你应该能在终端里看到彩色的字体了，这代表 Git Bash 已经就位！

  4. 配置 npm 淘宝/阿里镜像 (必须做！)
    如果不配这个，在国内装 Hexo 就像用 2G 网一样慢。

    1
    2
    3
    4
    5
    # 设置最新版的淘宝镜像源
    npm config set registry https://registry.npmmirror.com

    # 验证是否成功（如果你看到上面的网址，就稳了）
    npm config get registry

🛠️ 阶段二：初始化 Hexo (Init Project)

我们将直接在这个终端里发号施令。

  1. 安装 Hexo 脚手架

    在底部的终端输入：

    终端执行 (Terminal)
    1
    npm install -g hexo-cli

  2. 生成博客骨架

    1
    2
    # 初始化一个名为 my-blog 的项目
    hexo init my-blog

    你会看到终端里疯狂跑代码，稍等片刻。

  3. 关键操作：切换工作区 (Switch Workspace) 🌟

    熟悉指令可以用cd命令快速切换进入。

    终端执行 (Terminal)
    1
    cd my-blog

    如果不熟悉，为了后续操作不迷路，可以用鼠标重新打开这个子文件夹！

    • 初始化完成后，你会发现 BlogSpace 里多了一个 my-blog 文件夹。
    • 点击 VS Code 左上角：File -> Open Folder... -> 选择里面的 my-blog 文件夹 -> 点击 Select Folder。
    • VS Code 会刷新。现在，你的左侧资源管理器里应该能直接看到 _config.yml、source 等文件了。
    • 再次按下 Ctrl + ~ 打开终端（确保是 Git Bash）。现在的路径应该是 .../my-blog。

  4. 安装依赖 (确保在项目文件夹my-blog中执行此命令)

    终端执行 (Terminal)
    1
    npm install

  5. 执行完毕后，您的项目文件夹结构大致如下：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    .
    ├── _config.yml      # 站点配置文件
    ├── package.json
    ├── scaffolds        # 模板文件夹
    ├── source           # 博客文章和其他源文件存放处
    |   ├── _drafts
    |   └── _posts
    |── themes           # 主题文件夹
    └── node_modules

  6. 本地预览

    在终端输入：

    终端执行 (Terminal)
    1
    hexo clean && hexo g && hexo s
    • 按住 Ctrl 键，鼠标点击终端里显示的链接 http://localhost:4000，VS Code 会直接帮你打开浏览器。
    • 确认没问题后，回到终端，按 Ctrl + C 停止服务。

✨ 阶段三：注入 Stellar 灵魂 (Theme Setup)

  1. 安装 Stellar 主题
    继续在终端输入：

    终端执行 (Terminal)
    1
    npm install hexo-theme-stellar

  2. 修改配置文件 (VS Code 优势时刻)

    • 在左侧资源管理器 (Explorer) 中，找到 _config.yml 文件（在最下面），单击打开。
    • 按下 Ctrl + F，搜索 theme:。
    • 你会快速定位到一行 theme: landscape。
    • 把它改成：
      my-blog/_config.yml
      1
      theme: stellar
    • 别忘了按 Ctrl + S 保存！ (程序员的基本修养 😉)

  3. 配置 Stellar 主题:

    • Stellar 主题有自己的配置文件，位于 ...\node_modules\hexo-theme-stellar\_config.yml。
    • 您可以复制此文件到 Hexo 项目根目录下，并重命名为 _config.stellar.yml 进行修改。Hexo 会优先读取项目根目录下的主题配置文件。然后修改项目根目录下的 _config.stellar.yml 文件来配置主题的各种选项，例如导航菜单、侧边栏、社交链接等。
    • 详细的配置方法请参考 Stellar 主题的开发者文档：https://xaoxuu.com/wiki/stellar/

  4. 本地预览
    在终端输入：

    终端执行 (Terminal)
    1
    hexo clean && hexo g && hexo s
    • 按住 Ctrl 键，鼠标点击终端里显示的链接 http://localhost:4000，VS Code 会直接帮你打开浏览器。
    • 确认没问题后，回到终端，按 Ctrl + C 停止服务。

🔑 阶段四：Git 配置与生成私人令牌

  1. 告诉 Git 你是谁
    在终端依次输入：

    终端执行 (Terminal)
    1
    2
    git config --global user.name "YourName"
    git config --global user.email "your_email@example.com"

  2. 生成令牌 (为了让 Hexo 能顺畅访问的 GitHub仓库（或者让 Stellar 主题获取仓库信息不报错），我们需要一把“万能钥匙”。)

    • 登录 GitHub，点击右上角头像 -> Settings。
    • 左侧菜单最底下 -> Developer settings。
    • 左侧 -> Personal access tokens -> Tokens (classic) (选经典版最稳)。
    • 点击 Generate new token -> Generate new token (classic)。
    • Note (备注)：填 HexoBlogToken。
    • Expiration (过期时间)：建议选 No expiration (永不过期，省得以后麻烦) 或者 1 year。
    • Select scopes (权限选择)：
      • ✅ repo (全选 repo 下的所有钩子，这是必须的！)
      • ✅ workflow (如果要用 Action 也可以勾上，不亏)
    • 点击绿色按钮 Generate token。

  3. 保存令牌 (生死攸关的一步！) ⚠️

    • 你会看到一串 ghp_ 开头的字符串。
    • 立刻！马上！复制它！ 保存到你的记事本里。因为你刷新页面后，它就永远消失了！

🚀 阶段五：一键上云 (Push to GitHub)

  1. 安装 Hexo Git 部署插件

    • 回到 VS Code 终端。
    终端执行 (Terminal)
    1
    npm install hexo-deployer-git --save

  2. 配置 Hexo 连接 GitHub

    • 打开根目录的 _config.yml，拉到最下面。

    📄 文件位置: my-blog/_config.yml (最底部)

    my-blog/_config.yml
    1
    2
    3
    4
    5
    6
    7
    8
    9
    # 找到 deployment 部分，修改成下面这样
    # 注意缩进！
    deploy:
    type: git
    # 这里的地址格式极其重要！
    # 格式：https://<你的Token>@github.com/<你的用户名>/<仓库名>.git
    # 例子：
    repo: https://ghp_YourSecretTokenHere@github.com/SunshineBoy/my-blog.git
    branch: main

注意：把 ghp_YourSecretTokenHere 换成你刚才复制的那串 Token。把 SunshineBoy 换成你的 GitHub 用户名。

  1. 新建 GitHub 仓库

    • 去 GitHub 建一个叫 my-blog 的空仓库。

  2. 执行部署

    • 在 VS Code 终端输入：
    1
    2
    # 清除缓存 + 生成静态文件 + 部署到 GitHub
    hexo clean && hexo g && hexo d
  • 观察终端：你会看到它开始渲染文件，然后显示 INFO Deploying: git，接着开始上传。
  • 如果最后显示 INFO Deploy done: git，恭喜你！发射成功！ 🎉

☁️ 阶段六：Vercel 部署与国内加速 (The Speed)

  1. Vercel 托管

    • 登录 Vercel -> Add New Project -> Import 你的 GitHub 仓库。
    • 配置保持默认，直接点 Deploy。
    • 等待烟花绽放！🎆

  2. 域名魔法 (China Optimization) ⚡

    • 重点来了！去你的域名服务商（阿里云/腾讯云）配置解析：
      记录类型 主机记录 记录值 (直接复制这个)
      CNAME www cname-china.vercel-dns.com
      A @ 76.223.126.88
    • 解释：这两个地址是 Vercel 专门为解决 DNS 污染提供的优化线路，比默认的快 N 倍！
    • 在 Vercel 项目设置 -> Domains，添加你的国内域名（如 www.yoursite.cn）。

📝 阶段七：日常写作工作流 (Daily Workflow)

以后你每次写博客，只需要打开 VS Code：

  1. 写文章
    💡 提示：终端运行
    1
    hexo new "我的新文章"
  2. 在 VS Code 里写
    打开 source/_posts/我的新文章.md 尽情挥洒文采。
  3. 本地预览 (可选)
    💡 提示：终端运行
    1
    hexo clean && hexo g && hexo s
  4. 一键发布
    写完了？想发了？只需要一行命令：
    💡 提示：终端运行
    1
    hexo clean && hexo g && hexo d
    不用管 Git，不用管 Token（都在配置里存好了），瞬间上线！
    搞定！Vercel 会自动感应并部署。

🛠️ Hexo 框架常用指令速查 (Commands Cheat Sheet)

我把最常用的指令都列出来了，每一个都附带了使用场景，方便你查阅！

A. 基础三剑客 (必会)

  • 清除缓存 (Clean)
    💡 场景：修改了 _config.yml 配置或者更换了主题，页面没变化时使用

    1
    2
    hexo clean
    # 简写：无

    解释：它会删除 public 文件夹和 db.json。相当于电脑重启，治百病！

  • 生成静态文件 (Generate)
    💡 场景：把你的 Markdown 翻译成 HTML 网页

    1
    2
    3
    hexo generate
    # 简写：
    hexo g

  • 启动本地服务器 (Server)
    💡 场景：在本地预览博客效果

    1
    2
    3
    hexo server
    # 简写：
    hexo s

B. 进阶创作指令 (Stellar 主题必备)

  • 创建独立页面 (New Page)
    💡 场景：Stellar 主题通常需要 "关于我"、"友链"、"Wiki" 这种独立页面

    1
    2
    # 创建一个名为 "about" (关于) 的页面
    hexo new page "about"

    结果：会在 source/ 下生成一个 about 文件夹，里面有个 index.md。你可以在这里写自我介绍。

  • 创建草稿 (New Draft)
    💡 场景：灵感来了但没写完，不想直接发布到网站上

    1
    2
    # 创建草稿
    hexo new draft "my-secret-draft"

    结果：文件会生成在 source/_drafts 文件夹里。默认情况下，hexo g 不会渲染草稿，只有你看见，别人看不见！😎

  • 预览草稿 (Server Drafts)
    💡 场景：我想在本地看看草稿写得怎么样了

    1
    2
    # 启动服务器并显示草稿
    hexo s --drafts

  • 发布草稿 (Publish Draft)
    💡 场景：草稿终于写完了，准备转正！

    1
    2
    # 把草稿移动到正式文章目录 (_posts)
    hexo publish "my-secret-draft"

C. 组合拳 (高手都这么用)

程序员都喜欢效率，能一行解决绝不敲两行！

  • 预览一条龙
    💡 场景：日常写作用得最多

    1
    2
    hexo clean && && hexo g && hexo s
    # 先清理缓存，然后直接启动预览（Server 会自动在内存中 Generate，不需要显式 hexo g）

  • 发布一条龙
    💡 场景：发版专用

    1
    2
    hexo clean && hexo g && hexo d
    # 清理 -> 生成 -> 部署

☀️ 总结 (Summary)

嘿，你看！是不是也没有那么难？😎
现在你已经拥有了一个：

  1. 基于 Hexo 的高性能静态博客。
  2. Stellar 主题 加持的超高颜值界面（还能写 Wiki，简直酷毙了）。
  3. Vercel 提供的全球免费 CDN 托管。
  4. 国内域名优化 带来的流畅访问体验。

现在的你，已经击败了全国 99% 还在用记事本写日记的用户！接下来，就是去填充你的内容，把你的技术干货、生活感悟统统写上去！

Build Successful! Enjoy your new blog! 🥂✨

许可协议

本文采用 署名-非商业性使用-相同方式共享 4.0 国际 许可协议，转载请注明出处。

快来参与讨论吧~