3 天！无代码从零手搓课题组网站！

前言

最近花了几天时间给课题组捣鼓了一个新网站，所谓新是因为之前有一个，由师兄用 html 写的前端，python 写的后端，在师兄离开课题组以后我接手了网站的管理，并着手开始美化。由于从 0 学习 html 的成本较高，我选择使用 WordPress 从零开始进行建站，这里我简单比较一下两者的优劣。

可以看到，使用 WordPress 建站对服务器有更高的需求，特别是在网站拥有高流量或复杂功能的情况下，需要更强大的服务器来保证网站的性能和稳定性。而手写 HTML 的静态网站通常较为轻量，对服务器的要求较低，适用于简单和小规模的网站。

最早师兄参考Plant Chemetics Laboratory[1]的界面，做了一些简单的 html 静态页面，但排版不算整洁且可操作性较低。

在将服务器格式化并搭建完宝塔界面和 WordPress 以后，我在淘宝找了一家店咨询，按照 Plant Chemetics Laboratory 的界面，使用 WordPress 建站，对方开价 2000。

这个价格我作为外行觉得非常不值得，于是开始“现学现卖”。

我参考的教程主要是这三个：

1. Up主【比得汪】的1小时WordPress从0到1建站系列保姆级教程零基础新手搭建个人博客及企业网站[2]
2. Up主【比得汪】的Elementor新手教程合集 - 手把手教你设计WordPress网站 外贸网站 品牌官网 独立站 个人博客搭建教程[3]
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