Hexo搭建个人博客并布署到VPS

特别鸣谢：感谢孔昊天大佬的极力推荐和指点，让我从学习wordpress转到了学习hexo。

Hexo搭建个人博客并布署到VPS,内容摘自互联网。如有雷同，纯性巧合。

Git安装

官网下载页面：https://git-scm.com/downloads，我选择的是Win 64位的最新安装版本，
双击安装包开始安装，一路点击 Next 即可，安装完成后鼠标右键会有 Git Bash Here，这是Git的命令行，说明安装成功
在命令行中输入如下命令，配置Git用户名和邮箱地址

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

NodeJS安装及配置

下载安装包，官网下载地址，目前最新是这个版本https://nodejs.org/download/release/latest-v21.x/
双击安装包开始安装，一路点击Next即可，安装完成后，msi格式的安装包会自动添加环境变量。
打开cmd窗口，执行命令 node -v 查看node版本
在安装node的同时也安装了npm，执行 npm -v 查看npm版本

安装Hexo

我们采用Hexo来创建我们的博客网站，Hexo 是一个基于NodeJS的静态博客网站生成器，使用Hexo不需开发，只要进行一些必要的配置即可生成一个个性化的博客网站，非常方便。

安装 Hexo

    npm install -g hexo-cli

查看版本

    hexo -v

创建一个项目 hexo-blog 并初始化

1
2
3

hexo init hexo-blog
cd hexo-blog
npm install

本地启动

1 2	hexo g hexo server

浏览器访问 http://localhost:4000，

更换Fluid主题

以下安装步骤摘自 Fluid官网

安装主题

下载最新 release 版本解压到 themes 目录，并将解压出的文件夹重命名为 fluid。

指定主题

如下修改 Hexo 博客目录中的 _config.yml：

theme: fluid # 指定主题
language: zh-CN # 指定语言，会影响主题显示的语言，按需修改

创建「关于页」

首次使用主题的「关于页」需要手动创建：

    hexo new page about

创建成功后，编辑博客目录下 /source/about/index.md，添加 layout 属性。

修改后的文件示例如下：

title: about
date: 2020-02-23 19:20:33
layout: about

这里写关于页的正文，支持 Markdown, HTML

本地启动

1 2	hexo g -d hexo s

浏览器访问 http://localhost:4000

创建文章

在hexo-blog\source_posts目录下新建一个md文件
修改后的文件示例如下：

title: 使用hexo搭建博客 
date: 2024/1/3 15:00:10 
categories: 
- Diary
tags: 
- Blog
- Hexo
这里写正文
<!--more-->

本地启动

1 2	hexo g -d hexo s

浏览器访问 http://localhost:4000，

个性化页面展示

页面的标题等位置显示默认的文字，可以改下显示一些个性化的信息。

浏览器tab页名称
修改根目录下 _config.yml 中的 title 字段。
博客标题
主题目录 themes\fluid 下 _config.yml 中的 blog_title 字段。
主页正中间的文字
主题目录 themes\fluid 下 _config.yml 中的 text 字段。
修改好配置后，可以看到现在显示的内容变成了我们的个人信息。

部署Hexo博客到VPS

网上流传的武功秘籍分为两种：

1.将Hexo项目上传到VPS上面后执行 hexo server，之后配置Nginx反向代理，让域名指向 http://localhost:4000。
2.将Hexo在本地通过 hexo generate 生成静态文件，在通过 hexo deploy 部署到VPS上面，使用Nginx直接做Web服务器。
使用第二种方式既可以将静态文件deploy到VPS上，也可以上传到Github上用作备份，操作性和安全性上都要胜于前者。

而对于第二种方式而言，常用的又有 git hook 和 rsync 两种自动部署解决方案，这里我们使用后者。

在我们创建的博客目录下执行 hexo generate 后，hexo会将我们编辑的markdown博客自动生成静态的网页，而生成的文件就存储在 public 文件夹中，这其中的每一个html文件都是我们之后在网页中查看博客时候加载的对应文件，而我们在执行 hexo deploy 时，就是要将 public 文件夹下的文件全部部署到我们之前在Nginx配置中设置的 root /var/www/blog 的路径中。

用rsync部署

相比较git hook方式，这一种操作更简单，对于小白更不容易出错。

安装nginx

首先，通过运行以下命令确保您的系统和apt包列表完全更新

1
2
3

apt update -y
apt upgrade -y
apt install nginx

检查版本确保安装

    nginx -V

配置nginx

切换目录

    cd /etc/nginx/sites-available

备份默认配置

    cp default default.bak

修改配置

    nano default

配置如下：

server {
    listen 80 default_server;
    listen [::]:80 default_server;
    error_page 404 =  /404.html;

    location ~* ^.+\.(ico|gif|jpg|jpeg|png)$ {
            root /var/www/blog;
            access_log      off;
            expires           1d;
     }

     location ~* ^.+\.(css|js|txt|xml|swf|wav)$ {
             root /var/www/blog;
             access_log   off;
             expires      10m;
     }

     location / {
            root /var/www/blog;
            if (-f $request_filename) {
            rewrite ^/(.*)$ /$1 break;
            }
     }
     
     location /nginx_status {
                  stub_status on;
                  access_log off;
    }
    }

检查是否有错误

    nginx -t

保存退出后，启动

    nginx：systemctl start nginx

设置开机自动启动

    systemctl enable nginx

查看运行状态

    systemctl status nginx

显示running表示成功运行

安装rsync

rsync的安装分为两部分：服务器端和本地

服务器端安装：

    apt-get install rsync

大多数的Linux系统已经默认装有 rsync 了，可以运行 rsync 测试下是否已经安装。

本地安装：

    npm install hexo-deployer-rsync --save

rsync配置

编辑博客文件夹目录下的 _config.yml，找到deploy添加如下代码：

deploy:
  type: rsync
  host: vps-ip  # 这里填写你VPS的IP地址，比如：148.135.1.1
  user: vps-user # 这里填写你登陆VPS所用的用户名，比如：root
  root: /usr/www/blog # 这里填写你在nginx中配置的文件路径
  port: 22 # SSH默认端口号，不需要修改

配置完毕！在 blog 目录下执行下面一段代码，接下来就是见证奇迹的时刻