comiCSS 简介

几周前，我上线了一个名为comiCSS的小网站。它是一个用 HTML 和 CSS 编写的网络漫画集。

我喜欢 CSS，也喜欢用 CSS 绘图，这已经不是什么秘密了（我觉得它超级放松）。我并不认为自己是 CSS 专家（或许只能算是“中等偏上”？），但我对它的了解足以让我在 CSS 领域有所突破。

在这篇文章中，我将讨论 comiCSS 是如何诞生的，以及这个原本注定只是我演示中的一个旁注的东西是如何最终拥有自己的网站并慢慢发展壮大的，这在一定程度上要感谢Temani Afif的鼓励（他也建议了这个域名）。

网络漫画

我不擅长纸上作画，但我喜欢。我甚至在德克萨斯大学奥斯汀分校的官方报纸《德克萨斯日报》当过短短一年的漫画家。

我对 CSS 也充满热情。我喜欢这门语言，也欣赏它的潜力，而很多其他开发者却不认同这种感觉（因为“它不是编程语言”）。但无论它是否是一种编程语言，CSS 都是一门优美而强大的语言。 

因此，我将这两件事结合成一个爱好只是时间问题：画一个关于 CSS 的漫画（主要）......并用 HTML 和 CSS 对其进行编码。

我最初的尝试是将 SVG 和 CSS 结合起来，使用基本的黑白字符，提到一个 CSS 属性，然后我用它来表达一个不一定有趣的观点：

但我觉得这像是作弊。如果我要用 CSS 创作一部关于 CSS 的漫画，那就必须完全用 CSS 来写。使用 SVG 可以（极大地）利用不同的技术，而 CSS 有很多属性几乎专门用于绘图和设计。所以我会转向完全用 CSS（当然也包括 HTML）。不过，我仍然喜欢原版漫画，它简洁却又很酷（至少对我来说），并且希望很快能有一个纯 CSS 版本。

在画完最初的几幅漫画后，我改画漫画了。漫画更直接，更直接，不像“盒子”（字面意思）那样。而且，它们与 CSS 没有严格的关联，而是用 CSS 画的，这违背了创作初衷。所以最终我又回到了最初的主题，但这并不意味着我不打算时不时地发布漫画。

坚持 CSS 主题有几个风险：1）找到有关该语言的有趣之处并不总是那么容易。2）许多人不会理解漫画中的笑话或要点。3）有时，找到在笑话本身中使用笑话的属性/值的方法很复杂。

但这本身就是一种挑战。漫画不一定非要搞笑。它们可以寓教于乐，展现风采，或者引发思考。所以，如果我的漫画能做到这一点，我会很高兴。

与一些人的看法相反，我的画是手工制作的（而不是用绘图应用程序然后导出到CSS），这使得它更像是一个手工过程。（有时也挺费劲的。）

如果你好奇我是如何编写漫画和动画的，我经常在我的 YouTube 频道上传延时摄影（或现场讲解）来记录这个过程。所以，也请关注并订阅我吧！

技术栈和网站

我希望一切简洁明了，没有庞大的框架或复杂的网站——回归“旧互联网”的本质，回归它的天真和简单。我也不想亲自设计和编写所有代码。

因此，我选择使用Almond.CSS，这是我创建的 CSS 样式集合，可以直接应用于 HTML 标签。无需类名、ID 和 BEM，只需纯 HTML 和 CSS。当然，我稍后会添加更多样式，但拥有这样的初始设置——即使很简单——也会非常有用。

至于后端技术，我决定什么都不要。真的。我有一个主机，用来托管我的网站和其他业余项目，里面有 PHP、Perl、MySQL 数据库等等。但这只是我的小项目，核心应该很简单：HTML、CSS，或许（只是或许）再加点 JavaScript……这个想法很棒，但后来却带来了一些问题。

通过将其设置为静态网站，我可以免费将其托管在不同的服务上，而无需为网站增加外部宣传。我曾经用 Digital Ocean 做过类似的小项目，效果非常好。但由于项目非常简单，而且源代码已经在 GitHub 上，因此使用 GitHub Pages 托管它也是合理的。只需在仓库设置中激活它即可。

关于网站的架构，我查阅了许多网络漫画网站：xkcd、SMBC、Buttersafe、Dinosaur Comics ……，想看看它们的共同点。它们都很简单，并且遵循类似的结构（某种程度上）：

• 顶部的横幅和菜单（均带有商店/Patreon 的链接）
• 包含最新漫画的登陆页面
• 导航至上一/下一/第一/最后一幅漫画
• 跳转到随机漫画的按钮
• 指向图像本身和帖子的链接（当它不在着陆页面上时）
• 作者其他作品的链接
• RSS 源链接
• 存档、博客和关于页面

所以我就是这么做的。问题也由此开始。选择静态页面后，我没有太多模板或路由选项。这需要我复制粘贴一堆代码。此外，导航也需要一些 JS，尽管我最初想避免使用它。

最终的结果可能很简单（但易于访问且响应迅速，这一点并非所有我从中汲取灵感的网络漫画网站都能做到），但我的初衷并非追求极致。我挺喜欢它现在简洁干净的风格。我想更专注于内容，而不是大陆。不过，我可能会转向一个后端平台，这样可以轻松地在数据库中跟踪所有漫画，并使用后端语言自动生成许多内容。

CSS 有钱吗？

ComiCSS 也是一个“实验”。我想看看一个老式的静态网站能否带来一些收入、收支平衡，甚至盈利。这些分别是我的短期、中期和长期目标。

考虑到网站的总成本为每年 12 美元，门槛相对较低。这笔费用相当于comicss.art域名的费用。其余部分都是“免费的”（不包括我们花了一个下午的开发时间）：

• 许可证：无（不需要，因为一切都是原始的 HTML、CSS 和 JS。）
• 版本控制：GitHub。
• 网络托管：GitHub Pages 免费。
• SSL：GitHub Pages 免费提供。

为了实现这些经济目标，我选择了三件事：

• 添加网络货币化。
• 将该网站添加到勇敢的创造者列表中。
• 创建 Patreon 个人资料。

所有这些方法都是“非侵入式”的。网站的访问者不会看到烦人的广告或弹窗。但如果他们愿意，可以打赏或为 Patreon 捐款。我添加最后一条是因为大多数其他网络漫画网站都使用它，但说实话，我不太喜欢它。我更多地把它看作是一种激励（它促使我提前几天发送更新，这样我就能提前很久准备好内容了。）

令我惊讶的是，在该项目成立的第一周，就有人通过网络货币化的方式为该项目做出了贡献：

我用CSS创建了一个Red Bubble商店，里面有图片。我最终可能会把这些漫画添加到Red Bubble，并将其作为额外的收入来源。但这只是一个间接的尝试，短期内不会列入计划。

不过，我再说一遍，我不指望从这个网站获得任何经济利益。我开发它只是为了好玩，也是为了证明它是可行的。这就是我需要的全部回报（也可能是唯一的回报，虽然能收支平衡就好了😂）。

未来

该网站才刚刚起步。过去几周我每周都会发布新的漫画（也会更新一些老漫画来充实内容），我计划继续保持这个节奏。

我的目标是每周五发布一篇新漫画，然后每周一在推特上分享一篇旧漫画。但我可能会把时间安排改成每周一发布一篇新漫画，每周四分享一篇旧漫画（为了“怀旧星期四”）。
我有一些可以持续两三个月的创作想法，希望这段时间足够我构思新想法并画更多作品。

正如上面提到的，我觉得用 CSS 画图很放松，所以即使只是一些小小的搞笑漫画，comiCSS 里的收藏也会一点一点地增加……另外，我很想重新构思最初的概念。虽然不是为了搞笑，但是为了更简洁（就像这个网站一样），并试图引发人们的思考。

在 comiCSS 上见！