通过 chrome 调试工具获得掘金 api
学会使用 Next.js 服务端渲染
学会使用 Tailwindcss 来代替原生 css
在几分钟内就可以部署一个自己的博客
在开始之前，我想先问下各位，是否有自建博客？很多人选择在社区写博客，比如：掘金，因为在社区写博客能够第一时间被人看到，能够第一时间把知识分享出去，也可以在第一时间得到他们反馈和评论。但在社区写博客也有劣势，比如掘金社区只能写技术文章，并不能完全展现你自己的个性。比如，我是一名前端开发者，在社区看我的文章，只能体现我是一名前端，但同时我又是一名摄影爱好者，这点就没办法体现了，所以这就是自建博客的优势，有非常高的灵活度，可以自己设计想要的风格和模块。但自建博客也有非常大的劣势，第一点就是部署到服务器，有一定花费，其次就是新建博客几乎没流量，所以我们需要在各大社区论坛发表文章，给自己的博客引流。这样一来，就迎来另一个问题，我需要在两个地方发表，这不就是重复劳动吗？
接下来，我就分享下我的方法，通过掘金 API 打造个性博客，只要在掘金发表文章，就会自动同步到自己的博客中。
本文涉及的代码都在这个 Github 仓库[1]中。
有了接口，我们就可以用它来搭建自己的博客了。
接下来，我们将从零开始创建一个 next 项目，并且选择 Typescript 模板
创建项目后，脚手架会帮我们自动执行 。
安装 npm 包
Tailwindcss 的编译依赖 postcss，autoprefixer 会自动根据 标准给 CSS 属性添加浏览器适配前缀。
初始化 配置文件
修改 配置文件，修改下 字段构建，修改后，只会打包 content 中匹配文件使用到的 class
扩展一个 ，主色调统一使用这个，方便后续不同的人使用这个模板，可以方便地修改主色
调整下目录，将主要的代码目录都移动到 下
这点是个人爱好，你可以遵循原来的目录。
修改 中的 CSS
指令会在运行的时候生成默认样式。
在 或者 文件夹下建立文件或文件夹，Next.js 会帮我自动创建路由系统。
比如我们创建如下目录结构：
就会创建如下路由
其中 是变量，可以匹配任意值，那么我们的路由就是：;
是多层变量，可以匹配、、 等等。
在 Next.js 中，在 Page 页面中可以导出一个 方法，用于服务端获取数据。
下面我们来实现下博客列表页面，需要获取 上的翻页参数
新建一个 文件，将掘金的 ID 设置为 uid，我们就可以在 nodejs 中通过获取这个值。
此时的 data 就是文章列表数据，复制其中一条数据，使用工具[3]将 json 转为 typescript 类型，删除一些我们不需要的字段，我们就可以得到 的 ts 类型定义。
下面我们用 Tailwind css 来实现下 组件
页面之间的跳转，我们应该使用 ，而不是 标签，跟 react-router 中的类似，用户点击链接，并不会全局刷新，而是动态替换网页中的内容。
Tailwindcss 默认是移动优先，若要适配其他屏幕，可以在样式前面加 md、lg、xl、2xl 等前缀， 上面代码中的 代表屏幕宽度大于 1280px 应用的样式。
翻页组件
方法中返回了 文章总数，我们可以根据它和当前的 封装成一个分页组件，代码如下：
答案是当然可以的，在 , 配置 字段。
比如上面的配置中， 博客编辑页面 ，使用 页面来实现， 字段也就是实现了 webpack devserver 的 功能，比如：后端有些接口使用 Java 实现，也可以使用 实现代理联调。
实现了文章列表页面，我们应该可以很快写出文章详情页面的页面代码，大致如下：
实现方式跟列表页相同
在 中通过接口获取文章详情；
接口获取失败的时候返回状态码 404，并且使用 显示成统一的错误页面；
接下来还有 3 个功能要实现：
markdown 格式转为 html
文章详情页面的样式
代码高亮
markdown 转 html
请求接口后，得到的 markdown 内容结构如下
所以在解析 markdown 内容之前，还得解析 markdown 的前缀， 在命令行中安装以下 2 个包来实现这个功能。
那么我便可以写出编译 markdown 内容的代码了：
文章详情页面的样式
关于文章详情页的样式，我第一个想到的是github-markdown-css[4], 但今天要推荐的还是 Tailwindcss， 是官方提供的插件，可以帮助我们排版美化文章类页面的样式。
首先让我们来安装这个插件
然后在 配置文件中加入这个插件:
最后我们在文章最外层就可以加入 这个样式了， 将主色调配置成湛蓝色，当然你可以改为其他 Tailwind css 中提供的默认颜色变量。
代码高亮
最后一步，代码高亮，我选择使用更加轻量的 prismjs，在 react 使用也很简单，详情可以参考之前写的这篇文章《使用 Prism.js 对代码进行语法高亮》[5]。
在爱给网等网站搜索主题相关的 png 免扣素材；
使用 canvas 粒子制作星空背景；
随机在屏幕屏幕上初始化 800 个粒子
使用 在原坐标基础上增加一定速度的系数
粒子超出画布重新初始化粒子坐标
使用 监听容器大小，重新初始化画布
我将该项目开源在 GitHub 中，你只需要：
Fork 该仓库[6]后，新建 文件，写入 , uid 值为掘金主页 url 上的 Id
修改 里的配置为你自己的配置，
使用 GitHub 账户登录 vercel 导入这个项目， 即可部署成功
当然这个项目还存在一些问题，比如：
需要进行SEO优化等
Vercel 部署 Region 选择香港，Serverless 函数访问掘金接口的速度还是有些慢。
接下来我将继续分享 Next.js 相关的实战文章，欢迎各位关注我的《Next.js 全栈开发实战》 专栏。
使用 Strapi CSM系统进行 Next.js 应用全栈开发
使用 Notion 数据库进行 Next.js 应用全栈开发
使用 Prisma 和 PostgreSQL 进行 Next.js 应用全栈开发
使用 NextAuth 实现 Next.js 应用的鉴权与认证
使用 React query 给 Next.js 应用全局状态管理
使用 i18next 实现 Next.js 应用国际化
使用 Playwright 进行 Next.js 应用的端到端测试
使用 Github actions 给 Next.js 应用创建 CI/CD
使用 Docker 部署 Next.js 应用
将 Next.js 应用部署到腾讯云 serverless
你对哪块内容比较感兴趣呢？欢迎在评论区留言，感谢您的阅读。
[1]nextjs-juejin-blog： https://github.com/maqi1520/nextjs-juejin-blog
[2]Tailwind CSS IntelliSense： https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss
[3]json-to-typescript： https://www.runjs.cool/json-to-typescript
[4]github-markdown-css： https://github.com/sindresorhus/github-markdown-css
[5]使用 Prism.js 对代码进行语法高亮： https://juejin.cn/post/7088920558598881293
[6]nextjs-juejin-blog： https://github.com/maqi1520/nextjs-juejin-blog
阿里云官网实名认证的云大使用户
2024年2月1日0点至2024年2月29日24点（大型活动期间如有调整，以届时活动页面展示为准）