Ведет: Artem Daniliants, генеральный директор LumoSpark Digital Agency, специалистом в области разработки сайтов и интернет-маркетинга с 11-летним опытом. Язык вебинара: русский Мы расскажем как сделать статический сайт, который: - невозможно хакнуть; - масштабируется под любое количество пользователей; - может администрировать не технический специалисты так же легко и просто как и сайт на WordPress.

1. Возвращение к
статичным HTML сайтам
Artem Daniliants / LumoSpark

2. CEO
в LumoSpark
Евангелист
статических
сайтов
13+ лет опыта
веб-разработки
10+ лет
опыта в SEO
Предприниматель
с компаниями в 4-х
странах

3. LumoSpark
2010 4
20 3
основана офиса по
всему миру
сотрудников поддержка
языков

4. GoogleAdWords
&YandexDirect
CertifiedPartner

5. Наши услуги
Digital Marketing Development
• AdWords
• Facebook
• YouTube
• LinkedIn
• SEO
• Web development
• Mobile apps
• eCommerce

6. Вопросы
Основы
статического сайта
Недостатки CMS
Созданиехорошего
статическогосайта
JAMstack

7. Что такое статический сайт?
HTTP Request
HTTP Response

8. Все сайты когда-то
были статическими...

9. Сайт обзора событий
1996 года от CNN
Загружается < 30 мс.
Размер страницы: 74 кб
22 запроса
Website
Speed test

10. Эпоха систем контент
менеджмента
(CMS)

11. Сайты с CMS -
динамические
HTTP Request Server-side processing
HTTP Response

12. Сложность
Типичный стек сервера
для CMS Wordpress
Webserver (Nginx)
Cache server (Varnish)
Object cache (Memcached)
Database server (MySQL)
Logic layer (PHP)
CMS (Wordpress)

13. Сложность
Трудно масштабировать

14. Сложность
Уязвимости вбезопасности

15. Сложность
Трудоемкое обслуживание

16. Статические сайты
возвращают свои позиции

17. Платформа по сбору средств в 250
миллионов долларов для кампании Обамы
4,276,463 пожертвований
81,548,259 просмотров страниц
17,807,917 уникальных посетителей
Статическая HTML страница сгенери-
рована при помощи Jekyll
Served by Akamai CDN
Hosted on Amazon S3
Контроль версий с GitHub
Кейс

18. Почему?
Проще в разработке
Просто масштабировать
Защищены по умолчанию
Дешевле хостинг
Быстрая загрузка
Back-end переходит в Front-end

19. Как сделаны хорошие
статические сайты?

20. Генератор
статических сайтов
(SSG)
Если не уверены, то начните
с Jekyll, Hugo или Hexo
Наиболее популярные генераторы
статических сайтов
Your
computer
The
interwebs
Content
Static Site Generator
Server
Browser
CSS HTML
Template

21. Контроль
версий с Git
Bitbucket позволяет создавать
неограниченные репозитории
для небольших команд

22. Хостинг

23. Варианты размещения
статических файлов
Облачное
хранилище
файлов
Провайдер
хостинга для
статических
сайтов
Обычный
хостинг
Примеры
Amazon S3
Google Cloud Storage
Rackspace Cloud
Microsoft Azure
Примеры
Netlify
Forge
GitHub
Surge.sh
Обычныйпровайдер
хостинга
Другие варианты

24. Статические
сайты могут иметь
динамическую
функциональность

25. Поиск по сайту

26. Преимущества
+ Бесплатный
+ Быстрая
имплементация
Недостатки
– Не дружественный
интерфейс
Преимущества
+ От 100$/год
+ Быстрая
имплементация
+ Работает на любом
сайте
Недостатки
– Не очень красивый
– Минимум
возможностей для
кастомизации
Преимущества
+ От 29$/месяц
+ Быстрая
имплементация
+ Очень дружествен-
ный интерфейс
+ Работает на любом
сайте
Недостатки
– Может быть дорогим
с дополнительными
функциями
Преимущества
+ Бесплатный
+ Легкая кастомизация
Недостатки
– Интеграция может
занять время
Google
search using
site: operator
Google
CSE
AddSearch DYI options
(e.g., Lunr and Bleve)
Saas для поиска

27. Возможность
комментирования с Disqus

28. Статические сайты
также могут быть
интернет-магазинами

29. Преимущества
+ Есть бесплатный план
+ Поддержка множества
gateways
+ Продукты управляются в
Ecwid
+ Поддержка множества
методов оплаты
Недостатки
–Только частично
многоязычный
Преимущества
+ Ориентирован на
разработчиков
+ Легко кастомизируется
+ Многоязычный
+ Продукты определяются в
SSG
+ Дружественен SEO
Недостатки
– Высокая комиссия за
платежи
Преимущества
+ Можно использовать
существующие плагины CMS
+ Отдельный поддомен для
магазина
Недостатки
– Возвращают проблемы,
связанные с CMS
Ecwid Snipcart Your old CMS
Корзины для статических сайтов

30. Формы

31. Другие варианты
Преимущества
+ Бесплатный
+ Простая
имплементация
Недостатки
Преимущества
+ Возможность бесплатно
начать
+ Простой инструмент для
дизайна форм
+ Позволяет собирать
платежи
+ Работает на любом сайте
Недостатки
– Бесплатные планы
сильно ограничены
Formspree Google Forms Wufoo Typeform
Saas для веб-форм
Преимущества
+ Возможность
бесплатно начать
+ Удобство
+ Поддержка
интеграции с Hugo
Недостатки
– Интерактивные
формы могут быть
неприемлемы для
некоторыхbe off-putting
to some
Преимущества
+ Возможность
бесплатно начать
+ Очень простая
имплементация
Недостатки
– Ограниченная
функциональность

32. Если сомневаетесь, используйте
CloudFlare или Netlify
Content delivery
networks

33. Secure Sockets Layer (SSL)
CloudFlare и Netlify предоставляют бесплатный SSL

34. Пререндер страниц для
поисковых систем
Узнать больше о пререндерин

35. Статическими
сайтами можно
легко управлять

36. Surreal CMS
Позволяетредактироватьпрактически
любойпростойстатическийсайт
Простотаинтеграции
ПредлагаетсякакWhite-Labelрешение
ПоддержкаотображенияGoogleAnalytics
внутриCMS
Поддержкаверсий
ПодключаетсяклюбомуFTP/SFTP
серверу
Стоит$10/месяцдля1–5сайтов
Surreal CMS
Демо

37. Forestry.io
Фиксирует изменения редактора обратно
в Git
Платные тарифы предоставляют хостинг
Поддерживает публикацию на Amazon
S3, FTP, SFTP, GitHub страницах
Есть бесплатные планы
Подходит для продвинутых
редакторов контента
Forestry io
Демо

38. Prose.io
Позволяет редактировать и
просматривать файлы Markdown
Поддерживает только GitHub
Бесплатный
Только для редакторов
технического контента
Prose io
Демо

39. Будущее интернета:
JAMstack

40. Современная архитектура веб-разработки,
основанная на клиентском JavaScript, повторно
используемых API и готовой разметке
J
JavaScript
A
APIs
M
Markup
Any dynamic programming
during the request/response
cycle is handled by JavaScript,
which runs entirely on the client’s
side.This could be any front-end
framework, library, or even vanilla
JavaScript.
All server-side processes
or database actions are
abstracted into reusable APIs
and accessed over HTTP
with JavaScript.These can
be custom built, or they can
leverage third-party services.
Templated markup should
be pre-built at the time of
deployment, usually using a site
generator for content sites or a
build tool for web apps.
Больше информации о JAMstack

41. Наш JAMstack
Все это за $0/месяц для небольших сайтов
Управление контентом
Дополнительный
функционал
Интерактивность и
хранение данных
Серверная
инфраструктура
Генерация сайта
Forestry
Ember.js(interactivity)
Netlify(CI,SSL,CDN)
Hugo(staticsitegenerator)
Cloudant
GitHub
GULP JSlint SASS Bower
PouchDB
Formspree Lunr Migadu(email) Disqus
CouchDB

42. Спасибо!
Связаться со мной:
Twitter / LinkedIn / Email