# 前言

本篇文章分为以下三个部分

一、Hexo 博客搭建

二、使用 Typora 编写博客文章

三、使用 PicGo 软件进行博客图片上传至图库

四、1Panel 服务安装

五、服务器自动部署

通过以上五大部分，你将会了解如何从 0 开始搭建一个属于自己的博客

阅读须知：

本教程默认你拥有 GitHub 账号或者 Gitee 账号

并且您的电脑已经安装了 git 软件

账号为之后的自动部署至关重要

# Hexo 博客搭建

# 什么是 Hexo ？

以上是来自 Hexo 官网对于 Hexo 的介绍

# 如何安装？

首先，您的 Windows 或 Linux 系统下需要拥有 Node.js 环境

以下是 Hexo 官网对于 Hexo 版本对应的 Node.js 版本限制

本文将使用 Windows 10 安装 Hexo

# 下载 Node.js

首先进入 Node.js 下载网站点我

本文将使用 18.20.4 (LTS) Node.js 版本进行操作

安装 Node.js 时，一直点击 Next 即可

安装完成后，可以在 Windows cmd 命令行中输入

node -v

来检测 Node.js 是否安装成功

如果出现以下字符，则表示安装成功

v18.20.4

# 安装 Hexo

安装好 Node.js 后，即可使用 npm 安装 Hexo

npm install -g hexo-cli

待 Hexo 安装完毕后，输入 hexo-version 可查看 Hexo 是否安装成功

hexo -verison

安装成功后控制台会输出以下信息

	hexo-cli: 4.3.2
	os: win32 10.0.19045 undefined
	node: 18.16.0
	acorn: 8.8.2
	ada: 1.0.4
	ares: 1.19.0
	brotli: 1.0.9
	cldr: 42.0
	icu: 72.1
	llhttp: 6.0.10
	modules: 108
	napi: 8
	nghttp2: 1.52.0
	nghttp3: 0.7.0
	ngtcp2: 0.8.1
	openssl: 3.0.8+quic
	simdutf: 3.2.2
	tz: 2022g
	undici: 5.21.0
	unicode: 15.0
	uv: 1.44.2
	uvwasi: 0.0.15
	v8: 10.2.154.26-node.26
	zlib: 1.2.13

# 初始化 Hexo

安装了 Hexo，接下来就是创建一个 Hexo 博客

首先可以在 D 盘或 E 盘下创建一个 Hexo 的文件夹，这个文件夹的名字可以是任意的

例如我在 D 盘下创建了 Hexo 文件夹

首先打开 cmd 命令窗口，Win + R 输入 cmd 打开

输入以下命令进入到 D 盘的 Hexo 文件夹中

D:
cd Hexo

进入文件夹后输入以下命令，进行 Hexo 初始化

hexo init

待初始化完毕后，输入 npm install 进行包安装

npm install

待包安装完毕后，输入 hexo s 可以进行博客预览

hexo s

当你的控制台出现以下内容，那就是 hexo 服务启动成功

	INFO Validating config
	INFO Start processing
	INFO Hexo is running at http://localhost:4000/ . Press Ctrl+C to stop.

博客默认地址是 http://localhost:4000/

现在的博客看起来应该是这样的

最后，输入以下命令进行博客文章的页面生成

hexo g

执行完上述命令你会发现，文件夹里多了一个 public 文件夹，里面就是生成的博客静态资源文件，上传至服务器的文件就是这些

# 使用 Typora 编写博客文章

# 什么是 Typora？

以下是来着百度百科的简介

Typora 是一款由 Abner Lee 开发的轻量级 Markdown 编辑器，与其他 Markdown 编辑器不同的是，Typora 没有采用源代码和预览双栏显示的方式，而是采用所见即所得的编辑方式，实现了即时预览的功能，但也可切换至源代码编辑模式。

# 为什么用 Typora？

Typora 将给你作为一个读者和作家的无缝体验。它删除了预览窗口、模式切换程序、标记源代码的语法符号以及所有其他不必要的干扰。将它们替换为真正的实时预览功能，以帮助您专注于内容本身。

Typora 不仅仅是一个简单的写作软件，它支持

图像，页眉，列表，表格，代码围栏，数学，关系图，内联样式等等..

并且 Typora 支持自定义主题，只要你学过 CSS 相关的知识，你也可以定制一款属于您自己的 Typora 的主题

Typora 使用 Markdown 进行文档编写，完全支持 Markdown 语法

关于 MarkDown 可以查看这一个网站点我

以上已经粗略的了解 Typora 与 MarkDown 的一些知识了，接下来就开始书写第一篇博客吧

# 第一篇博客

首先进入先前创建的 Hexo 文件夹并且进入 source 文件夹里的 _posts 文件夹

这里是存放博客文章的目录，任何以 .md 结尾的 markdown 语法文件都会转换成 html 静态页面并显示在 Hexo 博客中

在这个文件夹下创建名为 My First Blog.md 文件

每篇博客文件都需要含有 Front-matter 标签，里面的内容包含了博客的标题，博客的创建时间，博客的更新时间等，详细请看 Hexo Front-matter

在 My First Blog.md 文件下输入以下内容

	---
	title: 我的第一篇博客
	date: 2024/8/1
	---

	# 我的第一篇博客

	Hello World
	...

保存文件后，在 Hexo 文件夹中输入 hexo s 启动 Hexo 服务查看文章

hexo s

此时，你将会在 Hexo 博客底部中看到你新建的文章

至此，你已经学会创建了博客文章，接下来将会教你如何使用图床存储博客图片

# 使用 PicGo 软件上传至图库

# 什么是图床？

图床一般是指储存图片的服务器，有国内和国外之分。国外的图床由于有空间距离等因素决定访问速度很慢影响图片显示速度。国内也分为单线空间、多线空间和 cdn 加速三种。

# 为什么需要图床？

对于磁盘空间来说，图片的大小往往都是比文本数据要大得多，一张图片小到 1KB，大到 100MB（举个例子），但是对于文本数据来说，一个英文或一个字母，都是固定的字节

为了缓解服务器的压力，存储图片则会使用专门用于存放的图床，或者 OSS 存储（Object Storage Service）进行图片的存放

这样，服务器只用提供博客文章的页面显示，图床服务器提供图片显示，缓解了博客服务器的压力

# 注册 PicGo 图床

PicGo 图床链接：https://www.picgo.net/

点击链接，注册一个 PicGo 图床账号

注册完毕后，验证邮箱信息等即可上传图片到 PicGo 图床上

# 安装 PicGo

应用概述

PicGo: 一个用于快速上传图片并获取图片 URL 链接的工具

PicGo GitHub 地址 GitHub

# 下载 PicGo

将使用山东大学镜像站进行软件下载下载地址

对于 Windows x64 位系统，则下载 PicGo-Setup-2.3.1-x64.exe

下载安装完毕后，打开 PicGo

进入插件设置 -> 搜索 cheveret -> 点击安装

待安装完毕后，进入图床设置，配置 PicGo 图床信息

# 配置 PicGo 图床

可以参考 PicGo 图床官方配置教程

https://www.picgo.net/page/api

待配置结束后，可以尝试上传一张图片到 PicGo 图床进行测试，这为接下来的图片上传步骤至关重要

# 在 Typora 中设置自动上传图片

打开 Typora 软件

点击文件 -> 偏好设置 -> 图像

选项框选择上传图片

以下复选框规则根据自己的喜好进行勾选

上传服务器设定中，选择本地已安装好的 PicGo 软件即可

选择好后，可以点击验证图片上传选项进行图床上传文件验证

# 面板 1Panel 服务安装

# 什么是 1Panel

1Panel 是新一代的 Linux 服务器运维管理面板

# 为什么要 1Panel

以下是来自 1Panel 官网对于 1Panel 的讲述

高效管理

用户可以通过 Web 图形界面轻松管理 Linux 服务器，实现主机监控、文件管理、数据库管理、容器管理等功能。

快速建站

深度集成开源建站软件 WordPress 和 Halo，域名绑定、SSL 证书配置等一键搞定。

应用商店

精选上架各类高质量的开源工具和应用软件，协助用户轻松安装并升级。

安全可靠

基于容器管理并部署应用，实现最小的漏洞暴露面，同时提供病毒防护、防火墙和日志审计等功能。

一键备份

支持一键备份和恢复，用户可以将数据备份到各类云端存储介质，永不丢失。

# 安装 1Panel

# 安装 1Panel 面板服务

1Panel 支持 CentOS、Ubuntu、Debian 等 Linux 操作系统

我将使用 CentOS 进行此次服务安装

输入以下命令进行 1Panel 面板安装

curl -sSL https://resource.fit2cloud.com/1panel/package/quick_start.sh -o quick_start.sh && sh quick_start.sh

# 设置 1Panel 安装目录

执行上述命令后，命令行会提示设置 1Panel 安装目录（默认为 /opt)

设置 1Panel 安装目录（默认为/opt):

如果你不想让它安装在 /opt 文件夹中，可以将它设置为其他目录

# 设置 1Panel 端口

1Panel 安装成功后，需要设置 1Panel 服务的端口号，回车则代表使用默认的端口号

如果不想使用默认的端口号，可以输入 20000 - 60000 之间的任意一个端口号，只要不与其他的服务端口冲突即可

设置 1Panel 端口(默认为24101):

# 设置 1Panel 安全入口

1Panel 会自动生成一个安全入口

改安全入口是作用于如果你是第一次访问 1Panel 面板时，必须使用该链接才能进入 1Panel 面板进行下一步操作

设置 1Panel 安全入口(默认为xxxxxxxx):

如果你不想使用默认的安全入口，可以自定义一个自己喜欢的安全入口

# 设置 1Panel 面板用户

1Panel 会随机生成用户名与密码

该用户名与密码信息用于登录 1Panel 面板

如果你不想用默认的用户名与密码，可以输入新的用户名与密码，切记保管好

# 安装完毕

至此 1Panel 服务已经安装完毕，输入 1Panel 面板的地址

输入用户名密码，即可进入 1Panel 面板进行下一步操作了

# 服务器自动部署

# 创建 GitHub 仓库

首先登录 GitHub 网站，点击 new repository

输入仓库名称

# 安装 hexo-deployer-git 插件

想让 Hexo 能自动部署到 GitHub 仓库上，则需要安装 hexo-deployer-git 插件

进入 Hexo 文件夹，输入以下命令

npm install hexo-deployer-git --save

安装完毕后，打开 Hexo 文件夹下的 _config.yml 文件，编辑以下内容

	# Deployment
	deploy:
	type: ""

将上面的配置信息替换如下的信息

	deploy:
	- type: git
	repo: git@github.com:${yourGitHubName}/${yourGitHubRepository}.git
	branch: master

将 ${yourGitHubName} 替换成你的 GitHubName

将 ${yourGitHubRepository} 替换成你的仓库名称

# 创建 SSH 钥匙

首先打开 cmd 命令行，在命令行中输入

ssh-keygen -t rsa -C "你的 GitHub 邮箱"

一路回车后，就创建好了一个 SSH 秘钥

然后进入 C:\Users\用户名\.ssh 中查看当前生成的秘钥

用记事本打开 id_rsa.pub 并复制里面的内容

# 在 GitHub 中添加 SSH 秘钥

进入 GitHub 点击个人头像点击 Settings

点击左边栏的 SSH and GPG keys，点击 New SSH Key

将我们刚刚复制的秘钥文本粘贴到输入框中，给秘钥起个名字即可

# 配置 1Panel 静态网站

进入 1Panel 服务，点击网站创建静态网站

输入你的网页域名，输入网页存放目录

最后点击确认即可

# 配置 1Panel 计划任务

进入 1Panel 服务，点击计划任务，创建计划任务

选择任务类型为 Shell 脚本

任务名称自定义

执行周期每天早上 8 点

脚本内容

	cd /web
	rm -rf /web
	git clone git仓库地址

/web 是你创建静态网站时的目录

git 仓库地址则是你存放 Blog 静态资源的仓库

# 使用 Hexo 部署到 GitHub 上

当你书写完你的博客文章后，你执行以下命令，将博客静态资源部署到 GitHub 上

	hexo clean
	hexo generate
	hexo deploy

最后，你可以等待到早上八点，1Panel 服务自动执行计划任务

或者你可以去 1Panel 计划任务立刻执行该任务

# 总结

至此本文结束，感谢你的观看

欢迎关注我的 Bilibili 账号 KSaMar

我的个人微信公众号筱原空的变成小屋