Архитектура этого блога

Во-первых тут нет php, не смотря на то что я php-программист. Сайт со статичными html-страницами иметь бек не должен

Но фреймворк всё-таки есть. Фронтовый eleventy. Это simpler static site generator, из вашего чего-то генерирует html. Мне очень хотелось реализовать JAM stack и он для этого идеально подходит

{
  "engines": {
    "node": "18.x"
  },
  "scripts": {
    "dev": "eleventy --watch & vite",
    "start": "npx @11ty/eleventy && vite --port $PORT",
    "build": "npx @11ty/eleventy && vite build",
    "preview": "npx @11ty/eleventy && vite preview"
  },
  "dependencies": {
    "vite": "2.7.6",
    "@11ty/eleventy": "^1.0.0"
  },
  "devDependencies": {
    "@tailwindcss/typography": "^0.5.2",
    "autoprefixer": "^10.4.0",
    "cssnano": "^5.0.15",
    "postcss": "^8.4.5",
    "postcss-cli": "^9.1.0",
    "tailwindcss": "^3.0.7"
  }
}

Идея JAM - для статичной информации не нужна постоянная генерация на беке. То есть как на php происходит. Мы обращаемся к странице, запускается скрипт php, собирает данные из кеша/базы/откуда угодно, генерирует html и отдаёт его. При повторном обращении алгоритм повторяется

Идея JAM - это один раз сгенерировать страницу и отдавать её до тех пор, пока её содержимое не изменится. А когда содержимое меняется, весь сайт перегенерируется и снова у вас для конечных пользователей лежит на сервере готовая пачечка html-ок

Это ускоряет загрузку страниц для конечного пользователя, а ресурсов на сервере сгенерировать статику всегда хватит

Для стилей использую tailwind. Весь дизайн уместился в этот файлик. По понятным причинам, в md-файлах я стили не вставлю, а расширение tailwind'а typography позволяеть вставлять стили для уже сгенерированых страниц

const plugin = require('tailwindcss/plugin')
const colors = require('tailwindcss/colors')

module.exports = {
  content: [ './dist/**/*.html' ],
  theme: {
    extend: {
      typography: (theme) => ({
        DEFAULT: {
          css: {
            color: theme('colors.neutral.900'),
            code: {
              color: theme('colors.yellow.500'),
              backgroundColor: theme('colors.neutral.800'),
              padding: 2 
            },
            pre: {
              color: theme('colors.yellow.500'),
              backgroundColor: theme('colors.neutral.800'),
              fontWeight: 'bold',
              borderRadius: 'none'
            },
            li: {
              listStyleType: 'square',
            },
            hr: {
              border: '1px solid'
            },
            '--tw-prose-bullets': theme('colors.neutral.900'),
          },
        },
      }),
    },
  },
  plugins: [require('@tailwindcss/typography')],
}

Для поочередной генерации, сначала html с помощью eleventy, потом css с помощью tailwind использую vite, прекрасный упаковщик с которым смог справится даже бекендер

Заголовок статьи берется тупо из названия md-файла

Раньше хостилось это всё на бесплатном Heroku. Очень удобно, делаешь push в репу своего сервера, проект билдится и сразу готов

Сейчас я перешла на Vercel, т.к. у них пока еще есть бесплатный план. По первым ощущениям еще лучше. Подключаешь в панели репозиторий с гитхаба, (зачем-то) дублируешь настройки запуска из package.json, деплоишь. Дальше просто пушишь в main репы и это автодеплоится.

Source code