Hexo部署

当我们在自己这一方小天地完成了博客的基础搭建后,终于可以让它来到互联网上接受大浪淘沙的洗礼啦。

然而,从本地部署到服务器上可不是一件容易的事情,首先我们需要一个能够托管我们页面的平台,你可以选择将你的网页免费搭载到github pages上,也可以选择像我一样购买自己的服务器来进行部署。

前者是免费的,但是众所周知,国内网络有时无法链接github,链接质量无法保证,而且你无法自定义自己的域名,如果你想省下一笔资金的话,挂载到github上是一个不错的选择,网上也有很多教程,大家可以自行搜索。

博主选择了自行购买服务器进行部署,这个选择除了要购买服务器外,还需要购买自己的域名,有了域名以后还需要公安备案,如果你想在博客上放比较多的图片,则还需要购买第三方对象存储服务,也就是图床。这些合计起来每年也是不小的钱了,需要配置的东西也比较多,但是不要急,我们娓娓道来吧。本篇主要以分享博主自身部署网站的经历为主,没有教学的意思(没有这个实力呜呜),如果能帮助到你就太好了!

参考文档

Hexo博客进阶:将Hexo部署到云服务器(CentOS)CSDN博客

Nginx网站服务配置,图文详解(超详细)_nginx 配置网页-CSDN博客

一键部署 | Hexo

购买服务器

这方面当然还是得在各大厂平台购买,主要是可以保证稳定。目前主要有阿里云,腾讯云,京东云等,大家可以每家都去看一下,对比价格,在满足需求的情况下尽可能挑便宜的即可~

建议让AI帮你收集价格,注意开联网并要求最新的资料即可。

博主这边购买的是腾讯云的2核4G服务器,小网站没什么流量绰绰有余了啦~

一般各大厂的服务器云平台都有很详细的快捷配置功能,包括网站部署,项目部署,应用安装等,都有很方便的操作界面,建议大家在网上搜索部署教程时可以多留意平台有没有提供该功能的快捷配置选项。

服务器配置

在购买好服务器以后,我们就可以通过各种手段进行登入了,你可以自行使用ssh登录,也可以借助云平台快捷登录,或者你购买的是类似宝塔面板的服务器应用,就可以使用更方便的可视化UI来对服务器进行配置。

环境安装

首先你需要在服务器上安装好基本的支持环境,包括nodejs,nginx,git,安装过程并无特别,搜索一下你的平台安装这些应用的命令即可。(博主使用的宝塔面板有一键安装的功能,你也可以多留意你的平台是否有方便的安装方法)

设置Git仓库

首先切换到你想要部署的主目录,下面是博主在宝塔面板中的博库主目录

cd /www/wwwroot/blog

切换到仓库目录后,创建一个Git裸仓库。

Git裸仓库是一个不包括工作目录的Git仓库,它只包含 Git 的版本控制数据(如 .git 目录中的内容),而不包含实际的文件内容。使用裸仓库来初始化远程仓库,这样就避免了从本地上传至云服务器时出现兼容问题。

git init --bare .git

注意创建裸仓库时需要指明仓库的名称,否则会直接在当前目录创建内容,这里的.git如果不指明的话,Git数据会被创建在www/wwwroot/blog而非www/wwwroot/blog/.git中。

此时你的仓库目录结构应如下所示:

blog
├── .git
|   ├── branches
|   ├── hooks
|   ├── info
|   ├── objects
|   └── refs
├── ...

接下来我们需要创建钩子函数,指示远程仓库接受到我们的推送后自动将其更新至仓库。

钩子指的是Git在特定的重要动作发生时触发自定义脚本,钩子都被存储在 Git 目录下的 hooks 子目录中,当你用 git init 初始化一个新版本库时,Git 默认会在这个目录中放置一些.sample结尾的示例脚本,如果你想启用它们,得先移除.sample后缀。

进入.git/hooks目录

cd .git/hooks

创建钩子文件post-receive

vim post-receive

post_receive中的脚本顾名思义是在服务器端接受到post推送后进行的操作,创建后请一定要注意post_receive是不是可执行文件,如果不是请将其修改为可执行文件,否则是无法生效的。

进入编辑模式,键入以下内容,请根据自己的存放目录自行修改路径,不要照抄。

#!/bin/sh
git --work-tree=/www/wwwroot/blog --git-dir=/www/wwwroot/blog/.git checkout -f

--git-dir=...
指定 Git 仓库的路径。

--work-tree=...
指定工作目录的路径,实际存放网站文件的地方。

checkout -f
强制检出最新代码到工作目录,覆盖所有本地修改,确保内容与仓库完全一致。

设置本地仓库与服务器的ssh免密链接

我们从本地上传至服务器当然是需要密码或者密钥的,这样才能保证只有我们自己才能上传。当然如果你愿意每次上传都输入密码的话,也可以不配置ssh链接,您走罢!

首先查看一下我们本地的密钥情况,Windows系统一般在C:/Users/youname/.ssh 文件夹下,查看是否有名字类似为 id_rsa.pubid_rsa 的文件。

如果没有则需要创建密钥对,已有的可以跳过。后两项是可选的,一般ssh-keygen -t rsa就可以了。输入后一直回车就可以。

ssh-keygen -t rsa [-b 4096] [-C "your_email@example.com"]

-t rsa:指定密钥类型为RSA。
-b 4096:指定密钥长度为4096位。
-C your_email@example.com:添加注释(通常是您的电子邮件地址),这有助于识别密钥。

博主创建的是ed25519类型的密钥,因为宝塔面板推荐使用且它自己的终端也是使用这个密钥,我为了保持统一就也用的这个。

然后我们需要将我们的公钥拷贝到服务器中。将.pub结尾的公钥文件中的内容复制,然后进入服务器存放ssh密钥的目录,一般是root/.ssh目录的authorized_keys文件,如果没有这个文件,则创建一个并将公钥粘贴进去。如果已有且文件中已有内容,则换行后在下一行粘贴上即可。

实际上密钥也是可以远程添加的,这里我给出参考网站中的做法,博主本人使用这个命令总是有报错,最后还是用古法添加密钥了,大家可以试试看下面的操作。

建立 SSH 信任关系(免密登录)

>ssh-copy-id -i C:/Users/yourname/.ssh/id_rsa.pub git@server_ip
>ssh git@server_ip // 测试能否登录

如果碰到问题可以查看一下authorized_keys文件的权限,正常应当为600。.ssh文件夹的权限应为700。

再贴出一个常见问题的解决方案

SSH无密钥登陆 与 配置公钥后仍需要输入密码的解决方案_通过密钥登录ssh 要输入一串密钥吗-CSDN博客

配置Nginx

Nginx是一个高性能的HTTP和反向代理web服务器,配置好后可以将我们的服务器IP指向我们存放博客主文件的目录,使用Nginx不仅可以大大提高网站的响应速度,还可以简化网页网址,隐藏服务器的目录结构等。

进入Nginx的安装目录,并打开配置文件。(目录请换成自己的安装目录)

cd /www/server/nginx/conf
vim nginx.conf

我们先来简单看一下nginx.conf文件的内容结构。

user nobody; 					#运行用户,若编译时未指定则默认为 nobody
worker_processes auto; 			#工作进程数量,可配置成服务器内核数 * 2
error_log logs/error.log; 		#错误日志文件的位置
pid logs/nginx.pid; 			#PID 文件的位置

events {
    use epoll; 					#使用 epoll 模型,2.6及以上版本的系统内核,建议使用epoll模型以提高性能
    worker_connections 4096; 	#每个进程处理 4096个连接
}

http {
	##文件扩展名与文件类型映射表
    include       mime.types;

	##默认文件类型
    default_type  application/octet-stream;

	##日志格式设定
    #log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
    #                  '$status $body_bytes_sent "$http_referer" '
    #                  '"$http_user_agent" "$http_x_forwarded_for"';

	##访问日志位置
    #access_log  logs/access.log  main;

	##支持文件发送(下载)
	sendfile        on;
 	##此选项允许或禁止使用socke的TCP_CORK的选项(发送数据包前先缓存数据),此选项仅在使用sendfile的时候使用
	#tcp_nopush     on;

	##连接保持超时时间,单位是秒
	#keepalive_timeout  0;
	keepalive_timeout  65;
    
	##gzip模块设置,设置是否开启gzip压缩输出
	#gzip  on;

##Web 服务的监听配置
server {
	##监听地址及端口
	listen 80; 
	##站点域名,可以有多个,用空格隔开
	server_name www.xxx.com;
	##网页的默认字符集
	charset utf-8;
	##根目录配置
	location / {
		##网站根目录的位置/usr/local/nginx/html
		root /www/wwwroot/blog;
		##默认首页文件名
		index index.html index.htm;
		}
	##内部错误的反馈页面
	error_page 500 502 503 504 /50x.html;
	##错误页面配置
	location = /50x.html {
		root html;
		}
	}
}

我们需要更改的是http->server->location->root字段,将其更改为我们博客静态文件的存放位置。你也可以更改第一行的user字段,将用户名改为root,避免权限问题。

使用nginx命令启动服务

nginx

nginx #启动服务

nginx -t #检查配置文件是否配置正确

nginx -s stop #停止nginx服务

nginx -s reload #重启nginx

然后就可以啦,nginx.conf文件的配置我们后面还会涉及到,因此这里就说的详细一些,希望能够帮到大家。

如果你是使用类似宝塔面板的服务器应用一键安装的nginx或者网站的话,很有可能会自动配置nginx.conf文件,一般这种应用同样会提供方便修改配置文件的可视化UI,我们直接在这些地方修改即可。

如果你实在找不到,或者对其自动配置过程感到好奇,这里就以宝塔面板一键安装的nginx和html应用为例,看看这里的nginx.conf文件是怎样的。

user  www www;
worker_processes auto;

#中间全部省略

server
   {
   	listen 888;
   	server_name phpmyadmin;
   	index index.html index.htm index.php;
   	root  /www/server/phpmyadmin;
   	#略
   }
 
#  A部分
# server{
#   listen 80;
 
#   server_name location;
#   location / {
#         root /www/wwwroot/mikotofans/client/dist;
#         index index.html ;
#         try_files $uri $uri/ index.html;
#   }
#   location /api {
# 	proxy_pass http://127.0.0.1:5214/api;
#   }
# }
 
#  B部分
include /www/server/panel/vhost/nginx/*.conf;

这里的server字段已经被配置了一些奇怪的东西了,这很有可能是预设的一些应用(事实上也是),我们最好不要修改,那么我们的自定义配置去哪了呢,答案是最后一行include语句,我们直接去这个目录找到这些配置文件即可,其目录结构与nginx.conf文件是一致的。

注意A部分和B部分是等价的,但是推荐使用B部分的写法,尽量少对原始nginx.conf文件进行改动,避免不必要的错误。

一键部署Hexo

至此,我们已经完成了

  • 服务器的基础配置

  • Git仓库的设置

  • 本地与服务器的ssh链接

  • Nginx的配置

接下来只差最后一步了,回到本地,使用Hexo官方提供的一键部署功能。

首先,安装 hexo-deployer-git插件

$ npm install hexo-deployer-git --save

编辑 _config.yml

deploy:
  type: git
  repo: <repository url> # https://bitbucket.org/JohnSmith/johnsmith.bitbucket.io
  branch: [branch]
  message: [message]
选项 描述 默认
repo 目标存储库的 URL (注:请直接填写到服务器的.git所在目录)
branch 分支名称 gh-pages (GitHub) coding-pages (Coding.net) master (others)
message 自定义提交信息,可空 Site updated: {{ now('YYYY-MM-DD HH:mm:ss') }}
  • 如果没有使用令牌或 SSH 密钥认证,会被提示提供目标仓库的用户名和密码。且hexo-deployer-git 并不会存储你的用户名和密码,如有需要可以使用 git-credential-cache插件来临时存储。

  • 请注意远程仓库的当前分支与branch填写内容一致。

  • 可同时使用多个 deploy。 Hexo 会依照顺序执行每个 deploy。

全部配置完毕后,只需一条命令即可将网站部署到服务器上。

$ hexo deploy

我们还可以在使用hexo g构建时使用-d参数来一键部署,这样就更简单了!

hexo cl

hexo g -d

赶紧打开我们服务器的ip地址看看吧!

现在,我们只需要在本地编辑好博客文章后,就可以自动构建并部署至我们的云服务器。虽然最重要的流程我们已经跑通了,但是到这还不算完!还有一些必须要做的事情,例如我们不可能总用ip地址登录,还需要一个域名并备案,再例如我们还需要图床来存放我们网页的图片(除非你的博客不插入图片!)。这些杂七杂八的事情将在下一篇介绍。