我做了一个环保宣传网站：Climate Action Now 的搭建记录
我做了一个环保宣传网站：Climate Action Now 的搭建记录
前阵子我做了一个和气候变化有关的小网站，名字叫 Climate Action Now。
网址放在这里：
我做它，不是为了堆一个漂亮页面出来，也不是单纯为了练前端。更直接一点说，我就是想把”环保”这件事讲得更容易被看懂，也更容易让人愿意开始行动。很多时候，大家不是不关心环境，而是觉得这个话题离自己太远，或者一上来就被一堆概念和大词劝退了。所以我想试试看，能不能做一个对学生和家长都更友好的网站：先把事情讲明白，再把行动入口摆出来。
为什么我会做这个站
我发现网上不少气候变化相关内容有两个常见问题。
第一种是过于学术。资料很全，但普通人看起来会累，读两段就想关掉。
第二种是过于口号化。一直在喊”保护地球”，可看完以后，用户还是不知道今天到底能做什么。
我希望这个网站不要掉进这两个坑里。它应该同时做到几件事：
- 让不了解气候变化的人也能看懂
- 让数据和图片帮助理解，而不是制造距离感
- 让用户看完之后，至少愿意做一件具体的小事
对我来说，这才是一个环保宣传站该有的样子。
我是怎么规划内容结构的
这个站的核心思路其实很简单，就是按用户的阅读顺序去搭内容，而不是按”我有什么资料”去堆页面。
我把主内容做成了一条可以往下滚动阅读的长页面，顺序大概是这样：
- 先用一个比较轻松的首页开场，让人愿意继续往下看。
- 再解释什么是气候变化，把”天气”和”气候”这种最容易混淆的概念讲清楚。
- 然后说明原因，比如温室效应、化石燃料、交通、农业、垃圾填埋场这些。
- 接着讲影响，让用户知道这不是一个抽象议题，而是真的会影响动物、城市、高温、洪水和海平面。
- 最后把重点拉回到”我们能做什么”，给出学生和普通家庭也做得到的行动建议。
我很在意这一点：读者不能在看完一堆坏消息之后直接离开。所以网站后半段我故意放了很多”可行动”内容，比如少开车、少用一次性塑料、节约用电、种树、吃本地食物、缩短洗澡时间。这些都不是什么惊天动地的大事，但它们足够具体，用户愿意试，网站的目的就达到了。
技术上，我用了什么来搭这个网站
这个项目没有上特别重的框架，我选的是一套很直接、也很适合内容展示站的组合：
ReactViteTypeScriptTailwind CSSReact Routerlucide-react
这样选的原因很现实。
Vite 起项目快，开发时反馈也很快，改一个模块就能立刻看到页面效果。像这种需要反复调整排版、颜色、段落节奏和交互手感的网站，用它很顺手。
React 负责把页面拆成清楚的结构。虽然这个网站看上去更像一个内容页，但里面其实有不少适合组件化的部分，比如章节模块、数据卡片、资源列表、互动计算器、测验页这些。拆开以后，维护会轻松很多。
我保留了 TypeScript，主要不是为了炫技，而是为了在整理数据结构时少踩坑。比如气候数据、引用来源、行动选项、测验题目，这些都很适合用明确类型来约束。
Tailwind CSS 则解决了我一个老问题：这种页面视觉细节很多，传统写法很容易一边改一边膨胀。用 Tailwind 做卡片、栅格、颜色、圆角、间距和响应式布局，效率更高，也更方便我不断试样式。
这个站最重要的，不是框架，而是表达方式
如果只是从”能不能跑起来”来看，这个项目其实不难。真正花时间的地方，反而是怎么把内容讲得不无聊。
我最后采用的是一种偏 scrollytelling 的结构。用户一路往下滚动，会依次看到：
- 开场的大图和引导按钮
- 数据模块
- 气候变化基础解释
- 成因模块
- 影响模块
- 行动建议模块
- 可互动的个人减碳计算
- 视频和资料链接
- 参考来源
这样做有一个好处：阅读体验比较连贯。用户不需要在很多页面之间反复跳转，信息会顺着往下走。对于环保这种本来就容易让人中途退出的话题，这种结构比”菜单式知识库”更容易留住人。
我还单独做了互动部分。用户可以勾选自己愿意做到的事情，页面会实时计算一年大概能减少多少二氧化碳排放，并换算成树木等价值。这个功能不复杂，但它很关键，因为它把”环保”从一句抽象口号，变成了一个能立刻感知的结果。
说白了，人们更容易被自己能做到的变化打动，而不是被遥远的大道理打动。
数据和素材我是怎么处理的
我不想把这个站做成只会喊口号的页面，所以数据和引用来源我都尽量放得比较清楚。
站内用到的数据和资料，主要来自这些公开来源：
- WMO
- Our World in Data
- NASA
- Wikipedia 中整理得比较清楚的气候图表
- IUCN
- 联合国等公开机构资料
有些图片和示意图我用了 AI 生成，因为它能帮我快速做出统一视觉风格的教育类插图。但涉及温度变化、图表、视频和部分核心资料时，我还是优先引用公开来源，并在页面里保留出处。这一点我觉得很重要。环保宣传不能只靠情绪，也得有基本的资料支撑。
我在开发时特别在意的几个细节
这个项目里，有几件小事我花了比预想更多的时间。
第一是节奏感。不是每一段都适合写成长文，有些位置更适合用卡片，有些位置更适合用大数字和图表，有些位置则需要让页面安静一点，给读者一点消化空间。
第二是互动不能太重。这个站的主角还是内容本身，交互只是辅助。如果动画太多、按钮太花、特效太抢戏，反而会把重点弄丢。
第三是”可做的事”一定要具体。与其写一堆正确但空泛的话，我更愿意告诉用户：今天少坐一次车、今天带自己的水杯、今天关掉没必要的灯，这就已经是行动了。
我自己越来越觉得，环保这件事真正难的不是”知道”，而是”愿不愿意开始”。所以网站设计上，我尽量让开始行动这一步变得更轻一点。
如果你也想做一个类似的网站
如果你也想做一个教育类、公益类或者议题表达类网站，我自己的经验是，别急着先选框架，先想这三个问题：
- 你到底想让谁看？
- 你希望对方看完之后产生什么变化？
- 你的内容是帮助理解，还是只是在堆信息？
这三个问题想清楚以后，技术选型反而没那么难。像我这次这个站，用 React + Vite + Tailwind CSS 就已经完全够用了。真正决定成败的，不是你用了多新的技术，而是你有没有把内容组织成一个人愿意读下去的样子。
最后想说的话
做这个网站的时候，我一直在想一件事：很多人并不是反对环保，而是觉得自己做什么都没用。
可事实不是这样。
也许一个人今天少开一次车，确实改变不了全球气候；但如果很多人都愿意从一点点小事开始，事情就会不一样。少一点浪费，少一点一次性用品，多一点节能习惯，多一点对环境议题的理解，这些都不是空话。
如果你愿意，也可以点进去看看这个网站：
看完之后，不一定非要立刻做很大的事。今天开始做一件小事就够了。
环保不是某些人的任务，它和我们每天怎么生活有关。地球不会因为一句口号变好，但会因为很多真实的小行动，慢慢往好的方向走一点。
