云计算实验三
实验题目:利用云平台搭建个人博客
实验目的
本实验旨在通过实践操作,掌握基于云计算环境的网站部署技能
实验要求
构建环境并实现个人博客/网站的搭建,撰写实验报告,并将这份报告作为一篇博文发布在自己的博客 / 网站上。
实验步骤与内容
一、准备工作
安装Git和node.js
后续的本地云端源码的同步工作都依赖于Git,而node.js是hexo的前置环境
登录GitHub账号创建一个新仓库,并创建一个存放github本地仓库文件的目录
二、部署工作
部署hexo服务器
-
安装
cnpm选中创建的目录(文件夹)右键选择使用
Git Bash Here打开Git命令窗口$ npm install -g cnpm –registry=https://registry.npm.taobao.orgcnpm是一个npm的替代工具,由淘宝团队维护,主要用于加速npm包的下载
-
安装
hexo$ cnpm install -g hexo-cli
-
初始化
hexo源码$ hexo init
-
安装
hexo本地服务器$ npm install hexo-server –save
-
启动服务器
$ hexo server
初始博客界面如下

本地部署
-
创建密钥
$ cd ~/.ssh$ ssh-keygen -t rsa -C ‘注册时的邮箱地址’
查看C:\\用户\\用户名\\.ssh\\id_ras.pub文件中的ssh
-
GitHub中添加公钥ssh
复制上图的ssh密钥,在已登陆的Github主页点击头像,之后点击Settings设置,并按下图顺序点击,创建新的ssh密钥,结果如下:

-
本地验证密钥
$ ssh -T git@github.com
-
本地绑定
Github$ git config –global user.name “注册时用户名”$ git config –global user.email “注册时邮箱”
-
部署设置
用记事本打开并修改本地仓库目录下的
_config.yml文件,拉到最后,填写deploy模块
这一串填写的意思是,hexo部署的时候,会以git部署到指定的repository里面的指定branch。
-
安装更新工具
$ cnpm install hexo-deployer-git用于更新
github中的博客
三、创建博客
-
新建测试文章
$ hexo new “文章名称”
-
生成文件
$ hexo g
-
部署到
GitHub$ hexo d ```   此时已经成功上传github,查看仓库可以发现多了一些文件夹  -
本地预览
$ hexo s
界面如下

-
编辑博客
进入
github本地仓库,进入source/posts,在这里面选择要更改的博客进行内容编辑,现在应该只有两篇博客
编辑结束后输入
$ hexo g$ hexo d来重新生成文件并上传至
GitHub

结论分析与体会
通过这个实验,我对于使用github和hexo结合来部署自己的博客网站有了更深的认识,可以熟练操作、搭建、添加、编辑博客等。在实验的最后成功创建且编辑了一篇博客,并上传到github。在实验的过程中,遇到的不同的问题也都通过查询资料成功解决了,可以说收获很大。
遇到的问题
问题1:
生成本机密钥时不小心设置了passphrase,使用SSH协议克隆远程仓库时提示 Enter passphrase for key \'/c/Users/gf115/.ssh/id_rsa\',每次都要手动输入密码才能继续操作
解决方法:
输入ssh-keygen -p进行重新设置,直接回车输入为空
问题2:
解决问题1的报错后,出现了新的报错Permission denied (publickey)
解决方法:
输入ssh-keygen -t rsa -C ‘注册时的邮箱地址’生成新的密钥,再输入ssh-add \"C:\\users\\86189\\.ssh\\id_rsa将本机的git仓库和这个SSH key 关联上
若执行该语句出现报错Could not open a connection to your authentication agent,则先执行如下命令即可:
$ ssh-agent bash

问题3:
博客界面无法显示md文档中的图片。查询资料发现是路径设置问题,我的图片默认相对位置保存在md同文件夹的.assert文件夹中,但该文件夹无法被读取显示到html中(html中的图片指定是绝对路径),因此无法显示
解决方法:
-
将
_config.yml文件中的post_asset_folder选项设为true
这样在使用$ hexo new [layout]新建md文件时,会同时创建与该文件名同名的文件夹,同时存放在source/_post/目录下由于此时我已经创建好了md文件,因此我直接在md同文件夹下创建了一个同名文件夹
-
在
typora的偏好设置中将图片路径设置为指定路径./${filename}
这样在粘贴图片时就可以自动保存到该同名文件夹此时typora中图片的路径应该显示如下

-
安装插件
hexo-asset-image
$ npm install https://github.com/CodeFalling/hexo-asset-image --save
该插件的作用就是将md文件中的图片相对路径转换为html可以访问的绝对路径

- 重新生成网站静态文件
- 输入
hexo clean清除之前的缓存文件db.json和已生成的静态文件public - 输入
hexo g生成新的网站静态文件 - 输入
hexo d部署到本地仓库 - 输入
hexo s启动服务器
此时发现图片成功显示了


