type
status
slug
tags
category
icon
password
summary
一、本地安装环境配置
安装nodejs, nextjs, tailwind, mdx, python
几种部署方式
在 Railway 部署(PaaS, 免费, 稳定, ✅推荐)
在 Fly.io 部署(PaaS, 免费, ✅推荐)
使用 Docker 部署(自托管, 稳定, ✅推荐)
使用 Docker Compose 部署(自托管, 稳定, ✅推荐)
使用 NodeJS 部署
安装Node.js®
Chocolatey，可选安装，是Windows上的包（软件）管理工具
To upgrade Docusaurus packages with the latest version,
node包（node package）管理有：npm、yarn、pnpm
npm
npm网站：https://www.npmjs.com/
npm常见指令 Node Package Manager
1、何时使用--force和--legacy-peer-deps？
--force 无视冲突，并强制获取远端npm库资源，即使本地有资源也会覆盖掉
--legacy-peer-deps 安装时忽略所有peerDependencies，忽视依赖冲突，采用npm版本4到版本6的样式去安装依赖，已有的依赖不会覆盖。
2、npm版本太高的问题
npm install npm -g（更新到最新版本）npm install npm@6.14.14 -g（更新到指定版本）
执行安装命令之后，npm 首先会去查找 npm 的配置信息。 其中，我们最熟悉的就是安装时候的源信息。npm 会在项目中查找是否有 .npmrc 文件，没有的话会再检查全局配置的 .npmrc ，还没有的话就会使用 npm 内置的 .npmrc 文件。
获取完配置文件之后，就会构建依赖树。首先会检查下项目中是否有 package-lock.json 文件：存在 lock 文件的话，会判断 lock 文件和 package.json 中使用的依赖版本是否一致，如果一致的话就使用 lock 中的信息，否则就会使用 package.json 中的信息；那如果没有 lock 文件的话，就会直接使用 package.json 中的信息生成依赖树。
package-lock.json是自动生成的，当我们使用 npm install 安装包后就会自动生成。但是package-lock.json并不是每次都生成，只有在没有的情况下才会自动生成。当存在并且有包的变化的时候会自动同步更新。这个文件主要是用来锁定包的版本3、npm audit 衍生命令
npm audit fix # 扫描项目漏洞把不安全的依赖项自动更新到兼容性版本
4、清除npm缓存
npm cache clean -f // npm cache clean --force
5、npm删除包 卸载依赖
npm uninstall package-name // 简写形式npm un package-name
npm uninstall -g package-name // 删除全局包。全局包是指在你的机器上全局安装的包，所以你不必在每次需要它时都重新安装它。
npm uninstall xx-abc // 删除模块，但不删除模块留在package.json中的对应信息
npm uninstall xx-abc --save //
npm5版本之后开始，--save是默认值了，可以省略不写。删除模块，同时删除模块留在package.json中dependencies下的对应信息
npm uninstall xx-abc --save-dev // 删除模块，同时删除模块留在package.json中devDependencies下的对应信息6、更新包
npm update（更新依赖项列表中出现的所有包，同时也会安装缺失的包。）
7、通过第三方模块更新依赖
npm install -g npm-check-updates //安装"npm-check-updates"模块
ncu 或 npm-check-updates //检查可更新的模块
ncu -u //只更新了package.json ，真正的依赖包还没有下载，删除项目下的 node_modules 目录和package-lock.json ，重新运行npm install 解决问题
8、npm init
自动创建package.json文件，在项目根目录下执行 npm init
如果你的项目目录下没有package.json文件，运行 npm init -y
9、分别更新 dependencies 和 devDependencies 中的依赖
npm update -S
npm update -D
npm常见指令astro
All commands are run from the root of the project, from a terminal:
Command | Action |
npm install | Installs dependencies |
npm run dev | Starts local dev server at localhost:3000 |
npm run build | Build your production site to ./dist/ |
npm run preview | Preview your build locally, before deploying |
npm run format | Format codes with Prettier |
npm run lint:eslint | Run Eslint |
npm run astro ... | Run CLI commands like astro add, astro preview |
配置cnpm
cnpm (gzip 压缩支持) 命令行工具代替npm
下载依赖
TypeScript
TypeScript是JavaScript的超集，Microsoft 开发和维护。有一些附加功能，可以为JavaScript添加静态类型。静态类型意味着变量的类型在程序中的任何时候都不能被改变。它可以防止大量的bug！研究表明，TypeScript可以发现15%的常见错误。
ESLint
ESLint是识别 ECMAScript/JavaScript 并且按照规则给出报告的代码检测工具。和 JSLint、JSHint 相似。
npx
npx是npm后来加的一个功能，是一个 Node 包执行器，该 Node 包可以是本地也可以是远程的。允许开发者在无需安装的情况下执行任意 Node 包。临时安装可执行依赖包，不用全局安装，不用担心长期的污染。
NPM 是一个 Node 包管理器，NPX 是一个 Node 包执行器。Node 的执行也可以 NPM 来完成，但是必须进行本地安装，通过定位本地路径或者配置 scripts 来能执行。NPX 则通过一个简单命令大大简化了包运行的成本，既可以运行本地包，也可以远程包，无需安装包也可以执行该包，这就有效避免了本地磁盘污染的问题，节省了本地磁盘空间。
yarn
yarn是一个由Facebook 贡献的JS包管理工具，该工具具有快速、可靠且安全的特点。a、快速：Yarn 本地缓存了每个下载过的包，所以再次使用时无需重复下载；同时利用并行下载以最大化资源利用率，因此安装速度更快；b、可靠：使用详细、简洁的锁文件格式和明确的安装算法，Yarn 能够保证在不同系统上无差异的工作。
1、将 Yarn 更新到最新版本
yarn set version stable 或者 yarn set version latest
自带的Yarn版本v1.22.19， Yarn 最新版 3.5.0
2、删除依赖项yarn remove [package]
添加依赖项yarn add [package]
更新依赖项yarn up
依赖
dependencies:项目依赖，项目实际运行需要的依赖，上线还是需要的，如（vue，jquery）devDependencies:开发依赖，只在开发时需要的依赖，实际上线不需要的，如（webpack）
关于Dependencies installing with npm失败的问题，在项目文件夹下 running
npm i to do that, this could be a bug in the create-astro cli 安装mdx
markdownx
npm install @next/mdx @mdx-js/loader @mdx-js/reactpackage.json 配置完全解读
详解package-lock.json
package.json 配置完全解读 详解package-lock.json安装Nextjs
什么是nextjs
首先，安卓和ios想要支持javascript语言的运行，就要有一个javascript的解释器。 浏览器就是一个天然的javascript解释器，不过在普通的安卓APP里，我们要用谷歌的V8引擎来代替。 而在ios系统APP里，系统默认提供了一个javascript core来充当解释器。
关于 TypeScript和JavaScript
const 用于声明一个或多个常量，声明时必须进行初始化，且初始化后值不可再修改
TypeScript 5.0，您可以通过 NuGet获取它，或者使用 npm 和下面的命令：
js、jsx区别
.jsx文件和.js文件后缀是可以互换的，语法内容完全通用，.jsx文件就是js文件。React发明了JSX，利用HTML语法来创建虚拟DOM
JavaScript/Typescript 学习指南
DOM，全称“Document Object Model（文档对象模型）”，它是由W3C组织定义的一个标准。 在前端开发时，我们往往需要在页面某个地方添加一个元素或者删除元素，这种添加元素、删除元素的操作就是通过DOM来实现的。 说白了，DOM就是一个接口，我们可以通过DOM来操作页面中各种元素，例如添加元素、删除元素、替换元素等。这下大家就懂了吧。
JavaScript provides eight different data types which are undefined, null, boolean, string, symbol, bigint, number, and object.Variable names can be made up of numbers, letters, and
$
or _, but may not contain spaces or start with a number.Typescript
The
// @ts-checkcomment ensures the config file is properly type-checked when running npx tsc.安装Python
使用Python安装的选项pip是默认勾选的
下载Python：https://www.python.org/downloads/ ，Python Pip的使用：https://realpython.com/what-is-pip/#using-pip-in-a-python-virtual-environment ， mkdocs-material：https://pypi.org/project/mkdocs-material/
一般python自带的pip版本比较低。如果您在 Windows 上安装 Python，请务必选中将 Python 添加到您的 PATH 的复选框。
输入：Python，进入到Python交互式环境中, 使用的命令为: python -v
准备工作 常用库 技术栈 Tech Stack
ㅤ | Tool | Link | 备注 |
框架 | Framework | ㅤ | |
ORM | ORM | ㅤ | |
数据库 | Database | ㅤ | |
身份认证 | Authentication | 内置支持许多流行的登录服务 | |
ㅤ | Deployment | ㅤ | |
样式 | Styling | ㅤ | |
评论 | Comment | ㅤ | |
ㅤ | Newsletter | ㅤ | |
图标 | Favicon | ㅤ | |
图标 | ㅤ | ㅤ | |
内容 | Content | ㅤ | |
ㅤ | ㅤ | 處理和加載 mdx 內容 | |
ㅤ | kbar | 一个完全可扩展的命令+K 界面 | |
ㅤ | lyket | 匿名点赞和评级按钮 | |
devDependencies | Husky | ㅤ | 通过管理Git Hooks帮助检查代码规范 |
devDependencies | PostCSS | 使用js插件转换样式 | |
devDependencies | Autoprefixer | 基于PostCSS插件，解析CSS并使用Can I Use中的值向CSS规则添加前缀 | |
dependencies | next-translate | ㅤ | |
dependencies | next-i18next | ㅤ | |
dependencies | gray-matter | 【年久失修】Apr 24, 2021
分析 markdown 中的 front matter | |
dependencies | next-themes | Perfect Next.js dark mode | |
dependencies | github-slugger | 【年久失修】Oct 28, 2022像 GitHub 为 markdown 标题做的那样生成一个 slug | |
dependencies | smoothscroll-polyfill | 【年久失修】May 21, 2019 | |
ㅤ | classnames | 一个简单的javascript实用进程，用于有条件地将classNames连接在一起 |
二、安装主题、本地启动代码
安装python主题mkdocs-material
安装n主题：pip install mkdocs-material
- Windows 下查看pip和pip3版本，显示Pip3版本：pip3 –version
- 显示Pip版本：pip –version 或 pip show pip 或 pip -V
- 更新pip：python.exe -m pip install –upgrade pip
- 升级Pip主题mkdocs-material：pip install –upgrade –force-reinstall mkdocs-material
- 显示Pip主题mkdocs-material版本：pip show mkdocs-material
- 查看已经安装的第三方库：pip list
- CMD里打开VS Code：code .
- VS Code里面用Terminal输入：mkdocs new .
- （注意：mkdocs是 固定命令）
- VS Code里面安装的YAML插件（来自redhat.com）
- VS Code设置添加代码 %APPDATA%.json
- 本地启动网站，Terminal输入：mkdocs serve
- mkdocs.yml添加主题样式Material for MkDocs：
Material for MkDocs provides its own schema.json for mkdocs.yml. 如果你的编辑器支持YAML schema认证, it’s definitely recommended to set it up: mkdocs.yml
1、VS Code安装YAML插件（来自redhat.com） 2、docs文件夹下新建schema.json文件，参照 https://squidfunk.github.io/mkdocs-material/schema.json 内容 3、docs文件夹下schema文件夹，放入所有schemea文件 4、在项目目录的.vscode文件夹下新建settings.json文件，添加内容
- 完成编辑后，从Markdown文件构建静态站点：mkdocs build
克隆主题
1、Clone
2、更改目录
cd example3、安裝 packages ，安装所有依赖
yarn 或 yarn install 重建所有依赖
npm rebuild 4、新增一個
.env.local，根據 .env.example 輸入一些環境變量，這樣就可以正常運行了。5、了解目录结构
安装
异步函数是一种特殊类型的函数，它可以在执行过程中暂停并允许其他代码同时执行，直到异步函数完成其任务并返回结果。通常使用异步函数来处理需要等待I/O操作（如网络请求或文件读取）的情况，以避免阻塞主线程并提高应用程序的性能和响应能力。在JavaScript中，异步函数通常使用async/await关键字来定义和调用。
Promise对象是JavaScript中的一种特殊对象，用于异步编程。它表示一个尚未完成但最终会完成的操作，并提供了一种处理异步操作结果的方式。Promise对象可以有三种状态：pending（进行中）、fulfilled（已成功）和rejected（已失败）。在异步操作完成后，Promise对象将变为其中的一种状态，并且可以使用.then()方法来获取操作结果或捕获错误。
要使用Next.js创建一个静态博客并支持Markdown，您可以按照以下步骤操作：
- 创建一个新的Next.js项目。您可以使用
create-next-app命令来创建一个新项目。
- 安装所需的依赖项。您需要安装
gray-matter和remark来解析Markdown文件并将其转换为HTML格式。
- 在项目中创建一个名为
posts的文件夹，并在其中添加Markdown文件。每个Markdown文件应该包含帖子的内容以及元数据（例如标题，日期等）。
- 使用
getStaticProps函数从Markdown文件中提取帖子的元数据和内容。您可以使用fs模块读取Markdown文件，并使用gray-matter解析元数据。
- 创建一个React组件来呈现帖子的内容。您可以使用
remark将Markdown转换为HTML，并将结果作为React组件的props传递。
- 创建一个动态路由来呈现每篇帖子。您可以使用文件名作为路径参数。
- 创建一个首页，列出所有帖子的标题和摘要。您可以使用
getStaticProps函数获取所有帖子的元数据，并将其传递给React组件进行呈现。
- 部署您的应用程序。您可以使用Vercel等平台来轻松部署Next.js应用程序。
这只是一个基本框架，您可以根据自己的需要进行修改和扩展。
三、修改本地代码
NPM报错解决
问题npm ERR! code ERESOLVE
回答
问题 react is not a function
回答
四、网站优化
网站优化
WebP 和 AVIF 等图像格式通常提供比 PNG 或 JPEG 更好的压缩，这意味着更快的下载和更少的数据消耗
多语言
在计算中，国际化和本地化（美式）或国际化和本地化（英式英语），通常缩写为i18n和L10n，是使计算机软件适应目标语言环境的不同语言、区域特性和技术要求的手段。
五、提交本地代码到GitHub
删掉本地node_modules文件夹
- Author:ABCPEAK
- URL:https://abcpeak.eu.org/article/node
- Copyright:All articles in this blog, except for special statements, adopt BY-NC-SA agreement. Please indicate the source!
