Pricing · Plans for every developer · GitHub

Pricing · Plans for every developer · GitHub Хостинг

Github pages — что это?

Давайте начнём с азов— когда вы создаёте сайт, он остаётся на вашем компьютере. И, следовательно, посмотреть его можно только с вашего ПК. А значит для того, чтобы вашу веб-страницу смог открыть другой человек, нужно перенести файлы на его устройство.

Практически всегда услуги хостинги — платные, поэтому они скрывают файлы сайта от всех, кроме владельца. Исключениями становятся сервисы, как GItHub Pages, используя которые можно опубликовать сайт в интернете бесплатно.

И здесь важно разобраться с терминами, потому что GitHub Pages очень тесно связаны с такими понятиями как «Git» и «GitHub».

Git — это самая популярная система контроля версий в мире. Проект был создан Линусом Торвальдсом для управления разработкой ядра Linux.

GitHub — платформа для совместной разработки, также называемая форжингом. Можно сказать, что это и веб-ресурс, и репозиторий, и хранилище кода, и контроль версий, и сервер, и бесплатный хостинг, и сообщество, и помощь, и обучение — всё в одном месте.

GitHub Pages — это бесплатный хостинг для статических файлов. 

У GitHub Pages есть своя специфика работы (спойлер: она же и является главным преимуществом сервиса). Как мы сказали выше, обычный хостинг размещает файлы вашего сайта на своих серверах и скрывает всю его техническую часть от посторонних пользователей.

Поэтому GitHub — это настоящий круговорот креативных идей. Кстати, многие работодатели просят в резюме указать ссылку на ваш аккаунт на этом ресурсе, чтобы посмотреть дату регистрации и проекты, которыми вы там занимались.

Из других преимуществ:

.babelrc

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "browsers": [">0.25%", "not ie 11", "not op_mini all"]
        }
      }
    ],
    "@babel/preset-react"
  ],
  "plugins": [
    "babel-plugin-styled-components",
    "@babel/plugin-transform-runtime"
  ]
}

Настройки для создания нашего react_bundle с поддержкой браузеров используемых более >0.25% пользователей.

.gitignore


Тут мы указываем те файлы/папки, которые мы не хотим выгружать на github. Они будут только на данном устройстве и git не будет отслеживать/показывать их изменения. Открываем и вставляем:

/node_modules/

/logs/*
# exception to the rule
!logs/.gitkeep 

/public/react_bundle.js
/public/isProd.js

Так как github не выгружает пустые папки, то можно внутрь что-нибудь положить, к примеру пустой файл .gitkeep. Сохраняем файл и закрываем.

Client.js

import React from 'react'
import { render } from 'react-dom'
render(<div>Реакт!!</div>, document.getElementById('cookies'))

Рендерит наш фронтэнд в div с тегом cookies.

pm2-watch.json — позволяет на хостинге командой «npm run server» запустить сервер с отслеживанием изменений в коде и автоматической перезагрузкой.

Commit & publish

Enter the repository, commit your changes, and press the publish button.

Demonstration of steps required to create the initial commit and publish the repository in GitHub Desktop

Compute cloud

Тут у нас будут происходить вычисления 🙂 То есть мы создадим виртуальную машину с Linux (я выбрал ubuntu 18.04), установим node.js приложения и postgreSQL.

Жмём создать ВМ, выкручиваем все настройки на минимум, так как при разработке нагрузки не будет (когда наше приложение выйдет в свет, тогда и подкрутим побольше, ну и будем мониторить по графикам).

Create an index file

Grab your favorite text editor and add an index.html file to your project:

Download github desktop

GitHub Desktop is a great way to use Git and GitHub on macOS and Windows.

GitHub Desktop screenshot

Github

Github — это место, где будет лежать код нашего приложения. Если коротко, принцип работы для одного человека следующий:

Всё быстро, просто и удобно.

Собственно регистрируемся на Github и создаём private репозиторий для нашего приложения (он будет доступен только нам):

Hello world

Enter the project folder and add an index.html file:

Pricing · plans for every developer

§

Public

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

Отдельно остановимся на двух файлах:

index.html:

Push it

Add, commit, and push your changes:

Visual studio code

Для начала выберем редактор исходного кода, где будем работать. Я выбрал Visual studio code, так он прост, удобен, в нём много плагинов и можно настроить синхронизацию настроек если вы работаете с нескольких устройств. Собственно скачиваем, устанавливаем, запускаем, выбираем общую папку приложений, так как git clone создаст нам свою.

Плагины я использую следующие:

Устанавливаем git для ПК.Открываем консоль в VScode с помощью ctrl shift ` или terminal>new terminal

Отступление:

В консоли windows плохо с русскими символами и чтобы не было крякозяблов нужно открыть file>preferences>settings, ввести в поле terminal.integrated.shellArgs.windows, нажать

И добавить строку «terminal.integrated.shellArgs.windows»: [«-NoExit», «/c», «chcp 65001»],

Повторяем команду для загрузки файлов с github:

Webpack.config.js


Сборщик реакт приложения:

const webpack = require('webpack'),
  path = require('path'),
  BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin

module.exports = (env, argv) => {
  let prod = argv.mode == 'production'

  let config = {
    entry: './client.js',
    output: {
      path: path.resolve('./public'),
      filename: 'react_bundle.js'
    },
    module: {
      rules: [
        {
          test: /.(js|jsx)$/,
          exclude: /node_modules/,
          loader: 'babel-loader'
        },
        {
          test: /.css$/,
          use: ['style-loader', 'css-loader']
        }
      ]
    },
    resolve: {
      alias: {
        client: path.resolve('./client/shared'),
        public: path.resolve('./public')
      }
    },
    plugins: [
      argv.analyze ? new BundleAnalyzerPlugin() : false,
      prod ? new webpack.optimize.AggressiveMergingPlugin() : false,
      new webpack.ContextReplacementPlugin(/moment[/\]locale$/, /ru/)
    ].filter(Boolean),
    optimization: {
      minimize: prod ? true : false
    },
    performance: {
      hints: false
    }
  }

  return config
}

Если коротко, то он открывает файл client.js и все что у него внутри, собирая react_bundle и помещая его в папку public, откуда потом через открытый index.html он будет загружен.

Автоматически обновляемый ssl

Когда вы купите себе домен и привяжете его к IP облака, пример

Выбор хостинга


На своё хобби я готов был тратить 10$ в месяц, поэтому выбирал тот хостинг, с которым планировал и остаться в будущем. Как я и говорил, до этого у меня был 0 опыт, в том числе и с хостингом сайтов. Я попробовал и отказался от следующих:

Jelastic: красивый и удобный интерфейс, вроде всё интуитивно, масштабируемо и понятно. Тем не менее столкнулся с трудностями при настройке (nginx почему-то из vps не хотел работать, только их отдельным модулем) и подключении SSL(и автоматическом обновлении) к русскоязычном домену стандартными средствами (обещали баг пофиксить, но я не хочу ждать)

Делаем всё удобно или цикл разработки с помощью git

Всё вроде работает, но мы же не будем работать всё время подключаясь к облаку. К тому же вдруг мы будем в будущем работать не одни.

Настройка bitvise ssh

image

Обсуждаем интерфейс

Вот тут внимание… Я чуть со стула не упал. Знаете же в GitHub можно отметить проект звездой и следить за ним… Ну так вот, без комментариев:

Зазвездить…. Вы серьезно? Что вы там употребляете, что у вас такие вот выражения…

Интерфейс достаточно простой и понятный, но он настолько несовременный и некрасивый, что сервисом просто не хочется пользоваться (субъективное мнение).

Ради интереса, зайдем на любой из проектов…

Выглядит все просто, хотя просматривается тема «интерфейс за 5 минут»… Но тут я кое что заметил… Заметили? Наверху тЭги, а справа тЕг.

Папка server

Тут лежит на бэкэнд и все пути.

logger.js — в зависимости от среды isProd логирует или в консоль или в errors.log

'use strict'

const pino = require('pino'),
  isProd = require('../public/isProd')

let logOptions = isProd
  ? {
      level: 'warn', // уровень логирования
      timestamp: () => {
        return ',"time":"'   new Date()   '"'
      }
    }
  : {
      level: 'warn',
      prettifier: require('pino-pretty'),
      prettyPrint: {
        levelFirst: true,
        translateTime: true
      }
    }
let dest = isProd ? pino.destination('./logs/errors.log') : pino.destination(1)
let log = pino(logOptions, dest)

module.exports = log

server/api/

open.js — сюда добавляем наши пути.

'use strict'
module.exports = function(fastify, options, next) {

  fastify.route({
    method: 'GET',
    url: '/',
    handler: async (req, res) => {
      res.send('api / route')
    }
  })

  fastify.route({
    method: 'GET',
    url: '/hi',
    handler: async (req, res) => {
      res.send('api / route hi')
    }
  })
  next()
}


После настройки и проверки всего на Localhost, просто выгружаем всё на github, а оттуда git pull на хостинг. Всё что на хостинге нужно будет сделать, это установить модули node.js командой «npm i» и создать файл isProd.js

Подключаемся к облаку с пк и выбираем бесплатный ssh клиент

Стандартный Putty позволяет работать только командной строкой, а так как мне пользователю windows это непривычно, то я начал искать клиент с псевдо-проводником. Сначала я попробовал Mobaxterm, но он после какого-то времени простоя отключается, проводник вообще зависает, поэтому сейчас работаю с

и пока проблем как у Mobaxterm не наблюдаю.

Предисловие

Начну с того, что однажды мне захотелось создать приложение. Желание такое возникло из-за того, что я люблю читать, а нормальных книжных агрегаторов на просторах русского интернета просто нет. Собственно из боли поиска чего бы почитать и попыток вспомнить как называлась та книжка, которую я недавно читал и на какой же главе я остановился, родилось желание сделать веб-приложение, в котором всё это было бы возможно и удобно.

Не буду рассказывать как я изучал javascript, node.js, react, html, css и т.п., перейдём к тому, к чему я пришел на данный момент, чем хотел бы с вами поделится и, конечно, послушать конструктивную критику специалистов.

Как и многие я тренировался на собственном ПК на localhost:3000, создавал front/back-end’ы, верстал, работал с api и т.д., но меня всегда тревожила мысль а том, как же всё это потом перенести на хостинг? Будет ли оно работать? Нужно ли будет переписывать из-за этого код?

Создание аккаунта

Форма регистрации уж сильно похоже на GitHub до их переделки. Кстати, верстка вся на Bootstrap: Bootstrap v4.6.0, когда уже во всю вышел нормальная 5 версия без jQuery…

Успех!


Это все, после этого можно клонировать репозиторий и работать:

Шаг 1. создаём новый репозиторий

Репозиторий — место, где будет «жить» ваш проект. Здесь вы сможете создать структуру проекта и хранить нужные для него файлы: наборы данных, фотографии, видео и так далее. 

Для создания репозитория заходим на официальный сайт и заходим в созданный аккаунт. 

Далее в блоке «Your repositories» нажимаем кнопку «New repository», чтобы создать новый репозиторий. Ему можно задать имя в формате «login.github.io», где login — это ваш ник на ресурсе.

Также можете дать ему краткое описание. После отметьте галочкой «Initialize this repository with a README» и нажмите «Create repository».

Шаг 2. настраиваем сайт

Перед нами открывается такое окно:

В верхней панели нажимаем на правую кнопку «Settings». Прокручиваем вниз до раздела «GitHub Pages». Открываем выпадающее меню и меняем значение с «None» на «branch: Main».

После нажимаем на кнопку «Save». Перед вами появится синее поле, на котором будет отображена ссылка на ваш сайт. 

И…это всё — ваш сайт готов:

Да, пока что сайт на Гитхабе выглядит немного скучновато. Но здесь важно понимать, что все отображение страницы зависит от содержимого вашего файла README.

Шаг 3

В папке public_html инициализируем новый репозиторий и добавим файлы под контроль версий.

cd ~/public_html
git init
git add -A
git commit -m 'Init'

Шаг 3. редактируем страницу

Как же залить сайт на GitHub? Чтобы внести изменения для файла, возвращаемся из вкладки «Setting» во вкладку «Code».

И здесь начинается ваше творчество — подкорректируйте README и добавьте туда все, что сочтете нужным. Вы также можете залить уже сделанный вами сайт, нажав на кнопку «Add file». Или попробовать создать сайт с нуля. Для этого кликните по иконке с карандашом и начните изменять README.

Markdown — удобный и быстрый способ разметки текста — предоставит вам множество возможностей. Например, вы можете добавить текст, картинки, ссылки, цвета или выполнить простое форматирование.

В качестве примера давайте напишем приветствие и добавим простую картинку:

И не забывайте, что при добавлении изображений в файл README, вы должны обязательно загружать их в репозиторий, чтобы GitHub не поймет, о чём речь.

Теперь прокручиваем страницу вниз и нажимаем на зелёную кнопку «Commit changes». 

Вы можете перейти по вашей ссылке, чтобы оценить результат, или увидеть его в предпросмотре во вкладке «Code». Вот, что получилось у нас:

Шаг 4. привязываем домен

Чтобы подключить свой домен к проекту на GitHub Page, нужно снова открыть настройки и перейти в раздел «GitHub Pages».

Здесь всё просто. Если у вас уже есть доменное имя для проекта, вставьте его в строку свой адрес и нажмите «Save».

Шаг 5 (опциональный). добавляем тему

С учетом, что это заняло буквально пару минут времени, выглядит уже хорошо, но даже такую простую страницу можно сделать лучше :). 

Если вы совершенно не разбираетесь в CSS, но хотите красивый сайт — воспользуйтесь встроенными темами Jekyll. Они помогут изменить внешний вид страницы без каких-либо усилий — нужно только нажать на пару кнопок. 

Для этого возвращаемся в раздел настроек на верхней панели («Settings»), снова переходим в раздел «GitHub Pages» и нажимаем «Choose a theme». Перед вами открывается несколько доступных тем.

Выберите понравившуюся и кликните на зелёную кнопку «Select theme». Не пугайтесь, если тема не обновляется сразу — подождите пару минут и ещё раз откройте свой сайт.

Вот и всё! Вот так быстро и просто можно создать статичный сайт и разместить его в GitHub-репозитории.

⌘⌘⌘

Надеемся, что наша пошаговая инструкция помогла вам разобраться с сервисом GitHub Pages. Обязательно поделитесь в комментариях отзывом о GitHub Pages и бесплатном хостинге от GitHub.

И, конечно же, регистрируйте красивые и лаконичные доменные имена для ваших проектов. 

Шаг 1

Создаем FTP-юзера с доступом к корневой директории сайта (на уровень ниже от public_html) и включаем для него SSH. Сразу же запишем куда-нибудь доступы. Мы храним их в таком формате:

Шаг 2


В корневой сайте создаем папку. ssh, а в ней файл authorized_keys. Туда запишем ssh-ключи людей, которые будут работать с этим проектом. Можно это сделать через ФТП, но мне привычней через SSH.

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

Репозиторий создан, теперь нужно загрузить файлы. Для этого необязательно клонировать репозиторий к себе на компьютер или постигать другие нюансы работы с Гитом — можно воспользоваться интерфейсом Гитхаба. Давайте нажмём кнопку «Upload files».

Затем перетащим файлы в появившееся поле для загрузки.

Шаг 4


Создаем новый репозиторий, который будет служить шлюзом для основного

cd ../
git clone --bare public_html project.git
cd public_html
git remote add hub ../project.git
git remote show hub

Последняя команда не обязательна. Она нужна, чтобы удостоверится, что все ок.

Шаг 5

В /public_html/.git/hooks/ создаем файл post-commit и ставим ему права 700.

cd ~/public_html/.git/hooks
touch post-commit
chmod 700 post-commit
nano post-commit

Внутрь помещаем следующее:

Шаг 6

В /project.git/hooks/ создаем файл post-update и ставим ему права 700.

cd ~/project.git/hooks
touch post-update
chmod 700 post-update
nano post-update

Внутрь помещаем следующее:

Заключение

Хоть это и тесты, но они уже публичные. Ребята в компании особо не парятся на проверке за своими программистами логических ошибок. Интерфейсные решения соответствуют очень давнему 2008-2022 годам. Версионность инструментов оставляет желать лучшего. Проект очень сырой, хотя, я думаю, что в дальнейшем он не будет пользоваться большим спросом из-за того, что они не предоставляют уникальных фич по сравнению с конкурентами. Хотя с другой стороны, если будут жесткие санкции, а именно облачный хостинг кода будет необходим, то вполне возможно…

Оцените статью
Хостинги