Hexo部署到服务器（宝塔+域名）

网站部署

1. Hexo部署到服务器（宝塔+域名）

2. 前言

  Hexo是一款基于Node.js的静态博客框架，依赖少易于安装使用，可以方便的生成静态网页托管在GitHub和Coding上，如果自己拥有云服务器，也可以部署在自己的云服务器上通过公网IP或者域名访问，本篇文章主要详细介绍如何将Hexo主题部署到阿里云云服务器上线访问。大家可以进入hexo官网进行详细查看，因为Hexo的创建者是台湾人，对中文的支持很友好，可以选择中文进行查看。

  这里主要介绍如何将Hexo部署到服务器（宝塔+域名），至于Hexo本地配置就很简单，参考Hexo教程即可，或者相关Hexo主题都会有使用简介。

3. 准备工作本地环境配置

  • 客户端环境配置

  • 服务器环境配置

  • 上线访问

4. 客户端环境配置

4.1 客户端安装Node.js

请参考node.js环境安装

4.2 客户端安装Git

请参考Git安装与常用命令

4.3 客户端安装Hexo

指路：hexo官网

4.31 首先需要建立博客文件夹

  建议建在非系统盘，例如 D:/Hexo/，那么这个目录就是我们博客的根目录了。 每个人的命名习惯不同，可以是blog、myblog、Hexo等，无所谓，随便取。

image-20230116221505580

4.32 使用 npm 安装 Hexo

在博客路径下鼠标右键 ->Git Bash Here（其实只要在当前博客路径进入本地终端都可以）, 输入

image-20230116221853501 
1
2
3
4
5
npm config set registry https://registry.npm.taobao.org
#将npm源替换为阿里的镜像。之后的安装就会迅速很多了。
npm install hexo-cli -g
# hexo-cli 是 hexo的指令集。
hexo -v #查看hexo版本

4.33 初始化 Hexo 博客：

1
2
## 本地创建一个目录用于存放博客
hexo init <folder> #初始化博客文件夹，<folder>博客文件夹名

image-20230116222845759

1
2
3
#进入刚初始化博客文件夹输入以下指令
hexo generate #生成博客文件
hexo server #启动本地博客服务端，会在终端显示localhost:4000
image-20230116223218031

然后在浏览器中打开*** localhost:4000*** , 就能看到

image-20230116223348708

至此，本地Hexo配置完成！！！

5. 服务器环境配置

这里不多赘述服务器的购买、配置等流程，后期会出教程（其实很简单，百度就行，后面出一版详细的）

5.1 客户端配置免密登录

  • 配置本地客户端与阿里云服务器端的 ssh 免密登录，方便上传仓库时一键式上传。

  • 在本地客户端生成并上传公共密钥：

  • 本地博客路径进入终端输入：

1
2
3
4
5
6
## 执行完之后一直回车就行
ssh-keygen
## 上传公共密钥到阿里云服务器
ssh-copy-id root@阿里云公网IP
## 测试是否已免密
ssh root@阿里云公网IP
  • 如果无需密码即可登录，说明已经配置完成。

image-20230116225823643

5.2 服务端安装 Nodejs

  1. 在本地客户端使用 ssh 或者其他ssh链接工具连接阿里云服务器公网IP：
1
ssh root@公网IP
  1. 一键式安装配置 Nodejs：
1
2
3
4
5
6
7
8
9
cd /tmp && wget https://nodejs.org/dist/v17.5.0/node-v17.5.0-linux-x64.tar.xz
tar xf node-v17.5.0-linux-x64.tar.xz
mv node-v17.5.0-linux-x64 /usr/local/node
ln -s /usr/local/node/bin/node /bin/node
ln -s /usr/local/node/bin/npm /bin/npm
echo 'export PATH=/usr/local/node/bin:$PATH' >> /etc/profile
source /etc/profile
node -v
npm -v
  1. 执行完就安装成功了。

5.3 服务端安装 Git

  1. 一键式安装 Git：
1
2
3
4
5
6
7
8
9
10
yum install -y curl-devel expat-devel gettext-devel openssl-devel zlib-devel gcc perl-ExtUtils-MakeMaker
cd /tmp && wget https://www.kernel.org/pub/software/scm/git/git-2.9.5.tar.gz
tar xf git-2.9.5.tar.gz
cd git-2.9.5 && make all prefix=/usr/local/git
make install prefix=/usr/local/git
echo 'export PATH=$PATH:/usr/local/git/bin' >> /etc/bashrc
source /etc/bashrc
git version
git config --global user.name "你的账号"
git config --global user.email "你的邮箱"
  1. 执行完就安装成功了（要注意的是客户端也需要安装一下 Git）

5.4 服务端安装 Nginx或者Apache（任选其一）

Nginx和Apache都是web服务器，建站必备，任选其一即可，用来托管和服务web内容

Nginx：Nginx是一款轻量级的Web 服务器/反向代理服务器及电子邮件（IMAP/POP3）代理服务器，在BSD-like 协议下发行。其特点是占有内存少，并发能力强，事实上nginx的并发能力在同类型的网页服务器中表现较好。

Apache：Apache 是一个模块化、流程驱动的 Web 服务器应用程序，它为每个同时连接创建一个新线程。它支持许多功能。其中许多被编译为单独的模块并扩展其核心功能。Apache 的模块可以提供从服务器端编程语言支持到身份验证机制的所有内容。

5.41 Nginx版本

  1. 一键式安装 Nginx：
1
2
3
4
5
yum install -y gcc gcc-c++ pcre pcre-devel zlib zlib-devel openssl openssl-devel
cd /tmp && wget http://nginx.org/download/nginx-1.9.9.tar.gz
tar xf nginx-1.9.9.tar.gz
cd nginx-1.9.9 && ./configure
make && make install
  1. 配置 Nginx 服务：
1
2
3
4
5
6
7
8
9
10
11
12
## 创建 hexo 博客存放位置，可以通过xftp链接工具进入文件目录手动创建
mkdir /data/blog
## 修改 Nginx 配置文件
vi /usr/local/nginx/conf/nginx.conf

## 修改配置文件中server以下几点
## 1、server_name，修改域名或ip
server_name  服务器公网IP;
## 2、root index.html，修改为 hexo 博客存放的位置
root /data/blog
##保存退出
##先按键盘左上角esc,然后键盘输入：‘:wq!’，回车
  1. 打开 Nginx 服务：
1
2
3
4
5
6
7
8
9
cd /usr/local/nginx/sbin
# 启动 nginx
./nginx
#若启动报错，输入以下命令检测端口占用问题
netstat -nplt
#./nginx若启动报错多半是80端口占用，输入如下指令杀死进程
killall -9 nginx
# 再次启动 nginx就不会报错
./nginx
  1. 至此 Nginx 也安装完成。

5.42 Apache版本

Solar-Rain推荐使用Apache版本，因为可能在部署Hexo或者其他项目之前服务器使用的就是Apache版本，导致安装了Nginx版本后该服务器的其他项目站点打不开，推荐熟悉以下宝塔建站教程

  1. 宝塔安装Apache，傻瓜操作
  2. 登录宝塔文件根目录创建 hexo 博客存放位置
    image-20230116234947546
  3. 在阿里云域名解析控制台添加域名记录（已经购买域名）
    image-20230116233909237
  4. 登录宝塔添加站点（公网IP或者名解析控制台域名记录，自己选择）并修改根目录，接着在宝塔开启ssl
    image-20230116234347927
  5. 提交完以后点击站点是没效果的，需要完成接下来的步骤（服务端创建 Git 仓库Hexo 主题配置）

5.5 服务端创建 Git 仓库

  • 服务器上创建一个 Git 仓库，该仓库中新建一个 post-receive 钩子文件。
1
2
3
4
5
6
7
8
9
10
cd ~
git init --bare hexo.git
vi ~/hexo.git/hooks/post-receive
## 填写以下内容，其中的--work-tree 为 hexo 博客目录
git --work-tree=/data/blog --git-dir=/root/hexo.git checkout -f
##保存退出
##先按键盘左上角esc,然后键盘输入：‘:wq!’，回车
## 授予钩子文件可执行权限
chmod +x ~/hexo.git/hooks/post-receive
chmod -R 777 /data/blog
  • 至此，Git 仓库创建并配置完成，对应的本地客户端Hexo 主题也需要配置一下！

5.6 Hexo 主题配置

在本地计算机 hexo 的工程目录下，找到 _config.yml，对 deploy 参数进行修改，如下图所示

1
2
3
4
5
6
7
# Deployment
## Docs: https://hexo.io/docs/one-command-deployment
deploy:
  type: git
  repo: root@公网IP:/root/hexo.git
  branch: master
复制代码

在本地计算机安装插件: hexo-deployer-git 和 hexo-server，插件的作用分别是使用Git自动部署，和hexo本地简单的服务器：

1
2
3
4
5
6
7
8
9
10
npm install hexo-deployer-git --save
npm install hexo-server
## 配置全局变量
git config --global user.name "你的账号"
git config --global user.email "你的邮箱"
## 生成发布 Hexo 博客
hexo clean #清除缓存
hexo generate #生成博客文件
hexo deploy #部署发布文件到服务器
hexo server #启动本地博客服务端，会在终端显示localhost:4000，浏览器输入localhost:4000查看本地效果

6. 上线访问

浏览器输入公网ip或者域名进入 hexo 博客主页了。

说明：本文章部分篇幅主要借鉴海拥的教程

Solar-Rain程序 & 设计

随心所欲，不逾矩 ~