云计算百科
云计算领域专业知识百科平台

hexo 同步部署服务器和GitHub 超详细教程

背景介绍

之前用Hexo、GitHub Pages、netlify 搭建并托管我的个人博客。尽管这种方式极为便捷,但国内访问速度时常受限。最近买了个服务器,刚好学习 Linux 和 Web 部署的相关知识,本文记录下hexo 如何同步部署服务器和GitHub。

目的

  • 实现博客内容同时推送到GitHub和阿里云服务器。

  • 掌握宝塔面板的基础网站配置方法。

  • 学习Nginx 基础配置技巧。

  • 基础条件

  • 已在本地及GitHub上已成功搭建Hexo博客环境。

  • 已有阿里云服务器。

  • 已有域名和 SSL 证书。

  • 安装流程

    安装 git

    服务器端安装 git。

    sudo yum install git

    创建博客文件夹

    服务器端创建文件夹。

    sudo mkdir -p /blog/html

    设置正确的权限。

    sudo chown root:root /blog/htmlsudo chmod 755 /blog/html

    创建 git 仓库

    在服务器端配置 git 仓库接收本地推送,注意设置一个全局分支名称,我的是 main。

    cd /root
    sudo git init –bare blogit.git #创建一个叫blogit的仓库
    git config –global init.defaultBranch main #配置全局默认分支名

    使用 hooks 实现自动部署

    sudo vim /root/blogit.git/hooks/post-receive

    创建一个钩子文件,将下面的内容,放在 post-receive 里。初学者建议学习下 vim 语法。

    #!/bin/shgit
    –work-tree=/blog/html
    –git-dir=/root/blogit.git checkout -f main

    保存文件,给权限。

    chmod +x /root/blogit.git/hooks/post-receive

    vim 基本语法

    点击 insert 切换模式,点击 esc 退出编辑模式,注意在英文输入法状态下才可以输入命令。

    :wq #保存
    :%d #全部删除

    修改 hexo 配置

    在 hexo 的 _config.yml 文件deploy 设置中增加服务器git 信息。

    deploy: 
    – type: git   
    repository: git@github.com:[对应的项目名].github.io.git #注意替换[]内容   
    branch: main 
    – type: git   
    repository: root@[域名]:/root/blogit.git #注意替换[]内容   
    branch: main

    注意做这一步之前需要将本地电脑的公钥,放在服务器 authorized_keys 文件里。这样就可以通过本地 ssh 连接服务器了,可以通过下面的代码测试是否连接成功。

    ssh root@[域名]

    经过上述过程后,在本地文件夹 利用 hexo 三连,测试是否将博客同时发布到服务器和 GitHub。

    hexo clean
    hexo g
    hexo d

    成功同步

    安装宝塔

    在阿里云里面可以重装带有宝塔的系统,也可以执行下面的命令

    if [ -f /usr/bin/curl ];then curl -sSO https://download.bt.cn/install/install_panel.sh;else wget -O install_panel.sh https://download.bt.cn/install/install_panel.sh;fi;bash install_panel.sh ed8484bec

    安装 nginx

    进入宝塔页面,会推荐安装 nginx,其他工具的根据自己情况安装。

    配置 html 项目

    由于我是用的 hexo 主题为 fulid 很多 css 用的是 https ,需要申请证书,如果没有添加证书,很多效果无法展示,因此需要在阿里云服务器里申请免费的 SSL 证书,个人证书只有 90 天的权限,具体步骤直接在服务器搜索,这里略过不提。

    在宝塔内点击网址-html 项目-添加项目,添加域名、根目录信息,点击确定。

    在新增的html网站项目里,点击部署 SSL 证书,将阿里云上的证书下载下来,把 key 和 pem 复制到对应的位置,点击确定即可。

    用下面代码检查一下配置是否正常,若一切正常,重载配置,浏览域名就可以看到内容啦。

    nginx -t

    nginx 配置

    用这种方法不用去折腾 nginx 配置,会自动生成,在宝塔网站管理界面可以看到,以下是示例,实际有 SSL 证书的会复杂一些。

    server {
    listen 80;
    server_name wenmao.xyz; # 替换为你的域名或IP地址
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header X-Forwarded-Proto $scheme;
    proxy_set_header Host $http_host;
    proxy_connect_timeout 300;
    proxy_http_version 1.1;
    proxy_set_header Connection "";
    chunked_transfer_encoding off;

    root /blog/html; # 替换实际路径
    index index.html index.htm;

    location / {
    try_files $uri $uri/ /index.html;
    }

    # 访问日志和错误日志
    access_log /www/wwwlogs/hexo_blog_access.log;
    error_log /www/wwwlogs/hexo_blog_error.log;
    }

    结语

    折腾了一圈,总算是成功了,这个过程中,基本熟悉了网站部署的流程,购买域名、备案、设置证书,宝塔、nginx 配置。第一次做感觉非常麻烦,完成之后梳理一遍觉得收获了不少,对 liunx、宝塔、1panel 更感兴趣了,另外过程中还进一步了解 hugo、astro、Docusaurus 等网站框架的部署,对比之后还是坚持 obsidian+hexo 的笔记流程,理由是 obsidian 是我主力的笔记软件,不用更换文档的属性,不用更换文件夹,加上hexo 配置好后,三连配合GitHub page 或者netlify 可以非常方便的部署。

    总之,整个过程主要的收获初步是了解了Linux 项目部署相关知识。

    参考资料

    https://blog.csdn.net/weixin_44975887/article/details/117267259

    已部署博客

    欢迎收藏,有什么问题可以在公众号后留言~

    https://wenmao.xyz/
    https://wenmaochen.netlify.app/
    https://maoyu92.github.io/

    BY

    纯个人经验,如有帮助,请收藏点赞,如需转载,请注明出处。微信公众号:环境猫 erCSDN : 细节处有神明

    赞(0)
    未经允许不得转载:网硕互联帮助中心 » hexo 同步部署服务器和GitHub 超详细教程
    分享到: 更多 (0)

    评论 抢沙发

    评论前必须登录!