Как создать свой личный блог: Пошаговое руководство

Я опубликовал статью о том, как я создал свой блог и почему я использовал определенную технологию. Многим она понравилась, и они захотели завести свои собственные блоги. Итак, если вы хотите завести личный блог без использования сторонних платформ, следуйте этому руководству.
В этом посте вы узнаете, как создать свой собственный экземпляр моего блога. Я расскажу обо всем, начиная от SEO и заканчивая хостингом и настройкой Google AdSense. Не волнуйтесь, все сторонние инструменты и сервисы, использованные для создания этого сайта, имеют бесплатные тарифные планы.

Преимущества личного блога

• Полный контроль над своим контентом.
• Добавляйте свои собственные функции.
• Монетизация контента по своему усмотрению.

Давайте начнем

Основные функции этого блога

1. Посты — Статьи/Учебники/Руководства
2. Сниппеты — мини-блоги
3. Поиск,
   • Основной поиск — центральная функция поиска, которая позволяет пользователям искать все, что угодно.
   • Страница поиска — Поиск по категориям, который позволяет посетителям искать конкретный контент.
4. Аудиопосты — Добавление аудиостатей
5. Система комментариев — Система комментариев на базе GitHub.
6. Ko-fi — Встраиваемый виджет пожертвований позволяет вашим поклонникам жертвовать вам, не покидая вашего сайта.
7. Монетизация,
   • Веб-монетизация — Люди могут помочь создателям, просто читая их контент.
   • AdSense — Получайте доход, показывая рекламу.
8. Аналитика — Аналитика Google поможет вам узнать, как посетители взаимодействуют с вашим сайтом и контентом.
9. Полностью отзывчивый.
10. 100 баллов SEO.

Перед началом работы

• Этот блог не был тщательно протестирован.
• Некоторые страницы могут быть не отзывчивы на устройствах с низким разрешением экрана.
• Если у вас есть вопросы по настройке, пожалуйста, начните обсуждение здесь или поищите ответы в прошлых обсуждениях.

Предварительные условия

• Если вы не хотите вносить изменения в исходный код, то для настройки этого блога вам потребуется лишь небольшой опыт разработки (умение следовать шагам, описанным в этой статье).

Давайте начнем

Настройка проекта Hygraph (ранее GraphCMS)

• Создайте или войдите в свой аккаунт Hygraph.
• Нажмите на кнопку ниже, чтобы клонировать мой проект Hygraph.

• Создайте или войдите в свой аккаунт Cloudinary.
• Следуйте этому руководству по установке расширения Cloudinary UI в Hygraph.

Теперь вы можете начать добавлять контент.

Настройка Giscus

Giscus — это система комментариев на базе GitHub Discussions.

• Прочитайте эту статью, написанную мной на freeCodeCamp News, чтобы настроить giscus. (Прочитайте раздел «Как интегрировать giscus в ваш блог»).
• Скопируйте сгенерированный тег script и запишите его где-нибудь.
• Откройте файл giscus.json и замените URL моего сайта на URL вашего сайта.

Настройка Google Analytics

• Создайте или войдите в свой аккаунт Google Analytics.
• Создайте свойство GA4 для вашего блога.
• Скопируйте идентификатор измерения свойства и запишите его где-нибудь.

Настройка Coil

Coil — это провайдер веб-монетизации. Вы можете зарегистрироваться на Coil в качестве создателя и добавить тег веб-монетизации на свой сайт.

• Создайте или войдите в свою учетную запись Coil.
• Подключите свой аккаунт Uphold к катушке, чтобы получать выплаты на свой кошелек Uphold.
• Перейдите в раздел «Настройки» -> «Выплаты».
• Скопируйте «PAYMENT POINTER» и запишите его. Ваш указатель выплат должен выглядеть примерно так.

$ilp.uphold.com/82eq8NKY4NEZ

Настройка BeyondWords

Если вы хотите добавлять аудиостатьи к своим постам, то создайте учетную запись BeyondWords, в противном случае просто пропустите этот раздел.

• Создайте или войдите в свой аккаунт BeyondWords.
• Создайте проект и начните создавать аудиозаписи.
• Вы можете получить аудио-идентификатор из «Shareable URL».

https://audio.beyondwords.io/play/AUDIO_ID

Настройка Ko-fi

Ko-fi — это платформа, которая позволяет принимать пожертвования, членство и продажи от вашей поддержки. Она имеет несколько больше преимуществ по сравнению с BuyMeACoffee.

• Создайте или войдите в свою учетную запись ko-fi.
• Перейдите на страницу «Кнопки и виджеты» -> Нажмите на «Ko-fi Donation Widget» -> Выберите «Панель пожертвований».
• Скопируйте URL для вставки и запишите его где-нибудь. URL должен выглядеть следующим образом.

https://ko-fi.com/YOUR_KOFI_USERNAME/?hidefeed=true&widget=true&embed=true&preview=true

Настройка рассылки

В качестве сервиса рассылки я использую Substack. Вы можете использовать любой сервис по своему усмотрению. Поместите URL в эту переменную env.

NEXT_PUBLIC_SUBSTACK_URL=

Настройка фронтенда

Теперь у нас есть готовый бэкенд CMS. Давайте настроим фронтенд.

• Откройте репозиторий Blog GitHub.
• Пометьте его звездочкой ⭐.
• Форкните репо.
• Клонируйте форкнутое репо.

git clone https://github.com/[YOUR_USERNAME]/[YOUR_FORKED_PROJECT_NAME].git

• Откройте клонированную копию в редакторе кода или IDE.
• Откройте папку public,
  • Замените мои иконки на ваши. Используйте это для генерации иконок.
  • Откройте файл manifest.json и замените мою информацию на вашу.
• Откройте файл config/site.config.js и замените мою информацию на вашу. (Не волнуйтесь, если вы не можете заполнить некоторые детали. Мы расскажем о них позже в этой статье).
• Внесите изменения в репозиторий GitHub.

Развертывание в Netlify

• Создайте или войдите в свою учетную запись Netlify.
• Нажмите на «Добавить новый сайт» -> Выберите «Импортировать существующий проект».
• Выберите «GitHub» и авторизуйте Netlify для подключения к GitHub.
• Найдите свой репозиторий и выберите его.
• В настройках сайта оставьте все по умолчанию и нажмите кнопку «Показать дополнительные».
• Нажмите на «Новая переменная» и обратитесь к файлу .env.example. Вы должны добавить все переменные env в ваш проект Netlify.
• После добавления всех переменных нажмите «Развернуть сайт».
• Добавьте пользовательский домен или просто выберите поддомен Netlify.

Настройка Google AdSense

• Создайте или войдите в свой аккаунт Google AdSense.
• Добавьте свой сайт, нажав «Добавить сайт».
• Подождите день или два, чтобы ваш сайт был принят.

Если сайт принят, выполните следующие шаги для создания рекламных блоков.

• Перейдите в раздел «Настройки» -> «Информация об аккаунте» -> скопируйте «Publisher ID» и вставьте его в файл site.config.js.
• Перейдите в раздел «Объявления» -> «По рекламным блокам».
• Нажмите на «Отображать объявление». Назовите ваше объявление «Page top Ad» -> Нажмите «Создать». Скопируйте значение data-ad-slot и вставьте в файл site.config.js.
• Точно так же создайте «In-feed Ad» и добавьте номер слота в site.config.js.
• Следуйте этому, чтобы добавить файл ads.txt в папку public. Если такой файл уже существует, замените его своим файлом ads.txt.

Внести свой вклад

Хотите добавить функцию? Нашли ошибку? Или хотите улучшить кодовую базу? — Откройте проблему.

Вот и все! Если у вас возникли проблемы с настройкой, пожалуйста, начните обсуждение, я обязательно вам помогу.

Поделитесь ссылкой на свой блог в комментариях 👇. Следите за обновлениями 💖.