A PDF version of the document is available here: https://hugbob.github.io/files/lab3.pdf
Blog URL: https://hugbob.github.io
山东大学计算机科学与技术学院
云计算技术 课程实验报告
学号：202120130266 姓名：鲍俊杰 班级：计科21.1
实验题目：利用主流云平台搭建个人博客或网站
实验学时：2 实验日期：2024/3/22
实验目的：熟悉使用主流云平台并搭建个人博客或者网站。具体包括：参考方案：基于主流云平台，设计、实现个人博客或者网站的搭建，撰写实验报告（附带网站链接并可以访问），并在网站上呈现此次实验报告。
硬件环境： 联网的计算机一台
软件环境：Windows
实验步骤与内容：
一、 下载node.js和git
二、安装hexo
新建一个文件夹用来存放 Hexo 的程序文件，如 myblog。打开该文件夹，右键 -> Git Bash Here。
- 使用 npm 安装 Hexo 博客：
npm install -g hexo-cli
- 初始化并安装所需组件：
hexo init # 初始化
npm install # 安装组件
- 完成后依次输入下面命令，启动本地服务器进行预览：
hexo g # 生成页面
hexo s # 启动预览
访问 http://localhost:4000，出现 Hexo 默认页面，本地博客安装成功。
在localhost运行结果如下所示：
三、本地博客测试成功后，上传到 GitHub 进行部署，使其能够在网络上访问。
- 首先安装 hexo-deployer-git：
npm install hexo-deployer-git --save
四、创建并连接github
新建一个名为 用户名.github.io 的仓库：在本实验中，以用户名为 hugbob为例，新建名为 hugbob.github.io 的仓库，网站地址为：https://hugbob.github.io
（还需要创建SSH）
五、修改博客的配置文件
打开博客根目录下的_config.yml 文件（博客的配置文件，修改与博客相关的各种信息）。在本实验中以用户名为hugbob为例，修改最后一行的配置为：
六、将本地文件部署到github
执行下面几条命令，将博客部署到 GitHub 上：
hexo clean
hexo generate
(若要本地预览就先执行 hexo server)
hexo deploy
快捷命令：
hexo g == hexo generate
hexo d == hexo deploy
hexo s == hexo server
hexo n == hexo new
还能组合使用，如：
hexo d -g
六、将实验报告上传至博客
结论分析与体会：
Hexo + GitHub 文章发布原理
在本地撰写 Markdown 格式文章后，通过 Hexo 解析文档，渲染生成具有主题样式的 HTML 静态网页，再推送到 GitHub 上完成博文的发布。
Hexo很难对图片进行有效的管理，本地markdown文件中的图片会出现无法在网页中显示的情况，解决方法如下：
（1）设置站点配置_config.yml
post_asset_folder: true
（2）安装插件
npm install hexo-asset-image -- save
（3）引用图片
运行hexo n “xxxx”来生成md博文时，/source/_posts文件夹内除了xxxx.md文件还有一个同名的文件夹。接下来就是利用makdown。
在xxxx.md中想引入图片时，先把图片复制到xxxx这个文件夹中，然后只需要在xxxx.md中按照markdown的格式引入图片：
必须只能是图片名，不能含有任何前缀，否则网页端无法显示（但这样会导致本地文件中不会显示），可以在编辑时加入相对地址能够在本地显示便于查看，部署时再删除相对路径只保留图片的文件名。
