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

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

一、购买云服务器

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

二、购买域名

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

三、创建图床

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

1.创建腾讯云 COS 存储桶

2.设置参数

3.创建完成

4.创建 SecretId 和 SecretKey

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

5.Typora 安装 PicGO 插件

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

6.配置 PicGo

{
  'picBed':
    {
      'uploader': 'tcyun',
      'tcyun':
        {
          'secretId': '你的腾讯云SecretId',
          'secretKey': '你的腾讯云SecretKey',
          'bucket': '腾讯云COS存储桶名称',
          'appId': '腾讯云COS存储桶数字Id',
          'area': '腾讯云COS存储桶区域',
          'path': '上传路径',
          'customUrl': '',
          'version': 'v5',
        },
    },
  'picgoPlugins': {},
}

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

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

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

四、云服务器配置

1.创建 ssh 密钥

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

绑定实例

2.远程链接

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

2.1 新建 shh 链接

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

2.2 添加密钥

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

密码不用管

2.3 链接

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

五、项目部署

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

1.安装 Webhook 和 node

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

2.准备项目

首次需要手动拉取项目

# 进入网站目录
cd /www/wwwroot
# 克隆你的项目(替换为你的 Git 仓库地址)
git clone https://github.com/your-username/your-repo.git your-domain.com
# 进入项目目录
cd your-domain.com
# 安装依赖
npm i

3.配置 Webhook 脚本

添加 hook

PROJECT_PATH="/www/wwwroot/my_blog"
WEB_ROOT="/www/wwwroot/my_blog/index_html"
cd $PROJECT_PATH
# 拉取最新代码
git pull origin master
# 安装依赖(如果需要)
npm i
# 清理并生成
hexo clean
hexo generate
# 复制到网站根目录
if [ -d "public" ] && [ -d "$WEB_ROOT" ]; then
    cp -r public/* $WEB_ROOT/
    echo "部署完成"
else
    echo "部署失败:public 或网站根目录不存在"
    exit 1
fi

复制生成的地址

到仓库设置 hook

点击 管理WebHooks添加 WebHook

配置:

  • URL: 粘贴宝塔 Webhook 地址
  • 触发事件: 选择 Push
  • 点击 添加

配置:

  • URL: 粘贴宝塔 Webhook 地址
  • 触发事件: 选择 Push
  • 点击 添加

这样远程仓库收到推送就会通知宝塔执行部署脚本,实现博客的更新

4.添加 DNS

在控制台给自己的域名添加云解析,这样才能使用域名访问到服务器

记录值即为服务器

访问域名,出现备案页面,说明解析成功,备案过程不再赘述

5.宝塔创建网站

网站 ➡HTML 项目 ➡ 添加项目

绑定域名就是已经购买的域名,也可以增加服务器的 ip 地址

根目录就是项目打包的根目录

6.测试

直接打开服务器的 ip 地址,可以发现博客已经成功加载出来了