# Web_Operations **Repository Path**: NFUNM171043007/wo ## Basic Information - **Project Name**: Web_Operations - **Description**: 一个网站运营报告 - **Primary Language**: Unknown - **License**: Not specified - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2019-06-29 - **Last Updated**: 2020-12-19 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # [!Rockmantic](http://www.rakshasa219.me) #### ---- **一个将音乐风格与乐队结合科普的网站** - 站长：陈彦华 - 网站地址：[!Rockmantic](http://www.rakshasa219.me) - 网站搭建和模版均来自于[Wordpress](https://cn.wordpress.org/)，主题为[big pix](https://wpdevshed.com/themes/big-pix/)。 ### 一、目标： #### **策划文档** **1. 网站建设目标** ：为音乐与乐队爱好者提供一个科普基地，使他们对陌生的音乐风格有更多的了解。 **2. 目标用户画像** ： - 16岁以上爱好听歌或者对音乐风格有个人独特爱好，对乐队演出感兴趣的不限为在校中学生/大学生，上班族/创业者/待业者......（年龄无上限） - **行为习惯**：能快速判断音乐风格，对于陌生音乐接受程度高，善用网路搜索音乐信息，使用音乐app频率较高。 **3. 网站规划** ： - **前期市场考察分析** 充分考察做网站的目的，受众面，规划好各个周期 - **初始架站** AWS申请实例 Namecheap申请域名 Cloudfare进行域名解析绑定 - **中期设计** 主页设计：要一眼就让进来的用户感到惊艳　　 页面设计：要保持网页的整体一致性。　　 配色设计：要符合目标群众的综合审美。 - **后期维护** 通过监控插件监控网站性能 通过安全插件保护网站尽量少受攻击 **4.DVF模型定义需求** ： - 用户需求性：用户想要一个只音乐社区去了解音乐风格与乐队，页面操作性简易，界面整洁，符合审美需求。 - 技术的可行性：网站需要大量的音乐库，需要与音乐网站合作。 #### **网站地图** ![网站地图.jpg](https://images.gitee.com/uploads/images/2019/0630/225658_110180c9_1829803.png) ### 二、图片的使用： #### **版权的声明** **1.版权声明页面** 我使用SiteOrigin Page Builder创建了一个[版权声明页面](http://www.rakshasa219.me/right/)来声明图片与内容的来源。 ![](https://images.gitee.com/uploads/images/2019/0630/225658_9b2c7f5d_1829803.png) **2.文章标注并链接** - 在每篇非文章主页内容末尾，标注“内容来源，尊重原创作者”并链接原网页。 ![](https://images.gitee.com/uploads/images/2019/0630/225658_427e4cac_1829803.png) **3.图片标注并链接** - 每篇文章的图片均可点击链接至图源网站。![图片版权](https://images.gitee.com/uploads/images/2019/0630/225659_88879d7e_1829803.png) #### **图库风格及配色** **1.图库/图片风格** - 由于!rockmantic主要以乐队和音乐为主题，所选的图片也大致与乐队相关。 - ![](https://images.gitee.com/uploads/images/2019/0630/225659_104365e4_1829803.png) **2.配色** - 图片配色以黑白为主，与网站主题颜色也相呼应。![微信图片_20190630165124.png](https://images.gitee.com/uploads/images/2019/0630/225658_411fdd51_1829803.png) ### 三、云端架站文章： #### **3篇云端架站踩坑图文文章** **1.[WORDPRESS基本架构](http://www.rakshasa219.me/2019/06/29/wordpress-2/)** **2.[通过EDUCATION PACK申请 域名](http://www.rakshasa219.me/2019/06/29/namecheap/).** **3.[域名解析与绑定](http://www.rakshasa219.me/2019/06/29/cloudflare/)** ### 四、平面设计 #### **平面设计元素** - **背景**：以**黑白**为主，充分符合网站整体主题风格。 - **字体**：以**黑体**与**宋体**为主 ![](https://images.gitee.com/uploads/images/2019/0630/225658_30277603_1829803.png) - **配色**：配色以黑白为主，风格上与乐队音乐风格相符，营造上个世纪的复古感。 - **对比度与可读性**：由于网站配色以黑白为主，故对比度大，可读性强。 ![](https://images.gitee.com/uploads/images/2019/0630/225659_810d8661_1829803.png) #### **平面设计插件** **1.Animate it!** - 第一处使用 ![](https://images.gitee.com/uploads/images/2019/0630/225659_fb6cf38b_1829803.png) - 第二处使用 ![](https://images.gitee.com/uploads/images/2019/0630/225659_9ebcf036_1829803.png) **2.SiteOrigin** 一个SiteOrigin页面--[照片墙](http://www.rakshasa219.me/%E7%94%BB%E5%BB%8A/) ![](https://images.gitee.com/uploads/images/2019/0630/225659_324c0c6a_1829803.png) ### 五、云端网站管理 #### **云端架站** **域名可用**[!Rockmantic](http://www.rakshasa219.me) ![](https://images.gitee.com/uploads/images/2019/0630/225700_c9a756ba_1829803.png) #### **网站安全** **Wordfence** - 安装了插件Wordfence来检测自己网站的安全性，通过扫描网站，发现网站、网站的插件还有部位文章的主题版本过低，需要进行升级。垃圾广告检查、垃圾邮件检查、黑名单检查也都需要进行升级。 ![](https://images.gitee.com/uploads/images/2019/0630/225659_3a8becb2_1829803.png) - 24小时内被阻止的攻击总数 ![](https://images.gitee.com/uploads/images/2019/0630/225659_ac3cb34d_1829803.png) - 30天内被阻止的攻击总数 ![](https://images.gitee.com/uploads/images/2019/0630/225700_22201128_1829803.png) #### **网站性能** **site24x7** ![](https://images.gitee.com/uploads/images/2019/0630/225700_44305320_1829803.png) - 如图所示，添加了8个监控地点，并且8个地点的响应时间均不同 ![](https://images.gitee.com/uploads/images/2019/0630/225700_79d1d423_1829803.png) - 从总体数据来分析，网站性能基本正常。 ![](https://images.gitee.com/uploads/images/2019/0630/225700_61965b66_1829803.png) #### **网站备份** **1.提供登陆winSCP的截图** ![](https://images.gitee.com/uploads/images/2019/0630/225700_d638ac52_1829803.png) **2.提供将wp-config.php备份本地的截图** ![](https://images.gitee.com/uploads/images/2019/0630/225700_16f2008a_1829803.png) **3.提供通过插件（Wordpress Database Backup/WordPress Backup Plugin）备份“数据库文件”截图** ![微信图片_20190630152012.png](https://images.gitee.com/uploads/images/2019/0630/225700_520b6ce9_1829803.png) ![微信图片_20190630152021.png](https://images.gitee.com/uploads/images/2019/0630/225700_421ab69b_1829803.png) **4.提供通过wordpress后台导出工具导到本地的文件截图** ![](https://images.gitee.com/uploads/images/2019/0630/225700_41c2e096_1829803.png) ![](https://images.gitee.com/uploads/images/2019/0630/225701_81f2088b_1829803.png) ### 六、站长工具 #### **站长认证** - 我尝试分别使用了百度/bing/goole三种站长工具 ![](https://images.gitee.com/uploads/images/2019/0630/225701_63b23e02_1829803.png) **1.Bing** - 在bing可以成功通过site与关键词抓取搜索到站点 ![](https://images.gitee.com/uploads/images/2019/0630/225701_78a766cd_1829803.png) ![](https://images.gitee.com/uploads/images/2019/0630/225701_5b284497_1829803.png) - bing站长管理数据展示 ![](https://images.gitee.com/uploads/images/2019/0630/225701_1499d15a_1829803.png) **2.goole** - 在goole可以成功通过site与关键词抓取搜索到站点 ![](https://images.gitee.com/uploads/images/2019/0630/225701_2413c3f5_1829803.jpeg) ![](https://images.gitee.com/uploads/images/2019/0630/225701_1854b684_1829803.jpeg) - 但是由于goole需要vpn才能进行搜索，故没有什么有成效的数据 ![](https://images.gitee.com/uploads/images/2019/0630/225701_7d566b27_1829803.png) **3.百度** - 百度站长审核周期长，收录时间也长 ![](https://images.gitee.com/uploads/images/2019/0630/225701_8e4bdde7_1829803.png) - 未知原因，并没有有效数据。 ![](https://images.gitee.com/uploads/images/2019/0630/225702_c9c8e35b_1829803.png) #### **SEO优化** **1.发表优质文章** - 在每次发表文章后，浏览量明显提升 ![](https://images.gitee.com/uploads/images/2019/0630/225702_6b710e73_1829803.png) **2.对文章进行SEO优化，修改了【slug】【meta description】。** ![](https://images.gitee.com/uploads/images/2019/0630/225702_6c7b9da5_1829803.png) **3.在其他站点添加外链，通过分享站点，提高网站流量** ![](https://images.gitee.com/uploads/images/2019/0630/225702_494a32af_1829803.png)![](https://images.gitee.com/uploads/images/2019/0630/225702_e2b42132_1829803.png) **4.尝试为每一篇文章添加一个后续的出站链接** ![](https://images.gitee.com/uploads/images/2019/0630/225702_e0445053_1829803.png) **5.为图像添加描述图像的alt文本** ![](https://images.gitee.com/uploads/images/2019/0630/225702_5afd6a43_1829803.png) ### 七、用户研究 #### **用户研究方法** **A.小组访谈(4人)** 根据用户访谈，该网站目前存在以下问题： > - 文章太少，内容较为单调。 > - 跳转时间比较久，图片加载太长。 > - 因为是与音乐有关的网站，没有音乐播放比较可惜。 **A访谈影响的结果，定制化方案如下** - 在文章方面，还需个人后续努力发表更多优质文章 - 在jetpack里将图像优化设置开启，lazy-loading使用户减少文章等待时间。 ![](https://images.gitee.com/uploads/images/2019/0630/225702_3bd7e8dd_1829803.png) ![](https://images.gitee.com/uploads/images/2019/0630/225702_36275d2a_1829803.png) - 在首页添加了音乐播放器并添加了可播放的音乐。 ![](https://images.gitee.com/uploads/images/2019/0630/225702_addd70e2_1829803.png) **2.用户体验地图** - ![](https://images.gitee.com/uploads/images/2019/0630/225703_da1d1cf2_1829803.png) #### **定制化** **1.在wordpress中图像即使在编辑时选择了居中，但在发表后依然呈如图居左状** ![](https://images.gitee.com/uploads/images/2019/0630/225703_037adf01_1829803.jpeg) - 尝试更改模板css，无果 ![](https://images.gitee.com/uploads/images/2019/0630/225703_d10deacf_1829803.png) - 将图片改为html格式，加入以下代码，显示成功。 `style="display: block; float: none; margin-left: auto; margin-right: auto;` ![](https://images.gitee.com/uploads/images/2019/0630/225703_a5904abf_1829803.png) - 效果![](https://images.gitee.com/uploads/images/2019/0630/225703_ba5ae8b2_1829803.png) **2.文章末尾的超链接显示为白色，与背景融合，无法认清** ![](https://images.gitee.com/uploads/images/2019/0630/225703_4d01edce_1829803.png) - 加入以下代码 `"style="color:black"` ![](https://images.gitee.com/uploads/images/2019/0630/225703_4e9e0e51_1829803.png)