3 天！无代码从零手搓课题组网站！
前言
最近花了几天时间给课题组捣鼓了一个新网站，所谓新是因为之前有一个，由师兄用 html 写的前端，python 写的后端，在师兄离开课题组以后我接手了网站的管理，并着手开始美化。由于从 0 学习 html 的成本较高，我选择使用 WordPress 从零开始进行建站，这里我简单比较一下两者的优劣。
特点 | WordPress建站 | 手写HTML建站 |
|---|---|---|
是否编程 | 提供直观的用户界面，不需编程知识 | 需要较多编码知识 |
灵活性 | 可以使用现成的主题和插件，灵活定制外观和功能 | 完全自定义，无限制 |
主题/插件 | 丰富的免费/付费主题和插件可扩展功能 | 需要手动编写所有功能和设计 |
更新/维护 | 自动更新和维护，保持安全且兼容 | 需要手动管理更新和维护 |
社区支持 | 活跃的用户和开发者社区，获取帮助和资源 | 有限的社区支持，依赖个人技能 |
加载时间 | 可能受到插件和主题的影响，加载时间较长 | 轻量级页面，加载时间较短 |
适用场景 | 适用于快速创建功能丰富网站、博客和在线商店 | 适用于需要完全自定义和简单静态网站 |
SEO优化 | 有SEO插件和功能，有利于搜索引擎优化 | 需要手动实现SEO优化 |
服务器规模 | 需要较强的服务器，尤其对于高流量网站和在线商店 | 较轻的服务器需求，适用于简单和小规模网站 |
可以看到，使用 WordPress 建站对服务器有更高的需求，特别是在网站拥有高流量或复杂功能的情况下，需要更强大的服务器来保证网站的性能和稳定性。而手写 HTML 的静态网站通常较为轻量，对服务器的要求较低，适用于简单和小规模的网站。
最早师兄参考Plant Chemetics Laboratory[1]的界面，做了一些简单的 html 静态页面，但排版不算整洁且可操作性较低。
在将服务器格式化并搭建完宝塔界面和 WordPress 以后，我在淘宝找了一家店咨询，按照 Plant Chemetics Laboratory 的界面，使用 WordPress 建站，对方开价 2000。
这个价格我作为外行觉得非常不值得，于是开始“现学现卖”。
我参考的教程主要是这三个：
- Up主【比得汪】的1小时WordPress从0到1建站系列保姆级教程零基础新手搭建个人博客及企业网站[2]
- Up主【比得汪】的Elementor新手教程合集 - 手把手教你设计WordPress网站 外贸网站 品牌官网 独立站 个人博客搭建教程[3]
- Up主【Draco讲独立站】的免费&全网最详细Wordpress外贸B2B独立站搭建教学系列[4]
（感谢大佬们录制的免费课程，已三连！）
以视频 1 为基础，构建出大致框架，再根据自己的需求学习视频 2/3 中的部分进阶内容，结合部分文字教程检索，最终制作了以下网站。
网站链接：http://www.plantimmunity.cn
需求
制作一个网站首先需要明确你的需求。
界面
本网站旨在较为全面的展示我们组的研究方向、研究成果以及团队成员，对应的页面应该至少包括 Homepage, Research, Publications 和 Team/Members，除此之外还可能包含如Gallery（展示课题组日常活动），Position（展示招聘信息），Contact（展示联系方式）等内容。
因此，综合考虑了以后一共做了以下七个一级界面，暂没有设定对应的二级界面。
主页主要由六个部分组成
- 导航栏
- 欢迎语及新闻
- 研究方向
- 研究对象
- 联系方式
- 地址底栏
过多的插件和动画会使得网站加载变得缓慢，因此我只在主页添加了部分动画，侧栏及其他功能插件我一律没加。
访问量与服务器选择
前面已经提到，网站的访问量是与服务器配置的选择息息相关的，单位时间内的高访问量必然需要更高配置的服务器。考虑到学术类的网站对访问量需求不高，我们买的服务器是阿里云的服务器，以前的网站服务器配置为 1 核 2G，但更换为 WordPress 建站以后配置需求相对较高，因此升级到了 2 核 4G。
平时运行时，内存占用大概为 45%（1707/3780 MB）。
语言
我们组之前的网站是中/英/日三语的，实际上是机翻做了三个 html 页面，但考虑到网站的受众，在新网站上只做了英文界面。
如果你有多语言的需求，你也可以去尝试 polylang 这个插件。
相关的教程有很多，如wordpress多语言翻译插件polylang的使用教程[5]，可以做个参考。
开销
除去制作和管理成本，其他的开销包括
- 云服务器：1476 元/年
- 域名：39 元/年
好的参考
由于我的艺术细胞实在是不多，因此在前期制作时查看了不少课题组的网站，不断学习与融合。下面给出一些不错的学术网站：
- iGEM 的界面 https://igem.org
- 维基百科的界面 https://en.wikipedia.org/wiki/Main_Page 主打一个简洁
- Plant Chemetics Laboratory https://plantchemetics.org
- The Nobori Lab https://www.tatsuyanobori.com
- Zhenglab https://www.zhenghaolab.org
Logo
第一次公开介绍我们团队的 Logo。本 Logo 旨在不脱离学校和学院的整体风格太远的情况下，充分展示我们的研究方向（感兴趣的读者可自行对照 Logo 和 Research interests），由我和我女朋友小李同学主导，韩老师和团队其他成员共同完成。
设计上提一点，盾内最上方的菱形和圆形取自植物免疫学大佬 Jonathan D. G. Jones 和 Jeffery L. Dangl 于 2006 年发表在 Nature 上的经典文章 The plant immune system 中的 Figure 1，使用菱形代表 PAMPs，圆形代表 Effectors。
结语
看似一个简洁的界面，完成初稿就花了我整整三天，后续不断进行小修，才得以实现目前的完成度。实际上要考虑的东西远不止这些，不同页面的比例、整体色调、字体和字号、各部分展示方式、多设备适配等问题，只有实际去做才能体会到其中的不易，在此记录部分内容，希望能给后来者一些帮助。
参考内容
[1]
Plant Chemetics Laboratory网址: https://plantchemetics.org/
[2]
1小时WordPress从0到1建站系列保姆级教程零基础新手搭建个人博客及企业网站: https://www.bilibili.com/video/BV1Vg411w7os/
[3]
Elementor新手教程合集 - 手把手教你设计WordPress网站 外贸网站 品牌官网 独立站 个人博客搭建教程: https://www.bilibili.com/video/BV1KX4y1a7P
[4]
免费&全网最详细Wordpress外贸B2B独立站搭建教学系列: https://www.bilibili.com/video/BV16d4y1n7tJ
[5]
wordpress多语言翻译插件polylang的使用教程: https://www.bilibili.com/video/BV11J411d7LB