山东大学 计算机科学与技术学院

实验题目：利用云平台搭建个人博客 实验学时：2 实验日期：2025.3.12

实验目的

本实验旨在通过实践操作，掌握基于云计算环境的网站部署技能。具体包括：

  • 构建 Hexo+GitHub 环境并实现个人博客的搭建
  • 撰写实验报告，并将报告作为博文发布在个人博客上

硬件环境

联网的计算机一台

软件环境

Windows 或 Linux 操作系统，安装 Node.js、Git 和 Hexo

实验步骤与内容

1. 安装 Node.js 和 Git

  • 下载并安装 Node.js（建议使用 LTS 版本）
  • 下载并安装 Git

image-20250312201229601

2. 安装 Hexo

  • 打开终端或命令提示符，运行以下命令安装 Hexo：

    1
    npm install -g hexo-cli

  • 创建博客文件夹并初始化 Hexo 项目：

    1
    2
    3
    hexo init my-blog
    cd my-blog
    npm install

image-20250312201238024

image-20250312201247495

3. 自定义主题插件,编写.md文件

  • 安装使用Butterfly主题, 通过config文件配置

  • 将写好的markdown文件放入post文件夹

  • 安装图片显示插件, 实现渲染markdown文件中的图片

4. 生成静态网页并预览

  • 运行以下命令生成静态文件：

    1
    hexo generate

  • 运行本地服务器进行预览：

    1
    hexo server

  • 在浏览器中访问 http://localhost:4000 查看博客页面

image-20250312201403654

5. 部署到 GitHub Pages

  • 在 GitHub 上创建一个新的仓库，命名为 yourusername.github.io

  • 生成 SSH key 并添加到 GitHub：

    1
    ssh-keygen -t rsa -C "your_email@example.com"

  • 在 GitHub 账户的 SSH 设置中添加生成的公钥

  • 安装 Hexo 部署插件：

    1
    npm install hexo-deployer-git --save

  • 在_config.yml文件中配置 GitHub 部署信息：

    1
    2
    3
    4
    deploy:
      type: git
      repo: git@github.com:yourusername/yourusername.github.io.git
      branch: main

  • 部署博客：

    1
    hexo deploy

  • 访问 https://yourusername.github.io 查看部署成功的博客

image-20250312201500199

结论分析与体会

通过本次实验，我成功使用 Hexo+GitHub Pages 搭建了个人博客，并掌握了 Hexo 静态博客生成器的基本使用流程。实验过程中遇到了 npm 依赖安装错误的问题，通过调整 Node.js 版本后解决。此外，对 GitHub Pages 的部署方式也有了更深入的理解。

本次实验让我认识到云计算环境下网站部署的便利性，以及利用开源工具搭建个人博客的高效性。这种方式不仅适用于个人博客，还可扩展到团队文档管理、个人作品展示等多个领域。