Hexo完全部署到腾讯云

博客搭建 评论

前言

上一篇博客介绍了在Windows环境下搭建个人博客，虽然能用，但主要存在以下几个问题：

  • git命令效果不稳定，git clone以及hexo d都涉及到与github交互，多数情况下会提示无法连接，只能多次尝试

  • 网站所有内容都存放于Github公开仓库，隐私性得不到保证

  • 博客文件夹存放在本地，没有备份，一旦重装系统，就要重新设置一遍环境

因此通过查找相关资料，实现了将网站相关内容全部放置于云服务器，本地只需要使用markdown写好博客，之后的内容全部在服务器运行。其好处在于：

  • 摆脱本地电脑的限制，可以随时使用Markdown文档写好内容，将其上传至服务器，然后在服务器上生成网页
  • 文件隐私性得到保证，所有内容都存放于服务器，不再使用github公开项目
  • 间接实现文件备份，云服务器提供快照功能，一旦出现问题，直接回退到上一个时间点，所有配置均可恢复回去

上面是自己在搭建网站时的一些体验及选择，当然，购买服务器是要花钱的，市面上也有一些比较优惠的服务器可以选择，比如阿里云、腾讯云的的学生机，对于初次搭建网站来说，选择最低配置即可。

购买服务器的相关过程大家就自行探索吧，这里不再介绍。

本篇博客内容默认你已经符合下述条件：

  • 拥有自己的云服务器
  • 能够通过服务器控制台/本地Xshell等方式登录服务器
  • 有一定的linux系统操作基础（知道cd、vim等最简单的命令）
  • 已有Github账户

完成上面的事情后，就可以进行博客搭建了

本文使用云服务器环境为CentOS 8.2 64bit，一些安装命令与Ubuntu不同，但原理及流程通用

基本原理介绍

实现Hexo完全上云后，整个博客工作原理可以看下面这张图

各部分具体内容/作用如下：

  • 本地hexo文件夹： Hexo的本地文件夹，负责博客设置、页面生成、将生成好的页面上传
  • Git仓库： 相当于github.io的项目仓库，仅存放推送上来的网页相关文件
  • Nginx托管目录： 是Git仓库的复制，供Nginx服务器读取使用（为什么不能直接读取Git仓库，我也还没弄明白）
  • Nginx服务器： 为云服务器提供Web服务，在浏览器使用公网IP访问后就接入Nginx服务器，之后访问托管目录

了解了基本原理，接下来进行博客搭建

安装Git

云服务器初始化完成后，若使用默认方式安装Git，版本太旧（1.8版本），会对后面的步骤造成影响，所以直接手动安装最新版本的Git

安装依赖库和编译工具

  • 安装依赖库

    1
    yum install curl-devel expat-devel gettext-devel openssl-devel zlib-devel

  • 安装编译工具

    1
    yum install gcc perl-ExtUtils-MakeMaker

下载Git

  • 选择一个目录来存放下载下来的git安装包。这里选择了/usr/src目录

    1
    cd /usr/src

  • 到官网找一个新版稳定的源码包下载到/usr/src文件夹里

    1
    wegt https://mirrors.edge.kernel.org/pub/software/scm/git/git-2.17.6.tar.gz

解压编译Git

  • 在当前目录下解压git-2.17.6.tar.gz

    1
    tar xzf git-2.17.6.tar.gz

  • 进入git-2.17.6.tar.gz目录下

    1
    cd git-2.17.6

  • 执行编译

    1
    make prefix=/usr/local/git all

  • 安装Git到/usr/local/git目录下

    1
    make prefix=/usr/local/git install

配置Git环境变量

  • 将Git加入环境变量中

    1
    2
    echo "export PATH=$PATH:/usr/local/git/bin" >> /etc/bashrc
    source /etc/bashrc

查看Git版本

1
git --version

此时能够看到git version 2.17.6说明安装成功

设置Git（用户名、密码，用于标识上传者信息）

1
2
git config --global user.email "you@example.com"
git config --global user.name "Your Name"

其中you@example.com为Github的注册邮箱，Your Name为Github用户名

安装NodeJs

默认版本的Nodejs因过于古老(10.24版本)，直接使用会报错，因此在安装后进行升级。

安装Nodejs

  • 回到根目录 (也可以直接安装，因为yum是全局的)，进行nodejs安装

    1
    2
    cd /
    yum install nodejs

安装n（nodejs管理工具）

1
npm install -g n

安装最新版Nodejs

1
n latest

  • 安装完成后，退出当前shell

    1
    exit

  • 重新登陆一下服务器

查看版本

  • 查看node版本

    1
    node -v

  • 查看npm版本

    1
    npm -v

  • 可以看到已经更新到最新版本

创建本地blog文件夹

创建一个文件夹，相当于本地hexo文件

  • 回到服务器根目录下

    1
    cd /

  • 创建名为hexo的博客文件夹

    1
    mkdir hexo

  • 进入文件夹

    1
    cd hexo

部署Hexo

  • 安装Hexo

    1
    npm install -g hexo-cli

  • 初始化博客

    1
    hexo init

  • 预览查看

    1
    hexo s

  • 出现Hexo is running at http://localhost:4000提示，说明本地部署成功，之后Ctrl+C退出即可

安装Git相关插件，用于后面将该文件夹内容推送至仓库

1
npm install hexo-deployer-git --save

创建git仓库

完成本地Hexo创建后，进行Git仓库的配置，用于存放博客网站资源。之后通过对仓库进行设置，使得文件能够被Nginx获取

在home/git目录下创建名为hexoBlog的裸仓库(bare repo)

  • 创建文件夹

    1
    mkdir /home/git/

  • 赋予文件夹相关权限

    1
    2
    chown -R $USER:$USER /home/git/
    chmod -R 755 /home/git/

  • 创建Git仓库

    1
    2
    cd /home/git/
    git init --bare hexoBlog.git

设置gti仓库（钩子），用于自动将内容传送至Nginx

  • 在hexoBlog.git/hooks/下创建钩子文件post-receive

    1
    vim /home/git/hexoBlog.git/hooks/post-receive

  • 按 i 键进入文件的编辑模式，在该文件中添加两行代码（将下边的代码粘贴进去)，指定 Git 的工作树（源代码）和 Git 目录（配置文件等）

    1
    2
    #!/bin/bash
    git --work-tree=/home/hexoBlog --git-dir=/home/git/hexoBlog.git checkout -f

  • 写入代码后，按 Esc 键退出编辑模式，输入:wq保存退出

  • 修改文件权限，修改文件权限，使得其可执行

    1
    chmod +x /home/git/hexoBlog.git/hooks/post-receive

安装并配置Nginx

安装Nginx并测试

  • 安装Nginx

    1
    yum install nginx

  • 启动Nginx

    1
    service nginx start

  • 在浏览器中输入服务器IP地址（公网IP），看到Nginx的欢迎界面即为安装成功

创建Nginx托管目录

  • 创建/home/hexoBlog目录，用于 Nginx 托管

    1
    2
    3
    mkdir /home/hexoBlog/
    chown -R $USER:$USER /home/hexoBlog/
    chmod -R 755 /home/hexoBlog/

修改Nginx默认配置，其中vim后面是配置文件位置，可以通过nginx -t查询得到，默认就是下面这个位置

1
vim /etc/nginx/nginx.conf

  • 通过方向键找到如下一段代码，并修改两处设置

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    server {
        listen       80 default_server;
        listen       [::]:80 default_server;
        server_name  XXX.XXX.XXX.XXX:XXX; #此处需要将_替换为你服务器的公网ip
        root         /home/hexoBlog; #此处更改为刚才创建的托管目录
      
        # Load configuration files for the default server block.
        include /etc/nginx/default.d/*.conf;
      
        location / {
        }
      
        error_page 404 /404.html;
            location = /40x.html {
        }
      
        error_page 500 502 503 504 /50x.html;
            location = /50x.html {
        }
    }

  • 修改完毕后，按Esc键退出编辑模式，输入:wq保存退出。

重启Nginx服务

1
service nginx restart
  • 重启后再次使用ip访问将会出现403错误，因为我们更改了托管目录，而现在目录中还没有内容。接下来对其进行配置

修改Hexo本地站点配置文件

通过修改本地Hexo上传的目的地，将内容上传至Git仓库以便Nginx获取

打开本地Hexo配置文件

1
vim /hexo/_config.yml

  • 在最后找到deploy:配置项，将云服务器ip写入，告诉git向何处推送，具体修改如下：

    1
    2
    3
    4
    deploy:
      type: git
      repo: root@你的云服务器ip:/home/git/hexoBlog
      branch: master

  • 至此，所有流程已经打通，在本地hexo文件夹执行hexo相关操作并上传后，即可在浏览器使用公网IP访问云服务器看到我们的博客界面

在hexo目录下执行hexo部署，将内容推送至仓库

1
2
3
4
cd /hexo
hexo clean
hexo g
hexo d

  • 首次使用将会创建秘钥，在弹出的提示后输入yes即可

  • 之后会提示输入服务器密码，相应输入即可，以后每次使用hexo d进行推送时都要输入

完成后在浏览器输入服务器公网IP即可看到最新的博客网页，以后的所有操作均在本地hexo文件夹下进行

参考内容：

Hexo 博客部署到腾讯云教程 | 『不羁阁』 | 行走少年郎 (bujige.net)

枫与风