要使用的技术堆栈

前端

  • 作为 CSS 框架的 Tailwind
  • NextJS
  • storybook
  • GraphQL

后端

作为 Perl 爱好者，我将使用 Mojolicious (Mic Drop)。

设置项目前端

在本文的这一部分，我们将设置

  • NextJs 项目
  • 安装 Tailwind CSS 框架
  • 设置storybook
  • 使用 Apollo 客户端设置 GraphQL
  • 一个 Git 存储库

设置 Next.js 项目

要在 Next.js 中创建新项目，请执行以下命令：

npx create-next-app

在下一步中，它将询问应用程序名称，我们将其命名为 ashutosh-dev。这是我的博客的名称，所以，这是有道理的。

安装 Tailwind CSS

我们将使用 npm 安装 Tailwind CSS。

npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

创建配置文件。

npx tailwindcss init -p

打开 tailwind.config.js 并将 purge: [] 替换为

purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],

就这样。我们配置了 Tailwind CSS。当我们开始开发应用程序时，我们将在 _app.js 下导入它。

安装storybook

storybook是一个 UI 开发工具包。它隔离了组件并加快了开发速度。

要安装 Storybook，

npx sb init  

# Starts Storybook in development mode
yarn storybook

它在端口 6006 启动storybook客户端。

如何使用它，我们稍后再讨论。现在，让我们设置 Next.js 项目。

带有 Apollo 客户端的 GraphQL

要安装 Apollo 客户端，请运行以下命令：

npm install @apollo/client graphql

设置 Git

本文的最后一部分是在 GitHub 上设置 Git 存储库。

我已经在 GitHub 上创建了 Git 存储库。现在我只需要在那里推送我的代码。

在此之前，我们需要运行以下命令：

git remote add origin https://github.com/akuks/ashutosh-dev.git
git branch -M main
git push -u origin main

概括

在本文中，我们决定使用什么技术栈来开发我的博客。我们还通过安装

  • Next.js
  • 创建 Next.js 项目
  • 设置storybook
  • 设置 Apollo 客户端
  • 设置 git 存储库