English • 中文

小可の聚集地，由 Next.js、TypeScript、MDX 和 TailwindCSS 构建。

👀 在线预览

• 🎨 简洁、丝滑、快速、一键暗黑模式
• ✨ 响应式设计、主题色配置、CI/CD部署
• 🧩 内置一些 Markdown 扩展语法，得益于 MDX，还支持在文章中嵌入 JSX 组件
• 🎮 内置 CodePlayground，可以直接在文章中运行代码块（beta）
• 🔫 充满趣味的点赞按钮、访问量计数器、音效反馈
• 😎 Profile使用打字机特效，支持多条轮播展示，专享个人slogan~
• 👐 友链图标自动展示，更好的友链管理逻辑（更方便下架跑路的友链~
• 💭 支持Artalk自部署评论系统（避免第三方评论广告/倒闭

部署前，请确保本地已正确配置以下环境：

• Node.js（以v20.15.0为例）
• git（以2.45.2为例）

那么，开始：

1. 找个目录，git clone本仓库。git clone https://github.com/fx-k/192168123.xyz.git
2. 进入目录，安装依赖。npm install
3. 你可以在 site.config.js 文件中客制化你的网站。
4. 为了使用点赞和访问量统计功能，需要注册 Upstash Redis 服务（可以白嫖免费套餐），然后在根目录下创建 .env 文件，填入以下信息：

   UPSTASH_REDIS_REST_URL = 填入自己的信息
   UPSTASH_REDIS_REST_TOKEN = 填入自己的信息

5. 为了使用评论服务，你需要部署Artalk评论服务，具体部署请参考官方的guide。然后，在 site.config.js 文件中修改 artalkServer 字段，改成你自己部署的服务器后端。
6. 为了实现友链图标的自动获取与展示，你需要自行部署一个获取网站favcoin的API。然后，在 site.config.js 文件中修改 getFaviconAPI 字段，改成你自己部署的服务器后端。
7. 运行 npm run dev 即可预览网站效果。

当然，你肯定不止满足于部署到本地（即使这只是一个0ip的网站hhh）。

实现自动部署的工作流，其实并不难。

最简单的方法，可以直接部署到Vercel，实现本地写博客👉git push👉网站更新的效果。

跟着以下教程即可：

1. 点击本项目GitHub页面上面的fork，fork本仓库到你的GitHub账号。
2. 参考 本地部署 教程流程，但是把 git clone 步骤的链接，换成你fork本仓库后，新生成的仓库链接。（你可能需要先正确在本地cli中配置你的git账户）
3. 注册Vercel账户，然后将你fork后的仓库进行绑定。方法很简单，可以直接参考官方的guide。（记得要在Vercel里面把你的 .env 文件内容配置到环境变量中）
4. 可以在Vercel后台绑定你自己的域名，或者直接使用Vercel自动为你生成的专属域名。
5. 至此，部署完成。你可以在本地写mdx文件，然后 git push 到你fork后的仓库，Vercel会自动部署你每次commit后的内容，实现网站更新。

使用 npm run new:post 命令，即可新建文章。

直接删除即可...

本项目会自动识别mdx文件的Front Matter字段，生成标题、文章封面、写作日期、更新日期等。

PS: 可以搭配 Obsidian 插件或者 VS Code 插件，更好的帮助你来管理mdx的Front Matter

• https://www.xiaojun.im
• https://zapsplat.com
• https://www.joshwcomeau.com
• https://cali.so
• https://leerob.io
• https://vuepress.vuejs.org
• https://vitepress.dev
• https://docusaurus.io
• https://github.com/iissnan/hexo-theme-next
• https://github.com/nanxiaobei/hugo-paper
• https://github.com/SoloReverse/nextjs-simple-typewriter
• https://artalk.js.org/