Начало разработки сайта: Nginx+Node.js+Gatsby+Tailwind CSS - Код

Подразумевается что у нас уже установлен веб-сервер Nginx и серверная среда выполнения JavaScript — Node.js.

Теперь нам необходимо выбрать нужную директорию на сервере и установить фреймворк Gatsby (развернуть проект) с зависимостями и интерфейс командной строки Gatsby (CLI) — это инструмент, позволяющий быстро создавать новые сайты на базе Gatsby и запускать команды для разработки сайтов Gatsby, именно с него мы и начнем:

cd /var/www/my-site
sudo npm install -g gatsby-cli

Далее, убедимся что все прошло успешно и командой проверим обратную связь от Catsby CLI:

gatsby --help

Получим достаточно ясную картину того, что может Gatsby CLI:

Usage: gatsby <command> [options]

Commands:
  gatsby develop                      Start development server. Watches files, rebuilds, and hot reloads if something changes
  gatsby build                        Build a Gatsby project.
  gatsby serve                        Serve previously built Gatsby site.
  gatsby info                         Get environment information for debugging and issue reporting
  gatsby clean                        Wipe the local gatsby environment including built assets and cache
  gatsby repl                         Get a node repl with context of Gatsby environment, see (https://www.gatsbyjs.com/docs/gatsby-repl/)
  gatsby plugin <cmd> [plugins...]    Useful commands relating to Gatsby plugins
  gatsby new [rootPath] [starter]     Create new Gatsby project.
  gatsby telemetry                    Enable or disable Gatsby anonymous analytics collection.
  gatsby options [cmd] [key] [value]  View or set your gatsby-cli configuration settings.

Options:
  --verbose                Turn on verbose output                                                                 [boolean] [default: false]
  --no-color, --no-colors  Turn off the color in output                                                           [boolean] [default: false]
  --json                   Turn on the JSON logger                                                                [boolean] [default: false]
  -h, --help               Show help                                                                              [boolean]
  -v, --version            Show the version of the Gatsby CLI and the Gatsby package in the current project       [boolean]

Нас интересует создание нового проекта (Create new Gatsby project). И начнем мы без параметров с простого gatsby new, это позволит нам видеть подсказки и детальнее настроить проект

gatsby new

Получим интерактивный диалог:

What would you like to call your site?
✔ · Dev
What would you like to name the folder where your site will be created?
✔ my-site.ru/ dev
✔ Will you be using a CMS?
· No (or I'll add it later)
✔ Would you like to install a styling system?
· PostCSS
✔ Would you like to install additional features with other plugins?
· Add the Google Analytics tracking script
· Add responsive images
· Add page meta tags with React Helmet
· Add an automatic sitemap
· Generate a manifest file
· Add Markdown and MDX support

Great! A few of the selections you made need to be configured. Please fill in the options for each plugin now:


✔ Configure the gatsby-plugin-google-analytics plugin.


Thanks! Here's what we'll now do:

    🛠  Create a new Gatsby site in the folder dev
    🎨 Get you set up to use PostCSS for styling your site
    🔌 Install gatsby-plugin-google-analytics, gatsby-plugin-image, gatsby-plugin-react-helmet, gatsby-plugin-sitemap, gatsby-plugin-manifest, gatsby-plugin-mdx, gatsby-transformer-remark


? Shall we do this? (Y/n) ‣ Yes

Рассмотрим этапы создания нового проекта:

«Как бы вы хотели назвать свой сайт?»
«Как бы вы хотели назвать папку, в которой будет создан ваш сайт?»
«Будете ли вы использовать CMS?» выберите «Нет (или я добавлю позже)» .
«Хотите установить систему сборки?»
«Хотите ли вы установить дополнительные функции с другими плагинами?» используйте клавиши со стрелками и Enter, чтобы выбрать «Готово» .

После последнего пункта нам остается только нажать Enter и все произойдет само-собой.

На стороне сервера Nginx нам необходимо все запросы проксировать (т.е. перенаправлять) на порт за номером 8000, именно на него настроен проект Gatsby по умолчанию. Для этого создадим или откроем конфигурационный файл Nginx вашего сайта:

cd /etc/nginx/sites-available/
sudo nano mysite

Опытные разработчики получат вдохновение и могут оттолкнуться от информации доступной по этой ссылке, а мы же просто добавим в него следующие строки:

server {
  listen 80;
  listen [::]:80;

  server_name example.ru www.example.ru;

  location / {
      proxy_set_header Host $host;
      proxy_set_header X-Real-IP $remote_addr;
      proxy_pass http://localhost:8000;

      root   /var/www/example.ru/mysite/public; # путь до папки public вашего проекта
      index  index.html index.htm;
  }
}

После этих минимальных внесений нам необходимо при помощи символической ссылки включить в работу наш сайт, чтобы Nginx мог зачитать наш созданный файл конфигурации:

sudo ln -s /etc/nginx/sites-available/mysite /etc/nginx/sites-enabled/

Если символическая ссылка уже была вами ранее указана на файл конфигурации хоста (сайта), то просто вежливо попросим Nginx зачитать конфиги заново:

sudo nginx -s reload

Все готово к запуску!

В директории с нашим проектом выполним команду для сборки и запуска нашего сайта:

gatsby develop

Если порт уже занят, то в ответ приложение задаст нам вопрос: хотим ли мы осуществить запуск на другом порту, отвечаем, например, yes

Something is already running at port 8000

? Would you like to run the app at another port instead? › (Y/n)

Но учтите, что в этом случае нужно будет в конфигурации хоста Nginx изменить порт перенаправления (proxy_pass)

И вот он: ваш самый первый сайт Гэтсби! 🎉

Установка и настройка Tailwind CSS

Выберем директорию с нашим проектом Gatsby

 cd my-project

Установим Tailwind и прочие зависимости

npm install -D tailwindcss postcss autoprefixer gatsby-plugin-postcss

Проинициализируем (создадим) файл конфигурации Tailwind CSS

npx tailwindcss init -p

Подключим плагин в свой файл конфигурации gatsby-config.js

plugins: [`gatsby-plugin-postcss`],

Настроим PostCSS для использования Tailwind

module.exports = () => ({
  plugins: [require("tailwindcss")],
})

Создадим директорию CSS и файл index.css (src/css/index.css) и импортируем в него каркас фронтенд-фреймворка Tailwind

@tailwind base;
@tailwind components;
@tailwind utilities;

Сюда же мы можем добавлять и пользовательский CSS

@import popup.css body {
  @apply bg-purple-200;
}

Подключим этот файл в конфиг наш gatsby-browser.js

import "./src/css/index.css"

И финальным действием изменим конфигурацию tailwind.config.js

module.exports = {
  purge: ["./src/**/*.{js,jsx,ts,tsx}"],
  theme: {},
  variants: {},
  plugins: [],
}

Ну вот и все! 🙂

Скачать краткий PDF-помощника

Официальный сайт Tailwind CSS

Официальный сайт Gatsby

Установка и настройка Tailwind CSS

Администратор

Вход