# web_operation

**Repository Path**: liuyu19/web_operation

## Basic Information

- **Project Name**: web_operation
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2020-07-19
- **Last Updated**: 2021-11-02

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## [网站链接](https://liuyu20.top/)
# 目录：  
一、策划文档与网站地图  
二、图库版权  
三、图库风格及配色  
四、云端架站/运维图文文章  
五、平面设计1. 网站配色，背景及字体的对比度及可读性  
六、平面设计2. Animate it! 及Siteorigin  
七、云端架站1.（域名实践）  
八、云端架站2.（wordfence）  
九、云端架站3. （site24x7）  
十、云端架站4. 网站备份  
十一、站长工具A  
十二、站长工具B  
十三、SEO优化  
十四、用户研究成果及设计改进：方法A  
十五、用户研究成果及设计改进：方法B  
十六、定制化  
加分项、使用https且开启多站点  
*** 
## 一、策划文档与网站地图
### 1.网站建设目标  
给中大南方学生提供联合国可持续发展目标相关的信息，作者个人参与活动的经验分享，科普作者的架心得。

### 2.目标用户画像
##### 用户：
李立豪  
##### 年龄：
21岁  
##### 性格/行为特点：
喜欢收集可持续发展与生态向善相关知识的环保小青年，喜欢高品质集约化的“干货”，愿意参加一些公益活动提出一些有助于可持续发展的建议，为地球发展出一份自己的力量。  
##### 网站使用场景：
在想要了解可持续发展相关活动的时候没有获取的渠道，同时也不知道哪个活动更符合自己的专业领域和兴趣所在，能从这个网站得到业界最新的活动策划消息与往期活动的简介。  
##### 使用原因：
网络上的文章并不多，很多网站的文章与自己想要的活动无关，无法找到自己心仪的活动。  
### 3.网站规划
网站规划：
前期规划：搬运联合国可持续发展目标的相关活动和实践资料，确立一个基本的文章格式以及固定下来网站的具体发展方向。为后期更新个人的活动体验做准备。
中期规划：重视SEO部分的关键词等等，努力更新原创文章，提高网站在搜索引擎上的排名，让更多人能够了解这个网站。
后期规划：增加留言板功能，鼓励用户进行互动和信息分享，让更多人能了解可持续发展与自己可以做的事情。
### 4.DVF模型：  
##### 用户需求：
文章排版干净整洁，可读性高；
获取最新最前沿的可持续发展消息；     
能够搜索到自己想要的文章；  
不需要自己辨别文章是否可用，网站帮忙筛选好；  
##### 可持续性：
持续更新的高质量的文章；  
wordpress架站坚实的后盾，易用的操作；  
站长会常运营与维护网站，分享文章心得等，筛选留言；  
通过网站访问数据调整网站运营的规划；  
##### 可行性： 
使用site origin等插件对页面和文章进行排版布局的优化；  
在首页页面添加侧边栏小工具实现搜索和评论功能；  
wordpress架站的成本较低；  
利用site24X7等插件可以很好地监控网站状况，规避风险；  

##### 对网站的希望：
能够分享给身边的同学有关于联合国可持续发展目标的相关消息，并且是易用好用的网站，能真正帮助到需要的同学，呼吁身边的人真正开始关注生态向善等可持续发展的内容。  
##### 网站地图：
![graph](https://images.gitee.com/uploads/images/2020/0719/232222_651bf234_4873420.png "graph.png")
****
## 二、图库版权
图片均来自[联合国可持续发展网站](https://www.un.org/sustainabledevelopment/zh/news/communications-material/)的宣传资料部分，unleash网站图片来自[官网](https://unleash.org/)，其他的图片均为自己页面的截图，暂不涉及版权。   
****
## 三、图库风格及配色
网站采取的**极简**风格符合联合国可持续发展的主基调、配色采用黄色和白色，突出年轻人生机勃勃，充满活力，愿意去拯救世界、而图片风格的选择主要采取一些极简的图片和logo，符合可持续发展的内容和主题。  
****
## 四、云端架站/运维图文文章  
文章一：[保姆式教学：教您Github-Education pack的申请流程](https://liuyu20.top/index.php/2020/07/19/baomushijiaoxuejiaoningithubeducationpackdeshenqingliucheng/)  
文章二：[国内外主流云主机平台对比分析（用于架设个人的wordpress网站）](https://liuyu20.top/index.php/2020/07/13/guoneiwaizhuliuyunzhujipingtaiduibifenxiyongyujiashegerendew/)  
文章三：[利用宝塔系统基于阿里云服务器架站](https://liuyu20.top/index.php/2020/07/19/liyongbaotaxitongjiyualiyunfuwuqijiazhan/)
****
## 五、平面设计1. 网站配色，背景及字体的对比度及可读性  
网站的配色采取生机勃勃的黄色和白色，背景多为白色，而重点信息例如按键会用橙色进行填充。  
![web](https://images.gitee.com/uploads/images/2020/0719/232345_6e9ddb10_4873420.png "web.png")
字体对比度和可读性均采用网页模板中设计师设计好的大小和标准，如下：  
![web1](https://images.gitee.com/uploads/images/2020/0719/232414_ad61544e_4873420.png "web1.png")  
![web2](https://images.gitee.com/uploads/images/2020/0719/232436_90a86052_4873420.png "web2.png")     
图表等也经过设计，选中时会有填充特效。  
![texiao](https://images.gitee.com/uploads/images/2020/0719/232456_22e0400a_4873420.png "texiao.png")
**** 
## 六、平面设计2. Animate it! 及Siteorigin  
 Animate it! 整个网页的每一张图片都有添加特效共计六处，下图为示例。
![animate](https://images.gitee.com/uploads/images/2020/0719/232515_96733678_4873420.png "animate.png")  
网页的底部我采用了不规则的弧形，为网站增加设计感 
![web3](https://images.gitee.com/uploads/images/2020/0719/232531_a2cad778_4873420.png "web3.png")
Site origin的三个网页：  
文章一：[保姆式教学：教您Github-Education pack的申请流程](https://liuyu20.top/index.php/2020/07/19/baomushijiaoxuejiaoningithubeducationpackdeshenqingliucheng/)  
文章二：[国内外主流云主机平台对比分析（用于架设个人的wordpress网站）](https://liuyu20.top/index.php/2020/07/13/guoneiwaizhuliuyunzhujipingtaiduibifenxiyongyujiashegerendew/)  
文章三：[利用宝塔系统基于阿里云服务器架站](https://liuyu20.top/index.php/2020/07/19/liyongbaotaxitongjiyualiyunfuwuqijiazhan/)
****
## 七、云端架站1.（域名实践） 
**网站域名:liuyu20.top  
网址：https://liuyu20.top/**  
域名购于阿里云。
**** 
## 八、云端架站2.（wordfence）
![wordfence](https://images.gitee.com/uploads/images/2020/0719/232558_9104f209_4873420.png "wordfence1.png")
![wordfence1](https://images.gitee.com/uploads/images/2020/0719/232620_c23b3f9f_4873420.png "wordfence2.png")
wordfence的监控使我了解到我的网站的安全性能只达60%，如果网站进一步发展会考虑升级到专业版拥有更高的安全性能。网站平均被一天会被攻击6000000多次，但是都被wordfence阻止了。  
其次，从防火墙提供的数据中，可以看出我网站防复杂攻击的性能只达48%，普通攻击尚且可以支撑，但无法应对较严重的攻击与问题。在现有模式下，Wordfence防火墙会主动阻止与已知攻击模式匹配的请求，并主动保护我的站点免受攻击者的攻击。
****
## 九、云端架站3. （site24x7） 
![site1](https://images.gitee.com/uploads/images/2020/0719/232641_c9ba3701_4873420.png "site1.png")
![site2](https://images.gitee.com/uploads/images/2020/0719/232655_0b521335_4873420.png "site2.png")
我在site24X7中添加了监视器，八个监视位置为：洛杉矶，亚特兰大，多伦多，迈阿密，波士顿，圣何塞，上海，香港。在site24X7中，首先我了解到我的网站在这八个地方的响应时间和速度，其中圣何塞地区的访问速度最慢，洛杉矶和波士顿的访问速度较快。  
其次，我发现我的网站偶尔会有停机的情况，而网站会实时监控发邮件到我的邮箱，而恢复的时候也会提醒我网站已经恢复，所以我可以在网站停机无法访问的时候得知，从而采取相应的应对措施。之后每五分钟检测一次，均可访问，可用性较强，没有问题。
**** 
## 十、云端架站4. 网站备份  
已做完：数据库（sql文件）；通过wordpress后台导出工具导到本地的文件；wp-config.php备份本地；  
![copy](https://images.gitee.com/uploads/images/2020/0719/232745_e1669348_4873420.png "copy.png")
## 十一、站长工具A（百度）
![baidu](https://images.gitee.com/uploads/images/2020/0719/232800_f7f23999_4873420.png "baidu.png")
![baidu1](https://images.gitee.com/uploads/images/2020/0719/232819_8fea9913_4873420.png "baidu1.png")
由图可知，百度平台已成功收录我两篇文章，且数量还在增加中。
**** 
## 十二、站长工具B（谷歌）
![google](https://images.gitee.com/uploads/images/2020/0719/232901_8d169f37_4873420.png "google.png")
![google1](https://images.gitee.com/uploads/images/2020/0719/232916_39890ad0_4873420.png "google1.png")
由图可知，谷歌平台已成功收录我的网页和文章，且数量还在增加中。  
****
## 十三、SEO优化  
方法一：提交链接在baidu的网站管理中添加本人网站里的url   
每一个平台我都有手动提交，这里的截图以bing为例：  
![bing1](https://images.gitee.com/uploads/images/2020/0719/232936_224bd966_4873420.png "bing1.png")  
  
提交前：  
![google](https://images.gitee.com/uploads/images/2020/0719/233001_dee6a001_4873420.png "google1.png")  
由图可得知我在手动提交url并且等待网站的收录。  
成效：  
谷歌搜索引擎增加了两条相关文章的信息。  
![google2](https://images.gitee.com/uploads/images/2020/0719/233020_48ab85b8_4873420.png "google2.png")  

方法二：关键词优化
在这之前我的文章排版和关键词都有问题，但是我之后针对这个问题进行了修改，让SEO达到了标准  
![seo](https://images.gitee.com/uploads/images/2020/0719/233049_2b5030f2_4873420.png "seo.png")    
![seo2](https://images.gitee.com/uploads/images/2020/0719/233108_1a3570dd_4873420.png "seo2.png")  

方法三：Jetpact自带的监控功能
利用Jetpack自带的监控功能我可以很好的观察到网站的浏览量等动向。
![jetpack](https://images.gitee.com/uploads/images/2020/0719/233126_2aa700ca_4873420.png "jetpack.png") 
![jetpack1](https://images.gitee.com/uploads/images/2020/0719/233152_7c2840e5_4873420.png "jetpack1.png")   
方法四：添加内链：  
一共三篇文章，模仿微信公众号的底部菜单添加了内链，通过内链提醒用户还有其他文章，减少用户的动作，增加这系列文章的点击率。  
![neilian](https://images.gitee.com/uploads/images/2020/0719/233223_aaec0e1e_4873420.png "neilian.png")  
![neilian1](https://images.gitee.com/uploads/images/2020/0719/233238_c30582bb_4873420.png "neilian1.png")  
![neilian2](https://images.gitee.com/uploads/images/2020/0719/233258_fd70d229_4873420.png "neilian2.png")  
****
## 十四、用户研究成果  
方法一：用户访谈（6人）   

问题设置：  
您首次浏览完这个网站后想给这个网站打多少分（1-10）？  
您希望网站的内容更新频率是多少呢？  
您希望从这个网站得到什么内容？  
您对我们的网站最不喜欢/最喜欢的地方是什么？  
您希望这个网站有什么创新点或者突破点呢？  

   
访谈总结：  
60%的用户给网站打了8分，理由是该网站的整体色调排版是较为清楚明了的，只是图片所占的位置偏多，导致影响了加载的速度；20%的用户给网站打了9分；20%用户给网站打了10分，理由是整体风格和主题是搭配的。  
根据访谈结果总结得知：用户最希望该网站的更新频率是每天一次或者两天更新一次，希望能第一时间观察到最新的联合国可持续发展的消息。  
70%的用户希望在该网站中，可以看到作者参与活动的经验；30%的用户希望能多多看到其他作者的个人分享。  
最喜欢的地方： Logo的设计 联系我们的按钮  
最不喜欢的地方： 文章底部底部没有返回顶端的按钮 底部小工具和页脚部分占比太大，导致不够美观。
创新点（突破点）： 文章只有大量的文字，看起来较为的枯燥乏味；希望文章能将相关的视频相结合，这样效果会更好。网站中所涉及的课程还是较少，希望在后面能增加更多的课程或者是所涉及的范围更为广。   
改进措施：     
调整底部小工具的位置，文章浏览底部增加返回按钮。  
![yonghu](https://images.gitee.com/uploads/images/2020/0719/233317_e2423bae_4873420.png "yonghu.png")
 方法二：A/B测试A方案：菜单栏有首页字眼（可跳转）
B方案：   
A小组用户行为：虽然浏览完具体的页面或者是具体的文章后，小导航有“首页”字眼可跳转回首页，但是他们还是习惯的点击网站的导航栏跳转到首页，并表示这个行为是一种习惯，虽然平时没有特意的观察这个，但是总会默认会出现在导航栏。  
B小组用户行为：只有20%的用户会浏览完按返回键一步一步回到首页，剩下的80%的用户都会潜意识的寻找首页的按钮。并且只有60%的用户不知道小导航栏的首页是可以点击的。  
![shouye](https://images.gitee.com/uploads/images/2020/0719/234209_37934b27_4873420.png "shouye.png")  
A/B测试结果总结：通过对比发现A方案更符合目前本网站的架站目标和用户习惯。虽然返回首页的路径有多条，但是根据用户的习惯总会寻找总导航栏的“首页”，而且明显的位置也可以减少用户走少很多的弯路，提升用户体验。综上所述，觉得采取A方案的设置方法。    

****
## 十六、定制化
1.插件Pingback可以自动评论，帮网站引流并插入内部链接，用户研究也表示有评论的文章会更有参与感，更有利于网站宣传。   
![diy](https://images.gitee.com/uploads/images/2020/0719/233426_daab66be_4873420.png "diy.png")  
![diy1](https://images.gitee.com/uploads/images/2020/0719/233439_5e3688e4_4873420.png "diy1.png")  

2.插件Wenprise Pinyin Slug可以自动将标题转换成网页的链接，连接是有意义的，非常方便用户分享链接给朋友，获取他们想要的信息。   
![diy2](https://images.gitee.com/uploads/images/2020/0719/233455_d86df1ac_4873420.png "diy2.png")     

3.插件elementor可以轻松托拉拽编辑网页，为您节省宝贵时间，同时做出更加精美的网站，在我进行的用户研究中用户也表示很欣赏现在的网页布局和排版，简洁大方。  
![diy3](https://images.gitee.com/uploads/images/2020/0719/233509_84fceeb5_4873420.png "diy3.png")
****
## 加分项、使用https且开启多站点
已完成：使用https且开启多站点
![https](https://images.gitee.com/uploads/images/2020/0719/233529_b3af86f0_4873420.png "https.png")  
![add](https://images.gitee.com/uploads/images/2020/0719/233543_575511a4_4873420.png "add.png")
****