hexo 部署云服务器

原创

mob64ca12f3f05d 2024-09-21 04:44:16 ©著作权

©著作权归作者所有：来自51CTO博客作者mob64ca12f3f05d的原创作品，请联系作者获取转载授权，否则将追究法律责任

Hexo 部署云服务器详解

Hexo 是一个快速、简洁且高效的静态博客框架，使用 Markdown 来编写文章，并且有丰富的主题和插件支持。将 Hexo 部署到云服务器上，可以让你的博客在线访问。接下来，我们将介绍 Hexo 文件的结构，部署步骤，以及相关的代码示例。

1. Hexo 的基本结构

Hexo 采用了简洁的文件目录结构，以下是一个简单的 ER 图，展示 Hexo 的几个核心概念。

erDiagram
    Post {
        string title
        string content
        date createdAt
        date updatedAt
    }
    Tag {
        string name
    }
    Post ||--o{ Tag : "有多个"

在 Hexo 中，最重要的模块包括 Post 和 Tag。每个文章（Post）可以有多个标签（Tag），这是 Hexo 内容管理的核心部分。

2. 准备工作

在开始部署之前，确保你已经在云服务器上搭建了 Node.js 和 Git 环境。以下是基本的安装步骤（以 Ubuntu 为例）：

# 更新包管理器
sudo apt update

# 安装 Node.js 和 npm
sudo apt install nodejs npm

# 安装 Git
sudo apt install git

3. 创建 Hexo 项目

接下来，使用 npm 创建一个新的 Hexo 项目。进入你希望创建博客的目录，执行以下命令：

# 安装 Hexo CLI
npm install -g hexo-cli

# 创建新的 Hexo 项目
hexo init my-blog

# 进入项目目录
cd my-blog

# 安装依赖
npm install

此时，项目结构已生成，可以通过以下命令启动本地服务器查看效果：

# 生成静态文件
hexo generate

# 启动服务
hexo server

在浏览器中访问 http://localhost:4000，你将看到默认的 Hexo 博客页面。

4. 上传 Hexo 到云服务器

使用 Git 将 Hexo 代码上传到云服务器。首先，将 hexo 项目推送到 GitHub 或其他代码托管平台。

首先在本地执行：

# 创建一个新的 Git 仓库
git init
git add .
git commit -m "Initial commit"

# 添加远程仓库（以 GitHub 为例）
git remote add origin <YOUR_GITHUB_REPO_URL>
git push -u origin master

接下来，登录到云服务器，从远程仓库拉取项目：

# 克隆你的 Hexo 仓库
git clone <YOUR_GITHUB_REPO_URL> my-blog

# 进入项目目录
cd my-blog

# 安装依赖
npm install

5. 配置 Nginx 服务器

为了让博客能够通过访问域名访问，您需要一个 Web 服务器，通常使用 Nginx。以下是一个简单的 Nginx 配置示例：

server {
    listen 80;
    server_name yourdomain.com;  # 替换为你的域名

    location / {
        root /path/to/your/my-blog/public;  # Hexo 生成的文件路径
        index index.html index.htm;
        try_files $uri $uri/ /index.html;
    }
}

配置完成后，重启 Nginx 服务：

sudo systemctl restart nginx

6. 旅程图

在整个部署过程中，用户通常会经历以下步骤：

journey
    title 部署 Hexo 博客的旅程图
    section 准备环境
      安装 Node.js 和 Git: 5: in-progress
    section 创建 Hexo 项目
      创建新项目: 5: active
      生成静态文件: 5: active
    section 部署到云服务器
      上传到 GitHub: 5: planned
      在云服务器克隆项目: 5: planned
      配置 Nginx: 5: planned