网站开发历程:云吸一只猫

前端Q

共 1916字,需浏览 4分钟

 ·

2021-11-12 23:18

大家好,我是山月。

最近我开发了一个网站: 云吸一只猫,代码置于仓库 random-cat 中。以下两张图片都来自我的网站截图,来这里吸猫吧。

长按识别二维码查看原文

标题:云吸一只猫
     

长按识别二维码查看原文

标题:random-cat
     

以下讲解本网站的开发历程。

Cat As a Service: 如何随机拿到一只猫的图片

一个自由开发者,如何获得免费的 API 服务?

public api

public-apis 就是这样一个好地方,程序员的免费 API 集市,收藏了若千个免费的 API。它是 Github 上的一个仓库,目前已经有 167K 颗星星。

长按识别二维码查看原文

标题:public-apis
     

你可以在这里找到:

  1. 免费的 CDN

  2. 免费的图片、视频资源存储

  3. 免费的主机托管服务

  4. 免费的代码托管服务

  5. 免费的天气预报 API、GeoJSON API

  6. 免费的...更多 API

你甚至可以找到关于一只猫的 API:

$ curl https://aws.random.cat/meow
{"file":"https:\/\/purr.objects-us-east-1.dream.io\/i\/4QEZq.jpg"}

它仅仅有一个缺点,大部分为海外服务。不过不打紧,对于云养猫,已经足够了。

Unsplash: 更漂亮的一只猫

不过,random.cat 上的猫无法指定尺寸,需要另寻一个更高级的 API。

此时,我注意到了 Unsplash,它是一个可免费商用的图片服务网站,其中图片异常精美,被国内的设计同学经常引用。使用它,就可以拿到一只更漂亮的猫。

对于开发者最友好的一点是: 它有功能齐全、非常完善的 Developer API 及其文档。

如果需要根据关键词进行索引图片,可使用以下 API。

把关键字指定为 animal,cat,就得到了专属 Cat API。

<img src="https://source.unsplash.com/1600x900/?animal,cat">

开发网站: 云吸一只猫

最终来到了开发环节,这个网站的目标就是: 每次刷新随机拿到一只全屏猫。

那如何做到全屏呢?

.fullscreen {
object-fit: cover;
width: 100vw;
height: 100vh;
}

如果使用 tailwindcss 开发,更加简单。

<img src="https://source.unsplash.com/1600x900/?animal,cat" className="object-cover w-screen h-screen" />

再加上一些必要的 title 等信息,网站开发大成!

import { Helmet } from 'react-helmet'

const Home = () => (
<section>
<Helmet
title="云吸一只猫"
meta={[{ property: 'og:title', content: '云吸一只猫' }]}
/>
<img src="https://source.unsplash.com/1600x900/?animal,cat" className="object-cover w-screen h-screen" />
section>
)

export default Home

部署上线

部署上线前的准备工作!

  • 技术栈: Next.js

  • 部署平台: Vercel

  • 仓库: shfshanyue/random-cat

    长按识别二维码查看原文

    标题:shfshanyue/random-cat
         
  • 域名: cat.shanyue.tech

记住要把 cat.shanyue.tech 的 CNAME 记住指向 Vercel。

$ dig +short cat.shanyue.tech
cname.vercel-dns.com.
76.223.126.88

准备好后,登录 vercel 即可一键部署。详细步骤可参考 Vercel 部署。可见网址: https://cat.shanyue.tech

长按识别二维码查看原文

标题:Vercel 部署
     

开发总结

有的同学会认为这个网站开发的相当简单,只需要几行代码即可搞定。

其实并不是这样,「开发该网站花费了我三天的时间」。其中 API 分析调研与技术调研三天,开发部署半个小时。

  1. API 分析调研,查找了各种关于 Random Cat 的 API,最后才锁定了使用 Unsplash「这个是必要的,且非常必要」

  2. 技术调研,最近 next.js 升级到了 12,查看了 swc 及 Image 的各种优化,「这个是没必要的」。虽然没有必要,但作为个人项目,每次总是使用一些较新特性,也就忍不住看看新的文档。即便项目中并无需使用到新特性。


最后,有什么意见和建议,可以在评论区留言。



往期推荐


大厂面试过程复盘(微信/阿里/头条,附答案篇)
面试题:说说事件循环机制(满分答案来了)
专心工作只想搞钱的前端女程序员的2020



最后


  • 欢迎加我微信,拉你进技术群,长期交流学习...

  • 欢迎关注「前端Q」,认真学前端,做个专业的技术人...

点个在看支持我吧
浏览 31
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报
评论
图片
表情
推荐
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报