├── .eslintignore ├── .eslintrc.cjs ├── .gitignore ├── .prettierrc.js ├── README.md ├── astro.config.mjs ├── docs └── 独立开发赚钱吗.md ├── next-and-nest.md ├── old ├── README.md ├── advance │ ├── next.md │ ├── remix.md │ └── shadcn:ui.md ├── basic │ ├── astro.md │ ├── mdx.md │ ├── node.md │ ├── react.md │ └── tailwind.md └── scenes │ ├── blog.md │ ├── dev-a-saas.md │ ├── docs.md │ ├── order.md │ ├── pay.md │ ├── service.md │ └── website.md ├── package.json ├── public └── favicon.svg ├── src ├── assets │ ├── houston.webp │ └── scenes │ │ ├── domain-config.jpg │ │ ├── starlight-content-add-fe.jpg │ │ ├── starlight-content.jpg │ │ ├── starlight.jpg │ │ ├── vercel-cname.jpg │ │ ├── vercel-deploy.jpg │ │ ├── vercel-import.jpg │ │ └── vercel-login.jpg ├── components │ └── Comment.jsx ├── content │ ├── config.ts │ └── docs │ │ ├── guides │ │ └── example.md │ │ ├── index.mdx │ │ ├── react.mdx │ │ ├── reference │ │ └── example.md │ │ └── scenes │ │ ├── blog.md │ │ ├── docs.mdx │ │ └── website.mdx └── env.d.ts └── tsconfig.json /.eslintignore: -------------------------------------------------------------------------------- 1 | *.json 2 | -------------------------------------------------------------------------------- /.eslintrc.cjs: -------------------------------------------------------------------------------- 1 | module.exports= 2 | { 3 | // ... 4 | extends: [ 5 | // ... 6 | "plugin:astro/recommended", 7 | ], 8 | parserOptions: { 9 | ecmaFeatures: { 10 | jsx: true, 11 | }, 12 | ecmaVersion: 2020, 13 | sourceType: "module", 14 | }, 15 | overrides: [ 16 | { 17 | // Define the configuration for `.astro` file. 18 | files: ["*.astro"], 19 | // Allows Astro components to be parsed. 20 | parser: "astro-eslint-parser", 21 | // Parse the script in `.astro` as TypeScript by adding the following configuration. 22 | // It's the setting you need when using TypeScript. 23 | parserOptions: { 24 | parser: "@typescript-eslint/parser", 25 | extraFileExtensions: [".astro"], 26 | }, 27 | rules: { 28 | // override/add rules settings here, such as: 29 | // "astro/no-set-html-directive": "error" 30 | }, 31 | }, 32 | // ... 33 | ], 34 | } 35 | 36 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # build output 2 | dist/ 3 | # generated types 4 | .astro/ 5 | 6 | # dependencies 7 | node_modules/ 8 | 9 | # logs 10 | npm-debug.log* 11 | yarn-debug.log* 12 | yarn-error.log* 13 | pnpm-debug.log* 14 | 15 | 16 | # environment variables 17 | .env 18 | .env.production 19 | 20 | # macOS-specific files 21 | .DS_Store 22 | package-lock.json 23 | -------------------------------------------------------------------------------- /.prettierrc.js: -------------------------------------------------------------------------------- 1 | export default { 2 | plugins: ['prettier-plugin-astro'], 3 | semi:false, 4 | overrides: [ 5 | { 6 | files: '*.astro', 7 | options: { 8 | parser: 'astro', 9 | }, 10 | }, 11 | ], 12 | }; 13 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # 独立开发者的最佳技术栈 2 | 3 | > 是想通过独立开发赚钱吗？可以看看辛宝这篇文章[独立开发赚钱吗](./docs/独立开发赚钱吗.md) 4 | 5 | 独立开发，核心是产品换钱。所以投在技术上，roi并不高。quick第一，dirty与否不重要 6 | 7 | 所以，在选技术栈的时候，关注难度小，交付快。 8 | 9 | - 简单 10 | - 快 11 | - 兼容性好 12 | - 最好也能ai辅助 13 | 14 | ## 你是什么主义？ 15 | 16 | 实用主义 vs 专业主义 17 | 18 | - 专业主义：你可用Next + Nest，你可用ts，你可以关注测试覆盖率，如何做可信软件，原因很简单，1、公司给你发工资，2、自己凭兴趣。 19 | - 实用主义：很多独立开发者自己是老板，非常关注时间ROI，能花钱外包的就外包，能用技术快速搞定的就快速搞定，更专注实现的成就感。 20 | 21 | ## 技术栈 22 | 23 | 前置条件，你多少要了解一些编程技能，无论那种。 24 | 25 | 基础5大件：node+astro+react+tailwind+mdx 26 | 27 | 后端node里已经有了。koa\express就够了，vercel上发布。 28 | 当然，vercel funcion、next也行 29 | 如果在补一个，shadcn/ui可以算一个。如果了为了更方便，我更好愿意推荐用nextui && nextui.pro，其中nextui.pro虽然是付费的组件库，像通用、ai、市场、电商等四部分支持的非常好。可有效降低难度，提升开发速度。x上找[sudongyuer](https://twitter.com/sudongyuer)有折扣。 30 | 31 | 至此。8大技术栈 32 | 33 | - 1、node（基础） 34 | - 2、astro（基础） 35 | - 3、react（基础）补[React自学路径](https://indie.npmstudy.com/react)。 36 | - 4、tailwind（基础） 37 | - 5、mdx（基础） 38 | - 6、next（进阶） 39 | - 7、remix（进阶） 40 | - 8、nextui && nextui.pro（进阶） 41 | 42 | ## 使用场景 43 | 44 | - 快速建站 45 | - [用Starlight写文档](https://indie.npmstudy.com/scenes/docs/) 46 | - 建博客 47 | - 加订单、支付 48 | - 集成服务 49 | - 开发完整saas 50 | - 海外支付 51 | 52 | 分析 53 | 54 | - 门户、博客、文档，astro无敌，性能好，开发简单，如果想ssr，也可以有很多node adapter 55 | - 简单api，express、koa、vercel funcion、next都可以 56 | - astro可以quick，也可以dirty。我个人比较习惯react，组件生态足够。实在需要，加个shadcn/ui 57 | - 我不喜欢next，但next有一些生态是不错的，拿过来改改用，还是很爽的 58 | - 关于css，tailwind写响应式，真是太爽了，不是那么关注可读性，那真是太快了 59 | - 用tailwind 和 shadcn/ui 和 nextui && nextui.pro 的好处之一是可以搭配https://v0.dev 遇到想不出来的样式，可以直接问，拷贝一下，依赖一装，成了 60 | - 以上技术和各种现有服务都非常容易集成，比如clark、paddle、supabase、stripe，这些现有集成的，都放在独立开发者的服务。集成服务是要花不少精力的一部分。 61 | 62 | ## 新手的话应该从哪里开始这个项目 63 | 64 | 你需要有 65 | 66 | - 域名 67 | - Github账号 68 | - 使用Github账号关联Vercel 69 | 70 | 然后，用astro先搞快速建站、写文档、建博客。 71 | 72 | 搞定建站和发布，里面写页面就需要react、tailwind了，循序见见 73 | 74 | 熟悉基础技术 75 | 76 | - 1、node（基础） 77 | - 2、astro（基础） 78 | - 3、react（基础） 79 | - 4、tailwind（基础） 80 | - 5、mdx（基础） 81 | 82 | 然后，根据其他使用场景，熟悉进阶技术栈。 83 | 84 | - 6、next（进阶） 85 | - 7、remix（进阶） 86 | - 8、nextui && nextui.pro（进阶） 87 | 88 | ## 还愿清单 89 | 90 | - 写一个个人站点 91 | - 写一个项目或教程文档 92 | - 建一个博客 93 | - 写一个组件 94 | - 开发一个micro saas 95 | - 用一次ai写10行以上代码 96 | 97 | ## 其他 98 | 99 | - 你这个技术栈不考虑APP？答：水太深，只推荐native 100 | - 有人说next就不需要astro。我的回复是未必，做静态站点，next远没有astro爽。别说astro兼容vue、alphine等，就是性能，collection也吊打next。 101 | - 2gua过两天会说用go也挺好的：go只能替换node部分，都是function，无所谓的。会啥用啥。剩下那几个都依赖node，娃哈哈 102 | 103 | 独立开发者要求快，能复用就复用，将精力放到产品设计上才是正经事。 104 | 105 | 以上。欢迎讨论 106 | -------------------------------------------------------------------------------- /astro.config.mjs: -------------------------------------------------------------------------------- 1 | import { defineConfig } from "astro/config"; 2 | import starlight from "@astrojs/starlight"; 3 | 4 | import react from "@astrojs/react"; 5 | 6 | // https://astro.build/config 7 | export default defineConfig({ 8 | integrations: [ 9 | starlight({ 10 | title: "Indie dev", 11 | social: { 12 | github: "https://github.com/withastro/starlight", 13 | }, 14 | sidebar: [ 15 | { label: "React自学路径", link: "/react" }, 16 | { 17 | label: "场景", 18 | items: [ 19 | // Each item here is one entry in the navigation menu. 20 | { 21 | label: "写文档", 22 | link: "/scenes/docs/", 23 | }, 24 | { 25 | label: "开发站点", 26 | link: "/scenes/website/", 27 | }, 28 | { 29 | label: "建博客", 30 | link: "/scenes/blog/", 31 | }, 32 | { 33 | label: "加订单、支付", 34 | link: "/scenes/order/", 35 | }, 36 | { 37 | label: "集成服务", 38 | link: "/scenes/service/", 39 | }, 40 | { 41 | label: "开发完整saas", 42 | link: "/scenes/saas/", 43 | }, 44 | { 45 | label: "海外支付", 46 | link: "/scenes/stripe/", 47 | }, 48 | ], 49 | }, 50 | { 51 | label: "学习步骤", 52 | items: [ 53 | // Each item here is one entry in the navigation menu. 54 | { 55 | label: "1、建站", 56 | link: "/guides/site/", 57 | }, 58 | { 59 | label: "2、学习写组件和页面", 60 | link: "/guides/component/", 61 | }, 62 | { 63 | label: "3、学习写文档", 64 | link: "/guides/doc/", 65 | }, 66 | { 67 | label: "4、学习写博客", 68 | link: "/guides/blog/", 69 | }, 70 | { 71 | label: "5、学习其他集成场景", 72 | link: "/guides/intergration/", 73 | }, 74 | ], 75 | }, 76 | { 77 | label: "专项学习", 78 | items: [ 79 | // Each item here is one entry in the navigation menu. 80 | { 81 | label: "1、Node.js 写API", 82 | link: "/guides/node/", 83 | }, 84 | { 85 | label: "2、Astro 建站", 86 | link: "/guides/astro/", 87 | }, 88 | { 89 | label: "3、React 写组件和页面", 90 | link: "/guides/react/", 91 | }, 92 | { 93 | label: "4、Tailwind CSS", 94 | link: "/guides/tailwind/", 95 | }, 96 | { 97 | label: "5、Mdx 写文档", 98 | link: "/guides/mdx/", 99 | }, 100 | { 101 | label: "6、Next.js 全栈", 102 | link: "/guides/example/", 103 | }, 104 | { 105 | label: "7、Remix.js SSR", 106 | link: "/guides/example/", 107 | }, 108 | { 109 | label: "8、Shadcn/ui 开箱即用组件库", 110 | link: "/guides/example/", 111 | }, 112 | ], 113 | }, 114 | { 115 | label: "Reference", 116 | autogenerate: { 117 | directory: "reference", 118 | }, 119 | }, 120 | ], 121 | }), 122 | react(), 123 | ], 124 | }); -------------------------------------------------------------------------------- /docs/独立开发赚钱吗.md: -------------------------------------------------------------------------------- 1 | 【杂谈】做独立开发者赚钱吗？ 2 | ============== 3 | 4 | 起因 5 | -- 6 | 7 | 最近看一些论坛上，独立开发越来越火爆🔥。 8 | 9 | 例如 10 | 11 | 1. `xxx`网站`SEO`做的好，靠网站广告月入`3000`dollar 12 | 2. 开发了`xxx`软件，上架 `Apple Store`，睡后收入可以不用上班等～ 13 | 14 | > 本人立马就心动了😂，毕竟最近做远程工作还是蛮轻松的，如果再做一份独立开发能够再赚一笔大的，何乐而不为呢？🤤。 15 | > 16 | > 不过鉴于之前很多时候尝试都失败过的经验，于是本人在`V2EX`平台上发布了相关帖子，调研了下大致的成功率。其实成功率不是很高，大概也就`1/5`，惊讶的发现其实跟创业的九死一生的概率差不多是一致的。 17 | 18 | 19 | 20 | 独立开发赚钱吗？ 21 | -------- 22 | 23 | 独立开发赚钱吗？我们很多时候都会问出这个问题。然而，我仔细思索一下，这个问题我觉得不够严谨。因为做独立开发的人中，有人赚钱，有人不赚钱。无法给出一个确定的答复，到底是赚钱还是不赚钱，因人而异。🐶 24 | 25 | 我觉得`独立开发赚钱吗？`这个问题跟 `买股票赚钱吗？`是一类的问题，有着很多很多因素的影响，我们分别看下`ChatGPT4`对于这两个问题的回答。 26 | 27 | > 独立开发赚钱吗 `GPT4`回答 28 | 29 | 30 | 31 | > 买股票赚钱吗 `GPT4`回答 32 | 33 | 34 | 35 | 社区调研 36 | ---- 37 | 38 | ### 独立开发没有赚到钱 39 | 40 | 1. 来自`Maxxxx`网友 41 | 42 | > 有个 app 做了三年了，花了很多时间和心血，还没有赚到钱 43 | 44 | 2. 来自`kaiserxxxx`网友 45 | 46 | > 我就是一个反例，差不多九年从业经验，将近五年的独立开发，开发了很多插件/小应用/网站，但大多数项目都是因为因个人能力/精力难以维系全局然后“胎死腹中”，现在正在努力找工作（而且由于长期没有去入职公司，感觉与职场已经脱规了 47 | 48 | 3. 来自`前端之虎`🐯哥 49 | 50 | > 不赚钱，我半年才赚了1万 51 | 52 | ### 独立开发赚到钱 53 | 54 | 1. 来自`qianjixxxx`网友 55 | 56 | > 有些人嘲讽，有些人玩梗，有些人真的在做独立开发。 57 | > 我挺后悔自己没有早点尝试做独立开发，在职场多浪费了几年，那时候没有这个意识，更不知独立开发这条路是否得偿所愿。 58 | > 今年是独立开发的第五年了，收入稳定，数据每年增长大概 45%，从我个人的经验来说，我觉得，很多人还是视野太窄了，既不承认别人的成功，又不肯付出时间和精力去尝试。 59 | > 独立开发跟创业没区别，一个人公司嘛，该试错就试错，该放弃就放弃，没有什么大不了的，但是无论成与败，总归脚 60 | > 踏实地做事就好。 61 | > 当然，那种以#独立开发 作为卖点却没有实际产出的，大概率真是割韭菜的，要注意甄别的。 62 | > 独立开发没多少方法论让你去套用，每个人的能力和境遇不一样，学不来，所以看别人成功的例子，更多是激励和启发：他这样做也能成功、原来只做 iOS 端也可以、原来他可以这么去运营产品...... 63 | > 身边认识很多独立开发者成功的也不少，你能想象一个人可以把一个 App 做到 50w/月 的收入？我朋友圈有 3 个，而且都是很正规的 App 。 64 | > 可以去 X 上关注那些独立开发者，或者关注 #buildinpublic 这个 Tag ，看看他们是怎么做的。 65 | > 我觉得真想做独立开发，先放下成见，一边向别人学习，一边自己动手去做，临渊羡鱼，不如退而结网。 66 | 67 | ### 如何看待发布独立赚钱的帖子 68 | 69 | 1. 来自`BeiChuanxxx`网友 70 | 71 | > 失败者是不会写自传的。所以成功了的人才喜欢发帖，这里面有心里作用，也有炫耀的意思。 72 | 73 | 2. 来自`duluoxxx`网友 74 | 75 | > 成功是少数的，大部分人都接不到私活。 76 | 77 | 3. 来自`Mxxx`网友 78 | 79 | > 幸存者偏差... 短视频比独立开发更火爆...更赚钱. 80 | 81 | ### 为何独立开发🔥了呢？ 82 | 83 | 1. 来自`pixcai`网友 84 | 85 | > 不是独立开发火爆，是失业找不到工作的人变多了，有正经工作谁搞独立开发？很多人不是不清晰赚不到钱，只是失业后想找点事做。能赚钱最好，没赚到钱的话起码试过了，总比闲着啥也不干好。 86 | 87 | 2. 来自`wdkwxxx`网友 88 | 89 | > 是创业，但是创业九死一生，不创业是十成概率慢性死亡，而且看这行情死亡的速度还在加快。有多少人是顺境开始搞的呀，不都是被大环境逼得自谋出路 90 | 91 | 3. 来自`szxxx`网友 92 | 93 | > 独立开发近几年火，和 ios 就业环境息息相关，国内独立开发起码有近一半的 ios 开发，appstore 付费率应该是所有平台最高的吧 94 | 95 | 我的思考 96 | ---- 97 | 98 | ### 如何看待独立开发 99 | 100 | 如果是真的抱着从独立开发赚钱的心态，那么一定要正视独立开发，它应该被划入创业的领域内。要以创业者的心态的去做。🤔 101 | ⚠️ 技术，营销，获客等等这些都要考虑，然而技术在其中的比重其实不是很大。 102 | 103 | > 用大圣的话说，就是建议每个做独立开发的最好尝试去摆下摊，这其实是锻炼程营销和获客的能力。 104 | 105 | 然而很多做独立开发由于是技术出身，所以在独立开发中，技术占比都极为高，反而在营销，获客上几乎没有付出匹配的努力，导致做出的产品无人问津，收不到正反馈于是只好放弃。总而言之，就是最好要以创业者的心态去做独立开发～ 106 | 107 | 108 | 109 | 独立开发应该抱有什么心态 110 | ------------ 111 | 112 | 这里摘自`Viking`的`Twitter` 113 | 114 | * 独立开发第一要务永远都不是钱，而是自由，99%的独立开发赚钱都没有上班多，但是每天不用去上班，睡到自然醒简直太爽了，试想上海夏天40度通勤，冬天家里10度起床都是非常痛苦的事情。而且你可以随时暂停自己的工作，今天不舒服就休息一天，有新游戏出来就可以玩几天。（博得之门3今天发售了😅） 115 | * 第二是技术追求，也许这个听起来特别傻逼，但是作为一个程序员，可以任意使用自己想用的技术，重构自己的项目，全干工程师啥都学点，不用维护屎山代码，最终作出一个成品上线，还能收获用户，甚至赚钱，那种成就感不是上班能够比拟的。所以现在我有点不喜欢 Pieter Levels，他一致鼓吹新技术无用论，嘲讽新的技术，所有项目都是PHP + jQuery 一把梭哈，不是我作为独立开发的目的。 116 | * 有很多独立开发者在晒自己的收入或者心路历程用来营销自己，我觉得这很好，我也是这么做的，因为独立开发本来就是一人公司，这就是打广告的另外一种形式，有的人在社交媒体只为闲聊，有的人为了扩大影响力，各取所需，并且这广告还能让人学到一些有趣的知识，帮助别人，利人利己。 117 | * 如果要延长自己独立开发的生涯，不要永远狭隘的给自己定位一个角色，只写代码，啥有意思都可以做做，不如叫自由职业，设法扩大自己的收入来源，做产品，卖课，拍视频，接广告都可以试试，赚钱嘛，不寒碜。 118 | * 最后，人生永远都不是 one way street，干不了就回去上班呗，在于探索和体验。 -------------------------------------------------------------------------------- /next-and-nest.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | # 后端nestjs也可以加？ 5 | 6 | nest复杂度太高了。ioc + ts，还不算db啥的，就搞死一大堆人了 7 | 8 | - 国外 next+nest 太多了 9 | - 国内创业电商这边是NextJs+NestJs 10 | - NextUI这边后端用的Supabase 11 | 12 | 13 | 14 | 15 | https://github.com/Innei/rc-modal 这是超简单的react组件，可以学学 16 | rc-modal.pages.dev 17 | https://craft.do/写的文档 -------------------------------------------------------------------------------- /old/README.md: -------------------------------------------------------------------------------- 1 | # 独立开发者的最佳技术栈 2 | 3 | ## 技术栈 4 | 5 | 基础5大件：node+astro+react+tailwind+mdx 6 | 7 | 后端node里已经有了。koa\express就够了，vercel上发布。 8 | 当然，vercel funcion、next也行 9 | 如果在补一个，shadcn/ui可以算一个。 10 | 11 | 至此。8大技术栈 12 | 13 | - 1、node（基础） 14 | - 2、astro（基础） 15 | - 3、react（基础） 16 | - 4、tailwind（基础） 17 | - 5、mdx（基础） 18 | - 6、next（进阶） 19 | - 7、remix（进阶） 20 | - 8、shadcn/ui（进阶） 21 | 22 | ## 使用场景 23 | 24 | - [快速建站](./scenes/website.md) 25 | - 写文档 26 | - 建博客 27 | - 加订单、支付 28 | - 集成服务 29 | - 开发完整saas 30 | - 海外支付 31 | 32 | 分析 33 | 34 | - 门户、博客、文档，astro无敌，性能好，开发简单，如果想ssr，也可以有很多node adapter 35 | - 简单api，express、koa、vercel funcion、next都可以 36 | - astro可以quick，也可以dirty。我个人比较习惯react，组件生态足够。实在需要，加个shadcn/ui 37 | - 我不喜欢next，但next有一些生态是不错的，拿过来改改用，还是很爽的 38 | - 关于css，tailwind写响应式，真是太爽了，不是那么关注可读性，那真是太快了 39 | - 用tailwind 和 shadcn/ui 的好处之一是可以搭配https://v0.dev 遇到想不出来的样式，可以直接问，拷贝一下，依赖一装，成了 40 | - 以上技术和各种现有服务都非常容易集成，比如clark、paddle、supabase、stripe，这些现有集成的，都放在独立开发者的服务。集成服务是要花不少精力的一部分。 41 | 42 | ## 还愿清单 43 | 44 | - 写一个个人站点 45 | - 写一个项目或教程文档 46 | - 建一个博客 47 | - 写一个组件 48 | - 开发一个micro saas 49 | - 用一次ai写10行以上代码 50 | 51 | ## 其他 52 | 53 | - 限于篇幅，remix我没写，我很喜欢这个。 54 | - 有人说next就不需要astro。我的回复是未必，做静态站点，next远没有astro爽。别说astro兼容vue、alphine等，就是性能，collection也吊打next。 55 | - 2gua过两天会说用go也挺好的：go只能替换node部分，都是function，无所谓的。会啥用啥。剩下那几个都依赖node，娃哈哈 56 | 57 | 独立开发者要求快，能复用就复用，将精力放到产品设计上才是正经事。 58 | 59 | 以上。欢迎讨论 60 | -------------------------------------------------------------------------------- /old/advance/next.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/npmstudy/indie-dev-with-ai/a73aec47b0cf7758b09d66b94cfc118c78f25934/old/advance/next.md -------------------------------------------------------------------------------- /old/advance/remix.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/npmstudy/indie-dev-with-ai/a73aec47b0cf7758b09d66b94cfc118c78f25934/old/advance/remix.md -------------------------------------------------------------------------------- /old/advance/shadcn:ui.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/npmstudy/indie-dev-with-ai/a73aec47b0cf7758b09d66b94cfc118c78f25934/old/advance/shadcn:ui.md -------------------------------------------------------------------------------- /old/basic/astro.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/npmstudy/indie-dev-with-ai/a73aec47b0cf7758b09d66b94cfc118c78f25934/old/basic/astro.md -------------------------------------------------------------------------------- /old/basic/mdx.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/npmstudy/indie-dev-with-ai/a73aec47b0cf7758b09d66b94cfc118c78f25934/old/basic/mdx.md -------------------------------------------------------------------------------- /old/basic/node.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/npmstudy/indie-dev-with-ai/a73aec47b0cf7758b09d66b94cfc118c78f25934/old/basic/node.md -------------------------------------------------------------------------------- /old/basic/react.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/npmstudy/indie-dev-with-ai/a73aec47b0cf7758b09d66b94cfc118c78f25934/old/basic/react.md -------------------------------------------------------------------------------- /old/basic/tailwind.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/npmstudy/indie-dev-with-ai/a73aec47b0cf7758b09d66b94cfc118c78f25934/old/basic/tailwind.md -------------------------------------------------------------------------------- /old/scenes/blog.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/npmstudy/indie-dev-with-ai/a73aec47b0cf7758b09d66b94cfc118c78f25934/old/scenes/blog.md -------------------------------------------------------------------------------- /old/scenes/dev-a-saas.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/npmstudy/indie-dev-with-ai/a73aec47b0cf7758b09d66b94cfc118c78f25934/old/scenes/dev-a-saas.md -------------------------------------------------------------------------------- /old/scenes/docs.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | 写文档 -------------------------------------------------------------------------------- /old/scenes/order.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/npmstudy/indie-dev-with-ai/a73aec47b0cf7758b09d66b94cfc118c78f25934/old/scenes/order.md -------------------------------------------------------------------------------- /old/scenes/pay.md: -------------------------------------------------------------------------------- 1 | 2 | stripe 可以个人收款，身份信息填护照，有港卡就能开通 3 | 4 | paddle支持支付宝 -------------------------------------------------------------------------------- /old/scenes/service.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | ## Supabase 6 | 7 | - NextUI这边后端用的Supabase 8 | 9 | 我的观点， 10 | Supabase前期用很好的。等量起来的时候，自建server端，也来得及。 -------------------------------------------------------------------------------- /old/scenes/website.md: -------------------------------------------------------------------------------- 1 | 2 | # 快速建站 3 | 4 | 5 | ## 使用Astro创建 6 | 7 | ## 发布 8 | 9 | ## 绑定域名 10 | 11 | ## 新增页面 12 | 13 | ## 新增组件 -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "site", 3 | "type": "module", 4 | "version": "0.0.1", 5 | "scripts": { 6 | "dev": "astro dev", 7 | "start": "astro dev", 8 | "build": "astro build", 9 | "preview": "astro preview", 10 | "astro": "astro", 11 | "lint": "eslint 'src/**/*.{js,jsx,ts,tsx,astro}'" 12 | }, 13 | "dependencies": { 14 | "@astrojs/react": "^3.1.0", 15 | "@astrojs/starlight": "^0.21.1", 16 | "@giscus/react": "^3.0.0", 17 | "@types/react": "^18.2.66", 18 | "@types/react-dom": "^18.2.22", 19 | "astro": "^4.3.5", 20 | "react": "^18.2.0", 21 | "react-dom": "^18.2.0", 22 | "sharp": "^0.32.5" 23 | }, 24 | "devDependencies": { 25 | "eslint": "^8.57.0", 26 | "eslint-plugin-astro": "^0.31.4", 27 | "prettier": "^3.2.5", 28 | "prettier-plugin-astro": "^0.13.0" 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /public/favicon.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/assets/houston.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/npmstudy/indie-dev-with-ai/a73aec47b0cf7758b09d66b94cfc118c78f25934/src/assets/houston.webp -------------------------------------------------------------------------------- /src/assets/scenes/domain-config.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/npmstudy/indie-dev-with-ai/a73aec47b0cf7758b09d66b94cfc118c78f25934/src/assets/scenes/domain-config.jpg -------------------------------------------------------------------------------- /src/assets/scenes/starlight-content-add-fe.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/npmstudy/indie-dev-with-ai/a73aec47b0cf7758b09d66b94cfc118c78f25934/src/assets/scenes/starlight-content-add-fe.jpg -------------------------------------------------------------------------------- /src/assets/scenes/starlight-content.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/npmstudy/indie-dev-with-ai/a73aec47b0cf7758b09d66b94cfc118c78f25934/src/assets/scenes/starlight-content.jpg -------------------------------------------------------------------------------- /src/assets/scenes/starlight.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/npmstudy/indie-dev-with-ai/a73aec47b0cf7758b09d66b94cfc118c78f25934/src/assets/scenes/starlight.jpg -------------------------------------------------------------------------------- /src/assets/scenes/vercel-cname.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/npmstudy/indie-dev-with-ai/a73aec47b0cf7758b09d66b94cfc118c78f25934/src/assets/scenes/vercel-cname.jpg -------------------------------------------------------------------------------- /src/assets/scenes/vercel-deploy.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/npmstudy/indie-dev-with-ai/a73aec47b0cf7758b09d66b94cfc118c78f25934/src/assets/scenes/vercel-deploy.jpg -------------------------------------------------------------------------------- /src/assets/scenes/vercel-import.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/npmstudy/indie-dev-with-ai/a73aec47b0cf7758b09d66b94cfc118c78f25934/src/assets/scenes/vercel-import.jpg -------------------------------------------------------------------------------- /src/assets/scenes/vercel-login.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/npmstudy/indie-dev-with-ai/a73aec47b0cf7758b09d66b94cfc118c78f25934/src/assets/scenes/vercel-login.jpg -------------------------------------------------------------------------------- /src/components/Comment.jsx: -------------------------------------------------------------------------------- 1 | // @ts-nocheck 2 | import * as React from "react" 3 | import Giscus from "@giscus/react" 4 | 5 | const id = "inject-comments" 6 | 7 | function getSavedTheme() { 8 | return window.localStorage.getItem("starlight-theme") 9 | } 10 | 11 | function getSystemTheme() { 12 | return window.matchMedia("(prefers-color-scheme: dark)").matches 13 | ? "dark" 14 | : "light" 15 | } 16 | 17 | const Comments = () => { 18 | const [mounted, setMounted] = React.useState(false) 19 | const [theme, setTheme] = React.useState(getSavedTheme() || getSystemTheme()) 20 | 21 | React.useEffect(() => { 22 | // 监听主题变化 23 | const observer = new MutationObserver(() => { 24 | setTheme(getSavedTheme()) 25 | }) 26 | observer.observe(document.documentElement, { 27 | attributes: true, 28 | attributeFilter: ["data-theme"], 29 | }) 30 | 31 | // 取消监听 32 | return () => { 33 | observer.disconnect() 34 | } 35 | }, []) 36 | 37 | React.useEffect(() => { 38 | setMounted(true) 39 | }, []) 40 | 41 | return ( 42 |
43 | {mounted ? ( 44 | 58 | ) : null} 59 |
60 | ) 61 | } 62 | 63 | export default Comments 64 | -------------------------------------------------------------------------------- /src/content/config.ts: -------------------------------------------------------------------------------- 1 | import { defineCollection } from 'astro:content'; 2 | import { docsSchema } from '@astrojs/starlight/schema'; 3 | 4 | export const collections = { 5 | docs: defineCollection({ schema: docsSchema() }), 6 | }; 7 | -------------------------------------------------------------------------------- /src/content/docs/guides/example.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Example Guide 3 | description: A guide in my new Starlight docs site. 4 | --- 5 | 6 | Guides lead a user through a specific task they want to accomplish, often with a sequence of steps. 7 | Writing a good guide requires thinking about what your users are trying to do. 8 | 9 | ## Further reading 10 | 11 | - Read [about how-to guides](https://diataxis.fr/how-to-guides/) in the Diátaxis framework 12 | -------------------------------------------------------------------------------- /src/content/docs/index.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: 欢迎来到indie-dev 3 | description: Get started building your docs site with Starlight. 4 | template: splash 5 | hero: 6 | tagline: 独立开发者实用技能学习! 7 | image: 8 | file: ../../assets/houston.webp 9 | actions: 10 | - text: Example Guide 11 | link: /guides/example/ 12 | icon: right-arrow 13 | variant: primary 14 | - text: Read the Starlight docs 15 | link: https://starlight.astro.build 16 | icon: external 17 | --- 18 | 19 | import { Card, CardGrid } from '@astrojs/starlight/components'; 20 | 21 | ## Next steps 22 | 23 | 24 | 25 | Edit `src/content/docs/index.mdx` to see this page change. 26 | 27 | 28 | Add Markdown or MDX files to `src/content/docs` to create new pages. 29 | 30 | 31 | Edit your `sidebar` and other config in `astro.config.mjs`. 32 | 33 | 34 | Learn more in [the Starlight Docs](https://starlight.astro.build/). 35 | 36 | 37 | -------------------------------------------------------------------------------- /src/content/docs/react.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: 这是一篇react自学路径指南 3 | description: A guide in react roadmap for self-study. 4 | --- 5 | 6 | 7 | ## 原则 8 | 9 | > 原则1：一次只学一样不会的，不要多个不会的混在一起。 10 | 11 | - 先学js，后学ts 12 | - 先学会react，再考虑其他库，什么状态库、UI组件库，都不要急于使用 13 | - 先学csr，后学ssr 14 | 15 | > 原则2：先学基础，然后学大而全的空间 16 | 17 | 先学cra，然后next.js，会更好。直接next.js弯路会走的更多，容易有挫败感。 18 | 19 | > 原则3：先别碰构建工具，无论Webpack还是Vite 20 | 21 | 按照长尾理论，我们经常会被周边的东西所吸引，继而脱离既定目标。 22 | 23 | ## 学习方式1：传统方式 24 | 25 | 入门就玩原始的（js）。对于html、js、css有经验最好，没有的话也问题不大。 26 | 27 | - 从[cra](https://create-react-app.dev/)开始，学习官方的脚手架 28 | - 熟悉React页面写法 29 | - 学习React组件写法 30 | - 学习css，用tailwind，不要搞什么sass、less、postcss。麻烦的响应式，兼容大小屏幕。 31 | - 学习React hooks（从useState、useEffect开始，后面的多多益善，比如useMemo等） 32 | - 学习ahooks，能少写很多代码，里面也有很多最佳实践，比如限流，防抖，请求相关的都非常棒 33 | - 还有表单管理，react hook form 34 | - 还可以学习一点像dayjs、zod这样的小的常用模块 35 | 36 | 至此你基本上React没有什么难点了。当然你也可以换一下 umijs 玩玩。 37 | 38 | 进阶，学习原理，比较好的，专业的做法。 39 | 40 | - 从createElement开始，学习一些基础api，顺便学一下dom diff原理 41 | - 学习Fragment、Suspense用法 42 | - 学习Concurrent Mode、Scheduler原理等 43 | - 学习ui库，比如antd、shadcn/ui、nextui等 44 | - 学习状态库，比如zustand、jotai、Valtio等，我不是很喜欢redux这种 45 | - 学习react-admin、TanStack等开箱即用的 46 | - 微前端，兼容老技术栈 47 | - 学习ssr服务器端渲染，理解hydrate，最新的rsc也可以了解一点 48 | - 学习Typescript向专业前端看齐 49 | 50 | 51 | 高阶：大而全的框架 52 | 53 | - Next.js 54 | - Remix 55 | 56 | 然后，去gihhub上找练手项目，积累自己的技术栈，比如我的一个朋友的选型 57 | 58 | - UI 组件库：https://daisyui.com/ 59 | - Dashboard UI ：The React library to build dashboards fast 60 | - 状态管理库：https://zustand-demo.pmnd.rs/ 61 | - 异步管理：TanStack Query, Solid Query, Svelte Query, Vue Query 62 | - 数据模型：TypeScript-first schema validation with static type inference 63 | 64 | ## 学习方式2：在实践中学习 65 | 66 | 最佳的学习方法，可能还是直接learn by doing，如果能直接业务中落地去做 效率翻倍。 67 | 68 | 如果没法直接在业务中落地，可以按照以下方法。 69 | 70 | 1. 参考本repo，学习建站，博客，文档。 71 | 1. 学习 React + Tailwind 组件开发，满足自己的诉求。然后和上面差不多，react hooks、ahook基本上就够用了。 72 | 1. 然后参照方式1后面的进阶和高阶，就可以都差不多了。 73 | 74 | ## 书籍推荐 75 | 76 | - 入门《React状态管理与同构实战》，作者侯策，颜海镜，每个点讲都不深，但比较容易理解。 77 | - 原理《React 设计原理》，作者卡颂。相对较新，适合原理 78 | 79 | ## 学会React能干嘛？ 80 | 81 | - 应届生，top30有机会进阿里，其他公司不确定。 82 | - 像阿里、字节、去哪儿都是React为主，社招想进大厂，需要本科学历和年龄，自学是很难的。 83 | - 做区块链，比如wagmi这种是需要，生态也不错。 84 | - 结合electron、tauri打包成.exe或.dmg也是不错的。比如语雀的客户端。 85 | -------------------------------------------------------------------------------- /src/content/docs/reference/example.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Example Reference 3 | description: A reference page in my new Starlight docs site. 4 | --- 5 | 6 | Reference pages are ideal for outlining how things work in terse and clear terms. 7 | Less concerned with telling a story or addressing a specific use case, they should give a comprehensive outline of what you're documenting. 8 | 9 | ## Further reading 10 | 11 | - Read [about reference](https://diataxis.fr/reference/) in the Diátaxis framework 12 | -------------------------------------------------------------------------------- /src/content/docs/scenes/blog.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 这是一篇react自学路径指南 3 | description: A guide in react roadmap for self-study. 4 | --- 5 | 6 | 1、参考liruifengv.com，使用astro建博客。 7 | 2、找一个nextjs模版，搭建博客。 8 | 9 | 10 | ## 需求背景 11 | 12 | - 希望尽可能构建，部署，维护，编辑发布文章简单。 13 | - 支持SEO，网站统计分析，newsletter之类的营销工具，无代码情况下的可扩展性高。 14 | - 支持tag分类；全文检索。 15 | - 手机，平板， web都要看的舒服。 16 | 17 | ## 方案 18 | 部署平台： vercel： 19 | 20 | 其实github pages, cloudflare等等也可以，方案太多了，选vercel是因为他上面有很多支持一键部署的blog独立站模版，太舒服了。另外我是nextjs 爱好者，有情怀加成。 21 | 22 | blog程序： Tailwind Nextjs Starter Blog ： 23 | 24 | 1）开源项目，基于nextjs，对于我来说是熟悉的技术栈，遇到问题方便调试。 25 | 26 | 2）可扩展性好：与主流的Newsletter，Analytics，全文检索框架，rss，自定义block扩展都集成得非常好。 27 | 28 | 3）支持mdx格式Hugo's standards编写博客，这个也是配套生态丰富。 29 | 30 | 4）官方对vercel集成，一键部署，非常丝滑。 31 | 32 | 5） 集成contentLayer。 有很多主题可以选择。 33 | 34 | 6） yarn dev即可本地调试，预览。 35 | 36 | ## qita 37 | 38 | 39 | 40 | - Domain：CloudFlare： 这个最便宜，直接买了10年。而且本来就是做cdn出生，流量安全之类的生态体系有保障。 41 | - md编辑器： Craft， 免费，本地，体验非常好，我感觉不输语雀，飞书之类的。 42 | - newsletter： ConvertKit 暂时选这个，就他对新用户免费试用的流程最舒服。其他几个例如buttondown之类的免费版本连个api key都不给。 43 | - 评论系统：GISCUS 开源免费。 44 | - 网站流量分析： umami 开源免费，简单，支持自定义埋点。 -------------------------------------------------------------------------------- /src/content/docs/scenes/docs.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: 写文档 3 | description: A guide in my new Starlight docs site. 4 | --- 5 | 6 | import { Card, CardGrid } from '@astrojs/starlight/components'; 7 | 8 | import Comments from '../../../components/Comment.jsx'; 9 | 10 | 11 | 12 | 最简单写文档的工具 13 | 14 | 15 | 最方便的和ci/cd集成的部署平台 16 | 17 | 18 | 19 | 20 | 21 | ## 使用Starlight创建项目 22 | 23 | Starlight是Astro的文档模版。 24 | 25 | ```js 26 | $ npm create astro@latest -- --template starlight 27 | Need to install the following packages: 28 | create-astro@4.7.4 29 | Ok to proceed? (y) 30 | 31 | astro Launch sequence initiated. 32 | 33 | dir Where should we create your new project? 34 | ./site 35 | ◼ tmpl Using starlight as project template 36 | 37 | ts Do you plan to write TypeScript? 38 | No 39 | ◼ No worries! TypeScript is supported in Astro by default, 40 | but you are free to continue writing JavaScript instead. 41 | 42 | deps Install dependencies? (recommended) 43 | ● Yes ○ No 44 | git Initialize a new git repository? 45 | ● Yes ○ No 46 | 47 | ██████ Project initializing... 48 | ▶ Template copying... 49 | □ Dependencies 50 | □ Git 51 | 52 | next Liftoff confirmed. Explore your project! 53 | 54 | Enter your project directory using cd ./site 55 | Run npm run dev to start the dev server. CTRL+C to stop. 56 | Add frameworks like react or tailwind using astro add. 57 | 58 | Stuck? Join us at https://astro.build/chat 59 | 60 | ╭─────╮ Houston: 61 | │ ◠ ◡ ◠ Good luck out there, astronaut! 🚀 62 | ╰─────╯ 63 | ``` 64 | 65 | 启动服务。如果上面你选了Install dependencies=yes，就不用手动执行npm install，如果=no，你需要手动执行npm install。 66 | 67 | ``` 68 | $ npm run dev 69 | 70 | > site@0.0.1 dev 71 | > astro dev 72 | 73 | 17:04:32 [vite] Port 4321 is in use, trying another one... 74 | 75 | astro v4.5.4 ready in 1183 ms 76 | 77 | ┃ Local http://localhost:4322/ 78 | ┃ Network use --host to expose 79 | 80 | 17:04:32 watching for file changes... 81 | 17:04:40 [200] / 384ms 82 | ``` 83 | 84 | ![](../../../assets/scenes/starlight.jpg) 85 | 86 | 87 | ## 理解Starlight 88 | 89 | ### 文件即路由 90 | 91 | - 比如index.mdx对应的路由就是/ 92 | - 比如user.mdx对应的路由就是/user 93 | - 比如/docs/user.mdx对应的路由就是/docs/user 94 | 95 | 96 | ![](../../../assets/scenes/starlight-content.jpg) 97 | 98 | 99 | ### 支持的文件类型 100 | 101 | 参考Astro[官方文档](https://docs.astro.build/en/basics/astro-pages/)。 102 | 103 | ```js 104 | Astro supports the following file types in the src/pages/ directory: 105 | 106 | - .astro 107 | - .md 108 | - .mdx (with the MDX Integration installed) 109 | - .html 110 | - .js/.ts (as endpoints) 111 | ``` 112 | 113 | 我一般喜欢 114 | 115 | - 写文档推荐用mdx，原因是它可以和react、vue组件集成更方便。 116 | - 写页面推荐用.js/.ts，原因是它react写的比较多。 117 | 118 | 119 | ## Vercel发布 120 | 121 | Vercel 是一个云服务平台，支持静态网站和动态网站的应用部署、预览和上线。Vercel 自身内置 CI（持续集成）/CD(持续发布)，只要你将 Github 项目与 Vercel 关联，在 GitHub 项目进行代码推送，PR合并自动部署的目的，且你不需要考虑服务器部署问题。 122 | 123 | Vercel 优势如下。 124 | 125 | - 个人版永久免费，每个月 100G 带宽（别人访问你的项目所耗费的流量），个人项目部署完全够用，需要注意的是团队模式收费，所以要协作你只能付费。等你的项目需要付费了，你可能已经非常成功了。 126 | - 内置 CI/CD，只需要将项目导入 Vercel ，一句命令自动部署。 127 | - 因为内置构建流程，支持代码推送、PR 自动触发构建，不同分支唯一地址，方便测试。 128 | 支持本地、测试、生产三种环境部署，仅仅是命令区别，上手成本极低。 129 | - 丰富的集成能力，项目部署自动监控，端到端自动化测试等等，当然这些并并属于 Vercel 自身的能力，但它可以为你提供集成入口，让这些成为你自动部署中自动进行的一步，比如构建生产后自动完成性能指标输出，自动化测试，以及后续项目监控等等。 130 | 131 | 132 | ### 登陆 133 | 134 | 我推荐用Github账户。 135 | 136 | ![](../../../assets/scenes/vercel-login.jpg) 137 | 138 | 139 | ### 导入Github项目 140 | 141 | ![](../../../assets/scenes/vercel-import.jpg) 142 | 143 | 再提交Github代码，就会自动触发Vercel的部署，非常方便。 144 | 145 | ![](../../../assets/scenes/vercel-deploy.jpg) 146 | 147 | 一般我们会有test、pre、prod等环境，后面专门讲解。 148 | 149 | ### 绑定域名 150 | 151 | 1、域名，用a类接入 152 | 153 | 154 | ![](../../../assets/scenes/domain-config.jpg) 155 | 156 | 2、子域名，用cname接入 157 | 158 | ![](../../../assets/scenes/vercel-cname.jpg) 159 | 160 | 托管到vercel，所以vercel会自动检测 161 | 162 | ## 新增页面 163 | 164 | 和astro一样。 165 | 166 | 比如我在src/content/docs下新增空的fe.mdx，这时候编译会报错。 167 | 168 | ``` 169 | 13:42:39 [ERROR] [InvalidContentEntryFrontmatterError] docs → fe.mdx frontmatter does not match collection schema. 170 | title: Required 171 | Hint: 172 | See https://docs.astro.build/en/guides/content-collections/ for more information on content schemas. 173 | Error reference: 174 | https://docs.astro.build/en/reference/errors/invalid-content-entry-frontmatter-error/ 175 | Stack trace: 176 | at getEntryData (file:///Users/npmstudy/workspace/npmstudy/indie-dev-with-ai/node_modules/astro/dist/content/utils.js:86:26) 177 | [...] See full stack trace in the browser, or rerun with --verbose. 178 | 179 | ``` 180 | 181 | 原因是title不存在，但它又是必须的。astro这个Hint提示还不错。 182 | 183 | 此时在fe.mdx里增加下面一段文本即可。 184 | 185 | ``` 186 | --- 187 | title: 这是一篇react自学路径指南 188 | description: A guide in react roadmap for self-study. 189 | --- 190 | ``` 191 | 192 | 注意 193 | 194 | - 放到最上面，空行都不能有。 195 | 196 | 更多配置项参考 https://starlight.astro.build/reference/frontmatter/。如果大家熟悉hugo等都是类似的，参考 https://gohugo.io/content-management/front-matter/。 197 | 198 | 199 | ## 使用内置组件 200 | 201 | 使用内置组件，文档 https://starlight.astro.build/guides/components/。内置组件都是平时写文档中我们最长使用的。 202 | 203 | 内置组件名单 204 | 205 | - Tabs 206 | - Cards 207 | - Link Cards 208 | - Asides 209 | - Code 210 | - File Tree 211 | - Steps 212 | - Icon 213 | 214 | 举个例子，本文档，最上面的代码即内置组件调用。 215 | 216 | ```js 217 | import { Card, CardGrid } from '@astrojs/starlight/components'; 218 | 219 | import Comments from '../../../components/Comment.jsx'; 220 | 221 | 222 | 223 | 最简单写文档的工具 224 | 225 | 226 | 最方便的和ci/cd集成的部署平台 227 | 228 | 229 | ``` 230 | 231 | 232 | ## 新增React组件 233 | 234 | 235 | 增加react支持，需要先安装react依赖的，此步骤必选。 236 | 237 | ```should 238 | $ npx astro add react 239 | ``` 240 | 241 | 官方文档里的组件用法，代码如下，它只是演示了如何应用.astro组件的用法。 242 | 243 | ```js 244 | --- 245 | title: Welcome to my docs 246 | --- 247 | 248 | import SomeComponent from '../../components/SomeComponent.astro'; 249 | import AnotherComponent from '../../components/AnotherComponent.astro'; 250 | 251 | 252 | 253 | 254 | Components can also contain **nested content**. 255 | 256 | ``` 257 | 258 | .astro组件和react组件，其实没啥本质区别，唯一需要注意的就是组件加载声明周期控制，即使用client指令。 259 | 260 | - `client:load` 它的意思Load and hydrate the component JavaScript immediately on page load. 261 | - `client:only={string}` 回跳过HTML server-rendering, 并且只在client上渲染。 262 | 263 | 使用React组件，这里以评论为例 264 | 265 | ``` 266 | 267 | ``` 268 | 269 | 在src/components下新建Comment.jsx，这个评论服务，采用的是giscus，即基于github的discussions来实现的，数据存在github上，对于公开和面向开发的评论是比较友好的。 270 | 271 | ```js 272 | // @ts-nocheck 273 | import * as React from "react" 274 | import Giscus from "@giscus/react" 275 | 276 | const id = "inject-comments" 277 | 278 | function getSavedTheme() { 279 | return window.localStorage.getItem("starlight-theme") 280 | } 281 | 282 | function getSystemTheme() { 283 | return window.matchMedia("(prefers-color-scheme: dark)").matches 284 | ? "dark" 285 | : "light" 286 | } 287 | 288 | const Comments = () => { 289 | const [mounted, setMounted] = React.useState(false) 290 | const [theme, setTheme] = React.useState(getSavedTheme() || getSystemTheme()) 291 | 292 | React.useEffect(() => { 293 | // 监听主题变化 294 | const observer = new MutationObserver(() => { 295 | setTheme(getSavedTheme()) 296 | }) 297 | observer.observe(document.documentElement, { 298 | attributes: true, 299 | attributeFilter: ["data-theme"], 300 | }) 301 | 302 | // 取消监听 303 | return () => { 304 | observer.disconnect() 305 | } 306 | }, []) 307 | 308 | React.useEffect(() => { 309 | setMounted(true) 310 | }, []) 311 | 312 | return ( 313 |
314 | {mounted ? ( 315 | 329 | ) : null} 330 |
331 | ) 332 | } 333 | 334 | export default Comments 335 | ``` 336 | 至于上面的配置，参考https://giscus.app/zh-CN。 337 | 338 | - 先设置github repo，增加discussions 339 | - 然后到https://giscus.app/zh-CN上，输入repo url，就会自动生成上面需要的参数 340 | - 更新到组件中即可 341 | 342 | 343 | 这下面是演示的评论组件，也是可以真是用的。 344 | 345 | 346 | -------------------------------------------------------------------------------- /src/content/docs/scenes/website.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: 快速建站 3 | description: A guide in my new Starlight docs site. 4 | --- 5 | 6 | ## 使用Astro创建 7 | 8 | ```js 9 | $ npm create astro@latest -- --template starlight 10 | Need to install the following packages: 11 | create-astro@4.7.4 12 | Ok to proceed? (y) 13 | 14 | astro Launch sequence initiated. 15 | 16 | dir Where should we create your new project? 17 | ./site 18 | ◼ tmpl Using starlight as project template 19 | 20 | ts Do you plan to write TypeScript? 21 | No 22 | ◼ No worries! TypeScript is supported in Astro by default, 23 | but you are free to continue writing JavaScript instead. 24 | 25 | deps Install dependencies? (recommended) 26 | ● Yes ○ No 27 | git Initialize a new git repository? 28 | ● Yes ○ No 29 | 30 | ██████ Project initializing... 31 | ▶ Template copying... 32 | □ Dependencies 33 | □ Git 34 | 35 | next Liftoff confirmed. Explore your project! 36 | 37 | Enter your project directory using cd ./site 38 | Run npm run dev to start the dev server. CTRL+C to stop. 39 | Add frameworks like react or tailwind using astro add. 40 | 41 | Stuck? Join us at https://astro.build/chat 42 | 43 | ╭─────╮ Houston: 44 | │ ◠ ◡ ◠ Good luck out there, astronaut! 🚀 45 | ╰─────╯ 46 | ``` 47 | 48 | 启动服务 49 | 50 | ``` 51 | $ npm run dev 52 | 53 | > site@0.0.1 dev 54 | > astro dev 55 | 56 | 17:04:32 [vite] Port 4321 is in use, trying another one... 57 | 58 | astro v4.5.4 ready in 1183 ms 59 | 60 | ┃ Local http://localhost:4322/ 61 | ┃ Network use --host to expose 62 | 63 | 17:04:32 watching for file changes... 64 | 17:04:40 [200] / 384ms 65 | ``` 66 | 67 | ![](../../../assets/scenes/starlight.jpg) 68 | 69 | 70 | ## 发布 71 | 72 | ## 绑定域名 73 | 74 | ## 增加分析 75 | 76 | 77 | ```sh 78 | $ npm i -S @vercel/analytics 79 | ``` 80 | 81 | 82 | ## 新增页面 83 | 84 | ## 新增组件 85 | 86 | ## ai出码 -------------------------------------------------------------------------------- /src/env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | /// 3 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "astro/tsconfigs/strict", 3 | "compilerOptions": { 4 | "jsx": "react-jsx", 5 | "jsxImportSource": "react" 6 | } 7 | } 8 | --------------------------------------------------------------------------------