简介

本文旨在总结 (~~copy~~) 搭建个人博客的一种方法，同时对一些 web 网络个人理解进行阐述（很不准确）。

前言

注意: 本文中使用的搭建方法参考了爱扑bug的熊的博客搭建教学。在此特别感谢大佬的分享与指导。
此外，本文使用的是 windows 操作系统，在某些地方的建站操作可能与 Linux, macOS 等有所差异。

搭建前置条件

在开始之前，请确保已经安装了以下工具：

一个 JavaScript 运行环境 —— Node.js 和 npm（npm 包含在下载的 node 文件包中）
版本控制系统 —— Git
科学上网技术

博客搭建技术

博客生成框架：使用 hexo 开源博客架构
文件托管平台：使用 github 作为博客文件的托管平台
站点部署服务：使用 netlify 提供的免费服务部署博客站点
访问加速服务：使用 cloudflare 为博客站点提供访问加速服务

web 知识

在搭建博客的实践之前，了解些关于 web 的基础知识是必要的，毕竟在搭建博客时的每步操作都有其背后的理由。

本段会尽量以简洁、易懂的语言介绍些 web 基础知识，以解决类似于「域名是什么」、「DNS服务是什么」、「为什么要开启https服务」之类的问题。

互联网是如何工作的

在回答「域名是什么」这样的问题之前，首先需要知道我们生活中的互联网是如何工作的。

搭建简单网络：当我们有两台电脑想要通讯时，你必须将这两台电脑通过某种方式连接起来，例如使用「网线」的有线方式，或是「蓝牙、 WiFi 」之类的无线方式。
但如果我们有十台甚至以上的电脑，我们还是将他们一对一连接的话，情况自然是无比复杂的。这时候，我们可以将这些电脑统一连接到一台电脑上，而这台电脑就叫路由器（router）。路由器所做的：就是确保从一台电脑发送的消息能准确到达另一台正确的目标电脑。
而当情况更加复杂时，我们只需要连接这些路由器即可，或是将路由器再连接到统一的路由器上即可。
寻找目标电脑：还记得上述路由器所做的事吗？「确保从一台电脑发送的消息能准确到达另一台正确的目标电脑」。如果想要给一台电脑发送消息，你必须指明它是哪台电脑。
而解决办法就是，给每台电脑一个唯一的地址标记，这个地址就叫 「IP 地址」 ，例如：192.0.2.172 这样由 4 个 0 ~ 255 的数字组成的字符串。这种地址交给计算机处理，自然很方便，但是我们人类却很难记忆。所以我们可以使用一个叫域名的可读名称来代替 IP 地址，例如：”google.com” 。这样，我们再通过搜索引擎搜索想要的网址时，就不需要输入一串串无序的数字串了。
当然，这只是 IPv4 协议 的一部分知识，至于端口、IPv6 之类的我们先暂且不提。
DNS解析：DNS 的中文名叫「域名系统」，它就像是 互联网电话簿 一样，存储着域名和其背后 IP 地址的映射关系。
当我们在浏览器搜索类似 “google.com” 的网站时，浏览器本身并不知道这个字符串到底指向的是哪个 IP 地址。所以浏览器会首先查询本地 hosts 文件（C:\Windows\System32\drivers\etc）内的 IP 地址和域名映射，其次会查询本地的 DNS 缓存（通过在 cmd 中输入 ipconfig /displaydns 命令行查看）。
如果本地电脑不知道浏览器正在搜索的域名背后的 IP，它会向部署在其它地区的「DNS 服务器」（可以理解为通过路由器连接的其它电脑，但是这台电脑存储了域名和 IP 地址的映射，并提供域名解析操作的服务）发送询问请求，而这个 DNS 服务器的工作就是告诉你的电脑对应的 IP 地址是什么。现在，你的浏览器就能够和 web 服务器（通过路由器连接的另一台电脑）进行协议内容了。
请求 web 服务器：在请求 web 服务器之前，我们最好先知道「web服务器」是干什么的，以及「HTTP 协议」是什么。
Web 服务器（web server）：是一个在互联网上 托管数据的计算机 。它不仅仅包含着用来储存网站组成文件、数据的硬件部分，还包含着控制用户访问的 web 服务软件部分。当你搭建完自己的博客并进行部署时，本地的博客文件就被存储到了这些 web 服务器上。
HTTP 协议：「超文本传输协议 (HTTP) 是万维网的基础，通过超文本链接加载网页。HTTP 是一种应用程序层协议，旨在在联网设备之间传输信息，并在网络协议栈的其他层之上运行。」嗯……总之这套协议在计算机网络中是指一组规定，它定义了设备之间如何通信和交换数据，确保不同设备和系统可以在同一个网络中相互操作。至于 HTTPS 协议 ，它是 http 协议的加密版，它在HTTP的基础上添加了SSL/TLS 等加密技术，也就比 HTTP 协议更加安全。
接下来，我们就该和 web 服务器进行沟通了。本地客户端向服务端发送 http 请求（满足 http 规范的请求通讯），当 web 服务器同意客户端的请求后，它会开始将网页的文件以数据包的形式传输到客户端的浏览器，再由浏览器处理这些数据包，渲染成网页呈现。

现在，我们就基本知道了整个 web 的工作流程，这也就解释了上述博客搭建技术中博客生成框架 hexo 、文件托管平台 github 、站点部署服务 netlify 、访问加速服务 cloudflare 分别是做什么用的：
hexo 用来创建博客的网页文件， github 负责源代码管理和版本控制， netlify 拉取 github 上的代码，并构建成最终的生产版本，并将其部署到 Netlify 的服务器上，而 cloudflare 则能改善你的博客在全球范围的加载速度和性能。

搭建个人博客

hexo 博客架构

介绍

Hexo 最初由台湾省的 Tommy Chen 于 2012 年创建和维护，可以使用 Markdown（或其他标记语言）解析文章，在几秒内，即可利用靓丽的主题生成静态网页。

安装 hexo 架构

注：进行之后的操作之前，请确保已经下载 node.js 和 Git 。可以通过在 cmd 中执行如下命令查看 node 是否安装成功：
1
2
node -v # 查看node版本信息
npm -v # 查看npm版本信息

所有必备的应用程序安装完成后，即可使用 npm 安装 Hexo。

npm install -g hexo-cli # 使用 -g 在全局位置安装 hexo 的命令行工具

全局安装的命令行工具可以在任何目录下使用，命令行工具会被安装在 node 的系统目录下，而不使用 -g 的本地安装则只能在当前目录下使用。

初始化 hexo 博客

安装完 hexo 命令行工具后，我们就可以建站了。执行如下命令：

hexo init "你的博客所在目录"  # 博客相关配置文件将在这个目录下创建
cd "你的博客所在目录" # 进入博客目录
npm install # 安装依赖项，使用 cmd 时需要通过管理员身份打开

依赖项安装完毕后，可以在博客目录下看到 package.json 文件。
博客目录内的各个文件作用可以在官方文档中查看：https://hexo.io/zh-cn/docs/setup 。

修改配置（可选）

在 package.json 里添加一个命令：

// ...
"scripts": {
  "build": "hexo generate",
  "clean": "hexo clean",
  "deploy": "hexo deploy",
  "server": "hexo server",
  "netlify": "npm run clean && npm run build" // 此处为新添加行
},
// ...

注：这一步不是必须行为，但是需要注意，如果执行了这一步，在后续 netlify 中部署站点时需要注意修改初始化命令行。

基础操作

hexo new [post] "文章名"  # 生成新文章，[]为默认值，可选。会在 source/_posts/ 目录下生成文件
hexo generate # 生成静态文件到 public/ 文件夹中
hexo server # 启动服务器，可在本地浏览网站。默认情况下，访问网址为： http://localhost:4000/

本地预览效果：

其他更多的操作和使用可以查看 hexo 官方文档：https://hexo.io/zh-cn/docs/ 。

github 托管博客文件

这一步需要了解些关于 git 和 github 的基础知识，可自行搜索学习。

git init
git add .
git commit -m "my blog first commit"
git remote add origin "远端github仓库地址"
git branch -M main
git push -u origin main

这样你的博客文件就被推送到 github 中了，之后对博客内容的更新都需要重新推送（当然或许有不需要的方法，但是我不会(❁´◡`❁)）。

netlify 部署网站

介绍

Netlify 是一个用于托管静态网站和前端应用程序的平台。提供持续部署（Git 触发构建）、智能全球 CDN、完整 DNS（包括自定义域）、自动 HTTPS、资产加速等功能。简而言之，你可以使用它来部署你的博客网站，这样就不需要专门去租用服务器了。

注册 netlify

该网站需要科学上网，国内不可访问。注册时可以选择使用 github 账户注册。

建站步骤

新建站点

点击箭头所指处（不同操作系统的位置可能不同），选择 Import an existing project 。
连接 github 库，并选择站点所在库
配置网站信息，一切默认，如果修改了 package.json 文件，则需要多一步操作

（多的一步）这里的命令行需要修改为 npm run netlify

点击此处的 url 即可查看 netlify 为我们部署的站点
设置 netlify 站点的二级域名

可以看到 netlify 为我们部署的网站域名已经修改

接下来，我们就需要配置我们自己的域名了

配置域名

购买域名
域名的购买可以在任意域名服务商处购买，这里以阿里云为例
添加域名解析

在域名控制台处选择解析域名

选择 CNAME 类型记录，主机记录可以右侧提示编辑，或设置二级域名，如 blog.xxx，另外设置记录值为上述 netlify 中设置的 url。
添加结果如下
在 netlify 中设置自己的域名

设置域名时使用默认配置即可
设置 netlify DNS 支持

cloudflare 加速网站

介绍

cloudflare 是一个全球云平台，旨在使您接入互联网的一切安全、保密、快速和可靠。
使用 Cloudflare 的 CDN 可以加速对博客的访问速度，虽然相对于国内的阿里云等云服务商的 CDN 速度会慢一些，但它有免费版本。

加速服务

注册 Cloudflare 并登录
在 cloudflare 中添加你的博客站点

在选择服务套餐时，选择免费版本
添加 DNS 记录
修改 DNS 解析服务器

将阿里云中域名的 DNS 修改为图中所示的 DNS 解析服务器
操作步骤如下：
最后，在 netlify 中配置 https 的证书

结语

emmm…. 本篇算是这个博客的第一篇「和技术有关的」文章，对于我这样的杂鱼真是挺有难度。
至于本文的内容，可以说十分不严谨，知识点的讲解也只是浅尝辄止、浮于表面、亟待改善。使用的技术路径也并非原创，所以很多操作步骤讲解并不细致，每步操作背后的底层逻辑，我这条杂鱼也不能完全理解。
所以，如果想喷也请嘴下留情。很是抱歉，浪费您时间了。〒▽〒

博客搭建学习

简介

前言