从0开始：我的博客搭建之旅

发表于 分类于

摘要：新年到来之际，我利用Github Student Pack 和 Hexo 搭建了博客，本文是流程记录和技术作结。

零、起因

  • 希望能整理并记录学习、生活、开发和研究的经历

一、搭建

用到的工具

  • 框架: Hexo (快速，简洁，基于 Node.js)
  • 托管: GitHub Pages (免费、稳定)
  • 域名: Namecheap (.me 域名，通过学生包白嫖)

1.GitHub 端的准备

  • 新建仓库，名称必须是<GitHub用户名>.github.io ，设置为Public

2.本地环境搭建

下载与安装

  • Node.js 在Node.js 官网 下载LTS版本并安装。我选择了Windows安装程序，安装过程中可以选择不安装 “Tools for Native Modules”
  • Git 在Git for Windows 官网点击 “Click here to download” 下载安装包
  • Hexo 打开命令行，输入
1
npm install -g hexo-cli

生成博客雏形

  • 初始化文件夹： 找个地方（比如 D盘/Blog），执行：
1
2
3
hexo init Blog
cd Blog
npm install
  • 本地预览：
1
hexo s

3.上线

安装 Git 部署插件：

在 MyBlog 目录下执行：

1
npm install hexo-deployer-git --save

修改配置

用 VS Code 打开 MyBlog 目录下的 _config.yml 文件（这是博客的全局配置文件）。
拉到最底下，找到 deploy 部分，修改如下（注意冒号后面要有空格）：

1
2
3
4
deploy:
  type: git
  repo: https://github.com/<你的用户名>/<你的用户名>.github.io.git
  branch: main  # 或者 master，看你仓库的分支名

一键部署

在命令行执行两步操作：

1
2
hexo generate  # 生成静态文件 (简写 hexo g)
hexo deploy    # 部署到 GitHub (简写 hexo d)

第一次部署可能需要输入 GitHub 的账号密码（或者 Token）。

4.个性化域名

领取域名

  • 访问GitHub 学生包，登录你的 GitHub 账号。
  • 找到 Namecheap：在 “Offers” 列表里搜索 “Namecheap”。你会看到 “1 year domain name registration on the .me TLD”。点击连接跳转
  • 搜索域名：在搜索框里输入你想要的域名。看到价格是$0.00后加入购物车结账

域名连线

  • 登录 Namecheap，点击左侧的 “Domain List”
  • 在你的新域名旁边，点击 “Manage” 按钮
  • 点击顶部的 “Advanced DNS” 标签页
  • 你需要删除原有的记录，然后添加以下两条新记录（点击 “Add New Record”）：
    • 第 1 条（CNAME 记录）： 让 www 开头的网址能访问。
      Type: CNAME Record
      Host: www
      Value: 你的用户名.github.io
      TTL: Automatic
    • 第 2 条（A 记录）： 让不带 www 的网址也能访问。
      Type: A Record
      Host: @
      Value: 185.199.108.153 (这是 GitHub Pages 的官方 IP)
      TTL: Automatic

GitHub端设置

  • 打开你的 GitHub 仓库，点击 Settings -> 左侧边栏的 Pages，找到 Custom domain 一栏，输入你的新域名，点击 Save，此时 GitHub 会自动创建一个名为 CNAME 的文件在你的仓库根目录

本地持久化

  • 回到本地文件夹：
    打开你的 Blog 文件夹，进入 source 文件夹。
  • 创建 CNAME 文件：
    新建一个没有后缀名的文件，名字必须叫 CNAME（全大写）。
  • 写入域名：
    用记事本打开这个 CNAME 文件，在里面只写一行字：
1
<你的网址>

（不要加 http，也不要加 www，就写 naked domain）

  • 重新部署：
    回到博客根目录，执行：
1
2
hexo g
hexo d

二、备份（重要！）

  • 新建私有仓库：
    在 GitHub 新建一个叫 Blog-Source 的仓库（设为 Private）。
  • 把本地博客关联上去：
    在 D:\Blog 下：
1
2
3
4
5
git init
git remote add origin https://github.com/PeterTianbuhan/Blog-Source.git
git add .
git commit -m "Backup my blog source"
git push -u origin master
  • 日常备份：
    每次写完文章 hexo d 之后，顺手再做一次 Git 提交推送到这个私有仓库。
1
2
3
git add .
git commit -m "update"
git push

三、使用

1.核心工作流：如何发布一篇文章

新建文章：

  • 在博客根目录（D:\Blog）打开 PowerShell：
1
hexo new "文章标题"
  • 这会在 source/_posts 目录下生成一个 文章标题.md 文件。

编写内容

  • 用VS Code或者Typora打开这个.md文件

本地预览

1
hexo s
  • 打开 localhost:4000 看看排版对不对，公式渲染有没有问题。

生成并部署

1
hexo g -d

2.如何插入图片

  • 在 source 文件夹下新建一个 images 文件夹 (source/images)。
  • 把你的图片（比如 demo.jpg）丢进去。
  • 在文章里这样引用：
1
![图片描述](/images/demo.jpg)

四、美化

  • 我选择了 NexT 主题并进行了一些定制

1. 更换 NexT 主题

下载主题：

  • 进入 Blog/themes 目录，克隆主题仓库：
1
git clone https://github.com/next-theme/hexo-theme-next.git next
  • 注意：下载后务必删除 themes/next 目录下的 .git 文件夹，防止 Git 嵌套导致备份失败。

启用主题：

修改根目录的 _config.yml：

1
theme: next

2.个性化配置

  • 基本信息：在根目录 _config.yml 中修改 author（作者名）和 language: zh-CN（中文支持）。
  • 开启侧边栏：在 themes/next/_config.yml 中，将 scheme 设置为 Gemini（左侧固定侧边栏风格）。
  • 设置头像：将头像放入 source/images/，并在主题配置文件中设置 avatar 路径。

3.背景定制

为了摆脱千篇一律的样式，我通过外部挂载的方式修改了 CSS，实现了深色模式下的半透明磨砂玻璃效果

  • 开启自定义：在主题配置文件中取消 custom_file_path 下 style 的注释。
  • 编写样式：在 source/_data/styles.styl 中添加自定义代码：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
body {
    /* 设置背景图片 */
    background: url(/images/background.jpg) no-repeat fixed center;
    background-size: cover;
}

/* 让内容区域变成半透明黑色，适配深色模式 */
.main-inner, .header-inner, .sidebar-inner {
    background-color: rgba(0, 0, 0, 0.7) !important;
}

/* 去除菜单栏背景 */
.site-brand-container {
    background: transparent !important;
}

五、杂谈

VS Code工作流配置

  • Paste Image 插件：实现了截图后 Ctrl+Alt+V 直接粘贴图片并自动保存到 source/images 目录，无需手动拖拽文件。
  • Markdown Preview GitHub Styling：让本地预览效果尽可能接近 GitHub 网页效果。