- Github pages — что это?
- .babelrc
- .gitignore
- Client.js
- Commit & publish
- Compute cloud
- Create an index file
- Download github desktop
- Github
- Hello world
- Pricing · plans for every developer
- Public
- Push it
- Visual studio code
- Webpack.config.js
- Автоматически обновляемый ssl
- Выбор хостинга
- Делаем всё удобно или цикл разработки с помощью git
- Настройка bitvise ssh
- Обсуждаем интерфейс
- Папка server
- Подключаемся к облаку с пк и выбираем бесплатный ssh клиент
- Предисловие
- Создание аккаунта
- Успех!
- Шаг 1. создаём новый репозиторий
- Шаг 2. настраиваем сайт
- Шаг 3
- Шаг 3. редактируем страницу
- Шаг 4. привязываем домен
- Шаг 5 (опциональный). добавляем тему
- Шаг 1
- Шаг 2
- Шаг 2. загрузка файлов
- Шаг 4
- Шаг 5
- Шаг 6
- Заключение
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.
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
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
Обсуждаем интерфейс
Вот тут внимание… Я чуть со стула не упал. Знаете же в 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 годам. Версионность инструментов оставляет желать лучшего. Проект очень сырой, хотя, я думаю, что в дальнейшем он не будет пользоваться большим спросом из-за того, что они не предоставляют уникальных фич по сравнению с конкурентами. Хотя с другой стороны, если будут жесткие санкции, а именно облачный хостинг кода будет необходим, то вполне возможно…