Блог Gatsby, интегрированный с Netlify CMS
Я хотел создать свой блог, но бесплатно. И я это сделал.
Начнем с нуля.
Я сказал вам, что хочу создать бесплатный блог. Итак, я пошел изучать технологию, лежащую в основе этого.
Сначала я изучил HTML, CSS и все связанные с этим вещи. Но создать простой блог в некотором роде немного сложнее, чем кодировать. А за хостинг нужно платить, поскольку блог состоит из серверной части, которую нельзя разместить на страницах Netlify, GitHub и т. Д. Кроме того, для этого нам необходимо создать CMS (систему управления контентом).
Итак, я попытался создать блог, используя другие технологии.
Я узнал о WordPress.org. Там вы можете бесплатно получить множество шаблонов блогов. Но за хостинг надо платить. Еще есть Wordpress.com, но он показывает рекламу бесплатного хостинга.
После этого я узнал о Medium, Dev и Hashnode. И я их попробовал. Они предоставляют бесплатный поддомен с бесплатным хостингом. Но там ваши блоги будут заблокированы на своих сайтах. Так что мне нужно было что-то другое.
Вот мой блог на Medium.
Потом попробовал Strapi, Ghost, Contentful. Фактически, они предоставляют готовые CMS для блогов. Даже freeCodeCamp использует Ghost для CMS. Но мне это было нелегко, и я пропустил это. Также за хостинг Ghost хочет 9 долларов в месяц.
Позже я узнал о новой концепции под названием «Генератор статических сайтов». И это действительно спасло мне жизнь.
Проще говоря, Static Site Generator генерирует статический HTML-сайт, который помогает легко отображать данные. Благодаря этому статические сайты работают быстро.
Поэтому я попробовал несколько методов (перечисленных выше), и мне больше всего понравился Static Site Generator.
вступление
Я узнал, что генератор статических сайтов можно создать с помощью Gatsby, Hugo и т. Д. Поэтому я поискал на YouTube, чтобы создать блог с помощью Gatsby, и нашел соответствующие видео.
Узнав больше об этом из блогов, статей и документации, я наконец создал блог Гэтсби.
А здесь я помогу вам создать его для себя. Вы рады его создать? Ваш ответ должен быть утвердительным.
Тогда приступим.
Что такое Гэтсби?
Gatsby - это фреймворк с открытым исходным кодом, который в основном занимается React для создания веб-сайтов и приложений.
Самое замечательное в Гэтсби то, что вы можете создать веб-сайт за считанные минуты. И речь идет не о блогах, вы можете создать магазин электронной коммерции, портфолио, домашнюю страницу компании, веб-сайты для стартапов и т. Д.
Даже вы можете создавать прогрессивные веб-приложения с помощью Gatsby.
Вы ошеломлены такими замечательными функциями? Что ж, несомненно, и вы хотите узнать об этом больше.
Давайте быстро начнем
Шаг 1. Установите Gatsby-CLI глобально.
Для работы с Gatsby вам необходимо установить Gatsby CLI глобально. Для этого вам необходимо установить Node.js. Поскольку npm является частью Node.js, он будет установлен вместе с node.js. Помимо этого, вам также необходимо установить git, поскольку мы будем иметь дело с GitHub.
Поскольку вы устанавливаете Node.js, убедитесь, что это последняя версия. В противном случае обновите свою версию Node.js.
А затем давайте напишем следующую команду в любом каталоге.
npm install -g gatsby-cli
Приведенные выше команды установят Gatsby CLI глобально на нашу машину.
Вот и все, что вам нужно, чтобы начать работу с Гэтсби.
Шаг 2. Создайте новый проект
Вы можете создать новый проект, используя стартовые темы или вручную создать веб-сайт блога.
Здесь мы будем использовать шаблоны Gatsby-starter для нашего блога. Вы можете использовать множество бесплатных шаблонов. Вы можете щелкнуть здесь, чтобы увидеть шаблоны.
Мы будем использовать Гэтсби-стартер-блог, один из простейших блоговых сайтов. Вы можете использовать любой из шаблонов.
Выберите предпочтительный каталог и внутри него откройте командную строку и выполните следующую команду.
gatsby new blog https://github.com/gatsbyjs/gatsby-starter-blog
Вышеупомянутая команда проста:
Гэтсби: это означает, что мы имеем дело с Гэтсби.
новый: он создаст новый проект или просто папку Гэтсби.
блог: это имя папки или название проекта. Вы даже можете написать желаемое имя.
URL: URL-адрес предоставляется для клонирования кода.
Когда вы запустите указанную выше команду, она создаст папку с именем blog и добавит в нее файлы.
После полной установки откройте его в Visual Studio Code или любом редакторе кода, который вам может понравиться. Я использую Visual Studio Code, поскольку внутри него есть встроенный терминал.
Откройте встроенный терминал внутри VS Code и выполните следующую команду.
cd blog
И после этого,
gatsby develop
После завершения терминал проинструктирует посетить https://localhost:8000. И ваш блог о гэтсби готов.
И вы увидите сайт с похожим блогом, как показано ниже.
Да, вы можете изменить его по своему усмотрению и использовать. Это полнофункциональный блог. Поскольку у вас есть код, вы можете создать панель навигации, нижний колонтитул и даже раздел героя в зависимости от наших потребностей.
Я знаю, что это более 800 слов, и вы глубоко погрузились в него. И даже многие из вас это реализовали.
Я знаю, что вы ошеломлены. Так что дайте себе немного времени. Попробуйте играть, читать, делать то, что вам нравится. И приходите снова и на некоторое время добавьте эту историю в закладки, чтобы потом прочитать ее.
Измените свой веб-сайт блога
Стартовый блог, который мы использовали, является бесплатным, и мы можем использовать его бесплатно. Пришло время изменить свой блог.
Я использовал тот же метод для создания блога и изменил его в соответствии со своими потребностями.
Разместите свой блог-сайт
Теперь вы создали свой блог и даже изменили его веб-сайт в соответствии с вашими потребностями.
Пришло время разместить сайт вашего блога. Для этого воспользуемся Netlify. Netlify помогает нам бесплатно разместить веб-сайт.
Чтобы разместить веб-сайт на Netlify, вам необходимо зарегистрироваться и поместить в него свою папку.
После регистрации перейдите на вкладку сайтов и перетащите нужную папку.
Netlify предоставит вам бесплатный поддомен, который вы можете использовать.
Напишите сообщение в блоге
Вы можете написать свой блог из своей начальной папки блога и даже использовать Netlify CMS.
Поскольку мы используем Netlify для хостинга, мы можем использовать Netlify CMS для управления сообщениями в блогах.
Вот для этого ссылка. Если вы этого не понимаете, дайте мне знать в комментариях, и я напишу для этого полную статью.
Получите бесплатный домен
До сих пор мы создали блог, изменили его, разместили бесплатно и использовали Netlify CMS для управления нашей публикацией в блоге.
Теперь, наконец, мы получим бесплатный домен для нашего блога.
Но как? Используя Freenom.
Freenom позволяет нам получить бесплатный домен бесплатно на 1 год.
Подводим итоги
Надеюсь, статья вам понравилась. Эта статья предназначена для того, чтобы помочь читателю усвоить ценную информацию о бесплатном создании блога с использованием Gatsby и прояснить основы темы, не будучи слишком трудоемким.
Не стесняйтесь оставлять отзывы или высказывать свои сомнения.
На этом пока все - спасибо!
Вы можете подписаться на меня или прочитать другие мои истории.
