Сайт для документації API на Jekyll

Попередні умови

Припустимо, що на вашому комп’ютері встановлено Jekyll, клієнт Git та редактор Visual Studio Code. Якщо ні, спочатку прочитайте статтю про Jekyll.

Щоб перевірити, чи встановлено Jekyll:

1. Відкрийте командний рядок.

   

2. Уведіть jekyll -v і натисніть Enter.

   

Щоб перевірити, чи встановлено Git і VSCode:

1. У командному рядку введіть git --version.

   

2. Переконайтесь, що у вас встановлено Visual Studio Code.

   

Завантажте тему

Щоб завантажити тему Jekyll для сайту з документацією API:

1. Перейдіть на сторінку репозиторію GitHub.

2. Виберіть Code.

3. Виберіть Download ZIP.

   

4. Збережіть архівовану папку проекту собі на комп’ютер.

5. Розпакуйте папку.

Запустіть сайт локально

Перш ніж публікувати цей сайт в інтернеті, давайте перевіримо, як він працює локально на вашому комп’ютері.

Установіть Bundler

1. Перейдіть до розташування, де ви розпакували папку проекту.

2. Видаліть існуючі файли Gemfile і Gemfile.lock.

   

3. У провіднику файлів скопіюйте шлях до папки проекту.

   У моєму випадку це c:\Users\ivanc\aviator-jekyll-template-master\

   

4. У командному рядку змініть каталог на шлях до папки проекту. Натисніть Enter.

   cd c:\Users\ivanc\aviator-jekyll-template-master\

5. Уведіть gem install bundler і натисніть Enter.

   

6. Уведіть такі команди.

   bundle init
   
   bundle install
   

   

   Ці команди створили нові файли Gemfile у папці вашого проекту.

Bundle update

1. Відкрийте файл Gemfile за допомогою Блокнота.

   

2. Видаліть усе в цьому файлі.

3. Введіть наступні дані та збережіть файл.

   source 'https://rubygems.org'
   
   gem 'jekyll', '3.7.2'
   gem 'tzinfo-data'
   
   group :jekyll_plugins do
    gem 'jekyll-seo-tag', '2.4.0'
    gem 'jekyll-sitemap', '1.2.0'
   end
   

   

4. Уведіть bundle update і натисніть Enter.

   

Скомпілюйте сайт

Щоб скомпілювати сайт Jekyll локально:

1. Уведіть bundle exec jekyll serve і натисніть Enter.

   

2. Скопіюйте адресу сервера:

   http://127.0.0.1:4000

3. Вставте його у свій браузер, і ви побачите, як ваш сайт запущено локально.

   

Опублікуйте сайт в інтернеті

Коли ви закінчите редагувати сайт локально, настав час опублікувати його в інтернеті, щоб його бачили всі. У цьому прикладі я буду використовувати платформу Vercel для розгортання та розміщення вашого сайту. Але спочатку потрібно завантажити папку проекту на GitHub.

Завантажте на GitHub

Щоб завантажити папку проекту на GitHub:

1. Відкрийте папку проекту у VSCode.

2. Виберіть піктограму Source Control.

   

3. Виберіть Publish to GitHub.

4. Виберіть Publish to GitHub public repository.

   

   Коли папку проекту буде завантажено до репозиторію GitHub, ви побачите це повідомлення про успішне завершення операції.

   

5. Виберіть Open in GitHub, щоб переглянути папку проекту, завантажену та синхронізовану в репозиторії GitHub.

   

Публікація за допомогою сервіса Vercel

Щоб опублікувати свій сайт в інтернеті, скористайтеся сервісом Vercel.

1. Перейдіть на сторінку Vercel.

2. Виберіть Continue with GitHub.

   

3. Виберіть Import Project.

   

4. Виберіть Continue, щоб імпортувати ваш проект із GitHub.

   

5. Уведіть посилання на ваш репозиторий GitHub і виберіть Continue:

   https://github.com/ivancheban/aviator-jekyll-template-master

   

6. Уведіть назву проекту: наприклад, aviator-jekyll-template-master. Виберіть Deploy.

   Примітка

   Цю назву буде використано в посиланні на ваш сайт. Ви завжди можете змінити назву сайту в налаштуваннях Vercel у розділі Domains.

   

   Примітка

   Компіляція проекту займає кілька хвилин. Наберіться терпіння.

   Коли компіляція закінчиться, ви побачите цей веселий екран про успішну публікацю сайту.

   

7. Виберіть Visit, щоб перейти на сторінку вашого сайту з документацією API, доступного онлайн.

   Маєте побачити ваш сайт, подібний до цього:

   https://aviator-jekyll-template-master.vercel.app/