Содержание
Как самому написать статью для сайта лучше конкурентов
Как самому написать статью? Такой вопрос встает перед многими владельцами сайтов, которые решили заняться продвижением сайтов самостоятельно.
Ведение блога сайта — эффективный и проверенный способ:
- привлечения аудитории и качественного трафика на сайт
- улучшения поведенческих факторов сайта
- повышения узнаваемости бренда
- формирования лояльности бренду
- формирования образа эксперта в глазах аудитории.
Чтобы делать это грамотно и эффективно для начала нужно разобраться в том, как самому написать статью для сайта. В этой статье я приведу пошаговую инструкцию как самому писать статьи для сайта и делать это лучше конкурентов.
Мы также заполним несколько шаблонов, которые помогут выработать простой системный подход к написанию статей с неизменным качеством.
Имея под рукой шаблоны и четкую схему того, как самому написать статью, вы:
- сократите время, которое тратите, чтобы приступить к написанию статей
- больше не будете сомневаться в качестве контента сайта
- будете писать статьи лучше конкурентов.
Как самому написать статью для сайта — пошаговое руководство
За основу руководства о том как самому написать статью для сайта я взял шаблон, которым мы пользуемся в Statusbrew. По ходу статьи мы заполним все поля, представленной здесь таблицы и разберемся во всех нюансах, которые помогут разобраться как самому написать статью и сделать это лучше конкурентов в ТОПе выдачи поисковиков.
1. Определите целевую аудиторию для которой нужно написать статью
Первым делом нужно определить целевую аудиторию статьи. Ключевой момент для того, чтобы суметь написать статью, которая будет действительно интересна и востребована — понять для кого вы пишите.
Заполните демографические данные потенциального читателя, которого вам нужно привлечь на сайт. Это поможет сформировать собирательный образ сегмента вашей ЦА. По ходу статьи вы будете мысленно и письменно обращаться к этому образу в тексте.
Демографические данные ЦА найдете в Google Analytics, Яндекс.
Метрике, социальных группах вашего проекта или конкурентов. Лучше посмотреть эти данные в CRM-базе по вашим клиентам, если такая база присутствует.
Заполнив демографические данные кратко опишите историю собирательного образа.
Образ жизни
Опишите как проходит обычный рабочий день читателя. Едет ли он на работу на машине или на метро, слушает ли он музыку или проверят ленту новостей в социальных сетях и т.п.
Мысли
По пути на работу, думает ли он о том как написать статью, которая будет лучше, чем у всех конкурентов в ТОПе выдачи Яндекса или о чем-то еще.
Болевые точки
Подумайте, что его беспокоит. Мучают ли его мысли о том, что он долго не может начать писать статью для блога из-за того, что не знает с чего начать или просто прокрастинирует?
Цели
Укажите чего хочет добиться аудитория вашей статьи.
Разобравшись в проблемах и целях аудитории подумайте как самому написать статью, чтобы она действительно помогла читателям решить проблемы или добиться целей.
После того как вы поняли для кого пишите, придумайте о чем вы будете писать.
2. Выберите тему статьи
Следующий шаг — выбор темы. Думаю, что после описания собирательного образа аудитории особых проблем с этим не возникнет. Определив цели и болевые точки аудитории выберите тему статьи, которая будет соответствовать целям, проблемам или интересам целевой аудитории.
В случае этой статьи — это будет решение проблемы как самому написать статью лучше, чем кто-либо из конкурентов.
3. Выберите ключевую фразу для продвижения статьи
Подберите ключевую фразу, по которой аудитория найдет статью. Я использую для этого https://wordstat.yandex.ru
Вордстат выдает смежные запросы и количество показов в месяц. Выбирайте ключевые фразы, которые состоят из нескольких слов, а не одного или двух, чтобы было легче конкурировать в выдаче Яндекса или Google.
Найдите запрос
Ключевая фраза должна иметь высокое количество показов в месяц и низкую конкуренцию в выдаче.
Количество показов от 500 в месяц и больше. Естественно, ключевая фраза также должна и соответствовать теме статьи.
Проверьте конкуренцию
Забейте ключевую фразу в кавычках в Google. Проследите, чтобы количество найденных страниц не превышало 30 000.
4. Составьте план статьи
Заполните Outline приведенный ниже. Заполните все поля до “Основной части”.
Ключевую фразу и количество показов в месяц вы уже знаете где найти.
Придумайте заголовок статьи
Заголовок — одна из самых важных частей статьи. Он мотивирует аудиторию на прочтение статьи. Даже самый интересный и полезный контент с плохим заголовком попросту никто не откроет, чтобы прочитать.
Сделайте заголовок максимально цепляющим, интригующим, обещающим выгоду или пользу для ЦА.
Используйте цепляющие слова: “лучшие фишки, секреты” и т.д.
В заголовке используйте ключевую фразу ближе к началу, чтобы статья выше ранжировалась в выдаче поисковиков.
Подумайте как написать вступление статьи
Начало статьи также как и заголовок играет огромную роль в мотивации на ее прочтение.
Вызовите интерес у целевой аудитории на прочтение статьи до конца с самого начала статьи.
Проблема
Опишите проблему целевой аудитории, которую вы затроните в статье.
Решение
Расскажите как вы собираетесь решить обозначенную проблему.
Причина
Объясните почему ваше решение поможет ЦА решить проблему.
5. Проанализируйте конкурентов
Забейте в Google или Яндекс ключевую фразу и пройдитесь по первым 2 страницам выдачи. Определив ТОП-20 выдачи, сразу же отсейте сайты, которые имеют другую ЦА или конкурируют по другой теме.
Определите основных конкурентов и сделайте отдельную табличку по конкурентному анализу.
В таблице укажите следующие данные:
- Ссылки на конкурентные статьи
- Что есть полезного у конкурентов
- Чего не хватает/что добавить чтобы решить проблему ЦА
6.
Заполните структуру основной части текста и заключения
Соберите воедино свои мысли и улучшения, которых не хватает вашим конкурентам и составьте четкую структуру основной части текста. Получившуюся структуру используйте в качестве подзаголовков текста h2-H6.
В заключении еще раз пройдитесь по основным моментам, сделайте выводы и дайте рекомендации по итогам статьи.
Будет также очень полезно добавить несколько фишек. Например, сравнительные таблицы, чек-листы, шаблоны, интерактивные элементы и т.п. Сделайте подарок тем, кто дочитал вашу статью до конца!
По завершении основной части и заключения
7. Проверьте как вы написали статью
После того как черновой вариант текста готов, проверьте удовлетворяет ли статья поисковые потребности читателя?
Вы можете скачать чек-лист для проверки здесь.
8. Наведите красоту
Обязательно отредактируйте текст так, чтобы его было приятно и удобно читать:
- разбейте текст на абзацы,
- используйте выделения жирным,
- проверьте на ошибки
- добавьте картинки и видео.
9. Оптимизируйте текст под ключевые фразы, SEO
О последних трёх пунктах, включая этот, подробнее читайте в статье — секреты наполнения сайта контентом.
10. Добавьте ссылки
Настройте внутреннюю перелинковку. Добавьте ссылки в тексте на другие ваши статьи — это передаст вес между страницами сайта, улучшит поведенческие факторы и положительно скажется на SEO.
Также используйте несколько ссылок на авторитетные внешние ресурсы.
11. Опубликуйте ссылки в социальных сетях
Последний момент — опубликуйте ссылки с картинками на новую статью в Твиттере и других социальных сетях. Это поможет создать дополнительный трафик, ссылочную массу и быстрее привлечет поисковых роботов Яндекса и Google на новую статью.
Заключение
В заключение хочу напомнить о том, что самое главное это качество написанной статьи. Только качество, уникальность и настоящая польза для читателей сделает статью лучше и привлекательнее, чем у конкурентов и, в конечном счете, привлечет качественный трафик на сайт.
Пишите простым языком и пользуйтесь схемами и чек-листами, которые я описал в этой статье.
Напишите мне, если вам потребуется пример заполненного Outline, которым мы пользуемся в Statusbrew.
Как сделать лендинг самому. Пошаговая инструкция (2019)
Лендинг помогает собрать посетителей на вебинар, запустить акцию, протестировать идею для бизнеса. Поэтому умение делать лендинг самому — полезный навык.
Мы подготовили для вас серию статей о создании лендинга. Первая статья, которую вы сейчас читаете, обзорная. В ней опишем, как собрать информацию для страницы, изучить конкурентов, создать лендинг в одном из конструкторов и превратить посетителей в покупателей.
В следующих статьях расскажем, как написать убойный текст для продающего лендинга, и сделаем обзор популярных конструкторов.
Как сделать лендинг самому — подготовка контента
Перед тем как писать текст, важно сформулировать цель создания лендинга. Цель может звучать так:
- собрать базу для рассылки;
- протестировать идею;
- сделать сайт-визитку;
- создать страницу для события — акции, тренинга, вебинара;
- собрать заявки или продавать товар.
Зная цель создания лендинга, вы сможете лучше представлять его задачи, изучить похожие лендинги конкурентов и создать свою страницу. Вот, например, как выглядит лендинг мастер-класса по созданию портфолио:
Пример лендинга
Работа над контентом при создании лендинга проходит в несколько этапов.
Этап 1. Сформулировать гипотезу
Если вы решили сделать лендинг, значит, у вас есть идея или представление о странице. Запишите их коротко по плану:
- Суть предложения (например, деревянные беседки для дачи).
- В чем его уникальность по сравнению с существующими решениями (беседка собирается как конструктор).
- Кому оно адресовано — целевая аудитория (всем, у кого есть дача или дом + владельцам загородных кафе).
- Какие проблемы решает или какие удовлетворяет потребности (можно быстро построить красивую беседку, не разводя стройку на даче).
Этап 2. Изучить конкурентов
Если клиент приходит на лендинг из контекстной рекламы или рекламы в соцсетях, велика вероятность, что он уже изучал информацию о товаре или услуге.
Чтобы выделиться на фоне других предложений и объяснить посетителю, почему ваше — лучше, нужно изучить конкурентов.
Как это сделать? Посмотрите, что предлагают в ответ на запросы поисковики Google или Яндекс.
Сначала найдите популярные запросы в сервисах подбора слов Яндекса или планировщика ключевых слов Google:
Поиск вариантов ключевых слов в Google Adwords
Затем введите в строку поиска подходящие ключевые слова и изучите страницы конкурентов:
Рекламные объявления компаний по запросу «беседка для дачи»
Конкуренты могут работать без сайта, продавая через соцсети. Поэтому есть смысл изучить предложения в Facebook, Instagram, «Вконтакте».
Сделайте таблицу со списком конкурентов. Запишите в столбцах: названия конкурентов, цены, суть предложения, условия доставки и гарантийного обслуживания. Первой строкой в таблице опишите ваше предложение. Так вы будете наглядно видеть свои преимущества и моменты, в которых вы проигрываете конкурентам.
Преимущества вы потом опишете в верхней части лендинга.
А моменты, в которых проигрываете, сможете доработать или аргументировать.
Этап 3. Описать целевую аудиторию и выделить сегменты
Почему важно разделить аудиторию на сегменты? Потому что один и тот же продукт может иметь для людей разную ценность. Соответственно, для каждой группы будут актуальными свои аргументы, будут отличаться возражения.
Например, деревянные беседки покупают дачники, а также владельцы мини-отелей и загородных кафе. Дачникам могут быть важны компактные размеры беседки и дизайн, а владельцам отелей — износостойкость, оптовые цены и отсрочка платежа.
Если попытаться вместить все аргументы на один лендинг, информация выйдет слишком общей. В результате будет неинтересно никому. Поэтому лучше выделить два-три сегмента и сделать свой лендинг под каждую группу.
Как изучить свою аудиторию и найти сегменты:
- проанализировать отзывы своих клиентов;
- изучить отзывы и кейсы на сайтах конкурентов;
- просмотреть обсуждения на форумах и в тематических группах в соцсетях.
Изучая отзывы, обратите внимание на то, что покупателям больше всего понравилось, чем остались недовольны, в чем сомневались, что было непонятно. Эта информация поможет написать текст будущего лендинга. Например, в отзыве про настольную игру покупатель отметил, что игра развивает воображение и пополняет словарный запас:
Пример отзыва на сайте магазина настольных игр
Если эти преимущества вы встретите в отзывах несколько раз, то они значимые. Их стоит упомянуть на лендинге.
Этап 4. Написать текст лендинга
На этом этапе у нас уже есть: описание продукта, его сильные и слабые стороны, информация о конкурентах, целевая аудитория и аргументы, которые для нее актуальны. Теперь можно приступать к созданию лендинга.
В его структуре используются несколько стандартных блоков. Сейчас расскажем об основных из них. Шапка лендинга, УТП или оффер, подзаголовок и призыв к действию — блоки первого экрана. Его видит посетитель, попадая на сайт.
Структура лендинга
| Название блока | Задача | Что писать |
| Шапка лендинга | Объяснить посетителю, куда он попал. | Логотип, название компании, чем занимается, контакты. |
| Уникальное торговое предложение или оффер | Передать одним предложением суть, главную выгоду для целевой аудитории, и почему это лучше, чем у конкурентов. | Пример: Деревянные беседки для дачи — собираются за один день. |
| Подзаголовок | Усилить или уточнить оффер. | Пример: Готовые беседки и под заказ. |
| Призыв к действию | Побудить посетителя купить или оставить контакты. | Кнопка «Заказать». Форма «Оставить заявку». |
| Описание услуги/свойства продукта | Дать подробную информацию о продукте. | Описание в формате «свойства-преимущества», фотографии продукта, скриншоты, видео, таблицы. |
| Сценарии использования | Описать ситуации, в которых будет полезен продукт или услуга. | Например, деревянная беседка нужна, чтобы отдыхать с друзьями, укрыться летом от солнца, украсить дачу, обедать всей семьей на свежем воздухе. |
| Кто мы/О компании/Почему выгодно купить у нас | Доказать экспертность, объяснить, почему вам можно доверять. | Опыт работы, сертификаты и дипломы, крупные клиенты. |
| Как это работает Как купить/заказать | Объяснить, как человек получит желаемый результат. | Например: «Вы скачиваете прайс, вам звонит наш менеджер и составляет смету. Вы одобряете смету и назначаете время доставки. Получаете складную беседку для дачи». |
| Сколько стоит | Показать цену или варианты цены. | Цена со скидкой, тарифные планы, калькулятор, форма «рассчитать стоимость». |
| Ответы на частые вопросы | Снять возражения, развеять страхи читателя. | Как оплатить товар, можно ли вернуть или обменять. |
| Призыв к действию | Еще раз предложить купить товар или оставить заявку. | Кнопка «Заказать». Форма «Оставить заявку». |
Теперь время написать текст. Но не спешите открывать конструктор. Создайте прототип страницы в Google Docs, Word или напишите от руки. Так удобнее редактировать текст и лучше видно, где нужно изменить или добавить информацию.
Этап 5. Подобрать картинки, видео, фотографии
Кроме текста для того, чтобы сделать продающий лендинг, вам понадобятся фотографии или иллюстрации — для первого экрана и демонстрации в основной части.
Фотографии товара можно попросить у поставщика или сфотографировать самому.
Подобрать фотографии в высоком разрешении можно также на платных и бесплатных фотостоках.
Нельзя просто взять фотографию из поиска — это нарушение авторских прав. В лучшем случае автор фотографии напишет вам и попросит заменить или оплатить фото. А может и подать в суд. Бесплатно можно использовать фотографии с лицензией Creative Commons. Подробно о лицензии Creative Commons и ее типах мы писали в одной из прошлых статей.
Выбирая фотографии, обращайте внимание, насколько реалистично они описывают ваш продукт, услугу или клиента.
Например, американский фермер вряд ли будет ассоциироваться с вашими клиентами из дачного поселка.
Как сделать лендинг — оформляем текст в конструкторе
У вас уже написаны основные блоки лендинга, подобраны фотографии, схемы и иллюстрации. Теперь соберем из этого лендинг.
Сделать лендинг бесплатно можно с помощью конструкторов:
- Tilda
- Lpgenerator
- Lpmotor
- Platformalp
Конструкторы имеют свои особенности и интересные функции. Скоро на блоге будет подробный обзор инструментов для создания лендингов. Сейчас для примера покажем, как сделать лендинг в конструкторе Tilda.
Зарегистрироваться на сайте и ознакомиться с подсказками
После регистрации сервис сразу предложит вам создать сайт.
Совет: зайдите сначала в «Справочный центр» и просмотрите обучающие материалы. Так вы будете более уверенно себя чувствовать, работая с шаблоном лендинга.
Справочные материалы на сайте Tilda
Создать сайт
Придумайте название сайта.
Это рабочий вариант, он виден только вам:
Создание сайта в конструкторе Tilda
Выбрать шаблон
Шаблоны в конструкторе сгруппированы по тематике и задачам. Просмотрите несколько вариантов, чтобы увидеть, есть ли там нужные блоки:
Выбор шаблона на сайте Tilda
Конечно, в конструкторе можно добавлять свои блоки. Но если у вас небольшой опыт в создании лендингов, лучше сразу выбрать подходящую структуру, чтобы вносить минимальные правки.
Например, мы хотим сделать лендинг для продажи деревянных складных беседок. Беседки — дорогой товар, скорее всего, клиент не купит их сразу, а захочет поговорить с менеджером, посмотреть фотографии. Значит, лучше выбрать шаблон с формой «рассчитать стоимость» и галереей. Названия разделов и фотографии мы изменим, главное, что структура лендинга нам подходит.
Шаблон «Ремонтная компания» для создания страницы
Вставить свой текст и фотографии
На следующем этапе меняем текст-заглушку и фотографии на свои, прописываем текст на кнопках.
Шаблон со своим текстом и фотографией
Опубликовать сайт
Когда все отредактировано, нажимаем «сохранить» и смотрим результат.
Если результат вас устраивает, ссылки работают, можно публиковать страницу в интернете и запускать рекламу.
На бесплатном тарифе адрес страницы будет иметь такой вид:
Бесплатный адрес сайта на субдомене Tilda
Чтобы подключить домен и получить короткий адрес страницы, нужно перейти на платный тариф.
Как увеличить конверсию лендинга
На лендингах используются два подхода к продажам. Первый — сразу предложить купить товар или услугу. Он подходит для недорогих товаров и услуг или если клиент уже «прогретый», например, пришел с рассылки либо профиля в Instagram.
Второй способ — получить контактные данные посетителя и постепенно подвести его к покупке. Для этого используют рассылки, автоматические серии писем, push уведомления.
Email рассылки
Рассылки помогают прогреть посетителей, которые пока не готовы к покупке.
Вы можете добавить на лендинг форму подписки из SendPulse. Тогда контакты подписчиков будут сразу попадать в сервис. В справочном разделе Tilda описано, как вставить на страницу форму подписки SendPulse и собирать email адреса потенциальных клиентов.
Автоматические серии писем
Конвертировать посетителей лендинга в покупателей помогут такие виды автоматических рассылок:
- приветственная серия — вы готовите от трех до пяти писем, в которых рассказываете подписчику о товаре или компании, ассортименте, преимуществах и плавно подводите к покупке;
- письма о брошенной корзине — если посетитель на лендинге нажал кнопку «купить», но не оплатил товар, ему автоматически придет напоминание об оплате.
Чтобы настроить авторассылки, нужно зайти в SendPulse и выбрать раздел «Авторассылки»:
Создание автоматических рассылок в SendPulse
Web push уведомления
Еще один способ повысить конверсию лендинга — настроить web push уведомления. Когда посетитель находится на странице, в браузере появляется предложение подписаться на уведомления:
Предложение подписаться на push уведомления
Если человек нажимает «разрешить уведомления», он в будущем будет получать сообщения в браузере или на рабочем столе компьютера.
Web push уведомления помогают решить несколько задач:
- напомнить о скором окончании акции;
- напомнить о старте вебинара, на который зарегистрировался посетитель;
- анонсировать новинки;
- рассказать о новых публикациях в блоге.
Push уведомление с напоминанием о начале вебинара
Подробнее о возможностях push уведомлений для увеличения конверсии мы рассказывали в одной из прошлых статей.
Теперь вы знаете о том, как правильно сделать лендинг самому и работать с посетителями, которые пришли на сайт.
В следующих статьях будет обзор популярных конструкторов для создания лендингов, чтобы вы могли выбрать удобный инструмент. Также расскажем о приемах написания текста для продающего лендинга.
Регистрируйтесь в SendPulse, чтобы повышать конверсию лендинга с помощью рассылок и push уведомлений и превращать посетителей в покупателей!
🐍 Как сделать сайт на Python за 5 минут с помощью SSG-генератора Pelican
Статические (а точнее – пререндеренные) сайты переживают второе рождение, и неудивительно: они мгновенно загружаются, выдерживают любой трафик, им не нужен дорогой хостинг, они не используют базы данных и потому их практически невозможно взломать.
С помощью генератора можно быстро сделать сайт-визитку, резюме или портфолио на основе любого готового HTML/CSS/JS-шаблона.
Самые популярные генераторы статических сайтов (SSG) написаны на Ruby (Jekyll) и Go (Hugo), но есть и несколько интересных решений на Python: Pelican, Lektor, Nikola и Hyde. Pelican – наиболее простой и в то же время мощный Python-генератор: с его помощью можно создать собственный сайт или блог в считаные минуты.
Как устроен Pelican
Pelican работает по тому же принципу, что и другие генераторы:
- Пользователь создает контент в виде ReST или Markdown файлов. Каждый файл состоит из невидимого блока YAML (метаданных) и видимого на странице текста. Файлы сохраняются в папке content, при этом посты блога располагаются в поддиректории articles, а страницы – в pages. Картинки для постов и страниц хранятся в общей папке images.
- Движок обрабатывает файлы в соответствии с выбранным шаблоном. Шаблон устанавливается в конфигурационном файле проекта pelicanconf. Как и другие веб-фреймворки на основе Python, Pelican использует шаблонизатор Jinja2. Язык Jinja2 прост, понятен, и очень похож на Python (на котором и написан сам шаблонизатор).
Jinja2-шаблон – это HTML файл с переменными и операторами, которые генерируют контент
Преимущества и недостатки Pelican
Пеликан разделяет все плюсы и минусы других SSG. Среди плюсов:
- Простота редактирования и обновления контента.
- Мгновенная загрузка готовых страниц и безопасность сайта.
- Молниеносная смена дизайна.
- Простота создания новых тем – если вы знакомы с Jinja2, то легко сможете адаптировать готовый HTML/CSS/JS-шаблон для работы с Pelican.
- Возможность использовать бесплатный хостинг – сайт можно разместить на GitHub Pages и даже в Dropbox.
- Предельно простая процедура переноса сайта с одного хостинга на другой.
- Открытый исходный код.
- Неплохой набор готовых плагинов (по сравнению с другими SGG на Python).
Есть и минусы:
- Pelican работает медленнее Hugo. Например, генерация блога, состоящего из сотни страниц, займет не менее 10 секунд.
- Нет панели администрирования – все команды вводятся в CMD.
- Выбор тем и плагинов, по сравнению с популярными динамическими CMS (WordPress), ограничен.
- Нет WYSIWYG-редактора – для создания постов придется освоить Markdown, а для адаптации готовых шаблонов под работу с Пеликаном нужно понимание языка Jinja2 и базовые познания в HTML и CSS.
- Для подключения комментариев, форм и поиска нужны дополнительные манипуляции. Ниже мы рассмотрим, как подключить к Pelican-сайту поиск, комментарии и контактную форму.
Больше полезных материалов вы найдете на нашем телеграм-канале «Библиотека питониста»
Интересно, перейти к каналу
Установка, настройка и запуск Pelican
У большинства генераторов статических сайтов, за исключением Lektor, нет админ-панели: управлять контентом приходится через CLI. Pelican тоже управляется из командной строки, но, в отличие от других генераторов, его команды максимально просты. Для запуска Пеликана необходимо наличие в системе Python 3.6+.
Как и любой более-менее серьезный Python-проект, Pelican целесообразно устанавливать в виртуальное окружение. Сначала создадим директорию для нового проекта, а затем воспользуемся менеджером зависимостей pipenv:
mkdir e:\myblog
cd e:\myblog
mkdir .venv
pipenv install pelican[Markdown]
Установка Pelican и зависимостей в виртуальное окружение
Процесс установки займет около минуты.
После завершения установки активируем виртуальное окружение:
pipenv shell
Пока виртуальное окружение активно, перед именем директории проекта отображается (.venv). Запустим команду для создания файла конфигурации Пеликана, pelicanconf.py:
pelican-quickstart
На экране один за другим будут появляться вопросы о базовых настройках сайта. Отвечать на них можно как угодно – потом настройки можно будет поправить вручную в pelicanconf.py.
Вопросы мастера настройки Pelican
После того как мастер настройки Pelican получит ответы на все вопросы, можно приступать к созданию содержимого сайта. Пеликан автоматически создает две папки – content и output. В первой папке пользователь сохраняет посты, страницы и изображения, во вторую генератор выгружает готовые html-страницы.
Посты нужно сохранять в поддиректории articles, страницы – в pages, изображения – в images. Поддиректории придется создать вручную.
Для генерации сайта нужно положить в папку content\articles хотя бы один Markdown файл. Например, такой:
Title: Это мой новый блог на Пеликане
Date: 2022-03-15 10:20
Category: Новости
Slug: first-post
Pelican – быстрый и простой в использовании генератор статических сайтов с CLI. В стандартный дистрибутив входят две темы оформления. Эта тема называется simple.
После создания первого поста можно запускать генератор:
pelican content
Запустить сервер можно тремя способами:
pelican --listen– стандартный;pelican -l– сокращенный;pelican -r -l– с автоматической регенерацией контента (используется в режиме разработки – для кастомизации темы, тестирования плагинов и так далее). Команду запуска можно комбинировать с командой генерации контента: pelican content -l.
Команду запуска можно комбинировать с командой генерации контента: Сайт будет доступен в браузере по адресу http://localhost:8000/.
Тема по умолчанию
Остановить сервер можно комбинацией Ctrl + C, а выйти из виртуального окружения – командой exit.
Темы оформления для Pelican
Хотя по количеству тем Пеликан пока что уступает Hugo, у пользователей все-таки есть неплохой выбор: подходящую тему можно подыскать на сайте Pelican Themes или в репозитории на Гитхабе. Изменить оформление сайта очень просто: архив нужно распаковать в поддиректорию .venv\Lib\site-packages\pelican\themes, а в конфигурационном файле указать название темы:
THEME = 'flex'
После этого нужно сгенерировать сайт в соответствии с новой темой – pelican content -r -l, и можно любоваться новым дизайном.
Тема Flex
По сути, изменить оформление Pelican-сайта так же просто, как сменить тему динамической CMS наподобие WordPress.
Если в каталоге готовых тем не нашлось шаблона по вкусу, его несложно сделать самостоятельно. В этом блоге есть подробный урок по созданию темы для Pelican-сайта на основе готового бесплатного HTML/CSS-шаблона.
Поиск, комментарии и формы
Главный недостаток статических сайтов в сравнении с динамическими CMS – отсутствие встроенного поиска, комментариев и форм для общения с посетителями. Возможность компенсировать эти недостатки существует.
Поиск
Решить проблему с поиском на Pelican-сайте можно двумя способами:
- Установить плагин pelican-search – он создает индексный файл, в котором хранится все текстовое содержимое сайта. Недостатков у этого способа два – чем больше на сайте статей, тем быстрее будет увеличиваться размер файла. Кроме того, плагин пока что адекватно работает только с английским языком.
Кроме того, плагин пока что адекватно работает только с английским языком.- Подключить пользовательский поиск от Яндекс или Google. Как показывает практика, Яндекс со статическими сайтами работает адекватнее – перенаправляет на нужный пост, в то время как Гугл упорно открывает главную страницу сайта, на которой впервые зафиксировал искомую фразу (несмотря на то, что пост уже давно перекочевал на одну из предыдущих страниц).
Формы для опросов и обратной связи
Для опроса посетителей можно подключить Google-формы. Для обработки формы обратной связи удобнее использовать сервисы:
- Formspree
- 99Inbound
- KwesForms
Подобных платформ много, набор услуг у них примерно одинаков:
- можно подключить код к собственной форме или использовать форму, созданную в конструкторе сервиса;
- почти везде есть спам-фильтр;
- предусмотрена переадресация после отправки данных.
На бесплатных тарифах, как правило, количество обработок ограничено, но в большинстве случаев для частного блога этого лимита будет вполне достаточно.
Комментарии
Самый простой способ подключить комментарии к статическому блогу – использовать Disqus. Этот способ также можно назвать самым нежелательным: сервис загружает массу трекеров и использует личные данные пользователей.
Другие решения:
- Discourse – поддерживает и комментарии, и целые форумы. Можно использовать бесплатно, если разместить на своем хостинге.
- StaticMan – хранит комментарии в GitHub-репозитории владельца сайта.
- Utterances – использует систему комментариев GitHub Issues.
- Giscus – система комментирования на основе GitHub Discussions. Документация русифицирована.
Заключение
Долгое время пользователям приходилось выбирать динамические CMS с базами данных только потому, что перспектива редактирования нескольких десятков страниц статического сайта приводила их в ужас. Добавился или изменился один пункт в меню, которое отображается на всех страницах? Надо редактировать все страницы. А уж если нужно изменить дизайн…
Генератор статических сайтов снимает проблемы редактирования и смены дизайна: эти операции Pelican выполняет так же быстро, как динамическая CMS. Гибкость и простота Pelican позволяют использовать его с любыми шаблонами. Нашли свежую Bootstrap-тему с трендовыми анимационными эффектами? Pelican наполнит броский шаблон контентом и превратит его в быстрый, функциональный, масштабируемый сайт, которому подойдет самый простой хостинг.
***
Материалы по теме
- 🐍 Регулярные выражения в Python за 5 минут: теория и практика для новичков и не только
- 🐍 Конкурентность и параллелизм в Python: в чем разница?
- 🐍📈 Как «оживлять» графики и впечатлять всех красивыми анимациями с помощью Python
Введение в создание собственных веб-страниц в формате HTML
Веб-сайты являются отличным ресурсом для проектов программного обеспечения с открытым исходным кодом.
Веб-сайт предоставляет пользователям идеальную возможность узнать больше о вашем проекте. Веб-сайты проектов могут делиться дополнительной информацией, снимками экрана, примерами кода, видеороликами и другими ресурсами, которые могут оказаться полезными для разработчиков и пользователей.
Если вы заинтересованы в создании собственного веб-сайта, эта статья для вас.
Другие варианты
Вам, конечно же, не нужно создавать веб-сайт для вашего проекта программного обеспечения с открытым исходным кодом. В наши дни вы можете разместить свой проект программного обеспечения с открытым исходным кодом в таких местах, как GitHub или GitLab, и обойтись стандартным описанием вашего проекта в стиле «Readme.md». Это отлично работает для многих проектов и является идеальным решением для разработчиков, которые хотят больше сосредоточиться на написании кода для своего проекта, чем на поддержке веб-сайта.
Но если вы хотите создать веб-сайт, вы можете использовать инструменты и конструкторы сайтов, которые сделают эту работу за вас.
Например, система управления веб-контентом с открытым исходным кодом TYPO3 — отличный конструктор веб-сайтов. Или вы можете использовать ряд других систем управления контентом с открытым исходным кодом и конструкторов сайтов для создания веб-сайта проекта и управления им, и все это без необходимости изучения какого-либо HTML-кода.
Но в духе программного обеспечения с открытым исходным кодом я предпочитаю кодировать свои веб-сайты проектов с открытым исходным кодом вручную. И в этой статье я покажу вам основы создания собственного веб-сайта с использованием HTML и CSS.
Структура веб-страницы
HTML — это простой язык гипертекстовой разметки, который легко пишется людьми и легко читается компьютерами. Ядром HTML является тег, разметка, которая сообщает веб-браузеру о странице или о чем-то внутри страницы. Теги HTML начинаются с символа меньше ( < ) и заканчиваются символом больше ( > ). Например, тег для начала страницы HTML:
Большинство тегов требуют, чтобы вы отдельно отмечали начало и конец чего-либо.
Закрывающий тег включает косую черту ( /) внутри тега. Например, тег, завершающий HTML-страницу:
С его помощью мы можем увидеть структуру веб-страницы верхнего уровня. Код HTML для этого:
В начальный и конечный теги HTML-страницы можно включить другие блоки кода. Все страницы нуждаются в блоке body для определения основного текста веб-страницы. Большинство страниц также начинаются со специального блока head , который определяет определенные параметры для веб-браузера, например, где найти таблицу стилей. Мы рассмотрим таблицы стилей позже.
Пробелы, включая «новые строки», пробелы и вкладки не важны для веб-браузера, но большинство веб-разработчиков делают отступы для блоков HTML, которые находятся внутри других блоков HTML, чтобы сделать код более удобочитаемым для людей.
Вот почему в моем примере кода я сделал отступы для блоков head и body .
Простой план веб-страницы
Большинство веб-страниц имеют общий вид. Обычно это заголовок и панель навигации вверху, основной контент посередине и нижний колонтитул внизу. Стандарт HTML версии 5 определяет теги именно для этого. Давайте добавим в пример кода эти теги:
.
9 0 3 8 n0003
Контент вашей веб-страницы находится внутри каждого из этих блоков веб-страницы. Например, вы должны включить название вашего проекта с открытым исходным кодом в заголовок. Также рассмотрите возможность добавления полезных навигационных ссылок в верхний колонтитул, а вашей контактной информации и любых ссылок на социальные сети в нижний колонтитул.
Вы можете определить каждый из этих элементов с помощью тегов HTML.
Для начала вы можете использовать следующие общие теги на своей странице:
-
Уровень заголовка 1 (обычно заголовок в заголовке)
-
Заголовок 2-го уровня (обычно заголовок темы в основном тексте)
-
Основной абзац. Это наиболее часто используемый тег HTML.
- Курсив
- Жирный текст
-
Тег img для отображения изображения отличается от других тегов, которые мы исследовали до сих пор. Это пример «самозакрывающегося» тега, тега, который сам по себе делает что-то. В последней версии HTML вам не нужна косая черта в конце.
При работе с изображениями не забудьте включить альтернативный описательный текст в параметр alt . Пользователи с нарушениями зрения, у которых в браузере отключено отображение изображений, вместо этого будут использовать альтернативный текст. Вы также увидите альтернативный текст, если изображение не может быть загружено.
С помощью этих новых тегов мы можем расширить пример кода HTML, чтобы создать простую, но функциональную веб-страницу. Давайте добавим логотип и заголовок страницы в заголовок и простой текст в основной текст. Мы также добавим ссылки на другие страницы в панель навигации, а также ссылку на Twitter и контактный адрес электронной почты в нижний колонтитул.
Добро пожаловать в FreeDOS
FreeDOS — это программное обеспечение с открытым исходным кодом! Загрузка и использование FreeDOS ничего не стоит. Вы также можете поделиться FreeDOS с другими пользователями! И вы можете просматривать и редактировать наш исходный код, потому что все программы FreeDOS распространяются под Стандартной общественной лицензией GNU или аналогичной лицензией на программное обеспечение с открытым исходным кодом.
При отображении этот код выдает следующее:
Добавление стилей к вашей веб-странице
Если вы просмотрите эту простую веб-страницу в браузере, вы обнаружите, что это просто текст.
Вы можете добавить изюминку на свои веб-страницы, используя таблицы стилей. Таблица стилей обычно представляет собой отдельный файл, который сообщает веб-браузеру, как отображать определенные части вашей веб-страницы. Здесь вы можете установить шрифты веб-страницы, цвета фона или другие стили.
Формат таблицы стилей сильно отличается от HTML. В таблицах стилей вы указываете имя тега или «элемента», который хотите изменить, а затем перечисляете различные стили в наборе фигурных скобок. Например, эта простая таблица стилей определяет цвет текста и цвет фона для всего, что находится внутри блока, то есть для всей страницы.
корпус {
цвет: черный;
background-color: белый;
}
Если вы только учитесь создавать веб-страницы, я рекомендую вам начать с этих простых инструкций таблицы стилей:
- background-color: color ;
- цвет: цвет ;
- вес шрифта: полужирный;
- стиль текста: курсив;
- оформление текста: подчеркивание;
- высота: размер ; и ширина: размер ; (полезно в настройке размера изображения)
- выравнивание текста: по центру;
Вы можете встроить таблицу стилей в свою HTML-страницу, включив ее в раздел head , используя блок
Проект FreeDOS FreeDOS — это программное обеспечение с открытым исходным кодом! Загрузка и использование FreeDOS ничего не стоит.
Добро пожаловать в FreeDOS
Вы также можете поделиться FreeDOS с другими пользователями! И вы можете просматривать и редактировать наш исходный код, поскольку все программы FreeDOS распространяются под Стандартной общественной лицензией GNU или аналогичной лицензией на программное обеспечение с открытым исходным кодом.