Уроки Создаем свой сайт/блог на github

[X-Shar]

Вообще мало кто знает, но на github можно создавать свои сайты, для этого выделен домен username.github.io.)

Чем это удобно:

1. Вам не нужно платить за сервера.
2. Выделяется достаточно не плохие мощности для сайта (Место и т.д.).
3. Ну и в целом для блогов очень удобно.

Из минусов, что сайты должны-быть статические и немножко нужно поизучать как это делать.

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

Итак:

Создание своей странички (или сайта) на GitHub происходит через GitHub Pages, сервис, который позволяет размещать статические сайты прямо из вашего репозитория на GitHub. Вот простой способ, как это сделать:

1. Создайте новый репозиторий на GitHub​

• Перейдите на главную страницу GitHub и войдите в свой аккаунт.
• Нажмите на "+" в правом верхнем углу и выберите "New repository".
• Дайте название вашему репозиторию. Если вы хотите создать пользовательский сайт (например, ваше портфолио), название должно быть в формате username.github.io, где username — ваше имя пользователя на GitHub.
• Оставьте репозиторий публичным и нажмите "Create repository".

2. Добавьте свой контент​

• В вашем новом репозитории, создайте файл index.html как минимум. Это будет вашей главной страницей.
• Можете добавить другие файлы и папки для стилей (CSS), скриптов (JavaScript) и изображений.

3. Включите GitHub Pages для вашего репозитория​

• Перейдите в настройки вашего репозитория (Settings).
• Пролистайте вниз до раздела "GitHub Pages".
• В разделе "Source", выберите ветку, из которой GitHub Pages будет брать файлы (обычно это main или master), и нажмите "Save".

После этих шагов ваш сайт будет доступен по адресу username.github.io (или другой URL, если вы используете пользовательское доменное имя). Обновления, сделанные в репозитории, автоматически отображаются на сайте через некоторое время после публикации.

Дополнительные советы:​

• Используйте Jekyll, статический сайт-генератор, поддерживаемый GitHub Pages, для создания блога или сложного сайта. GitHub автоматически соберет ваш сайт с Jekyll из вашего репозитория.
• Посмотрите темы для Jekyll на сайте GitHub, чтобы быстро начать работу с красивым дизайном.
• Воспользуйтесь документацией GitHub Pages и Jekyll для более глубокого погружения в возможности и настройки.

Как использовать Jekyll, если у вас Линукс:

1. Установите Jekyll​

Для начала вам нужно установить Jekyll на ваш локальный компьютер. Jekyll написан на Ruby, поэтому вам нужно сначала установить Ruby и RubyGems. После этого вы можете установить Jekyll и bundler через терминал:

Скопировать в буфер обмена

gem install jekyll bundler

2. Создайте новый сайт с Jekyll​

После установки Jekyll, создайте новый сайт, используя следующую команду в терминале (замените myblog на желаемое имя вашего сайта):

Скопировать в буфер обмена

jekyll new myblog

Перейдите в папку вашего сайта:

Скопировать в буфер обмена

cd myblog

3. Запустите ваш сайт локально​

Чтобы посмотреть ваш сайт локально, выполните следующую команду в папке вашего сайта:

Скопировать в буфер обмена

bundle exec jekyll serve

После этого вы сможете увидеть ваш сайт, перейдя по адресу

Вы должны зарегистрироваться, чтобы увидеть внешние ссылки

в вашем браузере.

4. Настройка и добавление контента​

• Ваш новый сайт на Jekyll будет содержать несколько базовых файлов и папок:
  • _config.yml для настроек вашего сайта.
  • index.markdown или index.html для главной страницы.
  • Папка _posts для ваших блог постов.
  • Папки _layouts и _includes для шаблонов и повторно используемых фрагментов соответственно.
• Чтобы добавить новый пост в блог, создайте файл в папке _posts с именем в формате ГГГГ-ММ-ДД-название.md. Например: 2023-04-01-welcome-to-my-blog.md. В начале файла добавьте метаданные в формате YAML и затем ваше содержимое в формате Markdown:

Скопировать в буфер обмена

---
layout: post
title: "Добро пожаловать на мой блог"
date: 2023-04-01
---

Здесь начинается ваш текст...

5. Публикация на GitHub Pages​

Чтобы опубликовать ваш сайт на GitHub Pages, создайте репозиторий на GitHub и свяжите его с вашим локальным репозиторием. Затем выполните следующие шаги:

- Инициализируйте локальный репозиторий, если вы еще этого не сделали:

Скопировать в буфер обмена

git init

- Добавьте все файлы в репозиторий и сделайте первый коммит:

Скопировать в буфер обмена

git add .
git commit -m "Initial commit"

Свяжите локальный репозиторий с GitHub и загрузите файлы:

Скопировать в буфер обмена

git remote add origin https://github.com/username/username.github.io.git
git push -u origin master

Замените username на ваше имя пользователя на GitHub. После пуша, ваш сайт будет автоматически доступен на

Вы должны зарегистрироваться, чтобы увидеть внешние ссылки

.

Это базовый пример создания сайта с Jekyll. Jekyll предлагает множество других возможностей, включая настройку тем, плагинов, и многое другое, которые помогут вам создать сложный и функциональный сайт.

Инструкция для винды:

Чтобы настроить и использовать Jekyll на Windows, вам потребуется выполнить несколько шагов, так как Jekyll изначально разрабатывался для окружений Unix-like, таких как Linux и macOS. Однако благодаря Windows Subsystem for Linux (WSL) или Bash on Windows, установка Jekyll становится возможной и на Windows. Вот шаги для настройки Jekyll на Windows через WSL:

Шаг 1: Установка Windows Subsystem for Linux (WSL)​

1. Откройте PowerShell от имени администратора и выполните следующую команду, чтобы включить WSL:

Скопировать в буфер обмена

wsl --install

1. Перезагрузите компьютер, если это будет запрошено.
2. Откройте Microsoft Store и выберите дистрибутив Linux, который вы хотите установить (например, Ubuntu).
3. Установите дистрибутив, следуя инструкциям на экране.
4. Запустите установленный дистрибутив Linux через меню Пуск. При первом запуске вам будет предложено создать учетную запись пользователя и пароль.

Шаг 2: Установка Ruby через WSL​

1. Откройте вашу установку Linux в WSL.
2. Обновите список пакетов и установите зависимости, необходимые для работы Ruby и Jekyll:

Скопировать в буфер обмена

sudo apt-get update
sudo apt-get upgrade
sudo apt-get install ruby-full build-essential zlib1g-dev

3.Настройте переменные окружения для Ruby Gems, добавив следующие строки в файл .bashrc или .zshrc в вашем домашнем каталоге:

Скопировать в буфер обмена

echo '# Install Ruby Gems to ~/gems' >> ~/.bashrc
echo 'export GEM_HOME="$HOME/gems"' >> ~/.bashrc
echo 'export PATH="$HOME/gems/bin:$PATH"' >> ~/.bashrc
source ~/.bashrc

Шаг 3: Установка Jekyll и Bundler​

Установите Jekyll и Bundler, используя gem:

Скопировать в буфер обмена

gem install jekyll bundler

Шаг 4: Создание нового сайта на Jekyll​

Создайте новый сайт Jekyll, используя команду jekyll new:

Скопировать в буфер обмена

jekyll new myblog

Перейдите в папку проекта:

Скопировать в буфер обмена

cd myblog

Запустите Jekyll сайт локально:

Скопировать в буфер обмена

bundle exec jekyll serve

Теперь вы можете открыть ваш сайт, перейдя по адресу

Вы должны зарегистрироваться, чтобы увидеть внешние ссылки

в вашем браузере.

Шаг 5: Работа с GitHub Pages​

1. Создайте репозиторий на GitHub и свяжите его с вашим локальным проектом, как описано в предыдущих инструкциях.
2. Загрузите ваш сайт на GitHub, и он будет автоматически опубликован через GitHub Pages.

Используя эти шаги, вы сможете настроить и использовать Jekyll на Windows через WSL для создания статических сайтов и их публикации через GitHub Pages.

Для выбора и применения шаблона Jekyll к вашему сайту вы можете следовать этим шагам:

1. Нахождение Шаблона Jekyll​

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

• Вы должны зарегистрироваться, чтобы увидеть внешние ссылки
  : Множество бесплатных и платных тем, доступных непосредственно через репозитории GitHub.

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

2. Скачивание и Интеграция Шаблона​

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

Скопировать в буфер обмена

git clone URL_ШАБЛОНА myblog

Замените URL_ШАБЛОНА на URL адрес репозитория выбранного шаблона. myblog — это имя папки, куда будет клонирован шаблон.

Если вы скачали архив, распакуйте его в директорию вашего проекта.

3. Настройка Шаблона​

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

• _config.yml: Основной файл конфигурации Jekyll, где вы можете настроить переменные сайта, такие как название, описание, URL и многие другие.
• index.html или index.md: Главная страница вашего сайта. Вы можете изменить её содержимое, чтобы оно соответствовало вашим требованиям.
• Папка _posts: Содержит блог посты. Вы можете начать с добавления своих собственных постов, следуя формату файлов в этой папке.
• Папки _layouts и _includes: Содержат шаблоны и повторно используемые фрагменты вашего сайта. Вы можете изменить их для изменения структуры страниц.

4. Предварительный Просмотр и Отладка​

Чтобы увидеть, как выглядит ваш сайт с новым шаблоном, запустите Jekyll локально:

Скопировать в буфер обмена

bundle exec jekyll serve

Откройте в браузере

Вы должны зарегистрироваться, чтобы увидеть внешние ссылки

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

5. Публикация на GitHub Pages​

После того как вы настроили шаблон и добавили свой контент, вы можете опубликовать сайт на GitHub Pages:

1. Создайте репозиторий на GitHub (если ещё не создали).
2. Свяжите ваш локальный репозиторий с GitHub, используя команды git init, git remote add origin URL_РЕПОЗИТОРИЯ, git add ., git commit -m "initial commit", и `git push

 

[X-Shar]

Можно создавать статические сайты для GitHub Pages, используя онлайн генераторы сайтов, а затем загружать сгенерированный контент на GitHub. Это удобный способ создания сайта, если вы предпочитаете визуальный интерфейс для дизайна вашего сайта, вместо ручного кодирования или использования системы управления контентом, такой как Jekyll. Вот несколько онлайн генераторов сайтов, которые хорошо подойдут для создания статических сайтов:

Вы должны зарегистрироваться, чтобы увидеть внешние ссылки

• Особенности: Tilda предлагает широкий набор предварительно разработанных блоков, которые можно комбинировать для создания уникального дизайна сайта. Она идеально подходит для создания статических сайтов, лендингов, блогов и портфолио.
• Интеграция с GitHub: Для публикации на GitHub вам потребуется вручную экспортировать ваш сайт как HTML и загрузить файлы в ваш репозиторий на GitHub.

Вы должны зарегистрироваться, чтобы увидеть внешние ссылки

• Особенности: Wix позволяет легко создавать визуально привлекательные сайты с помощью перетаскивания элементов. Он предлагает множество шаблонов и опций для персонализации.
• Интеграция с GitHub: Хотя Wix в основном ориентирован на хостинг через собственную платформу, вы можете использовать опцию экспорта HTML для создания статической копии вашего сайта и загрузки его на GitHub.

Вы должны зарегистрироваться, чтобы увидеть внешние ссылки

• Особенности: Webflow предлагает продвинутые инструменты для дизайна сайтов с детальным контролем над анимациями, взаимодействиями и адаптивным дизайном. Это хороший выбор для дизайнеров, стремящихся к полному контролю над внешним видом сайта.
• Интеграция с GitHub: Как и в случае с Tilda, для публикации на GitHub Pages вам нужно будет экспортировать ваш сайт в виде статических файлов и загрузить их в ваш GitHub репозиторий.

Вы должны зарегистрироваться, чтобы увидеть внешние ссылки

• Особенности: Squarespace известен своими стильными шаблонами и интуитивно понятным интерфейсом. Он подходит для создания сайтов для бизнеса, блогов и портфолио.
• Интеграция с GitHub: Хотя Squarespace ориентирован на свой собственный хостинг, вы можете экспортировать определенный контент сайта в формате HTML и вручную добавить его в ваш репозиторий на GitHub.

Вы должны зарегистрироваться, чтобы увидеть внешние ссылки

• Особенности: Это настольное приложение для дизайна и прототипирования веб-сайтов, использующее популярный фреймворк Bootstrap. Оно предлагает мощные инструменты для создания адаптивных сайтов.
• Интеграция с GitHub: После создания сайта вы можете экспортировать его как статические HTML, CSS и JavaScript файлы для размещения на GitHub Pages.

Важно​

При выборе генератора сайтов убедитесь, что он поддерживает экспорт ваших страниц в формате HTML/CSS.

 

[X-Shar]

Вот ещё генератор простенького HTML сайта:

Вы должны зарегистрироваться, чтобы увидеть внешние ссылки

 

[HMCoba]

Можно создавать статические сайты для GitHub Pages, используя онлайн генераторы сайтов,

Супер. спасибо за информацию, как раз искал подобные темы, то что нужно!