关于我如何使用 DEV.to 和 NextJS 构建我的投资组合和博客的故事

基本规则

开始

设计

技术

发展

结论

我一直想建立一个属于自己的作品集网站和博客。懒惰了这么多年……😋，终于，我是说，终于，我终于做到了……🎉我建立了自己的网站dineshbalaji.in ……✨ 请务必访问我的网站，并在评论区告诉我你的想法……🙏

这篇文章背后的想法是讲述我是如何做到的，所涉及的技术，我在这一过程中学到了什么，最重要的是激励更多的人（可能像我一样懒惰..:D）建立自己的网站。

基本规则

这些是我为开发网站而制定的一些基本规则。

• 我必须从头开始编写代码，不能使用 WYSWYG 编辑器。
• 一个好的标志。
• 我必须在构建它的过程中学习新的东西。
• 尽量减少第三方库的使用。
• 它必须展示我的编码技能。
• 良好的灯塔评分 - 性能和可访问性。
• 必须与博客内容管理系统 (CMS) 集成。
• 良好的搜索引擎优化。
• 开放源代码以供其他人使用/学习。
• 整页画布登陆页面..😍我喜欢它们..❤️

开始

基本规则制定好后，我于2020年10月3日开始动工。有一件事我绝对想确保，那就是追踪我的进度。我之前尝试过几次搭建自己的网站，但最终都偏离了主题。这件事也给了我启发。他记录自己取得的每一点进展的方式对我来说非常有效。所以我做了一个变更日志（CHANGELOG）。它易于生成和维护。

设计

我的职业是程序员，但我热爱设计，而且我精通Sketch。但我学到的第一件事就是坚持我的基本原则——Figma。我花了一个周末的时间学习这个工具的教程，然后开始创建一个设计系统和一个网站。

标志

我需要为品牌设计一个logo。我希望它简洁，而且可以动起来。我对最终的成果很满意。

作为一名整天盯着屏幕的开发者，我很喜欢深色主题，所以决定用它。我选了几个亮色，用crispedge做了一些渐变色，然后我的秘诀就出来了……🦄

字体

• 努尼托·桑斯
• 阿迪娜·梅莉亚

我花了一周多的时间制作这些屏幕。在开始开发之前，我确保所有屏幕都已完成，以确保不会出现任何停顿。

技术

由于我除了作品集之外还想写博客，所以 SEO 至关重要，而实现 SEO 的最佳方式就是构建静态网站。我想顺便学习一下 React，当时有两个选择：NextJS 和 Gatsby。Gatsby 是纯静态的，而 NextJS 可以根据需要在静态和动态之间灵活切换。所以我最终选择了 NextJS。

托管

选择 NextJS 有其优势。NextJS 的开发团队Vercel提供了出色的托管平台。它拥有一流的工具，可在几分钟内托管您的网站，并与 Github 无缝集成，可用于开发、预览和生产部署。

我不想对每个细节都进行冗长的解释，以免让你们感到厌烦。我只会用几行代码列出我在网站上使用的技术。

基地科技

• NextJS - 构建网站的基础 React 框架。它允许您在 SSR、SSG 和 CSR 之间进行选择。
• DEV.to API - 我的 CMS.. 😋 我很喜欢 DEV.to 这个开发者博客平台，舍不得离开它。但同时，我也希望我的文章能有一个单一的真实来源。所以我使用了 dev.to API。它很棒，让我两全其美。
• TailwindCSS与SCSS结合使用- 我很高兴遇到了 TailwindCSS。我强烈推荐给大家。虽然将它与 SCSS 集成起来很麻烦，但如果您只使用 CSS，不妨尝试一下。
• Typescript ——2020 年从事前端开发的人必备的工具。

工具

• stylelint - 用于 CSS 代码检查，以及 CSS 规则的排序和排序。必备。
• eslint - 用于检查 Typescript 代码。必备。
• postcss - 对于 CSS 浏览器供应商前缀，清除未使用的 TailwindCSS 规则。
• husky - 为了运行 linting，请在提交代码之前提交规则。
• commitzen - 为您的 git 提交消息提供一种格式。您之前看到的漂亮的变更日志正是源于此。
• prettier - 2020 年的标准。正如它所说的那样，格式化并使您的代码看起来更漂亮..😋

NPM 包

• framer-motion - 网站上所有精美的动画都由这个出色的库提供支持。你只需要构思动画，剩下的交给 framer 即可。强烈推荐这个库。
• react-copy-to-clipboard - 用于将代码片段复制到剪贴板。
• react-infinite-scroll-component - 用于在帖子和小块页面中滚动加载内容。
• react-intersection-observer - 用于检测元素是否滚动到视图中。
• react-markdown - 用于解析来自 DEV.to API 的 markdown 并呈现为 HTML。
• react-syntax-highlighter - 用于react-markdown突出显示 markdown 中的代码的插件。
• react-share - 为帖子和小块提供社交分享图标和功能。
• 阅读时间- 估计给定文本的阅读时间。
• 站点地图——用于生成站点的sitemap.xmlSEO。
• camelcase - 用于将带连字符的字符串转换为驼峰字符串。
• @svgr/cli - 用于优化和将 SVG 转换为 React 组件。

分析

• Google Analytics——我将其用作帖子浏览量以及用户人口统计和内容相关性的数据存储。
• MS Clarity - 这款产品刚刚发布，我非常喜欢他们提供的热图和会话回放功能。

发展

我有一份全职工作，所以必须抽出时间来开发。网站的大部分内容都是利用周末、深夜和清晨构建的。每当我感觉自己在重复做事时，我就会使用库；而当我想展示自己的技能时，我就会坚持写代码。

特别是，我希望确保所有基于画布的动画都完全由我编写，无需使用第三方库。为此，我学习了很多数学知识，最终为画布上的动画创建了Vector.js和Particle.js这两个迷你库……👻

结论

经过一个月的开发，我终于完成了。我对结果非常满意。这是我网站的灯塔快照。

正如你所见，全是绿色。🍾

我打算在网站建设过程中不断添加新功能，更重要的是，我希望这能激励我写更多博客。

我还要感谢Sowmya和Rashmi的善意评论和反馈，以及整个开源社区提供的所有出色的库和工具..🙏

该网站的源代码完全是开源的。

我真诚地希望有人读到这篇文章并开始建立自己的网站。

下期再见。祝你平安。:)