Actual independent project "a few lines of words": the whole process from idea to launch

idea

At first, I saw the poisonous chicken soup project (the author's own domain name can no longer be accessed. At the beginning, I also made a copy in order to learn and deploy, URL: Poison ), I thought it was very interesting, simple and interesting

Later, when I saw Poetry Today , isn't it about the same? It just provides API calls.

The number of stars in these two articles has exceeded 1000+, such a simple application is so popular, a little jealous

Because of curiosity, I came into contact with new technologies such as vite and tailwindcss, so I wanted to use vite to build a react application, and the style was customized with tailwindcss, so I wanted to make a simple application. , directly say planning

planning

This project is a complete set of ideas, prototypes, front-end writing, design, deployment, back-end, and back-end, from idea to implementation

My plan as of writing this article is:

The first stage: propose an idea, draw a prototype, make a static page, deploy it online, that is, a static independent project

The second stage: develop this project with vite + react, and add function points, such as optional theme color, sharing card and other functions

The third stage: data cannot be naked, configure back-end functions and back-end editing functions

Stage 4: Make it a Flutter version

The fifth stage: make it into a small program version

The author will not make these five stages in one go, some things are just ideas, and the actual implementation is definitely more difficult than imagined.

collect material

Before, I also paid attention to a few questions about sentences, such as what is the most powerful piece of text you have read? , What sentences are suitable for excerpting , some sentences are liked, some can be inspired, instead of this, it is better to collect some highly praised sentences and make them into applications like poison chicken soup and poetry of the day

Therefore, I go to Zhihu to manually collect materials every day, plus my previous inventory, I have collected more than 100 pieces of data (written in the first stage),

draw prototype

It is mainly based on simplicity, and all the things that can not be avoided are generally drawn like this

write page

Initialize the page

 npm init -y

Why make a function? Because we need to use tailwind, it officially supports this method, and it will tree-shake when building, which can reduce a lot of unnecessary code

Follow-up can see the official website installation guide

Install Tailwind via npm

 npm install tailwindcss@latest postcss@latest autoprefixer@latest

Add Tailwind as a PostCSS plugin

 // postcss.config.js
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

Create tailwindcss configuration file

 npx tailwindcss init

This will create a minimal tailwind.config.js file in your project root directory.

 // tailwind.config.js
module.exports = {
  purge: [],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {},
  plugins: [],
}

New tailwind.css

Introduce tailwind code

 @tailwind base;
@tailwind components;
@tailwind utilities;

New index.html

Introduce css into the code, and write html code

I won't go into details here, because it took a lot of time and there are too many parameters. Most of them are used when they see what fits their prototype, and then they delete, modify, and modify them.

New data.js

I collected a lot of material before, imported it into data.js , and wrote the following logic, the sentences read in the browser are saved in the local storage. Sentences are randomly generated, and if the randomly generated sentence is in local storage, it is regenerated. When all sentences are stored in local storage, clear all local storage.

Because some of my content is not a sentence, but an array, all need to judge when inserting content, and make different effects according to different situations

I have encountered some problems here and recorded it. I haven’t written native for a long time. I forgot the api to insert html, and I forgot the difference between innerHTML and appendChild.

innerHTML : You can insert a piece of html, such as <p>I am a p tag</p>

appendChild : To insert a node at the end of the content, you must first create a label, and then insert

Encapsulated into three methods, namely pulling data, saving local storage, inserting web pages

Making designs

Referring to some other people's suggestions for making logos, the most recommended is the logo artifact . I followed the prompts and made this design.

I regret that, from a personal aesthetic point of view, this design is too stupid, so I made one with Photoshop,

SEO optimization

favicon processing

几 in the logo, then upload it to https://favicon.io/ , export favicon,

Set header information

 <head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>几行字</title>
  <meta
    name="description"
    content="几行字给你温暖、几行字给你激励、几行字给你灵感"
  />
  <meta name="keywords" content="几行字，文案，几行世界" />
  <meta http-equiv="Cache-Control" content="no-siteapp" />
  <meta property="og:title" content="几行字" />
  <meta property="og:image" content="./favicon.ico" />
  <meta property="og:site_name" content="几行字" />
  <meta
    property="og:description"
    content="几行字，几行字给你温暖、几行字给你激励、几行字给你灵感"
  />
  <link rel="alternate icon" type="image/x-icon" href="favicon.ico" />
  <link rel="stylesheet" href="style.css" />
</head>

I can't write any keywords. Let's do this first, and then I will add it later when I have inspiration.

deploy

The author has written before using Github Actions to deploy the front end , and has successfully deployed poisonous chicken soup . The general process is as follows

1. Apply for Alibaba Cloud Container Image Service

2. Push code to Github repository, trigger Github Actions

   1. Log in to Alibaba Cloud Container Image Service in Github Actions, package the code into an image, and push it to the remote end of the personal image site
   2. Log in to the server again and execute the pull mirror script

The main logic is like this, but it is very troublesome to execute. It is better to deploy directly. What is direct deployment is to deploy locally to online. The most useful one is now, which is now vercel . The author has deployed several projects before. , so familiar with the road

Direct deployment online: https://jihangzi-static.vercel.app/

Do a mapping on Alibaba Cloud: https://jihangzi.azhubaby.com/

This is the end of the first stage