> 技术文档 > 云计算实验三

云计算实验三


实验题目:利用云平台搭建个人博客

实验目的

本实验旨在通过实践操作,掌握基于云计算环境的网站部署技能

实验要求

构建环境并实现个人博客/网站的搭建,撰写实验报告,并将这份报告作为一篇博文发布在自己的博客 / 网站上。

实验步骤与内容

一、准备工作
安装Git和node.js

后续的本地云端源码的同步工作都依赖于Git,而node.js是hexo的前置环境

登录GitHub账号创建一个新仓库,并创建一个存放github本地仓库文件的目录
二、部署工作
部署hexo服务器
  1. 安装cnpm

    选中创建的目录(文件夹)右键选择使用Git Bash Here打开Git命令窗口

    $ npm install -g cnpm –registry=https://registry.npm.taobao.org

    cnpm 是一个 npm 的替代工具,由淘宝团队维护,主要用于加速 npm 包的下载

    在这里插入图片描述

  2. 安装hexo

    $ cnpm install -g hexo-cli

    在这里插入图片描述

  3. 初始化hexo源码

    $ hexo init

    在这里插入图片描述

  4. 安装hexo本地服务器

    $ npm install hexo-server –save

    在这里插入图片描述

  5. 启动服务器

    $ hexo server

    在这里插入图片描述

    初始博客界面如下

    在这里插入图片描述

本地部署
  1. 创建密钥

    $ cd ~/.ssh$ ssh-keygen -t rsa -C ‘注册时的邮箱地址’

    在这里插入图片描述
    查看C:\\用户\\用户名\\.ssh\\id_ras.pub文件中的ssh
    在这里插入图片描述

  2. GitHub中添加公钥ssh

    复制上图的ssh密钥,在已登陆的Github主页点击头像,之后点击Settings设置,并按下图顺序点击,创建新的ssh密钥,结果如下:

    在这里插入图片描述

  3. 本地验证密钥

    $ ssh -T git@github.com

    在这里插入图片描述

  4. 本地绑定Github

    $ git config –global user.name “注册时用户名”$ git config –global user.email “注册时邮箱”

    在这里插入图片描述

  5. 部署设置

    用记事本打开并修改本地仓库目录下的_config.yml文件,拉到最后,填写deploy模块

    在这里插入图片描述

    这一串填写的意思是,hexo部署的时候,会以git部署到指定的repository里面的指定branch。

  6. 安装更新工具

    $ cnpm install hexo-deployer-git

    用于更新github中的博客

    在这里插入图片描述

三、创建博客
  1. 新建测试文章

    $ hexo new “文章名称”

    在这里插入图片描述

  2. 生成文件

    $ hexo g

    在这里插入图片描述

  3. 部署到GitHub

     $ hexo d ``` ![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/1d578ab69f2c49898a32c8708d299e70.jpeg#pic_center) ![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/9900e418ec69496c80b191a4e5b6b5f2.jpeg#pic_center) 此时已经成功上传github,查看仓库可以发现多了一些文件夹 ![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/eeac679ee6bc4b62ba1ab805b15be608.jpeg#pic_center) 
  4. 本地预览

    $ hexo s

    在这里插入图片描述

    界面如下

    在这里插入图片描述

  5. 编辑博客

    进入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中的图片指定是绝对路径),因此无法显示
在这里插入图片描述

解决方法:

  1. _config.yml 文件中的post_asset_folder 选项设为 true
    在这里插入图片描述
    这样在使用$ hexo new [layout] </code>新建md文件时,会同时创建与该文件名同名的文件夹,同时存放在<code>source/_post/</code>目录下</p> <p>由于此时我已经创建好了md文件,因此我直接在md同文件夹下创建了一个同名文件夹</p> </li> <li> <p>在<code>typora</code>的偏好设置中将图片路径设置为指定路径<code>./${filename}</code><br /><img src="https://i-blog.csdnimg.cn/direct/e8dc04c371474c748b78e9ef3cd88198.png#pic_center" alt="在这里插入图片描述" /><br />这样在粘贴图片时就可以自动保存到该同名文件夹</p> <p>此时typora中图片的路径应该显示如下<br /><img src="https://i-blog.csdnimg.cn/direct/4acee8bc043a45cc990fc965856ee3c5.png#pic_center" alt="在这里插入图片描述" /></p> </li> <li> <p>安装插件<code>hexo-asset-image</code></p> </li> </ol> <pre><code class="prism language-bash">$ <span class="token function">npm</span> <span class="token function">install</span> https://github.com/CodeFalling/hexo-asset-image <span class="token parameter variable">--save</span></code></pre> <pre><code>该插件的作用就是将md文件中的图片相对路径转换为html可以访问的绝对路径</code></pre> <p><img src="https://i-blog.csdnimg.cn/direct/b3aaf188e78249b297e3570c45668347.jpeg#pic_center" alt="在这里插入图片描述" /></p> <ol start="5"> <li>重新生成网站静态文件</li> </ol> <ul> <li>输入<code>hexo clean</code>清除之前的缓存文件 <code>db.json</code> 和已生成的静态文件 <code>public</code></li> <li>输入<code>hexo g</code>生成新的网站静态文件</li> <li>输入<code>hexo d</code>部署到本地仓库</li> <li>输入<code>hexo s</code>启动服务器<br />此时发现图片成功显示了<br /><img src="https://i-blog.csdnimg.cn/direct/6875be63b57a4c28814daddfcd6591b9.png#pic_center" alt="在这里插入图片描述" /></li> </ul> <p><a href="http://www.children61.com/" target="_blank">儿童门户网站</a></p> </div> <div class="clear"></div> <div class="article_tags"> <div class="tagcloud"> 网络标签:<a href="http://www.csdndoc.com/tag/zzl" rel="tag">在这里</a> <a href="http://www.csdndoc.com/tag/crtp" rel="tag">插入图片</a> <a href="http://www.csdndoc.com/tag/wj" rel="tag">文件</a> </div> </div> </div> </div> <div> <ul class="post-navigation row"> <div class="post-previous twofifth"> 上一篇 <br> <a href="http://www.csdndoc.com/thread/10085.html" rel="prev">边缘计算 vs 云计算:一文看懂二者的区别与联系_边缘计算和云计算的区别</a> </div> <div class="post-next twofifth"> 下一篇 <br> <a href="http://www.csdndoc.com/thread/10087.html" rel="next">CAPL与云计算结合_capl-25模式怎么 测量</a> </div> </ul> </div> <div class="article_container row box article_related"> <div class="related"> <div class="newrelated"> <h2>相关问题</h2> <ul> <li><a href="http://www.pcgg.com.cn/ys/45943.html">原神里面怎么玩原神游戏</a></li> <li><a href="http://www.pcgg.com.cn/lol/20416.html">英雄联盟怎么设置a键提示攻击范围</a></li> <li><a href="http://www.pcgg.com.cn/gpqq/12661.html">和平精英模拟器怎么跳跃(和平精英模拟器跳跃键用不了)</a></li> <li><a href="http://www.pcgg.com.cn/ys/40171.html">原神应该怎么卸载游戏</a></li> <li><a href="http://www.pcgg.com.cn/ys/40039.html">原神怎么获得礼盒</a></li> <li><a href="http://www.pcgg.com.cn/xyx/34118.html">4399跳云游戏</a></li> <li><a href="http://www.pcgg.com.cn/gl/4048.html">原神申鹤卡池什么时候结束</a></li> <li><a href="http://www.pcgg.com.cn/ys/46635.html">原神角色怎么更换姿势</a></li> <li><a href="http://www.pcgg.com.cn/lol/33085.html">lol英雄排名什么时候更新</a></li> <li><a href="http://www.pcgg.com.cn/gl/3134.html">原神奇怪的丘丘人掉落什么</a></li> </ul> </div> </div> </div> <div class="clear"></div> <div id="comments_box"> </div> </div> <div id="sidebar"> <div id="sidebar-follow"> <div class="search box row"> <div class="search_site"> <form id="searchform" method="get" action="http://www.csdndoc.com/index.php"> <button type="submit" value="" id="searchsubmit" class="button"><i class="fasearch">☚</i></button> <label><input type="text" class="search-s" name="s" x-webkit-speech="" placeholder="请输入搜索内容"></label> </form></div></div> <div class="widget_text widget box row widget_custom_html"><h3>公告</h3><div class="textwidget custom-html-widget"><a target="_blank" href="http://www.5d.ink/deepseek/?d=DeepseekR1_local.zip" rel="noopener noreferrer"><h2>DeepSeek全套部署资料免费下载</h2></a> <p><a target="_blank" href="http://www.5d.ink/deepseek/?d=DeepseekR1_local.zip" rel="noopener noreferrer"><img src="http://css.5d.ink/img/deep.png" alt="DeepSeekR1本地部署部署资料免费下载"></a></p><br /><br /> <a target="_blank" href="http://www.5d.ink/freefonts/?d=FreeFontsdown.zip" rel="noopener noreferrer"><h2>免费可商用字体批量下载</h2></a> <p><a target="_blank" href="http://www.5d.ink/freefonts/?d=FreeFontsdown.zip" rel="noopener noreferrer"><img src="http://css.5d.ink/img/freefont.png" alt="免费可商用字体下载"></a></p></div></div> <div class="widget box row"> <div id="tab-title"> <div class="tab"> <ul id="tabnav"> <li class="selected">猜你想看的文章</li> </ul> </div> <div class="clear"></div> </div> <div id="tab-content"> <ul> <li><a href="http://www.pcgg.com.cn/lol/31095.html">怎么关闭英雄联盟下载器</a></li> <li><a href="http://www.pcgg.com.cn/ys/33498.html">原神pc怎么调出鼠标</a></li> <li><a href="http://www.pcgg.com.cn/gpqq/7786.html">和平精英如何申请退款(和平精英如何申请退款游戏充值)</a></li> <li><a href="http://www.pcgg.com.cn/lol/22458.html">今天英雄联盟怎么玩不了2021</a></li> <li><a href="http://www.pcgg.com.cn/lol/13729.html">英雄联盟怎么样升级快手游</a></li> <li><a href="http://www.pcgg.com.cn/lol/19679.html">75hz玩lol够用吗</a></li> <li><a href="http://www.pcgg.com.cn/ys/33574.html">原神的荒岛诺雷结界怎么过</a></li> <li><a href="http://www.pcgg.com.cn/lol/21354.html">英雄联盟黄铜一局加多少分</a></li> <li><a href="http://www.pcgg.com.cn/gl/3754.html">原神如何制作鱼饵</a></li> <li><a href="http://www.pcgg.com.cn/gl/5422.html">奇怪的丘丘人刷新时间</a></li> </ul> </div> </div> </div> </div> </div> </div> <div class="clear"></div> <div id="footer"> <div class="container"> <div class="twothird"> </div> </div> <div class="container"> <div class="twothird"> <div class="copyright"> <p> Copyright © 2012 - 2025 <a href="http://www.csdndoc.com/"><strong>程序员档案馆</strong></a> Powered by <a href="/lists">网站分类目录</a> | <a href="/top100.php" target="_blank">精选推荐文章</a> | <a href="/sitemap.xml" target="_blank">网站地图</a> | <a href="/post/" target="_blank">疑难解答</a> <a href="https://beian.miit.gov.cn/" rel="external">京ICP备05034492号</a> </p> <p>声明:本站内容来自互联网,如信息有错误可发邮件到f_fb#foxmail.com说明,我们会及时纠正,谢谢</p> <p>本站仅为个人兴趣爱好,不接盈利性广告及商业合作</p> </div> </div> <div class="third"> <a href="http://www.xiaoboy.cn" target="_blank">小男孩</a> </div> </div> </div> <!--gototop--> <div id="tbox"> <a id="home" href="http://www.csdndoc.com" title="返回首页"><i class="fa fa-gohome"></i></a> <a id="pinglun" href="#comments_box" title="前往评论"><i class="fa fa-commenting"></i></a> <a id="gotop" href="javascript:void(0)" title="返回顶部"><i class="fa fa-chevron-up"></i></a> </div> <script src="//css.5d.ink/body5.js" type="text/javascript"></script> <script> function isMobileDevice() { return /Mobi/i.test(navigator.userAgent) || /Android/i.test(navigator.userAgent) || /iPhone|iPad|iPod/i.test(navigator.userAgent) || /Windows Phone/i.test(navigator.userAgent); } // 加载对应的 JavaScript 文件 if (isMobileDevice()) { var script = document.createElement('script'); script.src = '//css.5d.ink/js/menu.js'; script.type = 'text/javascript'; document.getElementsByTagName('head')[0].appendChild(script); } </script> <script> $(document).ready(function() { $("#sidebar-follow").pin({ containerSelector: ".main-container", padding: {top:64}, minWidth: 768 }); $(".mainmenu").pin({ containerSelector: ".container", padding: {top:0} }); $(".swipebox").swipebox(); }); </script> </body></html>