Как бесплатно разместить свой блог на страницах Jekyll и GitHub

12 июня 2019 |

Как бесплатно разместить свой блог на страницах Jekyll и GitHub

Если вы хотите завести блог, скорее всего, первое имя, с которым вы столкнетесь, это WordPress. Для этого есть причина. WordPress невероятно гибок и работает как с большими, так и с маленькими сайтами. Дело в том, что не каждому веб-сайту нужна такая мощная инфраструктура, особенно простой блог.

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

Как бесплатно разместить свой блог на страницах Jekyll и GitHub
Как бесплатно разместить свой блог на страницах Jekyll и GitHub

Перед началом работы

Вы будете запускать Jekyll на своем собственном компьютере, и официально поддерживаются только macOS и Linux. Здесь мы рассмотрим обе операционные системы, и инструкции для Linux могут работать с подсистемой Windows для Linux, на которой работает Ubuntu. Тем не менее, он не был проверен.

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

Вещи, которые вы должны знать

У вас должно быть хотя бы мимолетное знакомство с командной строкой. Также необходимо знать Git и GitHub. Если вы не знакомы, у нас есть руководство по git, и собственная документация GitHub превосходна.

Наконец, Jekyll использует Markdown, который позволяет вам писать в виде простого текста, но представить ваш контент в HTML для пользователя. Вы должны быть знакомы с Markdown или, по крайней мере, готовы изучать его. Это может показаться пугающим, но Markdown легко освоить (у нас даже есть шпаргалка для него).

Установите Jekyll и его зависимости

Это было протестировано на macOS Mojave и Ubuntu 18.04. Если вы работаете с другой версией какой-либо операционной системы, вам может потребоваться проверить веб-сайт Jekyll для получения дополнительной информации.

macOS

Прежде чем вы сможете установить Jekyll, вам необходимо установить XCode Инструменты командной строки с помощью следующей команды:

xcode-select —install

Выберите Установить и дождитесь завершения установки. Теперь вы можете установить Jekyll and Bundler:

gem install —user-install bundler jekyll

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

ПРЕДУПРЕЖДЕНИЕ: вы не ‘ В каталоге PATH отсутствует /Users/YOURNAME/.gem/ruby/2.3.0/bin, исполняемые файлы gem не будут запускаться.

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

echo export ‘PATH = $ HOME / .gem / ruby ​​/ 2.3.0 / bin: $ PATH’ & gt, & gt, ~ / .bash_profile source ~ / .bash_profile

Ubuntu

Перед установкой Jekyll вам необходимо установить инструменты сборки с помощью следующей команды:

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

Как и в случае с macOS, мы хотим устанавливать и запускать из домашнего каталога, а не как root. Запустите следующие команды:

echo ‘export GEM_HOME = $ HOME / gems’ & gt, & gt, ~ /.bashrc echo ‘export PATH = $ HOME / gems / bin: $ PATH’ & gt, & gt, ~ / .bashrc source ~ / .bashrc

Теперь установите Jekyll and Bundler:

gem install jekyll bundler

Протестируйте свой Установка Jekyll

Чтобы убедиться, что все запущено и работает, выполните следующее:

jekyll -v

Если все установлено правильно, вы увидите сообщение с номером версии. Если вместо этого вы видите сообщение типа команда не найдена, см. Документацию Jekyll.

Настройте свой новый блог с помощью Jekyll

Теперь, когда Jekyll установлен, создать новый блог очень просто:

jekyll new blog

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

bundle exec jekyll serve

Это запустит ваш новый блог о локальном запуске на вашем компьютере. Откройте URL, отображаемый в вашем браузере, чтобы взглянуть на сайт. Как видите, есть над чем поработать. Нажмите Ctrl + C. чтобы остановить.

Настройте свой блог

Чтобы отредактировать заголовок сайта и другую информацию, откройте каталог блога и отредактируйте _config.yml. Различные варианты здесь довольно очевидны. Теперь, если хотите, вы можете отредактировать свою домашнюю страницу, которая является файлом index.md, хотя это необязательно.

Чтобы начать писать свой первый пост в блоге, откройте папку _posts и вы увидите образец сообщения. Откройте его и отредактируйте, или продублируйте, чтобы создать новое сообщение.

Разверните свой блог на GitHub

Теперь, когда ваш сайт настроен локально, пришло время подключить его к сети. Если у вас еще нет настроенной учетной записи GitHub, зарегистрируйтесь и установите git на свой компьютер. Затем создайте новый репозиторий с именем username.github.io, заменив «username» на ваше имя пользователя GitHub.

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

git init git add —all git commit -m начальный коммит git remote add origin https://github.com/username/username.github.io.git git push -u origin master

Теперь вы сможете посетить username.github.io и увидеть свой новый блог. Если он не отображается сразу, подождите несколько минут и повторите попытку.

Следующие шаги

Приведенные выше шаги — это только основные принципы, которые помогут вам начать работу. У Джекилла есть что предложить, поэтому обязательно ознакомьтесь с документацией. Существует также ряд тем, которые могут оживить внешний вид вашего блога.

Есть и другие шаги, которые необходимо предпринять с GitHub Pages. Включение поддержки HTTPS раньше было более сложным процессом, но теперь это можно сделать в настройках вашего репозитория. Настройка вашего собственного доменного имени также является простым процессом, и у GitHub есть отличное руководство о том, как это сделать.

И последнее, о чем следует помнить, — это хорошая идея, прежде чем проверять изменения сайта локально. фиксируя их в вашем хранилище. Просто запустите команду bundler, которую мы использовали ранее, чтобы посмотреть ваш сайт на вашем компьютере. Это поможет вам отловить все, от опечаток до синтаксических ошибок Markdown.



Напишите пару строк: