cheyaoyao
使用 Hexo 搭建个人博客并部署到云服务器

目录

目前搭建博客的主流框架有 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

img

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

yum install nginx

查看版本

nginx -v

3.1.2 更改 Nginx 配置文件

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

所以，
(1) 首先创建一个文件用来存放 hexo 的部署文件

mkdir -p /data/hexo

(2) 然后找到 Nginx 的安装目录

rpm -ql nginx

(3) 再然后修改 nginx 配置文件nginx.conf

cd /etc/nginx
vim nginx.conf
# 进入后，按 i 键进入编辑模式

可以删了原来的所有内容，然后复制下面过去：

user  nginx;
worker_processes  auto;

error_log  /var/log/nginx/error.log notice;
pid        /var/run/nginx.pid;

events {
    worker_connections  1024;
}

http {
    include       /etc/nginx/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  /var/log/nginx/access.log  main;

    sendfile        on;
    #tcp_nopush     on;

    keepalive_timeout  65;

    #gzip  on;

    include /etc/nginx/conf.d/*.conf;
}

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

(4) 进入到/etc/nginx/conf.d文件夹下面，通过vim default.conf打开文件

  • 情况 1：如果没有域名的话，复制以下内容：
    (需要改下“公网IP”)
server {
    listen        80;
    listen   [::]:80;
    server_name  公网IP;

    location / {
        root   /data/hexo;
        index  index.html index.htm;
    }

    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   /usr/share/nginx/html;
    }
}
  • 情况2：如果有域名，且有 SSL 证书的话，复制以下内容：
    (需要改下“域名”和 SSL 证书存放位置)
server {
    listen        80;
    listen   [::]:80;
    server_name  域名;

    rewrite ^(.*)$ https://${server_name}$1 permanent;
}

server {
    listen  443 ssl;
    server_name  域名; 

    ssl_certificate   存放pem的位置;
    ssl_certificate_key   存放key的位置;

    ssl_session_cache   shared:SSL:1m;
    ssl_session_timeout   5m;

    ssl_ciphers HIGH:!aNULL:!MD5;
    ssl_prefer_server_ciphers   on;
   
    location / {
        proxy_set_header   X-Real-IP        $remote_addr;
        proxy_set_header   Host             $http_host;
        proxy_set_header   X-Forwarded-For  $proxy_add_x_forwarded_for;
        root   /data/hexo;
        index  index.html index.htm;
    }

    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   /usr/share/nginx/html;
    }
}

(5) 启动 Nginx 和 关闭 Nginx

启动 Nginx

nginx

关闭Nginx

nginx  -s stop

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

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

6 Hexo Fluid 博客美化

想找一个既美观又简洁的博客主题，看来看去，最后选了 Fluid

Fluid 的安装以及配置在官方手册里说的挺清楚的，改改 Markdown 就好了

补充几个：

6.1 更改代码块的背景色并设置 Mac 风格代码块

更改1：

lib: "highlightjs"
highlightjs:
  style: "Night Owl"
      style_dark: "dark"

更改2：
在node_modules\hexo-theme-fluid\source\css路径下新建文件mac.styl，复制以下代码：

.highlight
    background: #011627
    border-radius: 5px
    box-shadow: 0 10px 30px 0 rgba(0, 0, 0, .4)
    padding-top: 30px

    &::before
      background: #fc625d
      border-radius: 50%
      box-shadow: 20px 0 #fdbc40, 40px 0 #35cd4b
      content: ' '
      height: 12px
      left: 12px
      margin-top: -20px
      position: absolute
      width: 12px

在主题配置_config.fluid.yml中找到custom_css选项，加入- /css/mac.css代码

custom_css:
  - /css/mac.css

修改前：

修改后：

6.2 压缩静态资源

博客中有大量 HTML、CSS、JS 文件，这些文件为了阅读方便会加入许多回车和空行，但在页面解析时其实会浪费部分时间，此外如果有许多插图，也会拖慢网页加载

可以安装hexo-neat插件解决

$ npm install hexo-neat --save

然后在站点配置_config.yml中添加

# hexo-neat
## Docs: https://github.com/rozbo/hexo-neat
neat_enable: true
# 压缩 html
neat_html:
  enable: true
  exclude:
# 压缩 css  
neat_css:
  enable: true
  exclude:
    - '**/*.min.css'
# 压缩 js
neat_js:
  enable: true
  mangle: true
  output:
  compress:
  exclude:
    - '**/*.min.js'
    - '**/jquery.fancybox.pack.js'
    - '**/index.js'

未完待续...

posted on 2023-11-16 16:01  Cheyaoyao  阅读(2428)  评论(1)  编辑  收藏  举报

Copyright © 2024 Cheyaoyao
Powered by .NET 9.0 on Kubernetes Powered By博客园