一、说明

本文将涉及以下工具/服务，用于搭建和运行个人网站，之前网站代码一直没有维护，索性文章还有备份。

名称 说明 作用
Node.js 一个基于 Chrome V8 引擎的 JavaScript 运行环境，可以让 JavaScript 代码在服务器端执行 用于开发服务器端应用程序，运行 JavaScript 代码
Git 分布式版本控制系统 用于追踪文件的变化，协作开发和管理项目的版本
Hexo 静态博客框架，可以将 Markdown 文档解析渲染成静态的 HTML 网页 用于快速搭建和管理个人博客网站
Stellar Hexo 主题商务风主题 为 Hexo 博客提供商务风格的主题模板
github.pages 免费的静态站点托管服务，可以在 GitHub 仓库里托管和发布自己的静态网站页面 用于托管和发布静态网站，方便快捷
typora Markdown 编辑器，目前费用89.00 CNY 用于编辑和预览 Markdown 格式的文档，方便写作和编辑
npm Node.js 的包管理工具，用于安装和管理 JavaScript 包和依赖项 用于管理 JavaScript 包和模块的安装、卸载和更新
SSH 安全外壳协议（Secure Shell），用于在网络中安全地传输数据和命令 用于在网络中进行安全的远程登录和数据传输
YAML 一种人类可读性高的数据序列化格式，常用于配置文件和数据交换 用于编写易读易写的配置文件和数据交换格式
阿里云OSS 阿里云对象存储服务（Object Storage Service），用于存储和管理海量数据 用于存储和管理大量的文件和数据，提供高可靠性的存储服务
oss-browser 阿里云 OSS 的桌面客户端，用于便捷地管理和操作 OSS 上的文件 操作阿里云 OSS 的文件，管理你的图片
PicGo 一个开源的图片上传工具，支持多种图片上传方式和图床配置，可以方便地上传图片到指定的图床，并生成图片链接 用于快速上传图片到图床，方便在博客、论坛等地方引用图片
CDN 内容分发网络（Content Delivery Network），用于加速网站内容的传输 用于加速网站内容的传输，提高网站访问速度和用户体验
域名 网络上的地址，用于标识一个或多个 IP 地址的易记名称 用于在互联网上唯一标识一个网站或服务的地址

二、流程

1. GitHub 账户

首先，你需要拥有一个 GitHub 账户，注册流程不再赘述。注册完成后，你需要创建一个新的仓库（repository），仓库名应该是 “你的用户名.github.io”，其中的 你的用户名 部分需要使用你的 GitHub 帐号名称来代替。这是一种固定的命名规则。举例来说，如果我的 GitHub 帐号名是 “example”，那么我的仓库名就应该是：“example.github.io”。

请注意，目前 GitHub 实施了新的规定，出于安全考量，你需要启用 GitHub 的双重身份验证（2FA）。否则，渐渐地你可能会无法正常使用 GitHub。

2. 创建网站文件夹

在本地选择一个位置，创建你的博客文件夹。

image-20240127183329651

3. 安装 Git、Node.js、Hexo

首先需要检查你的本机是否已经安装了这三项工具。以下是检查步骤

1
2
3
4
5
6
7
8
9
10
11
12
13
# 检查 Git
git --version

# 检查 Node.js
node --version

# 检查 Hexo
hexo --version

# 检查版本信息如下
Git 版本为：2.35.2.windows.1
Node.js 版本为：v21.5.0
Hexo 版本为：hexo-cli: 4.3.1

image-20240127183013579

如果未显示版本信息或显示类似 “command not found”（命令未找到）的错误提示，则说明你尚未安装当前工具

咱们首先先下载 Git——https://git-scm.com/download/win

安装完成后，打开命令行并输入以下命令来测试是否成功安装了 Git，以下情况为安装成功

image-20240127193850328

安装成功后，将你的 Git 与 GitHub 帐号绑定，鼠标右击打开 Git Bash。

image-20240127194109116

1
2
3
4
5
6
7
8
# 配置 Git 用户名和邮箱：通过 `git config` 命令设置 Git 的全局用户名称和电子邮箱地址，这样在提交代码时就能够将其与你的 GitHub 帐号关联起来，让其他人知道是谁提交了这些更改。
git config --global user.name "GitHub用户名"
git config --global user.email "GitHub注册邮箱"

# 生成 SSH 密钥：SSH（Secure Shell）密钥对用于安全地与远程服务器进行通信，这里主要用于与 GitHub 进行安全通信。`ssh-keygen` 命令用于生成 SSH 密钥对，其中 `-t rsa` 参数指定了生成 RSA 类型的密钥，`-C` 参数用于指定注释，一般填写你的 GitHub 注册邮箱。
ssh-keygen -t rsa -C "GitHub注册邮箱"

# 将 SSH 公钥添加到 GitHub 中：生成 SSH 密钥对后，公钥会保存在一个文件中，通常是 `~/.ssh/id_rsa.pub`。将这个公钥添加到你的 GitHub 帐号的 SSH 密钥设置中，这样 GitHub 就可以验证你的身份，并允许你通过 SSH 协议进行代码的读写操作。

生成密钥后，将其添加到 GitHub 中。

image-20240127224401944

在 Git Bash 中输入以下命令检查 GitHub 公钥设置是否成功:

1
2
# 这条命令会尝试连接 GitHub，并返回一个欢迎消息，确认 SSH 设置是否成功。
ssh -T git@github.com

可以看到，已经成功了

image-20240127194413298

1. 提示

PS：我本人在这边踩了一个坑，可以在这边加上-v来看 debug

1
2
3
4
ssh -vT git@github.com

# 清除 DNS 缓存
ipconfig /flushdns

最后的解决方案是在本地 hosts 文件中强制 github.com 解析到 ip 140.82.113.3

hosts 文件通常位于——C:\Windows\System32\drivers\etc\hosts

这种情况通常发生在 DNS 解析出现问题时。DNS（Domain Name System）负责将域名解析为对应的 IP 地址。当你尝试连接到 GitHub 时，你的计算机会向 DNS 服务器查询 GitHub 的 IP 地址，然后建立连接。

在你的情况下，由于某种原因，DNS 解析未能正确地将 GitHub 的域名解析为正确的 IP 地址，导致连接超时问题。通过将 GitHub 的域名手动映射到正确的 IP 地址，你绕过了 DNS 解析过程，成功建立了连接。

2. 提示

在C:\Users\xxx\.ssh路径下，新建config文件

这个配置文件的作用是让 SSH 客户端在连接 GitHub 时使用指定的私钥进行身份验证，从而可以进行安全的通信，例如上传代码或者部署静态网站等操作。

1
2
3
4
5
User
Host github.com
    HostName github.com
    User git
    IdentityFile ~/.ssh/id_rsa

下一步，安装Node.js、Hexo

Node.js——https://nodejs.org/en/download

1
2
3
4
5
# 使用 npm 命令安装 Hexo
npm install -g hexo-cli

# 初始化博客
hexo init

npm 的下载速度受到网络环境和源服务器的影响，如果存在 npm 命令执行非常慢的情况，可以使用国内的镜像源来加速下载

1
2
# 淘宝镜像
npm config set registry https://registry.npm.taobao.org/

会初始化 30M 左右的数据，所以hexo init会相对缓慢，可慢慢等待，等初始化结束后，可看到以下文件

image-20240127201445649

1
2
# 直接在 Git Bash 中输出，本地预览
hexo s

然后访问 http://localhost:4000，即可本地预览

image-20240127201956897

4. 更换主题

Stellar 是一个内置文档系统的简约商务风 Hexo 主题，之所以更换为该主题，主要还是因为，Stellar 的设计理念——真正的简约远不止删繁就简，而是在纷繁中建立秩序。

文档说明——https://xaoxuu.com/wiki/stellar/#start

1
2
3
4
5
# 在终端中输入
npm i hexo-theme-stellar

# 在 blog/_config.yml 文件中找到并修改
theme: stellar

hexo s预览看一看，已经成功了！

image-20240127214215823

接下来就是修改GitHub\MyBlog\_config.yml和MyBlog\themes\stellar\_config.yml

  1. _config.yml：
    • 位置：GitHub\MyBlog\_config.yml
    • 作用范围：全局
    • 内容：主要包含整个Hexo博客的全局配置，例如网站标题、网站描述、网站URL、作者信息等。
    • 用途：用于配置整个Hexo博客的基本信息和全局设置。
  2. _config.yml：
    • 位置：MyBlog\themes\stellar\_config.yml
    • 作用范围：主题级别
    • 内容：主要包含与主题相关的配置，例如主题的特定功能设置、样式定制、布局等。
    • 用途：用于配置Hexo博客所使用的特定主题的相关设置，允许用户对主题进行个性化定制和配置。

image-20240127220229854

可以借助 ChatGPT 进行中英文比照，辅助修改

image-20240127220828800

修改全局文件——位置：GitHub\MyBlog\_config.yml

1
2
3
4
5
6
7
title: Rabbit's Blog

language:
  - zh-CN
  - en

theme: stellar

如果你要写文章，直接在MyBlog\source\_posts路径下写就可以了，格式为 .md，Typora 编写 Markdown

在文章的最上面，需要添加以下元信息：

这些元信息包括文章的标题、发布日期和封面图片链接。你可以根据需要修改这些信息。

1
2
3
4
5
---
title: 你的文章标题
date: 2024-01-27 17:16:59
cover: 也可以直接引用图片直链，这个位置为文章的图片
---

新建关于我 about 页

1
2
hexo new page "about"
hexo new page "friends"
1
hexo clean ➜ hexo g ➜ hexo d

此处略过……

5. 推送到 Github

修改全局文件——位置：GitHub\MyBlog\_config.yml

1
2
3
4
deploy:
  type: git
  repo: GitHub仓库地址
  branch: main # 仓库的分支

branch: main 是指定部署到 GitHub Pages 上的分支，可以在你的 Github 中进行查看

image-20240127223931571

最后安装 Git 部署插件

1
npm install hexo-deployer-git --save
1
2
3
4
5
6
7
8
# 清除 Hexo 项目中生成的静态文件和缓存文件
hexo clean

# 生成静态文件
hexo g

# 因为我本地文件与远程不符，所以强制覆盖 GitHub 上的内容
hexo deploy -f

最后输出这个，即为部署成功，现在xxxx.github.io就可以访问到了

image-20240127223345557

可以看到hexo deploy -f后 Github 上也已经有了文件，并且标记了提交的时间

image-20240127224132180

**PS：**为了避免博客数据丢失，可以在写完博客后，发布到 main 分支并备份源文件到 blog 分支。

master 分支：这个分支用于发布生成的静态博客页面。你使用 hexo clean、hexo generate 和 hexo deploy 这三步完成静态文件的生成和部署，最终会将生成的博客文件推送到 master 分支并发布上线。

blog 分支：这个分支用于保存博客的原始数据，比如 Hexo 的配置文件、原生的 Markdown 文件等。你在写完博客后，不仅需要生成静态文件发布到 master 分支，还要将这些原始文件手动提交到 blog 分支进行备份。

同步到 master 分支：
这三条命令是 Hexo 的标准部署流程：

  • hexo clean：清理 Hexo 生成的缓存文件和静态文件，确保不会出现不必要的文件。
  • hexo generate：生成静态文件，即生成网站的 HTML、CSS、JS 等文件。
  • hexo deploy：部署网站，将生成的静态文件上传到你的博客仓库，通常是 gh-pages 或者其他远程分支上。

手动同步到 blog 分支：

  • git add .：将所有改动（包括新增、修改、删除的文件）添加到 Git 暂存区。
  • git commit -m "提交信息"：提交改动，-m 后面的内容是提交说明。
  • git push origin blog：将本地的更改推送到远程的 blog 分支。

6. 阿里云OSS

阿里云 OSS 可以作为图床的存储后端，用户可以将图片上传到阿里云 OSS 中，并通过阿里云 OSS 提供的公开链接来访问这些图片，从而实现图床的功能。

在写文章的过程中，不可避免地会涉及到插入图片的需求。那么，问题来了，图片应该存储在哪里呢？

一种常见的解决方案是使用图床。当博文中包含大量图片时，将图片直接存放在博客源代码中（通常是source文件夹）可能不太合适，因为这样会占用大量存储空间，而且加载速度也相对较慢。

因此，可以考虑将博文中的图片上传到图床，然后获取外部链接。这样做的好处是，可以极大地节省存储空间，并且加快网页加载速度。在使用Markdown语法插入图片时，只需使用外部链接即可完成插入![图片信息](外部链接)

我在这边使用的方案是“阿里云 OSS”，首先你需要一个阿里云账号，然后下载oss-browser，阿里云 OSS 的桌面客户端，剩余操作阅览官方文档即可

对象存储 OSS_云存储服务_企业数据管理_存储-阿里云 (aliyun.com)

**费用：**值得注意的是，40G一年为9元左右，对于个人网站来说，绰绰有余

image-20240128201919750

三、安全

B 站 UP 主，程序员鱼皮，曾经在 2023-03-04 发生过阿里云 OSS 被盗刷而透支费用.

https://www.bilibili.com/video/BV1Tb411Q7V4/?spm_id_from=333.999.0.0&vd_source=07d8fe8fdf49a7cf86a5c7925adf3667

1. 危害

  1. 未正确配置存储桶的访问策略或未限制访问来源。
  2. 如果设置了ListObject，这将会导致Bucket桶被遍历。
  3. 图床地址被暴露给第三方。

image-20240128005631033

2. 解决方案

阿里云 OSS + Cloudflare

是指将对象存储服务（OSS）与内容分发网络（CDN）服务结合使用的一种方案。Cloudflare 的 CDN 用于加速，仅仅通过 CDN 访问资源，而 OSS 则提供存储支持。使用CDN服务，可以减少对源服务器的请求，进而降低了OSS成本。

Bucket

将 Bucket 访问权限改为私有

防盗链

开启防盗链，只设置白名单，为你的https://xxx.github.io

防盗链策略会根据 Referer 的值来判断请求是否合法，如果来源页面不是本站或者是允许的站点，则允许访问资源；否则，拒绝访问或者重定向到其他页面。

启动防盗链，空 Referer 设置为不允许时，在 Typora 编辑中，则无法显示，暂无法解决

image-20240128010456304

消费预警

image-20240128011017989

四、后记

如果文章有错误的地方，还请各位批评指正。

参考资料
许可协议

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

分享文章

评论

© Rabbit 使用 Stellar 创建

✨ 营业： ✨

共发表 56 篇Blog 🔸 总计 123.6k 字