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 комментариев
Хочу кухню как у подруги: зачем в Циан сделали поиск квартир по фото

Рассказывает Юлия Зыкова, руководитель команды «Аудитория» в Циан.

Бот, который сделает маму счастливее

Kind Bot напечатает и отправит по почте фото вашей маме. В 2 клика.

Наследник Рокфеллера, сын Софи Лорен, боксёр и продюсер: история француза, обманувшего Рурка, Ван Дамма и других звёзд Статьи редакции

СМИ прозвали Кристофера Роканкура звёздным мошенником: его жертвами были голливудские знаменитости и американские предприниматели. Точная сумма ущерба от действий француза неизвестна, но сам он утверждает, что за свою жизнь «заработал» $40 млн.

Кристофер Роканкур и Наоми Кэмпбелл francetvinfo
Бизнес — как ребенок: как мамы совмещают свое дело с заботой о детях

Как совмещать бизнес и семью? Ко Дню матери своими историями поделились бизнесвумен, которые работают c ЮKassa и занимаются детьми. Читайте, как им удается сохранять жизненный баланс и добиваться успеха.

Английский язык. Как это надо делать, если вернуть 2 года назад

Всегда считал себя неспособным к языкам, школу закончил, мягко говоря, с 0 знанием Английского языка. Как ,наверно, 95% населения нашей страны.

Завод по производству идей. Как работают акселераторы, зачем они нужны стартапам и куда идти с идеей прямо сейчас

По данным Startup Genome, 9 из 10 стартапов терпят неудачу. Возможных причин «смерти» много: недостаточно протестированная гипотеза, неподтвержденная юнит-экономика, неверная стратегия или просто неудача в подходе к продажам.

Как у меня украли 600 тысяч с карты, а Тинькофф нарушает федеральный закон

Спойлер: я НЕ вводил никуда код, НЕ переходил по ссылкам и НЕ сообщал данные карты.

Я всегда считал себя финансово грамотным человеком, сам когда-то работал в банке, соблюдал цифровую гигиену, держал деньги на нескольких счетах, не привязывал основную карту в непонятных сервисах, в 90% оплат пользовался Google Pay. Когда родственники присылали…

Возник по просьбе бразильских банкиров и стал любимым напитком солдат во время Второй мировой: история Nescafe Статьи редакции

В 2021 году Nescafe — крупнейшее подразделение Nestle и бренд, который оценивается больше чем в $20 млрд. По собственным данным компании, в мире каждую секунду выпивают более 5000 чашек напитка.

Из науки в IT: как создать свой стартап и стать преподавателем

Как перейти в IT из другой сферы? Как разработать курс, которому нет аналогов? Как студенту получить максимум пользы от занятий? Рассказывает преподаватель OTUS Сергей Окатов, руководитель курсов «Kotlin Backend Developer» и «Kotlin Developer. Basic».

Потратили $1 млн на клинику для профилактики здоровья зубов в Москве — и через десять месяцев закрыли проект

История о неудачном запуске монопродукта в стоматологии — его пришлось переформатировать.

Та самая клиника
Что Tele2 предлагает клиентам в «черную пятницу»

На главной распродаже года клиентов компании ждут сразу несколько интересных предложений: скидки на смартфоны, пакеты SMS и безлимитный трафик на YouTube, Яндекс.Карты, Яндекс.Навигатор.

null