hexo + vps 搭建个人博客

本文最后更新于：2023年10月27日下午

1. 前言

从昨天开始心血来潮，想搭一个个人的博客网站。看过很多方案，最后综合考虑选择了hexo+vps。

2. 在Windows上安装hexo

参考以下文章：

GitHub+Hexo 搭建个人网站详细教程

GitHub Pages + Hexo搭建个人博客网站，史上最全教程

超详细Hexo+Github博客搭建小白教程

2.1 安装node.js

到node.js官网上下载适合的文件并安装，我选则的版本是windows installer(.msi)的64-bit。

安装选项全部默认，一路点击next。

最后安装好之后，按Win+R打开命令提示符，输入node -v和npm -v，如果出现版本号，那么就安装成功了。

如果没有梯子的话，可以使用阿里的国内镜像进行加速。

1	`npm config set registry https://registry.npm.taobao.org`

2.2 安装git

为了把本地的网页文件上传到github上面去，我们需要用到分布式版本控制工具——Git。

安装选项还是全部默认，只不过最后一步添加路径时选择Use Git from the Windows Command Prompt，这样我们就可以直接在命令提示符里打开git了。

安装完成后在命令提示符中输入git --version验证是否安装成功。

下面我们来生成密钥SSH Key。我们右键打开git bash，输入下面的命令

1 2	`git config --global user.name "theforever90" git config --global user.email "zhouwyx@outlook.com"`

我参考的教程是Hexo + Github的方案，上面的用户名和邮箱是注册Github使用的邮箱。不过我在自己的VPS上搭建，不知道用户名和邮箱是否可以任意填写。

生成SSH Key:

1	`ssh-keygen -t rsa -C "zhouwyx@outlook.com"`

生成的密钥在用户的.ssh目录下面，比如我的在C:\Users\dabod\.ssh下。用记事本打开该目录下的id_rsa.pub文件，可以得到ssh-rsa开头以邮箱名结尾的一串字符。这个以后会用到。

2.3 安装Hexo

在合适的地方新建一个文件夹，用来存放自己的博客文件，比如我的博客文件都存放在C:\Users\dabod\Blog目录下。

定位到该目录下，在空白处按shift+鼠标右键，选则在此处打开powershell窗口。在弹出的窗口中输入npm install -g hexo-cli安装Hexo。会有几个报错，无视它就行。

安装完后输入hexo -v查看版本，验证是否安装成功。

然后就要初始化我们的网站。输入hexo init blog初始化文件夹（blog是文件夹名，可以选其他），会在该目录下生成一个blog文件夹，然后我们进入blog文件夹cd blog，然后执行npm install来安装必要的组件。

可以先尝试本地启动。执行hexo g和hexo s，然后浏览器访问http://localhost:4000，就可以看到一个简陋的Hexo主页。我们以后再慢慢完善它。在命令窗口按（两次）ctrl + c退出。

3. vps上的部署

参考以下的文章：

3.1 git和nginx安装

我的VPS使用的是Debian10系统，不同的系统相关命令可能会略有不同。

ssh连接到vps的后台，我是用root用户登录的。首先执行以下命令保证系统和apt列表完全更新：

1 2	`apt update apt upgrade`

然后安装git和nginx：

1 2	`apt install git apt install nginx`

可以用git --version和nginx -v来查看版本确保安装正确。

我们可以先启动nginx服务来试试看：

1	`systemctl start nginx`

为确保每次VPS重启之后都能自动运行nginx服务，运行：

1	`systemctl enable nginx`

在nginx服务启动之后，在浏览器中访问IP地址进行确认，如无意外，可以看到Welcome to nginx页面。

3.2 配置nginx

可以在/var/www/blog目录下创建blog文件夹（可以自己命名），我们的网页相关的文件就放在这里。

下面我们配置对nginx进行一些配置。

#切换目录
cd /etc/nginx/sites-available
#备份默认配置
cp default default.bak 
#修改配置
vim default

下面是修改后default文件的内容：

server {
    listen 80 default;              #默认监听80端口
    root /var/www/blog;             #网站根目录,可以自己在对应目录下搭建
    server_name zhouw.top;          #自己的网址
    access_log  /var/log/nginx/blog_access.log;
    error_log   /var/log/nginx/blog_error.log;
    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之后，可以用nginx -t命令检查是否出错。执行下面的命令重启nginx服务：

1	`systemctl restart nginx`

3.3 Git相关配置

创建git用户，并赋予sudo权限：

1
2
3

adduser git
chmod 740 /etc/sudoers
vim /etc/sudoers

然后在root ALL=(ALL) ALL下面添加：

1	`git ALL=(ALL) ALL`

之后改回权限：

1	`chmod 400 /etc/sudoers`

切换git用户并且进入git用户目录：

1 2	`su git cd /home/git`

配置ssh：

# 创建.ssh文件夹
mkdir ~/.ssh
#输入可查看是否创建
ls -a
# 创建authorized_keys文件并编辑
vim ~/.ssh/authorized_keys
# 如果你还没有生成公钥，那么首先在本地电脑中执行 cat ~/.ssh/id_rsa.pub | pbcopy生成公钥
# 再将公钥复制粘贴到authorized_keys
# 保存关闭authorized_keys后，修改相应权限
chmod 600 ~/.ssh/authorized_keys
chmod 700 ~/.ssh

之后在自己的电脑上测试是否可以登录（可能需要输入密码）：

1	`ssh -v git@自己的VPS的IP地址`

默认22端口，不是则需要在后面加上-p 端口号。
WARNING: REMOTE HOST IDENTIFICATION HAS CHANGED!是以前配置过主机，需要进行删除.ssh文件夹下面的known_hosts文件。

3.4 创建git裸库

回到git目录并且使用git用户创建git裸仓库

1 2	`cd /home/git git init --bare blog.git`

检查blog.git, .ssh, blog目录的用户组权限是否都为git:git：

1 2	`ls -l /var/www/ ls -l /homw/git/`

如果不是则执行如下命令赋予权限：

1 2	`sudo chown git:git -R /var/www/blog sudo chown git:git -R /home/git/blog.git`

3.5 使用git-hooks同步网站根目录

使用一个钩子文件：post-receive，每当git仓库接收到内容的时候，就会自动调用这个钩子，把内容同步到网站根目录。

git用户下执行：

#切换到hooks目录下
$ cd /home/git/blog.git/hooks
#创建文件
$ vim post-receive

添加如下内容：

#!/bin/bash
GIT_REPO=/home/git/blog.git
TMP_GIT_CLONE=/home/git/tmp/hexo_tmp	#在这个文件夹下随便创建文件，不然出错
PUBLIC_WWW=/var/www/blog				#在这个文件夹下随便创建文件，不然出错
rm -rf ${TMP_GIT_CLONE}
git clone $GIT_REPO $TMP_GIT_CLONE
rm -rf ${PUBLIC_WWW}/*
cp -rf ${TMP_GIT_CLONE}/* ${PUBLIC_WWW}

保存后，执行下面的命令赋予权限：

1	`$ chmod +x post-receive`

3.6 连接本地与vps

配置本地hexo的_config.yml文件，位置在创建博客的文件夹下面，比如我是在C:\Users\dabod\Blog\blog目录下。在该文件最后的deploy处进行如下修改：

deploy: 
  type: git
  repo: git@你的服务器IP:/home/git/blog.git
  branch: master

同步到服务器（在blog文件夹内打开命令窗口执行）：

1
2
3

hexo clean
hexo g
hexo d

其中hexo clean作用是清楚缓存，每次修改博客相关配置之后执行，hexo g作用是生成静态网页，hexo d的作用是上传到服务器，之前用到的hexo s的作用是打开本地服务器，打开后在localhost:4000就可以看到博客的效果。hexo g和hexo d可以合并成hexo g -d。

如果网站没有变动，可以尝试检查钩子文件post-receive是否执行，若否可能是权限的问题。

如果出现error: spawn failed...的错误，可以参考下面的方法尝试解决：

hexo发生error：spawn failed错误的解决方法

简单地说，就是先删除.deploy_git文件夹，再执行：

1	`git config --global core.autocrlf false`

之后依次执行hexo clean、hexo g、hexo d。

成功之后可以在浏览器直接输入vps的ip地址来访问网页。

4. 域名解析及HTTPS配置

在域名网站上添加两条记录，分别是@和www，记录值都为vps的IP地址。过一段时间可以尝试在浏览器中输入域名访问。不过目前还不支持https访问，所以下面我们添加ssl证书。主要参考

Nginx 服务器 SSL 证书安装部署

简单地说就是在域名网站上申请证书，下载证书，然后将证书文件上传到vps服务器中，再对nginx进行相关配置。我使用的是腾讯云域名，所以使用下面的布置：

在 SSL 证书管理控制台中选择需要安装的证书并单击下载。在弹出的 “证书下载” 窗口中，服务器类型选择 Nginx，单击下载并解压缩 cloud.tencent.com 证书文件包到本地目录。解压缩后，可获得相关类型的证书文件。其中包含 cloud.tencent.com_nginx 文件夹，内容如下：

cloud.tencent.com_bundle.crt 证书文件

cloud.tencent.com_bundle.pem 证书文件（可忽略该文件）

cloud.tencent.com.key 私钥文件

cloud.tencent.com.csr CSR 文件

CSR 文件是申请证书时由上传或系统在线生成的，提供给 CA 机构。安装时可忽略该文件。

使用 “WinSCP”登录 Nginx 服务器。WinSCP为本地与远程计算机间的复制文件工具，也可以用别的，我用的是mobaxterm。

将已获取到的 cloud.tencent.com_bundle.crt 证书文件和 cloud.tencent.com.key 私钥文件从本地目录拷贝到 Nginx 服务器的 /etc/nginx 目录（此处为 Nginx 默认安装目录，请根据实际情况操作）下。

远程登录 Nginx 服务器，仍然编辑/etc/nginx/sites-available目录下的default文件，添加443监听端口和上传后的证书位置，修改后如下：

server {
    listen 80 default;              #默认监听80端口
    listen 443 ssl;
    root /var/www/blog;             #网站根目录
    server_name zhouw.top, www.zhouw.top;  #网址
    ssl_certificate /etc/nginx/zhouw.top_bundle.crt;
    ssl_certificate_key /etc/nginx/zhouw.top.key;
    ssl_session_timeout 5m;
    ssl_protocols TLSv1.2 TLSv1.3;
    ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:HIGH:!aNULL:!MD5:!RC4:!DHE;
    ssl_prefer_server_ciphers on;
    access_log  /var/log/nginx/blog_access.log;
    error_log   /var/log/nginx/blog_error.log;
    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;
    }
}

通过执行以下命令验证配置文件问题。

1	`nginx -t`

通过执行以下命令重载nginx：

1	`nginx -s reload`

执行成功后就可以用https访问博客网站了，比如我的博客网站地址是https://www.zhouw.top。

5. 后记

到此为止我们已经可以在任意一台网络设备上输入域名访问自己的网页了。至于网页的具体配置，包括主题、创建文章、添加阅读统计、添加评论功能等等，还需要慢慢优化。

其实本来想用Gridea配合github或者gitee来搭建网页的，但Gerida的上传功能好像一直有点问题，网页一直没法正确渲染。然后我尝试在vps上使用LNMP+WordPress的方案，但这又太复杂了，直接劝退。后来决定用Hexo+github pages，实际上手之后发现没有自己想的那么复杂。可惜github在国内的访问始终有点问题，想转到gitee上，但网页没法更新，不知道是什么问题。于是尝试用vercel加速github pages的访问，但是vercel也有点问题，好像是被墙了。最终确定hexo+vps的方案，过程比用github要复杂一点，不过学到了很多知识，最终真的成功访问还是很有成就感的。

技术笔记

#博客 #vps #hexo

hexo + vps 搭建个人博客

https://www.zhouw.top/2023/02/25/hexo + vps 搭建个人博客/

作者

Dabod Zhou

发布于

2023年2月25日

更新于

2023年10月27日

许可协议

hexo基础操作及fluid主题配置上一篇