小可の聚集地,由 Next.js、TypeScript、MDX 和 TailwindCSS 构建。
👀 在线预览
- 🎨 简洁、丝滑、快速、一键暗黑模式
- ✨ 响应式设计、主题色配置、CI/CD部署
- 🧩 内置一些 Markdown 扩展语法,得益于 MDX,还支持在文章中嵌入 JSX 组件
- 🎮 内置 CodePlayground,可以直接在文章中运行代码块(beta)
- 🔫 充满趣味的点赞按钮、访问量计数器、音效反馈
- 😎 Profile使用打字机特效,支持多条轮播展示,专享个人slogan~
- 👐 友链图标自动展示,更好的友链管理逻辑(更方便下架跑路的友链~
- 💭 支持Artalk自部署评论系统(避免第三方评论广告/倒闭
部署前,请确保本地已正确配置以下环境:
- Node.js(以v20.15.0为例)
- git(以2.45.2为例)
那么,开始:
- 找个目录,git clone本仓库。
git clone https://github.com/fx-k/192168123.xyz.git
- 进入目录,安装依赖。
npm install
- 你可以在
site.config.js
文件中客制化你的网站。 - 为了使用点赞和访问量统计功能,需要注册 Upstash Redis 服务(可以白嫖免费套餐),然后在根目录下创建
.env
文件,填入以下信息:UPSTASH_REDIS_REST_URL = 填入自己的信息 UPSTASH_REDIS_REST_TOKEN = 填入自己的信息
- 为了使用评论服务,你需要部署Artalk评论服务,具体部署请参考官方的guide。然后,在
site.config.js
文件中修改artalkServer
字段,改成你自己部署的服务器后端。 - 为了实现友链图标的自动获取与展示,你需要自行部署一个获取网站favcoin的API。然后,在
site.config.js
文件中修改getFaviconAPI
字段,改成你自己部署的服务器后端。 - 运行
npm run dev
即可预览网站效果。
当然,你肯定不止满足于部署到本地(即使这只是一个0ip的网站hhh)。
实现自动部署的工作流,其实并不难。
最简单的方法,可以直接部署到Vercel,实现本地写博客👉git push👉网站更新的效果。
跟着以下教程即可:
- 点击本项目GitHub页面上面的fork,fork本仓库到你的GitHub账号。
- 参考
本地部署
教程流程,但是把git clone
步骤的链接,换成你fork本仓库后,新生成的仓库链接。(你可能需要先正确在本地cli中配置你的git账户) - 注册Vercel账户,然后将你fork后的仓库进行绑定。方法很简单,可以直接参考官方的guide。(记得要在Vercel里面把你的
.env
文件内容配置到环境变量中) - 可以在Vercel后台绑定你自己的域名,或者直接使用Vercel自动为你生成的专属域名。
- 至此,部署完成。你可以在本地写mdx文件,然后
git push
到你fork后的仓库,Vercel会自动部署你每次commit后的内容,实现网站更新。
使用 npm run new:post
命令,即可新建文章。
直接删除即可...
本项目会自动识别mdx文件的Front Matter字段,生成标题、文章封面、写作日期、更新日期等。
字段名 | 示例 | 说明 |
---|---|---|
title | 我的一篇新文章 | 文章的标题 |
date | 2024-07-18T11:34:53Z | 文章的创作日期 |
tags | - 望周知 - 技术向 |
文章的标签,以 - 开头,可以包含多个 |
updatedOn | 2024-07-18T11:38:16Z | 文章的更新日期 |
image | /test.webp | 文章的封面图片(可以是外链或者public文件夹下的图片) |
draft | false | 是否为草稿,若为true则不进行展示 |
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/