个人博客搭建全记录02-项目部署上线 • YuanGIS

因为笔者需要使用图床及其他云服务，为了方便，所以没有采用 github page 直接使用云服务器。

一、购买云服务器

最近腾讯云和阿里云都在年终促销，经过对比，笔者参加新用户活动选择了腾讯云

二、购买域名

这没什么好说的，找到自己喜欢的便宜的就行

三、创建图床

为了方便后期更新博客，在 Typora 中插入的图片能动态的更新资源地址，这里使用青花鱼的方案

1.创建腾讯云 COS 存储桶

2.设置参数

3.创建完成

4.创建 SecretId 和 SecretKey

为了安全，建议使用子账户创建

5.Typora 安装 PicGO 插件

文件 ➡ 偏好设置 ➡ 图像 ➡ 插入图片时：上传图片 ➡ 上传服务设定 ➡PicGo-Core(command line)➡ 下载或更新 ➡ 打开配置文件

6.配置 PicGo

1
{
2
  'picBed':
3
    {
4
      'uploader': 'tcyun',
5
      'tcyun':
6
        {
7
          'secretId': '你的腾讯云SecretId',
8
          'secretKey': '你的腾讯云SecretKey',
9
          'bucket': '腾讯云COS存储桶名称',
10
          'appId': '腾讯云COS存储桶数字Id',
11
          'area': '腾讯云COS存储桶区域',
12
          'path': '上传路径',
13
          'customUrl': '',
14
          'version': 'v5',
15
        },
16
    },
17
  'picgoPlugins': {},
18
}

7.创建腾讯云 COS 存储桶路径

点击验证图片上传选项，出现如下信息表示成功

存储桶也出现了上传的图片文件

四、云服务器配置

1.创建 ssh 密钥

创建完成后会东到哪个下载密钥文件

绑定实例

2.远程链接

这里笔者使用的是 FinalShell 进行链接

2.1 新建 shh 链接

主机就是云服务服务器的公网 ipv4 地址

2.2 添加密钥

浏览 ➡ 导入 ➡ 浏览 ➡ 选择在腾讯云下载的密钥文件ssh.pem

密码不用管

2.3 链接

出现如下信息说明链接成功

五、项目部署

因为本博客是持续更新，同时云服务器已经预装了宝塔面板，所以采用使用 Git Webhook + 宝塔面板的 Webhook 功能自动化部署的方案

1.安装 Webhook 和 node

因为云服务器已经预装了宝塔面板，所以傻瓜式的直接安装

2.准备项目

首次需要手动拉取项目

1
# 进入网站目录
2
cd /www/wwwroot
3
# 克隆你的项目（替换为你的 Git 仓库地址）
4
git clone https://github.com/your-username/your-repo.git your-domain.com
5
# 进入项目目录
6
cd your-domain.com
7
# 安装依赖
8
npm i

3.配置 Webhook 脚本

添加 hook

1
PROJECT_PATH="/www/wwwroot/my_blog"
2
WEB_ROOT="/www/wwwroot/my_blog/index_html"
3
cd $PROJECT_PATH
4
# 拉取最新代码
5
git pull origin master
6
# 安装依赖（如果需要）
7
npm i
8
# 清理并生成
9
hexo clean
10
hexo generate
11
# 复制到网站根目录
12
if [ -d "public" ] && [ -d "$WEB_ROOT" ]; then
13
    cp -r public/* $WEB_ROOT/
14
    echo "部署完成"
15
else
16
    echo "部署失败：public 或网站根目录不存在"
17
    exit 1
18
fi