博客指南

# 博客前言

提示

笔者的博客涉及到如下支持

upic (opens new window): 提供图床功能
vscode: IDE 工具
github-pages (opens new window): 发布博客
图库
- iconfont (opens new window): Iconfont(阿里巴巴矢量图标库), 博客中图标的主要来源
- heroicons (opens new window)
Vssue (opens new window): 评论支持, Enable comments support for static pages, based on the issue system of code hosting services.
- vuepress-plugin (opens new window)

另外需要对 github action, api 等需要了解相关的文档链接:

以下是几种快速构建个人网站的方案:

使用网站建设平台: 可以使用一些网站建设平台(例如 Wix、Squarespace、WordPress 等)来快速构建自己的个人网站。这些平台提供了丰富的模板和设计工具, 使用户能够在不需要编写代码的情况下创建一个美观、功能丰富的网站
使用静态网站生成器: 静态网站生成器是一种工具, 可以将 Markdown 或其他格式的文本文件转换成静态 HTML 文件。Jekyll、Hugo 和 Gatsby 等工具是一些受欢迎的静态网站生成器, 它们提供了丰富的主题和插件, 可以轻松创建具有不同风格的个人网站
使用云主机和域名: 如果您具有一定的技术背景和经验, 可以选择购买云主机和域名, 并自行搭建个人网站。这需要您具有一定的技术知识, 并熟悉 Web 开发相关技术, 如 HTML、CSS、JavaScript 等

无论选择哪种方案, 都应该确保您的个人网站易于导航、易于使用, 并包含您的重要信息、作品和联系方式

Hugo 和 VuePress 都是非常流行的静态网站生成器, 它们都可以用来构建快速、高效的静态网站。下面是一些比较它们的主要区别:

技术栈: Hugo 是基于 Go 语言编写的, 而 VuePress 则是基于 Vue.js 构建的。这意味着如果您已经熟悉这些技术栈, 那么选择哪个工具可能会更有优势
定制性: Hugo 和 VuePress 都提供了很多主题和插件, 可以帮助您快速创建一个漂亮的网站。然而, Hugo 的主题库更加丰富, 而且对于一些特定的需求, 比如对多语言的支持, Hugo 也更加容易定制
功能: VuePress 在构建单页应用程序(SPA)方面表现出色, 可以创建具有复杂交互和动画效果的网站。相比之下, Hugo 更适合构建博客、文档和其他静态网站
性能: Hugo 的构建速度非常快, 生成的静态页面也非常小巧, 因此它可以提供非常出色的性能和可扩展性。VuePress 的性能也不错, 但在处理大量页面时可能会稍微慢一些

总之, 如果您需要一个快速构建博客、文档或其他静态网站的工具, Hugo 是一个非常不错的选择。如果您需要构建具有复杂交互和动画效果的单页应用程序, 或者您更熟悉 Vue.js 技术栈, 那么 VuePress 可能更适合您

使用 VuePress 构建自己的个人网站需要以下步骤:

安装 Node.js: VuePress 是基于 Node.js 构建的, 因此您需要在计算机上安装 Node.js。您可以在 Node.js 官方网站上下载适合您操作系统的版本并安装
创建 VuePress 项目: 使用 VuePress 需要先创建一个项目, 可以通过以下 create-vuepress-site (opens new window) 命令在命令行中创建一个新的 VuePress 项目:

npx create-vuepress-site your-site-name

这将创建一个名为 your-site-name 的新目录, 其中包含 VuePress 的初始文件和目录

编辑配置文件: VuePress 项目有一个 config.js 文件, 您可以在其中配置网站的标题、描述、主题、导航等等。在该文件中, 您还可以定义页面和博客文章的路由和布局
创建页面和文章: 您可以在 VuePress 项目的 docs 目录下创建 Markdown 文件来编写页面和博客文章。这些 Markdown 文件将被转换为静态 HTML 页面, 并作为网站的内容呈现
本地预览: 在编辑好您的网站内容后, 您可以使用以下命令在本地启动一个 VuePress 服务器来预览您的网站:

npm run docs:dev

运行该命令后, 您可以在浏览器中访问 http://localhost:8080/ (opens new window) 来查看您的网站

npm run docs:build

运行该命令后, VuePress 将生成一个 dist 目录, 其中包含您的网站的静态 HTML 页面和其他资源。您可以将该目录中的内容部署到您的服务器或者使用 GitHub Pages 等免费托管服务

以上是使用 VuePress 构建个人网站的基本步骤, 您可以根据您的需求进一步定制和扩展您的网站

我这里是通过域名厂商 namesilo, 然后将此域名托管到 Cloudflare 了

购买域名
- 在域名服务商（如 Namesilo、GoDaddy 等）购买域名
- 建议选择 .com、.org 或 .net 等常见顶级域名
域名托管到 Cloudflare
- 在 Cloudflare 添加网站
- 按照提示修改域名的 DNS 服务器为 Cloudflare 提供的服务器
- 等待 DNS 服务器变更生效（通常需要 24-48 小时）
在 GitHub Pages 设置自定义域
- 进入 GitHub 仓库的 Settings > Pages
- 在 Custom domain 字段中输入你的域名（如 example.com）
- 勾选 "Enforce HTTPS" 选项
配置 DNS 记录 下面两种方式任选一种：
在 Cloudflare 中添加以下记录：

- 类型：A
- 名称：@
- 内容：185.199.108.153
- 内容：185.199.109.153
- 内容：185.199.110.153
- 内容：185.199.111.153

- 类型：CNAME
- 名称：www
- 内容：yourusername.github.io

验证域名所有权
- GitHub 会要求你添加一个 TXT 记录来验证域名所有权
- 在 Cloudflare 中添加 TXT 记录：
  - 类型：TXT
  - 名称：_github-pages-challenge-yourusername
  - 内容：GitHub 提供的验证码
等待 DNS 生效
- DNS 更改可能需要一些时间才能生效
- 可以使用 dig 命令检查 DNS 记录是否生效：
```
dig TXT _github-pages-challenge-yourusername.example.com
```
  1
启用 HTTPS
- 在 Cloudflare 中确保 SSL/TLS 设置为 "Full" 或 "Full (Strict)"
- 在 GitHub Pages 设置中勾选 "Enforce HTTPS"

将 DNS 记录设置为代理

上次更新: 2025/10/09, 23:53:03