云计算实验三
实验题目:利用云平台搭建个人博客
实验目的
本实验旨在通过实践操作,掌握基于云计算环境的网站部署技能
实验要求
构建环境并实现个人博客/网站的搭建,撰写实验报告,并将这份报告作为一篇博文发布在自己的博客 / 网站上。
实验步骤与内容
一、准备工作
安装Git和node.js
后续的本地云端源码的同步工作都依赖于Git,而node.js是hexo
的前置环境
登录GitHub账号创建一个新仓库,并创建一个存放github
本地仓库文件的目录
二、部署工作
部署hexo
服务器
-
安装
cnpm
选中创建的目录(文件夹)右键选择使用
Git Bash Here
打开Git命令窗口$ npm install -g cnpm –registry=https://registry.npm.taobao.org
cnpm
是一个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
启动服务器
此时发现图片成功显示了