总结:实战独立项目「几行字」：从想法到上线*敏*感*词*
优采云 发布时间: 2022-12-04 22:41总结:实战独立项目「几行字」：从想法到上线*敏*感*词*
主意
一开始看到毒鸡汤项目（作者自己的域名已经不能访问了，一开始也自己创建了一个学习部署的副本，网址：poison），觉得很有趣，简单又实用有趣的
后来看到今日诗歌，就不一样了，无非就是提供一个API调用而已。
这两篇文章都超过1000+星，这么简单的应用竟然这么受欢迎，有点羡慕
出于好奇，接触到了vite、tailwindcss等新技术，于是想用vite搭建一个react应用，样式是用tailwindcss定制的，所以想做一个简单的应用。后来越想越有后续的打算。，直接说规划
规划
本项目是一整套从idea，画原型，写前端，设计，部署，后台，后台，从idea到实现
我写这篇 文章 的计划是：
第一阶段：提出想法，画原型，制作静态页面，部署上线，即静态独立项目
第二阶段：用vite+react开发这个项目，添加功能，比如可选主题色，分享卡片等功能
第三阶段：数据不能裸泳，配置后台功能和后台编辑功能
第 4 阶段：使其成为 Flutter 版本
第五阶段：做成小程序版
笔者不会一口气搞定这五个阶段。有些东西只是想法，实际实施起来肯定会比想象的困难很多。
采集材料
在混知乎之前，我也关注了几个关于句子的问题，比如，你读过的最有力量的一段文字是什么？, 有哪些适合摘录的句子, 有的句子我很喜欢, 有的可以启发, 与其这样, 还不如采集一些好评如潮的句子, 做成毒鸡汤, 今日诗词之类的应用
于是，我每天去知乎上传手册收录资料，加上我之前的盘点，大概采集了100多条数据（第一阶段写的），
绘制原型
以简单为主，能避免的都不需要。大致是这样画的
原型
写页初始化页
npm init -y
为什么要做一个函数？因为我们要用tailwind，所以官方支持这种方式，构建的时候会tree-shake，可以减少很多不必要的代码
后续可以看官网的安装指南
通过 npm 安装 Tailwind
npm install tailwindcss@latest postcss@latest autoprefixer@latest
添加 Tailwind 作为 PostCSS 插件
// postcss.config.js
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
<p>
},
}</p>
创建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 base;
@tailwind components;
@tailwind utilities;
新索引.html
在代码中引入css，编写html代码
这里就不细说了，因为花了不少时间，参数也太多了。大部分都是看到自己的原型就拿走，然后删除、删除、修改。
新数据.js
之前搜集了很多资料，导入到data.js中，写了如下逻辑。在浏览器中读取的句子保存在本地存储中。句子是随机生成的，如果随机生成的句子在本地存储，则重新生成。当所有句子都存储在本地存储中时，清除所有本地存储。
因为我的有些内容不是句子，而是数组，所以在插入内容的时候需要判断，根据不同的情况做出不同的效果
这里遇到了一些问题，记录一下。太久没写原作了。我忘记了用于插入 html 的 API。我忘记了 innerHTML 和 appendChild 之间的区别。
innerHTML：可以插入一段html，例如
我是p标签
appendChild : 在内容末尾插入节点，先创建标签，再插入
封装成三种方法，分别是拉取数据、保存本地存储、插入网页
制作设计
我参考了一些其他人关于制作logo的建议，最推荐的是logo神器。我按照提示操作，这就是设计。
标识
很遗憾，从个人审美角度来说，这个设计太蠢了，所以用Photoshop做了一个，
SEO 优化的图标处理
从logo中扣除几个字，上传到网站，导出favicon，
设置头部信息
几行字
关键词我不会写，先写吧，以后有灵感再补上
部署
笔者之前写过使用Github Actions部署前端，也成功部署过毒鸡汤。大致流程如下
申请阿里云容器镜像服务，将代码推送到Github仓库，触发Github Actions，在Github Actions中登录阿里云容器镜像服务，将代码打包成镜像，推送到个人镜像站远端，登录服务器，执行拉取镜像的脚本
主要逻辑是这样的，但是实现起来很麻烦。最好直接部署。什么是直接部署就是本地部署到线上。最有用的是now，也就是current vercel。笔者之前部署过几个项目。，好熟悉的路
直接部署上线：
在阿里云上做一些映射：
这是第一阶段的结束
技巧:SEO基础入门专业词汇大全，想转行的来看~
内部和外部链接，页面 收录 和页面收录，
链接农场与内容农场，静态页面与动态页面，
文本链接、超链接、锚文本链接
重量
首先你要明白，百度的权重并不是百度官方的数据，而是根据爱站设定的公式计算出来的。可以通过人工操作增加百度的权重。
但是，权重仍然是SEO从业者分析网站的一个数据标准。当我们审视权重的本质时，我们正在审视 网站 的质量。一般认为，权重越高的网站在收录量、快照、核心关键词排名、外部链接和alex排名方面表现更好。但是只看重量是不够的，判断网站的质量还需要判断网站的历史收录数量，从而判断网站是否有被降级。
因此，评价一款网站的好坏，不仅要看当前的数据，还要查看其历史收录的成交量，进行对比。可能有问题。
在具有正常结构的网站中，权重的顺序如下：
首页>子域首页>顶级域下目录>子域下同级目录>顶级域下内容页>子域下内容页
作者的经历：
真正提高网站权重（非作弊）的方法应该是内外兼修：
外部：高质量的外部链接支持
内部：网站内容建设，增加网站收录数量，提升网站品牌知名度，加强网站社交网站传播
关键词
在搜索引擎中，关键词是指用户在寻找相关内容时使用的信息。它是搜索应用的基础，搜索引擎优化的本质是提高页面与其对应的关键词性的相关性。
在SEO领域，关键词分为：主关键词（也叫核心词），辅助关键词（也叫副关键词），长尾关键词
在构建网站之前，我们需要确定我们的核心关键词布局在首页，辅助关键词布局在栏目页，确定长尾关键词 在内容页面上布局。
首选域
首选域是我们希望 网站 出现在搜索结果中的格式。也就是说，当我们访问网站的首页时，显示的域名是网站的首选域名。
作者的经历：
我们的首选域名尽量设置成诸如此类的形式，这与国人的阅读习惯有关。我们可以在空间后台设置首选域名。
ALT 属性
alt属性是对图片所表达内容的解释。如果将光标放在图片上，出现提示，则说明该图片添加了alt属性。
alt 属性具有以下作用：
1.帮助搜索引擎识别图片内容
2.增强内容相关性，帮助图片参与排名
3、alt属性帮助用户了解图片内容
4.当图片无法正常显示时，用户知道这里显示的是什么内容，因为alt属性是图片最好的替代品
5、如果要做图片优化，不仅要加alt标签，还要在图片下面加上关键词和链接
作者的经历：
ALT属性是搜索引擎比较重视的一个属性，所以我们在设置alt属性的时候应该尽量用简洁明了的方式来表达图片的内容，而不是堆砌关键词。也就是说，我们只需要说明图片中是什么产品或内容即可。
值得注意的是，无论用什么方式来表达图片的内容，alt永远无法替代文字内容。所以当我们在页面上遇到比较重要的内容时，我们应该尽量避免用图片来表达。
网站地图
网站地图是网站整体内容的导航，主要包括网站的主要页面
网站地图的作用：
1.路径优化的补充。有些路径关卡会很深，蜘蛛自己可能很难掌握，所以需要一张地图让蜘蛛自己掌握
2、网站的内容质量有问题，需要微调，但是搜索引擎不知道网站变了。这时候就需要更新地图，让蜘蛛重新爬行
作者的经历：
新的网站不需要网站地图，网站达到一定等级后才需要网站地图，网站地图一般都是以xml格式使用。
使用工具产生实际行动：
一、准备工具：
在线的：
软件：SitemapX、Tiger 站点地图
2、上传到根目录也可以，也可以不上传，但是一定要记住地图所在的路径。
百度指数
官方介绍是这样的：百度指数是一个基于百度海量互联网用户行为数据的数据共享平台。通过百度指数，您可以研究关键词搜索趋势，洞察网民兴趣和需求，监测舆情动向，定位受众特征。
自2013年百度指数改版以来，这个工具的功能越来越强大，已经成为我们SEO从业者分析受众需求的必备工具之一。
另外要提醒大家的是，百度指数不等于关键词的搜索量，百度指数只是一个关键词的搜索频次的累加，而搜索量是这个关键词的真实搜索量，如果想知道某个关键词的准确搜索量，需要用百度推广助手查询。
