IT-инфраструктура для бизнеса и творчества

Cоздание сайта на GitHub

Для запуска сайта необязательно покупать хостинг, можно воспользоваться бесплатным сервисом GitHub Pages.

Шаг 1. Создание нового репозитория

Для создания репозитория заходим на сайт GitHub и в блоке Your repositories нажимаем кнопочку New repository.

Здесь необходимо заполнить параметры нового репозитория. Важно, чтобы название репозитория было в виде username.github.io, где username — ваш ник на GitHub.

Если вы зарегистрированы в качестве организации, ваш репозиторий должен иметь имя organization.github.io, где organization — название вашей компании на GitHub.

Обязательно ставим галочку на Initialize this repository with a README. А затем нажимаем кнопку Create repository.

Эдуард Шевелёв, shevelev.design

Шаг 2. Загрузка файлов

Репозиторий создан, теперь нужно загрузить файлы сайта. Воспользуемся интерфейсом GitHub. Нажимаем кнопку Upload files.

Эдуард Шевелёв, shevelev.design

Затем перетащим файлы в появившееся поле для загрузки. Добавим комментарий к нашему коммиту и нажмём кнопку Commit changes.

Эдуард Шевелёв, shevelev.design

Файлы успешно загружены.

Эдуард Шевелёв, shevelev.design

Шаг 3. Проверка работы сайта

Чтобы проверить работу сайта, достаточно перейти по адресу username.github.io, в моем случае это shevelevdesign.github.io.

Эдуард Шевелёв, shevelev.design

Шаг 4. Подключаем свой домен

Гитхаб позволяет использовать ваше доменное имя вместо стандартного username.github.io.

Для этого переходим во вкладку Settings в интерфейсе репозитория, и в разделе GitHub Pages в поле Custom domain введём название нашего домена и нажимаем кнопку Save.

Эдуард Шевелёв, shevelev.design

Далее необходимо изменить информацию о DNS-записях домена.

Нам нужно настроить A-запись домена, для этого переходим в панель управления DNS-записями вашего регистратора, и добавим следующие A-записи:

185.199.108.153

185.199.109.153

185.199.110.153

185.199.111.153

Эдуард Шевелёв, shevelev.design

Всё готово! В течение нескольких часов сайт начнет открываться с нового домена.

Все способы подключения собственного домена подробно описаны в памятке GitHub.

(function () { let cdnUrl = `https://specialsf378ef5-a.akamaihd.net/SelectelBranding/images/` let previousArticleNumber = null let currentArticleNumber = 0 let platform = 'Desktop' let articles = [ { name: 'camera', url: `${cdnUrl}CameraCat`, text: 'умную камеру для\u00A0наблюдения за\u00A0котиками', link: 'https://vc.ru/selectel/306690', num: 3 }, { name: 'chill', url: `${cdnUrl}ChillCat`, text: 'трекер, который подскажет, когда пора отдохнуть', link: 'https://vc.ru/promo/288561-eye-tracker', num: 1 }, { name: 'cloud', url: `${cdnUrl}CloudCat`, text: 'котика: даёшь ему «пять», а\u00A0он делает бэкап в облако', link: 'https://vc.ru/dev/294799-maneki-neko', num: 2 } ] let buttonCycle = document.querySelector('.button--cycle') let buttonChoose = document.querySelector('.button--choose') let buttonMobile = document.querySelector('.button--mobile') let textField = document.querySelector('.selectel-footer-subtitle') let imageAgent = document.querySelector('.image--agent') let banner = document.querySelector('.selectel-footer') buttonCycle.addEventListener('click', cycleClick) buttonChoose.addEventListener('click', () => sendEvent(`Promo ${articles[currentArticleNumber].num} Left`, 'Click')) buttonMobile.addEventListener('click', () => sendEvent(`Promo ${articles[currentArticleNumber].num} Left`, 'Click')) let media = window.matchMedia("(max-width: 570px)") media.addEventListener('change', matchMedia) function matchMedia() { if (media.matches) { platform = 'Mobile' } else { platform = 'Desktop' } update() } matchMedia() function cycleClick(event) { sendEvent(`Promo ${articles[currentArticleNumber].num} Right`, 'Click') if (event) { event.preventDefault() event.stopPropagation() } window.open('https://vc.ru/tag/selectelDIY', '_blank') //cycle(event) } function cycle(event) { // incrementArticleNumber() textField.innerHTML = generatedText() imageAgent.src = articles[currentArticleNumber].url + platform + '.svg?3' imageAgent.setAttribute("class", "") imageAgent.classList.add('image--agent', articles[currentArticleNumber].name) banner.href = articles[currentArticleNumber].link } function update() { banner.href = articles[currentArticleNumber].link imageAgent.src = articles[currentArticleNumber].url + platform + '.svg' textField.innerHTML = generatedText() } function incrementArticleNumber() { previousArticleNumber = currentArticleNumber if (currentArticleNumber >= articles.length - 1) { currentArticleNumber = 0 } else { currentArticleNumber++ } } const sendEvent = (label, action = 'Click') => { const value = `SelectelDIY — loc: Footer — ${label} — ${action}`; if (window.dataLayer !== undefined) { window.dataLayer.push({ event: 'data_event', data_description: value, }); } }; function generatedText() { let defaultText if (platform === 'Desktop') { defaultText = `Мы тут собрали %text%. Хотите научим?` } else { defaultText = `Мы тут собрали %text%.` } return defaultText.replace('%text%', articles[currentArticleNumber].text) } function getRandom(min, max) { min = Math.ceil(min) max = Math.floor(max) return Math.floor(Math.random() * (max - min + 1)) + min } (function create() { currentArticleNumber = getRandom(0, articles.length - 1) cycle() let page = document.querySelector('.page--entry') if (page) { function insertAfter() { let parents = page.querySelectorAll('[data-id="7"]') let referenceNode = parents[0] referenceNode.parentNode.insertBefore(banner, referenceNode.nextSibling); loaded() } setTimeout(() => insertAfter(), 0) } }()) function loaded() { banner.classList.add('loaded') } loadImages([ `${cdnUrl}CameraCatDesktop.svg`, `${cdnUrl}ChillCatDesktop.svg`, `${cdnUrl}CloudCatDesktop.svg`, `${cdnUrl}CameraCatMobile.svg`, `${cdnUrl}ChillCatMobile.svg`, `${cdnUrl}CloudCatMobile.svg?3`, ]) function loadImages(urls) { return Promise.all(urls.map(function (url) { return new Promise(function (resolve) { var img = document.createElement('img'); img.onload = resolve; img.onerror = resolve; img.src = url; }); })); } }())
0
13 комментариев
Популярные
По порядку
Написать комментарий...

GitHub Pages - лучше, чем вы думаете, комментаторы. Сравнение с Php и хостингами слишком прямолинейно, не забывайте, что php и github - технологии из разных эпох. Из-за этого многие преимущества оказались не раскрыты:

1) GitHub Pages имеет неограниченный хостинг, при условии что вы не храните большие файлы.
2) GitHub Pages не нужна база данных, т.к. базой данных является сам репозиторий. Например, вы можете хранить статьи как Markdown-файлы и верстать блог или новостной сайт при помощи Jekyll (liquid), как это сделано например у меня: https://mikush.in Да, поскольку репозиторий - открытый, вы не сможете хранить пароли - и слава богу, пользуйтесь OAuth.
3) Action Points - это дополнительные сервисы. Вышеупомянутый сайт работает без них абсолютно бесплатно
4) Трафик неограничен и труден для DDoS, т.к. ддосить и блокировать росговмаразму придётся айпишники самого GitHub
5) У GitHub есть API для всевозможных действий с репозиторием. При том что GitHub Pages - движок статических вебсайтов (static pages), с помощью API можно настроить взаимодействие с клиентами и различных ботов. Для комментариев/форума можно подключить Disqus.

Если есть вопросы, пишите в личку. ред.

10

Картинка на шаге 3 не очень подходит ресурсу...

3

На этом сайте (VC) обязательно следует помнить, что это не для коммерческих проектов. То есть разместить-то можно попытаться, но это как построить ларёк в зоне прибоя или в русле реки, что засыхает между дождями

GitHub Pages is not intended for or allowed to be used as a free web hosting service to run your online business, e-commerce site

https://help.github.com/en/github/working-with-github-pages/about-github-pages ред.

3

Данный сервис НЕ для тех, кто хочет "на халяву" закинуть свой интернет-магазин или какой-то коммерческий проект на вечный хостинг. Гитхаб - это инструмент, который попробовать должен каждый. 

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

Да, это не классический PHP хостинг и придется поработать со "статикой", но вам дают свободное место на диске на бесперебойном сервере, в худшем случае поддомен GitHub и удобный редактор с GIT. 

А уж о публикации своих наработок, opencource проектов - нет слов... ред.

2

Привет. Почему удалили о ceo Блогах на wordpress 2 ? Только сохранил ссылку хотел внедрить по новому. 

0

Добрый день! Статья вышла неполной, выйдет она немного позже. 
Кардинально поменялся robots.txt: https://shevelev.design/robots.txt

1

Спасибо. У меня в кеше сохранилось. 

0

Бесплатно и почти без регистрации. 

1

Что важно, без смс...

1

По тарифам не понятно немного. Что значит для собственного сайта 2,000 Actions minutes/month
Free for public repositories?
 И сайты только без баз данных? 

1

В бесплатном доступе 2000 минут/мес работы с GIT и редактором репозитория + 500мб места на диске. К сожалению без БД и PhpMyAdmin, проект больше для opencource.

Не имеет смысла, но можно дампить структуру базы данных и совмещать со скриптом генерации БД.

Бесплатные и платные тарифы описаны здесь: https://help.github.com/en/github/setting-up-and-managing-billing-and-payments-on-github/about-billing-for-github-actions

1

Комментарий удален

ссылка не проходит. Более верная https://alldomains.hosting/en/free-webspace.html

Но там получается вроде, только для тех кто там домен заказал. ред.

0

Комментарий удален

Ну даже у нас вот есть компании где бесплатно гигабайт дают, и php последних версий + базы данных. Главное искать. 
Такое предложение было бы актуально в году 2002, когда все на narod.ru сидели с его 20 мегабайтами. И главное хватало же их. Сейчас только JS скрипты больше весят на главной странице ))

0
Читать все 13 комментариев
Это Элви Рэй Смит: он мечтал создать анимационный фильм на компьютере, соосновал Pixar, но ушёл из компании из-за Джобса Статьи редакции

Смит создал альфа-канал, который используется в Photoshop и других редакторах, работал в Xerox и LucasFilm и убеждал всех, что за компьютерной графикой будущее, однако всерьез его никто не воспринимал – кроме Стива Джобса.

На сайтах с эквайрингом от ПСБ появился Yandex Pay

Покупатели с аккаунтом «Яндекса» смогут оплачивать покупки, не вводя данные карты.

Минэкономразвития РФ приняло предложения РСПП по совершенствованию рынка интеллектуальной собственности

На актуализации плана дорожной карты ТДК (трансформация делового климата) «Интеллектуальная собственность» в соответствии с пожеланиями бизнес-сообщества настоял первый заместитель председателя правительства Андрей Белоусов.

Не испытывал иллюзий по отношению к Билайну, но этот случай просто вывел из себя.

Путин поручил разработать вариант налогового вычета для частных инвесторов при долгосрочных вложениях в российские акции Статьи редакции

Фондовый рынок должен не только финансировать инвестиционные проекты, но и приносить доход гражданам, считает президент.

Kornia - Python библиотека для обработки изображений в задачах CV

В этой статье я хотел бы познакомить читателей с библиотекой для ЯП python — Kornia, имеющей богатый функционал в области computer vision. Библиотека написана с использованием pytorch, в ее основе лежат готовые решения, такие как torchvision, PIL, skimage, tf.image, OpenCV. В Kornia реализована возможность выполнения вычислений не только с…

Мвидео, облажались. Дважды

1. Мультиварка

Лайфхак в подборе: как ATS-системы помогают экономить время и бюджет рекрутеров

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

Эксперимент: оформляем банковские карты без бумажных документов

Оформление затянулось, но проект все равно продолжили развивать.

null