實戰獨立專案「幾行字」：從想法到上線全過程

山頭人漢波發表於2022-05-04

想法

最開始是看到 毒雞湯 的專案（作者自己的域名已經不能訪問，當初自己為了學習部署，也搞了一份，網址：毒），覺得很有趣，簡單又有趣

後來看到 今日詩詞，這不是差不多嗎，無非是提供了 API 呼叫罷了。

這兩則的 star 數都超過了 1000+，這麼簡單的應用竟然這麼受歡迎，有點羨慕嫉妒感

因為好奇，接觸了 vite 、tailwindcss 等新技術，就想著用 vite 搭建一個 react 應用，樣式用 tailwindcss 定製，於是就想要做個簡單的應用，後來腦洞越想越大，就有了後續的規劃，直接說規劃

規劃

這個專案從想法、畫原型、寫前端、做設計、部署、搞後端、後臺一整套，從想法到實現

我最截止到寫這篇文章時的規劃是：

第一階段：提出想法、畫出原型、做好一個靜態頁面、部署到線上，即靜態獨立專案

第二階段：用 vite + react 開發此專案，並新增功能點，如可選主題色、分享卡片等功能

第三階段：資料不能裸泳，配置後端功能以及後臺編輯功能

第四階段：將其做成 Flutter 版本

第五階段：將其做成小程式版本

這五個階段筆者不會一口氣做出來，有些東西只是想法，具體實施時困難肯定比想象中多的很

收集素材

之前混知乎，也關注了幾個關於句子的問題，例如 你讀過的最有力量的一段文字是什麼？、 有哪些適合摘抄的句子 ，有些句子很喜歡，有些能受啟發，與其這樣，不如把有些高讚的句子收集起來，也做成像 毒雞湯、今日詩詞這樣應用

於是乎，每天去知乎上手動收錄素材，加上自己以前的庫存，大概收集了 100 多條資料（寫於第一階段），

畫原型

主要以簡潔為主，能不要的東西統統不要，大致畫出了這樣

原型

寫頁面

初始化頁面

npm init -y

為什麼要弄功能？因為我們要用到 tailwind，它官方支援用這種方式，等 build 的時候會 tree-shake，能減少很多不必要的程式碼

後續可看 官網安裝指南

通過 npm 安裝 Tailwind

npm install tailwindcss@latest postcss@latest autoprefixer@latest

作為 PostCSS 外掛來新增 Tailwind

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

建立 tailwindcss 配置檔案

npx tailwindcss init

這將會在您的工程根目錄建立一個最小的 tailwind.config.js 檔案。

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

新建 tailwind.css

引入 tailwind 程式碼

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

新建 index.html

在程式碼中引入 css、以及編寫 html 程式碼

這裡我不細講，因為花了不少時間，引數太多，大多數是看到符合自己原型的就拿來，然後刪刪改改

新建 data.js

之前收集了不少素材，將其匯入到 data.js 中，並且編寫以下邏輯，瀏覽器中讀過的句子儲存在本地儲存裡。句子是隨機生成，如果隨機生成的句子在本地儲存中，那就重新生成。當所有的句子都存在本地儲存中的話，就清空所有的本地儲存。

因為我的內容有些不是一句話，而是一個陣列，所有在插入內容時也需要判斷，根據不同的情況做出不同的效果

這裡遇到一些問題記錄下，太久沒有寫原生，插入 html 的 api 忘記了，innerHTML 和 appendChild 的區別忘記了

innerHTML ：可以插入一段 html，例如<p>我是 p 標籤</p>

appendChild ：在內容末插入節點，要先建立標籤，在插入

封裝成三個方法，即拉取資料，存本地儲存，插入網頁

做設計

參考了一些別人做 logo 的建議，推薦比較多的是 logo 神器，我按照提示做下來是這樣的設計

logo

我表示遺憾，從個人審美上來看，這種設計太傻瓜了，所以自己用 Photoshop 做了一個，

SEO 優化

favicon 處理

在 logo 中扣出 幾 字，然後上傳至 https://favicon.io/ 上，匯出 favicon，

設定 header 資訊

<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>

也寫不出什麼關鍵字來，先這樣，後期有靈感了再補上

部署

筆者之前寫過利用 Github Actions 部署前端 ，也成功部署過 毒雞湯，大致流程如下

  1. 申請阿里雲容器映象服務

  2. 將程式碼推到 Github 倉庫，觸發 Github Actions

    1. Github Actions 中登入 阿里雲容器映象服務，將程式碼打包成一個映象，並推到個人映象站遠端
    2. 再登入伺服器，執行拉取映象指令碼

主要邏輯是這樣，但執行起來很麻煩，還不如直接部署來著算，什麼直接部署，就是本地部署到線上，最有用的當屬 now，也就是現在的 vercel，筆者之前部署過好幾個專案，所以輕車熟路

直接部署上線：https://jihangzi-static.verce...

在阿里雲做一下對映：https://jihangzi.azhubaby.com/

第一階段到此就告一段落

相關文章