经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » 程序设计 » 编程经验 » 查看文章
使用 Hexo 搭建个人博客并部署到云服务器
来源:cnblogs  作者:Cheyaoyao  时间:2023/11/17 9:19:22  对本文有异议

目前搭建博客的主流框架有 WordPress、VuePress、Hugo、Hexo 等等,我主要是感觉 Hexo 好看的主题比较多,所以就来折腾一下这个博客框架

1 整体流程

  1. 在本地运行 hexo deploy 命令,Hexo 会将生成的静态文件(hexo generate)推送到远程的 Git 仓库
  2. 在 Git 仓库中,配置一个钩子脚本,它会在接收到推送后执行——将最新的静态文件强制覆盖到指定的工作目录
  3. 在 Nginx 服务器中,配置访问根路径的请求指向该工作目录

2. 本地环境准备

2.1 安装 Node.js 和 Git

这两个我是很早就安装好了,网上也有大量的资料,我就不重复了,这里主要记录 Hexo 相关笔记

(1) 验证 Node.js是否安装成功,打开 cmd 输入node -v,出现版本信息,则 ok

C:\Users\gzl>node -v
v18.16.1

(2) 验证 Git 是否安装成功,打开 cmd 输入git --version,出现版本信息,则 ok

C:\Users\gzl>git --version
git version 2.39.0.windows.2

同时在文件夹中点击右键会出现 Git Bash Here

2.2 安装 Hexo

(1) 新建一个文件夹用来存储个人博客:E:\MyBlog

进入该文件夹,进入 Git Bash,输入npm install -g hexo-cli 将 Hexo 命令行工具安装到系统的全局环境中

gzl@gzl MINGW64 /e/MyBlog
$ npm install -g hexo-cli

(2) 待安装完毕,输入以下指令,将会新建一个 myblogs 文件夹,并且安装 Hexo 项目所需的依赖项

# 创建一个新的 Hexo 项目
$ hexo init myblogs
$ cd myblogs
# 安装 Hexo 项目所需的依赖项
$ npm install

最后,会在 myblogs 文件中生成如下文件:

(3) 继续在 Git Bash 中执行指令hexo server

$ hexo server

执行完毕后,打开本地浏览器,访问http://localhost:4000/,出现以下界面,说明第一步成功了

3. 服务端环境准备

3.1 Nginx 环境配置

3.1.1 安装 Nginx

依次执行以下指令

# 安装 nginx 依赖环境,遇到 yes 选 yes
yum install gcc-c++
yum install -y pcre pcre-devel
yum install -y zlib zlib-devel
yum install -y openssl openssl-devel

# 下载并解压 nginx 安装包
wget -c https://nginx.org/download/nginx-1.10.1.tar.gz 
tar -xvf nginx-1.10.1.tar.gz -C /usr/local

# 执行配置文件
cd /usr/local/nginx-1.10.1
./configure

# 编译并安装 nginx
make
make install

# 开放 80 端口
cd /usr/local/nginx
/sbin/iptables -I INPUT -p tcp --dport 80 -j ACCEPT

# 启动 nginx
cd sbin
./nginx

没有任何消息,代表启动成功,在浏览器访问公网ip:80就可以进入 nginx 页面了

如果需要停止 nginx 服务,执行./nginx -s stop

3.1.2 更改 Nginx 配置文件

需要将 Nginx 的配置文件中网站的根目录(root)指向 hexo 的部署目录,以及修改域名(server_name)为自己已备案的域名,如果没有,则填公网ip

所以,首先创建一个文件用来存放 hexo 的部署文件

mkdir -p /data/hexo

然后修改 nginx 配置文件

cd /usr/local/nginx/conf
vim nginx.conf
# 进入后,按 i 键进入编辑模式

修改server_nameroot即可

server {
        listen       80;
        server_name  www.cheyaoyao.cn;

        location / {
            root   /data/hexo;
        }
        ...
}

修改完毕后按 Esc 键进入命令模式,再输入 :wq 保存并退出

3.2 Node.js 环境配置

安装 node.js,依次执行以下命令:

# 切换到根目录,安装 node.js
cd ~
curl -sL https://rpm.nodesource.com/setup_10.x | bash -
yum install -y nodejs

# 查看安装结果,打印对应版本号则安装成功
node -v
npm -v

3.3 Git 环境配置

3.3.1 安装 Git

依次执行以下命令:

# 安装,遇到 yes 选 yes
yum install git

# 查看版本号
git --version

3.3.2 创建 Git 用户

依次执行以下指令:

# 创建git用户
adduser git

# 修改git用户的权限
chmod 740 /etc/sudoers

# 进入 sudo 命令文件
vim /etc/sudoers

找到root ALL=(ALL) ALL,在下面添加git ALL=(ALL) ALL

继续执行以下指令

# 修改文件权限
chmod 400 /etc/sudoers

# 设置 git 用户的密码
sudo passwd git

3.3.3 配置 SSH 免密登录

由于是将本地的静态文件推送到服务器的 Git 仓库中,所以要配置 ssh 免密登录服务器

(1) 在服务端,依次执行以下指令:

# 切换到 git 用户
su git

# 在根目录创建.ssh文件夹,存放公钥
cd ~
mkdir .ssh

(2) 在本地计算机打开 Git Bash,执行以下指令

# 在本地生成公钥/私钥对
$ cd ~
$ cd .ssh
$ ssh-keygen

遇到系统询问,就按回车键。最后生成的公钥和秘钥会自动保存在C:\Users\gzl\.ssh目录下

(3) 给私钥设置权限,执行以下指令:

$ chmod 700 ~/.ssh
$ chmod 600 ~/.ssh/id_rsa 

(4) 将本地的公钥(id_rsa.pub)上传到服务器的/home/git/.ssh目录下

(5) 新建authorized_keys文件,并拷贝公钥的内容到该文件中,依次执行以下指令:

cd ~/.ssh
cp id_rsa.pub authorized_keys
cat id_rsa.pub >> ~/.ssh/authorized_keys

# 设置权限
chmod 600 ~/.ssh/authorized_keys
chmod 700 ~/.ssh

# 确保 SSH 相关的文件和目录具有正确的 SELinux 安全标签
restorecon -Rv ~/.ssh 

(6) 测试本地免密登录服务器

进入本地计算机的 Git Bash,输入:

$ ssh -v git@xxx.xxx.xxx.xxx(公网IP)

最后面会出现:

3.3.4 配置 Git 仓库

(1) 在服务器新建一个 Git 仓库,同时新建一个钩子文件

cd ~
git init --bare hexo.git
vi ~/hexo.git/hooks/post-receive

输入git --work-tree=/data/hexo --git-dir=/home/git/hexo.git checkout -f,保存并退出

(2) 授予钩子文件可执行权限

chmod +x ~/hexo.git/hooks/post-receive
cd ~
sudo chmod -R 777 /data/hexo

重启 ECS 实例,服务端配置完成

4. 部署 Hexo 博客到服务端 Git 仓库

(1) 在本地计算机打开 Hexo 项目,我用的 vscode,修改_config.yml文件中的deploy

deploy:
  type: git
  repo: git@公网ip:/home/git/hexo.git
  branch: master

(2) 安装插件,hexo-deployer-git 和 hexo-server

# 用于将 Hexo 生成的静态文件推送到指定的 Git 仓库
npm install hexo-deployer-git --save

# 用于在本地启动一个 Hexo 服务器,方便在本地预览博客
npm install hexo-server

(3) 配置 Git 全局变量

回到 Git Bash,输入:

# email 和 name 随便填一个也可以
$ git config --global user.email "xxxxxxxxxx@xx.com"
$ git config --global user.name "xxx"

(4) 生成静态文件和发布博客

在 vscode 的终端中输入:

# 清除之前生成的静态文件
hexo clean

# 生成静态文件
hexo generate

# 部署到 Git 仓库
hexo deploy

至此,已经全部配置完毕了

如果在 nginx 中配置了域名的话,可以通过域名访问博客了,没配置也可以用公网ip访问

下一篇就研究怎么美化博客吧

5. Hexo 写作新文章并发布

(1) 在 vscode 中打开 Hexo 项目,打开终端,使用如下命令创建新文章

hexo new "title"

执行该命令,Hexo 会在/source/_posts目录下创建一篇新的文章

(2) Front-matter

Hexo 创建的文件中开头有一段配置信息:

这个叫做Front-matter,即前置信息,用于给 Hexo 渲染该 md 文档

配置项 意义
title 网页文章标题
date 文章创建如期
tags 文章标签

(3) 发布文章

随便编写点内容

在终端依次输入:

# 清除之前生成的静态文件
hexo clean

# 生成静态文件,hexo generate 的简写
hexo g

# 本地启动,hexo server 的简写
hexo s

可以在本地预览文章

最后部署到远程的 Git 仓库中

# 部署到 Git 仓库,hexo deploy 的简写
hexo d

稍微等一下,在浏览器访问域名,就可以看到了

原文链接:https://www.cnblogs.com/cheyaoyao/p/17836522.html

 友情链接:直通硅谷  直通硅谷 怎么样 mac软件下载