Hexo+GitHub博客搭建

GitHub Page

个人博客的开发和渲染界面可以使用多种编程语言和框架，可以大致分为 静态博客 和 动态博客 两种类型。这两种类型的核心区别在于内容的生成方式和是否需要服务器端处理。博客的创作的方案有：

• WordPress（PHP）：最流行的博客平台，支持插件和主题。

• HTML、CSS 和JavaScript ：博客非常简单。
• Flask（Python）：轻量级，适合小型博客。
• Hexo（Node.js）：基于 JavaScript，插件丰富（静态的）。
• ……

GitHub Page的推出让开发者能够创建个人或组织的展示网站，用于展示项目、简历、博客等内容。但只能部署静态的博客，因此我们选择Hexo框架。

Hexo

Hexo框架创作自己的博客内容，Hexo 是一个快速、简洁且高效的静态博客框架，它基于 Node.js 运行，可以将我们撰写的 Markdown 文档解析渲染成静态的 HTML 网页。

图中source目录中存放的主要为博客的内容，包括post、link、tag等目录，其中post主要用来存放帖子，这些都可以自己编辑设计。对于博客的主要风格、功能设置保存到config.butterfly.yml和config.yml文件中。

vercel

然而由于墙的原因，我们正常访问github速度会很慢甚至无法访问，通过链接vercel可以实现墙内直接访问。

1. 授权连接

• GitHub 授权：
  • 在 Vercel 上登录后，选择连接到 GitHub。
  • Vercel 会请求访问 GitHub 仓库的权限（如读取仓库内容、触发部署等）。
  • 用户授权后，Vercel 可以访问 GitHub 上的仓库。

2. 选择仓库

• 导入项目：
  • 在 Vercel 控制台中，选择 “New Project”。
  • 选择要部署的 GitHub 仓库（可以是公开或私有仓库）。
  • Vercel 会自动检测仓库中的项目类型（如静态网站、Next.js、React 等）。

3. 自动构建

• 构建过程：
  • Vercel 会拉取 GitHub 仓库中的代码。
  • 根据项目类型，自动运行构建命令（如 npm install 和 npm run build）。
  • 构建完成后，生成静态文件（如 HTML、CSS、JavaScript）。

4. 部署

• 静态文件托管：
  • Vercel 将生成的静态文件上传到其全球边缘网络（Edge Network）。
  • 每个部署都会生成一个唯一的 URL（如 project-name.vercel.app）。

然而，vercel链接后的访问域名太过复杂，因此，可以在购买自定义域名方便记忆和访问。

others

在我们使用GitHub搭建图床后，部署到vercel后，发现网站中的图片仍然无法访问，是因为vercel图床的设置问题👉：

需要在图床项目中的Setting->Advanced里面使能该选项。设置后可以发现点击该项目的链接会转跳到一个包含图床文件目录的页面，设置成功。