Suck the cat with code! This paper is participating in[Cat Essay Campaign].

Hello, I’m Shanyue.

Recently I developed a website called Cloud Suck a cat and put the code in random cat repository. The following two pictures are from my website screenshots, come here to suck the cat.

The following explains the development process of this website.

Cat As a Service: How to get a random picture of a Cat

How does a freelance developer get free API services?

One such place is public-apis, a free API marketplace for programmers with a collection of thousands of free apis. It’s a repository on Github that currently has 167K stars.

You can find it here:

  1. Free of CDN
  2. Free image and video resource storage
  3. Free hosting services
  4. Free code hosting service
  5. Free weather forecast API, GeoJSON API
  6. Free… More API

You can even find an API for a cat:

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

It has only one drawback, mostly serving overseas. But it doesn’t matter. It’s enough for cloud cats.

Unsplash: The prettier cat

However, a cat on random.cat cannot specify a size and needs to find a more advanced API.

At this time, I noticed Unsplash, which is a free commercial picture service website. The pictures are very beautiful and are often quoted by design students in China. Use it, and you’ll get a prettier cat.

The most developer-friendly aspect is that it has a full-featured, well-developed Developer API and documentation.

If you need to index images by keywords, use the following API.

You specify the keyword animal,cat, and you get your own CAT API.

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

Development site: Cloud suck a cat

The goal of the site was to get a random full-screen cat every time you refresh.

So how do you do that in full screen?

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

If you use tailwindcss development, much simpler.

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

Plus some necessary information such as title, website development!

import { Helmet } from 'react-helmet'

const Home = () = > (
  <div>
    <Helmet
      title="Cloud sucks a cat."
      meta={[{ property: 'og:title', content:'Cloud suck a cat'}]} />
    <img src="https://source.unsplash.com/1600x900/?animal,cat" className="object-cover w-screen h-screen" />
  </div>
)

export default Home
Copy the code

The deployment of online

Preparations before deployment goes live!

  • Technology stack: Next-js
  • Deployment platform: Vercel
  • Warehouse: shfshanyue/random – cat
  • Domain name:cat.shanyue.tech

Remember to refer the CNAME of cat.shanyue. Tech to Vercel.

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

When ready, log in to Vercel to deploy with one click. For details, see Vercel Deployment. Available at cat.shanyue.tech

The development summary

Some of you will think that this site is fairly easy to develop, requiring only a few lines of code.

Not really. It took me three days to develop the site. API analysis and technical research for three days, development and deployment for half an hour.

  1. API analysis research, looking for a variety of aboutRandom CatThe API was finally locked for useUnsplash.This is necessary, very necessary.
  2. Technical research. Recently, next. Js has been upgraded to 12. I have checked various optimizations of SWC and Image, which is unnecessary. It’s not necessary, but as a personal project, I always use newer features every time and can’t help but look at new documentation. Even if the new feature is not needed in the project.

Finally, if you have any comments or suggestions, please leave them in the comments section.