Как можно бесплатно создать свой блог и бесплатно его поддерживать?

28-10-2019

Как можно бесплатно создать свой блог и бесплатно его поддерживать?

Для создания этого блога Вам понадобятся базовые знания css/html и чуточку vue.js . Ах да, и еще GitHub.

Итак, Вы решили создать свой собственный блог. И Вам бы не хотелось тратить денежные средства на его создание и поддержку. Оказывается, есть возможность создать блог, удовлетворив этим высоким требованиям. На примере Gridsome мы сможем создать свой блог и запустить его в интернете. Gridsome - это современный Vue.js фрэймворк для создания Markdown файлов, статических веб сайтов и многого другого. Со всеми его возможностями можно ознакомиться на официальном сайте. Нас интересует возможность создания блога, а для этого прекрасно подходят несколько бесплатных шаблонов со страницы Gridsome Starters. Я остановлюсь на шаблоне Gridsome Portfolio Starter, предоставленным Andre Madarang, с демо версией которого можно ознакомиться тут.

Возможности этого шаблона

  • понятный и простой дизайн
  • используется Tailwind CSS v1 (with PurgeCSS) библиотека
  • это блог со статьями в формате markdown
  • есть дневная и ночная темы
  • есть возможность поиска статей блога
  • есть возможность разбивать статьи по страницам (Basic pagination)
  • есть возможность разбивать статьи по категориям
  • есть готовая страница 404

Установка шаблона

  1. Установите Gridsome CLI npm install --global @gridsome/cli
  2. Заберите себе код проекта git clone https://github.com/drehimself/gridsome-portfolio-starter.git
  3. cd gridsome-portfolio-starter
  4. npm install
  5. Запустите проект локально gridsome develop , который будет доступен по адресу http://localhost:8080
  6. Немного познакомьтесь с возможностями проекта, чтобы определиться с будущими изменениями, связанными с адаптацией сайта под свои нужды.

Адаптация сайта под свои нужды

Безусловно, Вы захотите создавать свои страницы и свое меню. Для создания страниц сайта достаточно создать их в папке /src/pages (с деталями Вы можете познакомиться тут). Идея очень проста:

  1. Вы создаёте новую страницу например src/pages/AboutUs.vue , к которой Вы сможете обращаться в будущем по адресу /about-us
  2. Если Вы захотите создать ссылку на эту страницу, Вам нужно использовать простой синтаксис в шаблоне, например в /src/layouts/Default :

        <li class="mr-8 ">
            <g-link to="/about-us">О проекте</g-link>
        </li>
  3. Для создания новых статей достаточно просто создать новый файл markdown (можно использовать готовые, изменив их содержание). Но не забудьте создавать уникальный параметр path в файлах md. Базовые знания по Markdown можно получить тут.
  4. Если Вам нужны дополнительные возможности на сайте, Вы всегда можете подключить готовые опции через плагины. Я пока остановился на @gridsome/plugin-google-analytics и Yandex.Metrika plugin for Gridsome плагинах, позволяющих легко настроить аналитику на сайт от Google и Yandex.

Вот и всё!

Вам осталось положить в GitHub код своего изменённого проекта. И потом просто выложить его в интернете через Netlify. Благодаря наличаю в проекте файла netlify.toml Вам не придётся делать ничего дополнительного, кроме как просто нажать на кнопку ... Вот начинка файла netlify.toml:

[build]
  publish = "dist"
  command = "gridsome build"

Как GitHub так и Netlify позволяют всё это сделать абсолютно бесплатно. Netlify позволяет Вам бесплатно даже привязать доменное имя (при необходимости). Далее схема работы блога будет такова:

  1. Код проекта будет всегда храниться в GitHub.
  2. При любых изменениях в файлах проекта на GitHub (в той ветке, изменения в которой отслеживаются Netlify) Ваш сайт будет автоматически обновлён.
  3. Изменять файлы в GitHub Вы можете либо локально (предварительно склонировав свой проект) либо через GitHub.

В любом случае, GitHub будет выступать в роли аминистративной части (админки) Вашего сайта. Поэтому желательно при создании репозитория блога в GitHub сделать его закрытым (Private).

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