/first-website-webinar

Создай свой первый вебсайт за 2 часа

Записи вебинаров

Устанавливаем программы

  1. Скачай и установи Google Chrome если у тебя его ещё нет

  2. Скачай и установи VSCode vscode-setup

  3. Скачай и установи GIT git-setup-1

    git-setup-2

Настраиваем GIT

  1. Создай пустую директорию my-first-page и открой её в проводнике
  2. Нажми правой клавишей и выбери Git Bash Here
  3. Набери в терминале git config --global user.name "Your Name"
    • Напиши своё имя, а не Your Name :-)
    • Не забудь нажать Enter
  4. Запусти в терминале git config --global user.email "Your@Email"
    • тут твоя почта, а не Your@Email

Создаём сайт

  1. В терминале запусти команду code . - после неё откроется VSCode

  2. Создай новый файл с названием index.html create-index-html

  3. Нажми Ctrl + , чтобы открыть настройки VSCode

    • Если не сработало можно открыть через меню Code -> Preferences -> Settings

  4. Включи автосохранение (Auto Save) vscode-enable-autosave

  5. В первой строке файла index.html набери ! и нажми табуляцию. У тебя появится такой текст:

    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
</body>
</html>

  6. Набери в пустой строке между <body> и </body> текст Привет! Я - Твоё Имя

    • Если ты не настроил автосохранение, то сохрани нажав ctrl + S (cmd + S если у тебя MacOS)

  7. Открой в проводнике директорию my-first-page и нажми правой кнопкой на файле index.html

  8. В меню выбери пункт Открыть с помощью и выбери программу Google Chrome.

  9. У тебя должна открыться твоя страница со словами Привет! Я - Твоё Имя

Поздравляю! - Вы создали первую WEB-страницу.

Создаём аккаунт на Github

  1. Зарегистрируйся на Github если у вас ещё нет аккаунта
    • Введи Username, Email address и Password
    • Нажми кнопку Проверить (Check) и реши задачки
    • Нажми Create account
  2. Заполни анкету
    • What kind of work do you do, mainly? (например Software Engineer)
    • How much programming experience do you have? (например A little)
    • What do you plan to use GitHub for? (Например Learn to code и Host a project)
    • Нажми Complete setup
  3. Открой свой почтовый ящик указанный при регистрации
    • в письме [GitHub] Please verify your email address. нажмите ссылку Verify email address

Пора показать ваш сайт миру!

  1. Создай новый репозиторий на Github create-repo

  2. Введи основные данные репозитория

    • введи название
    • Проверь что выбран Public
    • Поставь галочку Add a README file
    • Нажми кнопку Create repository

    img/new-repo-params

  3. Найди ссылку для скачивания

    • Нажми зелёную кнопку Code
    • Проверь что выбран HTTPS
    • Скопируй ссылку

  4. Открой терминал в папке my-first-page (Правой клавишей внутри и Git Bash Here)

  5. В терминале выполни команду git clone сюда-вставь-скопированную-ссылку.

  6. Внутри папки my-first-page появится папка my-first-website

  7. Перенеси файл index.html в папку my-first-website.

    • Это можно сделать вручную через проводник или в терминале командой 
      mv index.html my-first-website/index.html

  8. Открой терминал во внутренней папке my-first-website

  9. Запусти поочереди следующие команды

    git add index.html
git commit -m 'My first page'
git push
    • Последняя команда попросит вас ввести username (то что вы ввели при регистрации на Github) и нажать Enter
    • Дальше вводим пароль (символы отображаться не будут) и снова Enter
    • Если ошиблись, запускаем git push ещё раз и вводим опять имя и пароль

  10. Если всё ок, то открывай свой репозиторий на Github my-github-repos

  11. Там должно быть 2 файла README.md и index.html

    • Если index.html - значит git push не сработал (запускайте ещё раз и читайте ошибку)

  12. Перейди на закладку Settings open-repo-settings

  13. Пролистай до раздела GitHub Pages

  14. Выбери в выпадающем списке main gh-pages-settins

  15. И нажми Save gh-pages-main-save

  16. Дождись пока ссылка на GH-Pages станет зелёной (примерно минуту) gh-pages-active-state

  17. Открой её, чтобы увидеть свою страницу

  18. Теперь можно поделиться с друзьями :-)

Сделаем наш сайт прекраснее!

  1. Замени содержимое своего файла index.html на код с сайт Bulma
  2. Замени текст Hello World на своё приветствие!
  3. Выполни в термале команды 
    git commit -am 'my Bulma page'
git push