前言
在我的另一篇文章关于我想要拥有自己的网站这件事中,我搭建了一个基于GitHub Pages的博客网站,并且备案成功,为网站迁移做好了前期准备。

本来这篇文章我是与上面那篇合在一起写的,然而,由于网上教程的不完善以及我的猪鼻,我搞了好久才成功把网站部署到了服务器上,期间踩了无数稀奇古怪的坑,跟随着部署过程一起写的这篇文章也随之变得冗长臃肿,于是我认为这么屑的部署过程有必要单开一帖记录。

参考文章:

Nginx搭建基于Hexo的Blog

基于Hexo+Nginx+Git在云服务器上搭建个人网站

【hexo博客搭建】将搭建好的hexo博客部署到阿里云服务器上面(下)

讲一讲整体思路

很多教程都有个共同的问题,就是只讲要做什么,而不讲为什么做。这就导致读者读完教程后知其然而不知其所以然,甚至对于一些粗制滥造胡乱抄袭的教程,读完以后连其所以然都不知。

所以我想在我的博客的开头简单介绍一下部署的思路,让读者(如果有的话)在后续的部署过程中能明白自己在干什么,而不是如盲人摸象一般被动地跟着教程模仿,出了问题都不知道出在哪。这对我自己来说也是重新审视知识的过程。

当然读者也可以直接跳过这一部分,这并不会影响部署结果。

本地要做哪些准备?

在本地配置hexo并生成网站静态文件,生成的静态文件将通过git工具推送到服务器(或github等任意我们想要部署到的地方)。

云端要做些什么

在云端我们做了两个工作:

  • 部署nginx,它将帮助你把网站的静态文件变成可以访问的网站。

  • 安装git(对于云服务器来说这一步通常已经完成了),建立一个git仓库,用来接收从本地推送的网站静态文件,并利用hook(钩子)工具将其转移到nginx的托管目录下。

还有别的吗

建立云服务器与本地的SSH连接,这样我们在使用git向服务器推送网站静态文件时就不必每次都要输入云服务器的用户密码了,可以和向github推送代码一样直接。

开始干活

本地

关于我想要拥有自己的网站这件事

服务器

nginx

安装nginx

apt install nginx

查看nginx版本

nginx -v

启动nginx

service nginx start

在浏览器输入服务器的公网IP便可以看到nginx的欢迎页面。

welcome-to-nginx.png

为nginx创建用来存放网站静态文件的文件夹

mkdir -p /var/www/hexo
#教程里都写这个目录,虽然不知道是否有什么深意,但还是跟着做了
#-p 确保目录名称存在,不存在的就建一个。

修改目录所有者

chown -R $USER:$USER /var/www/hexo
#这里的$USER填用户名
#这里我使用的是腾讯云服务器ubuntu实例的默认用户名ubuntu
#因此这里我是这样写的:chown -R ubuntu:ubuntu /var/repo/
#当然也有教程是建立了一个git用户,这样更规范,也推荐使用
#-R参数表示递归处理,将指定目录下的所有文件及子目录一并处理
#USER:USER中,前一个USER是指用户名,后一个USER是指用户所属的群组

修改目录权限

chmod -R 755 /var/www/hexo
#chmod 755 设置用户的权限为:
#1.文件所有者可读可写可执行
#2.与文件所有者同属一个用户组的其他用户可读可执行
#3.其它用户组可读可执行

修改Nginx的default文件使得root指向刚刚创建的/var/www/hexo目录:

vim /etc/nginx/sites-available/default

在server大括号中,添加如图所示的一句话:

root /var/www/hexo;

修改nginx的default文件.png

重启nginx服务。

service nginx restart

git

建立一个git仓库目录

mkdir /var/repo/

修改目录权限

chown -R $USER:$USER /var/repo/
#这里目录所有者与上文nginx静态文件目录所有者相同,我是ubuntu.
chmod -R 755 /var/repo/

将这个仓库初始化

cd /var/repo
git init –bare hexoblog.git
#参考文章:git init 与git init –bare

配置hook(钩子)文件

vim /var/repo/myblog.git/hooks/post-receive
#git post-receive机制:这个hook是git服务器在受到push请求时,并且接受完代码提交时触发
#参考:使用git hooks(post-receive)实现简单的远程自动部署
#不会用vim可以看一看简单指令->Linux vi/vim

打开文件后在其中输入:

#!/bin/bash
git --work-tree=/var/www/hexo --git-dir=/var/repo/hexoblog.git checkout -f

参考文章:
Git系列之二 — git-dir & work-tree
git checkout 检出命令——自由切换分支&恢复文件

保存后修改权限

chmod +x /var/repo/myblog.git/hooks/post-receive
#参考文章:chmod +x,赋予“可执行”权限

本地与云端建立SSH连接

  • 如果你注册过github,那你大概率曾经生成过公钥,查看(Windows)电脑是否有C/Users/Administrator/.ssh/文件夹,如果有的话,文件夹下id_rsa.pub就是你的公钥。

    P.S. Linux系统的公钥在~/.ssh/id_rsa.pub文件中。

    使用

    ssh-copy-id [用户名]@[云服务器IP]

    向云服务器传送公钥。

    举个例子,假设我的云服务IP是10.10.10.10,我要向服务器上sagiri用户传送公钥,那么我就使用

    ssh-copy-id sagiri@10.10.10.10

    指令。

    由于我们之前配置仓库时,git仓库的所有者和nginx静态文件目录的所有者我都填了ubuntu,所以这里的用户名当然也是ubuntu.

    这里需要输入一次用户密码。

  • 如果电脑上没有C/Users/Administrator/.ssh/文件夹,那么就使用

    ssh-keygen

    指令先生成一个公钥,然后再用

    ssh-copy-id [用户名]@[云服务器IP]
    #命令讲解见上文

    传送公钥。

修改hexo配置文件

回到我们的本地,打开hexo文件夹下的_config.yml文件进行配置

  • 找到url字段,将其配置为

    url: http://[服务器IP|服务器网址]/

    举例:我的服务器公网IP为101.33.208.50,挂载在我的服务器上的域名为sagirichan.com,那么这里可以填

    url: http://101.33.208.50/

    也可以填

    url: http://sagirichan.com/

  • 找到deploy字段,参考下图进行配置:

    deploy配置.png

    解释:

    • type字段是推送网页文件的方式,我们用的是git,所以这里填git.

    • repo是代码仓库的位置,格式为

      仓库名称: 仓库用户名@仓库位置

      我使用了两个仓库,一个是我本次部署在云端的仓库,另一个是我在初学搭建网站时部署在github上的仓库。

      以云端仓库为例

      • 仓库名称可以随便取,我的服务器来自腾讯云,所以我取名为tencentCloud

      • 仓库用户名字段,由于部署时我设置的云端git仓库的所有者为ubuntu,所以这里也是ubuntu.

      • 仓库位置字段,即是之前部署时设置的仓库位置。

      github仓库格式同理而且搭建网站的教程百分之九十九都会讲这个的

    • 对于deploy字段,除了展示的关键词,还有branchmessage等关键词可供选择但是我嫌麻烦就没有继续深入研究了

      deploy补充.png

万事俱备

在hexo文件夹下打开终端(vscode、power shell、git bash等等任意终端),输入hexo三连

hexo clean
hexo g
hexo d
#g是generation,生成网页文件
#d是deploy,发布网站。实际上deploy命令是将网页文件推送到远程仓库中。参考这一切是如何发生的?

或者也可以简化为两连:

hexo clean
hexo g -d

如果终端支持的话,还可以写进一行:

hexo clean && hexo g -d

然后在浏览器地址栏中输入云服务器的公网IP或者绑定的域名(如果有的话),我们就可以访问到自己的网站啦。

网站首页.png