SlideShare a Scribd company logo
1 of 25
Download to read offline
GitHub -
це не тільки код
як безкоштовно захостити сайт та навчитись
чогось корисного
Бабич О.В. © 2015
http://ProductivityBlog.com.ua
Для кого ця лекція?
Лекція буде цікавою, якщо ви:
● ентузіаст
● розробник ПО
з відкритим кодом
● техногік
● ...
Про що піде мова
Що таке Git?
● розподілена система керування версіями файлів та спільної роботи
● створена Лінусом Торвальдсом для управління розробкою ядра Linux
● вільне ПЗ, випущене під ліцензією GNU GPL версії 2
● офіційний сайт: http://git-scm.com/
Git в кишені
Ви можете розгорнути Git-сервер прямо на своєму телефоні!
Gidder (beta)
● повноцінний Git
● керування користувачами і репозиторіями
● підтримка DDNS
Git-клієнтів в Play market’і теж вистачає!
Git та середовища розробки
Підтримується прямо “з коробки” всіма
найпопулярнішими IDE:
● Microsoft Visual Studio
● Microsoft Visual Studio Code
● Netbeans
● IntelliJ IDEA
● AIDE для Android!
● …
Що таке GitHub?
● один з найбільших веб-сервісів для спільної
розробки програмного забезпечення
“місце, де народжується програмне забезпечення”
● базується на системі керування версіями Git
● існують безкоштовні та платні тарифні плани
● безкоштовний для проектів з відкритим вихідним кодом
● має елементи соціальної мережі
Для чого вам Git?
● хостинг коду вашого проекту
● хостинг чернеток вашої книги
● портфоліо ваших проектів - своєрідне резюме
● швидка публікація фрагментів тексту (коду) з Gist
● місце, де можна “потягти” потрібний код:-)
● хостинг сайтів проектів
● хостинг персонального сайту з GitHub Pages
GitHub Pages
● сайти для ваших проектів
○ для кожного проекту
● персональний сайт (сайт організації)
○ може бути тільки один
○ можна прив’язати власний домен
● лише HTML/JavaScript/CSS
● Підтримується Markdown
● Вбудований Jekyll
Безкоштовний тарифний план:
необмежена кількість співробітників та публічних репозиторіїв
Як створити персональний сайт?
Два прості кроки:
Створюємо репозиторій з назвою ім’я.github.io
Створюємо в ньому файл index.html
Все! Робимо коміт, пуш, і переходимо в браузері за посиланням
http://ім’я.github.io
Це може зайняти
кілька хвилин!
Наступні кроки
● створіть каталоги для зберігання додаткових файлів
○ додайте CSS, скрипти
● створіть каталоги для інших сторінок (розділів сайту) і додайте туди
файли index.html
○ <a href="/about">About</a>
● cкористайтесь Jekyll для створення блогу або новин
● прикріпіть свій власний домен
● створіть стрічку RSS, редиректи, власну сторінку повідомлення про
помилки...
ДЕМОстворення персонального сайту
Як створити сайт проекту?
Три простих кроки:
в параметрах репозиторію тиснемо кнопку
Launch automatic page generator
редагуємо README.md або пишемо вміст сторінки “з нуля”
обираємо тему оформлення
Все! Робимо коміт, пуш, і переходимо в браузері за посиланням
http://ім’я.github.io/репозиторій
Це може зайняти
кілька хвилин!
Наступні кроки
● створіть каталоги для зберігання додаткових файлів
○ додайте CSS, скрипти
● створіть каталоги для інших сторінок (розділів сайту) і додайте туди
файли index.html
○ <a href="/about">About</a>
● cкористайтесь Jekyll для створення блогу або новин
● прикріпіть свій власний домен
● створіть стрічку RSS, редиректи, власну сторінку повідомлення про
помилки...
ДЕМОстворення сайту проекту
Що таке Markdown?
● максимально полегшена мова розмітки, яку
створено з ухилом на читабельність, зручність
створення та публікації з подальшим перетворенням її на HTML
● ідеальний інструмент письменника, блогера, всіх, хто створює
контент
● вивчити можна за вечір!
Приклади: https://github.com/adam-p/markdown-here/wiki/Markdown-
Cheatsheet
Підтримка Markdown
● GitHub
○ файли README
○ GitHub Pages
● Visual Studio Code
● Notepad++*
● Netbeans*
● Wordpress*
● Microsoft Word*
* потрібно встановити відповідний плагін
ДЕМОстворення Markdown-файлів
Що таке Jekyll?
● простий генератор статичних сайтів
○ HTML/JavaScript/CSS
● створений з розрахунком на блоги
● не використовує базу даних для зберігання контенту
● підтримує Markdown
● вбудований рушій GitHub Pages
● офіційний сайт: http://jekyllrb.com/
Jekyll - це модно!
ДЕМОсторінки сайту з використанням Jekyll та Markdown
список новин
стрічка RSS
карта сайту
http://goo.gl/BEIttO
раджу почитати - це дуже детальна та наочна інструкція для початківців
з GitHub Pages та Jekyll
Є питання?
Дякую за увагу!

More Related Content

Similar to GitHub pages

Автоматизація створення контенту. Анастасія Красюкова
Автоматизація створення контенту. Анастасія КрасюковаАвтоматизація створення контенту. Анастасія Красюкова
Автоматизація створення контенту. Анастасія Красюкова
Collaborator.pro
 
Continious integration jet brains teamcity. Віталій Галушка
Continious integration jet brains teamcity. Віталій ГалушкаContinious integration jet brains teamcity. Віталій Галушка
Continious integration jet brains teamcity. Віталій Галушка
HRdepartment
 

Similar to GitHub pages (20)

Mykola Kozyr Git Hub and GIS from user to developer
Mykola Kozyr   Git Hub and GIS from user to developerMykola Kozyr   Git Hub and GIS from user to developer
Mykola Kozyr Git Hub and GIS from user to developer
 
Як прокачати трьох студентів за п’ять тижнів
Як прокачати трьох студентів за п’ять тижнівЯк прокачати трьох студентів за п’ять тижнів
Як прокачати трьох студентів за п’ять тижнів
 
Як прокачати трьох студентів за п’ять тижнів
Як прокачати трьох студентів за п’ять тижнівЯк прокачати трьох студентів за п’ять тижнів
Як прокачати трьох студентів за п’ять тижнів
 
Web 5
Web 5Web 5
Web 5
 
Git4 all
Git4 allGit4 all
Git4 all
 
Автоматизація створення контенту. Анастасія Красюкова
Автоматизація створення контенту. Анастасія КрасюковаАвтоматизація створення контенту. Анастасія Красюкова
Автоматизація створення контенту. Анастасія Красюкова
 
Cтворення сайту в системі Ucoz
Cтворення сайту в системі UcozCтворення сайту в системі Ucoz
Cтворення сайту в системі Ucoz
 
Module_01.pdf (Модуль 1. Вступ до вебтехнологій. Структура HTML. Форматуванн...
Module_01.pdf (Модуль 1. Вступ до вебтехнологій. Структура HTML.  Форматуванн...Module_01.pdf (Модуль 1. Вступ до вебтехнологій. Структура HTML.  Форматуванн...
Module_01.pdf (Модуль 1. Вступ до вебтехнологій. Структура HTML. Форматуванн...
 
Html5
Html5Html5
Html5
 
Вчитись програмувати? Це весело і безкоштовно!
Вчитись програмувати? Це весело і безкоштовно!Вчитись програмувати? Це весело і безкоштовно!
Вчитись програмувати? Це весело і безкоштовно!
 
Global logic tech talk switching to Angular.js
Global logic tech talk switching to Angular.jsGlobal logic tech talk switching to Angular.js
Global logic tech talk switching to Angular.js
 
Павло Юрійчук — Перехід на Angular.js. Howto
Павло Юрійчук — Перехід на Angular.js. HowtoПавло Юрійчук — Перехід на Angular.js. Howto
Павло Юрійчук — Перехід на Angular.js. Howto
 
Chernivtsi Magento Meetup&Contribution day. V. Kublytskyi
 Chernivtsi Magento Meetup&Contribution day. V. Kublytskyi Chernivtsi Magento Meetup&Contribution day. V. Kublytskyi
Chernivtsi Magento Meetup&Contribution day. V. Kublytskyi
 
Magento 2 Community and Open Source
Magento 2 Community and Open SourceMagento 2 Community and Open Source
Magento 2 Community and Open Source
 
Continious integration jet brains teamcity. Віталій Галушка
Continious integration jet brains teamcity. Віталій ГалушкаContinious integration jet brains teamcity. Віталій Галушка
Continious integration jet brains teamcity. Віталій Галушка
 
основи веб дизайну розділ 2 1
основи веб дизайну розділ 2 1основи веб дизайну розділ 2 1
основи веб дизайну розділ 2 1
 
трдк 6-2016-інструменти
трдк 6-2016-інструментитрдк 6-2016-інструменти
трдк 6-2016-інструменти
 
Web 2 0
Web 2 0Web 2 0
Web 2 0
 
Web 2 0
Web 2 0Web 2 0
Web 2 0
 
HTML.pptx
HTML.pptxHTML.pptx
HTML.pptx
 

More from Alexander Babich

More from Alexander Babich (20)

Актуальні курси з мого арсеналу (Бабич О.В.)
Актуальні курси з мого арсеналу (Бабич О.В.)Актуальні курси з мого арсеналу (Бабич О.В.)
Актуальні курси з мого арсеналу (Бабич О.В.)
 
M365: Word, Excel, PowerPoint...
M365: Word, Excel, PowerPoint...M365: Word, Excel, PowerPoint...
M365: Word, Excel, PowerPoint...
 
M365: Інші сервіси та застосунки
M365: Інші сервіси та застосункиM365: Інші сервіси та застосунки
M365: Інші сервіси та застосунки
 
M365: OneDrive
M365: OneDriveM365: OneDrive
M365: OneDrive
 
M365: Завершення
M365: ЗавершенняM365: Завершення
M365: Завершення
 
M365: SharePoint
M365: SharePointM365: SharePoint
M365: SharePoint
 
M365: рекомендації
M365: рекомендаціїM365: рекомендації
M365: рекомендації
 
M365: Огляд платформи Microsoft365
M365: Огляд платформи Microsoft365M365: Огляд платформи Microsoft365
M365: Огляд платформи Microsoft365
 
M365: Вступ
M365: ВступM365: Вступ
M365: Вступ
 
M365: Роздаткові матеріали
M365: Роздаткові матеріалиM365: Роздаткові матеріали
M365: Роздаткові матеріали
 
Meet&Code - VR, метавсесвіт та криптовалюти (1).pptx
Meet&Code - VR, метавсесвіт та криптовалюти (1).pptxMeet&Code - VR, метавсесвіт та криптовалюти (1).pptx
Meet&Code - VR, метавсесвіт та криптовалюти (1).pptx
 
Ви обрали професію програміста
Ви обрали професію програмістаВи обрали професію програміста
Ви обрали професію програміста
 
Змішане навчання в ППФК
Змішане навчання в ППФКЗмішане навчання в ППФК
Змішане навчання в ППФК
 
Формування професійних інтересів студентів
Формування професійних інтересів студентівФормування професійних інтересів студентів
Формування професійних інтересів студентів
 
День відкритих дверей' 2021
День відкритих дверей' 2021День відкритих дверей' 2021
День відкритих дверей' 2021
 
Спробуйте Python
Спробуйте PythonСпробуйте Python
Спробуйте Python
 
06. Обучение и сертификация по Azure
06. Обучение и сертификация по Azure06. Обучение и сертификация по Azure
06. Обучение и сертификация по Azure
 
05.Внедрение Azure
05.Внедрение Azure05.Внедрение Azure
05.Внедрение Azure
 
04.Службы Azure - подробнее
04.Службы Azure - подробнее04.Службы Azure - подробнее
04.Службы Azure - подробнее
 
03.Сколько стоит облако
03.Сколько стоит облако03.Сколько стоит облако
03.Сколько стоит облако
 

Recently uploaded

Recently uploaded (10)

psychologistpresentation-230215175859-50bdd6ed.ppt
psychologistpresentation-230215175859-50bdd6ed.pptpsychologistpresentation-230215175859-50bdd6ed.ppt
psychologistpresentation-230215175859-50bdd6ed.ppt
 
Роль українців у перемозі в Другій світовій війні
Роль українців у перемозі в Другій світовій війніРоль українців у перемозі в Другій світовій війні
Роль українців у перемозі в Другій світовій війні
 
Балади про Робіна Гуда. Аналіз образу Робіна Гуда
Балади про Робіна Гуда. Аналіз образу Робіна ГудаБалади про Робіна Гуда. Аналіз образу Робіна Гуда
Балади про Робіна Гуда. Аналіз образу Робіна Гуда
 
Супрун презентація_presentation_for_website.pptx
Супрун презентація_presentation_for_website.pptxСупрун презентація_presentation_for_website.pptx
Супрун презентація_presentation_for_website.pptx
 
Супрун презентація_presentation_for_website.pptx
Супрун презентація_presentation_for_website.pptxСупрун презентація_presentation_for_website.pptx
Супрун презентація_presentation_for_website.pptx
 
Відкрита лекція на тему: "Сидерати - як спосіб виживання"
Відкрита лекція на тему: "Сидерати - як спосіб виживання"Відкрита лекція на тему: "Сидерати - як спосіб виживання"
Відкрита лекція на тему: "Сидерати - як спосіб виживання"
 
Горбонос 2024_presentation_for_website.pptx
Горбонос 2024_presentation_for_website.pptxГорбонос 2024_presentation_for_website.pptx
Горбонос 2024_presentation_for_website.pptx
 
Габон
ГабонГабон
Габон
 
Defectolog_presentation_for_website.pptx
Defectolog_presentation_for_website.pptxDefectolog_presentation_for_website.pptx
Defectolog_presentation_for_website.pptx
 
Проблеми захисту лісу в Україні та шляхи вирішення
Проблеми захисту лісу в Україні та шляхи вирішенняПроблеми захисту лісу в Україні та шляхи вирішення
Проблеми захисту лісу в Україні та шляхи вирішення
 

GitHub pages

  • 1. GitHub - це не тільки код як безкоштовно захостити сайт та навчитись чогось корисного Бабич О.В. © 2015 http://ProductivityBlog.com.ua
  • 2. Для кого ця лекція? Лекція буде цікавою, якщо ви: ● ентузіаст ● розробник ПО з відкритим кодом ● техногік ● ...
  • 4. Що таке Git? ● розподілена система керування версіями файлів та спільної роботи ● створена Лінусом Торвальдсом для управління розробкою ядра Linux ● вільне ПЗ, випущене під ліцензією GNU GPL версії 2 ● офіційний сайт: http://git-scm.com/
  • 5. Git в кишені Ви можете розгорнути Git-сервер прямо на своєму телефоні! Gidder (beta) ● повноцінний Git ● керування користувачами і репозиторіями ● підтримка DDNS Git-клієнтів в Play market’і теж вистачає!
  • 6. Git та середовища розробки Підтримується прямо “з коробки” всіма найпопулярнішими IDE: ● Microsoft Visual Studio ● Microsoft Visual Studio Code ● Netbeans ● IntelliJ IDEA ● AIDE для Android! ● …
  • 7. Що таке GitHub? ● один з найбільших веб-сервісів для спільної розробки програмного забезпечення “місце, де народжується програмне забезпечення” ● базується на системі керування версіями Git ● існують безкоштовні та платні тарифні плани ● безкоштовний для проектів з відкритим вихідним кодом ● має елементи соціальної мережі
  • 8. Для чого вам Git? ● хостинг коду вашого проекту ● хостинг чернеток вашої книги ● портфоліо ваших проектів - своєрідне резюме ● швидка публікація фрагментів тексту (коду) з Gist ● місце, де можна “потягти” потрібний код:-) ● хостинг сайтів проектів ● хостинг персонального сайту з GitHub Pages
  • 9. GitHub Pages ● сайти для ваших проектів ○ для кожного проекту ● персональний сайт (сайт організації) ○ може бути тільки один ○ можна прив’язати власний домен ● лише HTML/JavaScript/CSS ● Підтримується Markdown ● Вбудований Jekyll Безкоштовний тарифний план: необмежена кількість співробітників та публічних репозиторіїв
  • 10. Як створити персональний сайт? Два прості кроки: Створюємо репозиторій з назвою ім’я.github.io Створюємо в ньому файл index.html Все! Робимо коміт, пуш, і переходимо в браузері за посиланням http://ім’я.github.io
  • 12. Наступні кроки ● створіть каталоги для зберігання додаткових файлів ○ додайте CSS, скрипти ● створіть каталоги для інших сторінок (розділів сайту) і додайте туди файли index.html ○ <a href="/about">About</a> ● cкористайтесь Jekyll для створення блогу або новин ● прикріпіть свій власний домен ● створіть стрічку RSS, редиректи, власну сторінку повідомлення про помилки...
  • 14. Як створити сайт проекту? Три простих кроки: в параметрах репозиторію тиснемо кнопку Launch automatic page generator редагуємо README.md або пишемо вміст сторінки “з нуля” обираємо тему оформлення Все! Робимо коміт, пуш, і переходимо в браузері за посиланням http://ім’я.github.io/репозиторій
  • 16. Наступні кроки ● створіть каталоги для зберігання додаткових файлів ○ додайте CSS, скрипти ● створіть каталоги для інших сторінок (розділів сайту) і додайте туди файли index.html ○ <a href="/about">About</a> ● cкористайтесь Jekyll для створення блогу або новин ● прикріпіть свій власний домен ● створіть стрічку RSS, редиректи, власну сторінку повідомлення про помилки...
  • 18. Що таке Markdown? ● максимально полегшена мова розмітки, яку створено з ухилом на читабельність, зручність створення та публікації з подальшим перетворенням її на HTML ● ідеальний інструмент письменника, блогера, всіх, хто створює контент ● вивчити можна за вечір! Приклади: https://github.com/adam-p/markdown-here/wiki/Markdown- Cheatsheet
  • 19. Підтримка Markdown ● GitHub ○ файли README ○ GitHub Pages ● Visual Studio Code ● Notepad++* ● Netbeans* ● Wordpress* ● Microsoft Word* * потрібно встановити відповідний плагін
  • 21. Що таке Jekyll? ● простий генератор статичних сайтів ○ HTML/JavaScript/CSS ● створений з розрахунком на блоги ● не використовує базу даних для зберігання контенту ● підтримує Markdown ● вбудований рушій GitHub Pages ● офіційний сайт: http://jekyllrb.com/ Jekyll - це модно!
  • 22. ДЕМОсторінки сайту з використанням Jekyll та Markdown список новин стрічка RSS карта сайту
  • 23. http://goo.gl/BEIttO раджу почитати - це дуже детальна та наочна інструкція для початківців з GitHub Pages та Jekyll