Вчера вечером, около восьми, я бродил по Github и увидел, что Калил разветвил проект под названием Jekyll-now. Я нажал на нее из любопытства и через 12 часов получил вот что.
Изначально он был разработан для создания блога, но проявив немного творчества, мы можем сделать его персональным сайтом; P
I. Так что же такое Джекилл?
Jekyll - это программа с открытым исходным кодом, написанная на Ruby Томом Престоном-Вернером, соучредителем GitHub. Jekyll - это простой генератор статических сайтов с поддержкой блогов для личных, проектных или корпоративных сайтов. Вместо использования баз данных Jekyll берет контент, отображает шаблоны Markdown или Textile и Liquid и создает полный статический веб-сайт, готовый для обслуживания HTTP-сервером Apache, Nginx или другим веб-сервером. Jekyll - это движок GitHub Pages, функции GitHub, которая позволяет пользователям размещать веб-сайты на основе своих репозиториев GitHub. Мы любили любовью, которая была больше, чем любовь
По сути, Jekyll - это сервер статических веб-страниц. Но очень особенный:
- Это не традиционный фреймворк HTML / CSS / JavaScript, поскольку ваши данные не заполняются прямой командой JavaScript. Вместо этого ваши данные хранятся в файле Markdown с простым тегом, а затем вы используете шаблоны Liquid для заполнения содержимого в файлах Markdown. Без базы данных обычный блогер может обновить свой блог, просто добавив новый файл разметки, не беспокоясь о коде.
- Поскольку Jekyll поддерживается репозиторием Github, вам не нужно получать выделенный сервер для вашей личной страницы. Вместо этого вы можете просто использовать github.io для обслуживания своих сайтов jekyll.
И Jekyll-now, о котором я упоминал выше, является еще более простой версией Jekyll, у которой уже есть макет блога, и все, что вам нужно сделать, это изменить заголовок веб-сайта и добавить файлы разметки.
II. Установить Джекилла
Если вы используете Mac OSX, где Ruby уже должен быть установлен, вы можете просто запустить
gem install jekyll
в вашем Терминале, и Jekyll будет установлен автоматически.
III. Начните с шаблона
Чтобы начать работу, не беспокоясь о css / javascript, вы можете перейти на какой-нибудь веб-сайт шаблона, чтобы начать работу с красивым шаблоном. Тот, который я использую, идет от Start Bootstrp. Мне нравится этот сайт, потому что все их шаблоны построены с помощью Bootstrap, поэтому очень легко добавить эффект анимации / панель навигации / адаптивный макет и т. Д.
Отсюда вы можете загрузить версию шаблона для Jekyll. После того, как вы разархивируете файл, перейдите в папку, в которой хранятся все файлы шаблонов в Терминале.
Если вы успешно установите jekyll, вы сможете запустить
jekyll serve
в Терминале, и он скомпилирует наш проект jekyll в папку _site и будет обслуживать наш веб-сайт через эту папку). Перейдите по этому адресу http://127.0.0.1:4000/ в своем браузере, и вы должны увидеть начальный шаблон.
IV. Персонализировать
Базовая конфигурация
Во-первых, вы можете начать персонализировать веб-сайт, изменив заголовок / подзаголовок / автора / социальную информацию, перезаписав файлы _config.yml и index.html, в которых хранится эта информация.
Понять макет
Затем вы можете перейти в папку _layouts и открыть файл default.html.
<!--liquid signs are removed for parsing-->
<body>
include header.html
include about.html
include page_content.html
include contact.html
include footer.html
include js.html
</body>
В сегменте body вы можете узнать, как устроена веб-страница. У вас есть заголовочный файл, представляющий баннер и открытое изображение. В файле about представьтесь, файл контактов в конце создает баннер контактов, а файл нижнего колонтитула с информацией о веб-сайте. Файл js предназначен для всех сценариев JavaScript, которые вы вставляете для веб-сайта. Если вас не устраивает какой-либо из компонентов, вы можете просто перейти к этим файлам (расположенным в папке _includes) и изменить их напрямую.
Если вы хотите добавить некоторые компоненты для наших целей, содержимое страницы для опыта, содержимое страницы для проектов и содержимое страницы для записи об образовании, вы можете создать другой html-файл page_content в папке _includes и добавить / переупорядочить их здесь, в папке default.html.
Заполнить содержание
Но есть одна вещь, о которой мы не говорили, - это файл содержимого страницы . Этот файл является основным файлом, который будет взаимодействовать и заполнять ваши файлы уценки в папке _post. Несмотря на то, что существует только один файл содержимого страницы, он может заполнить все файлы уценки в папке _posts с помощью жидкого шаблона:
<section id="services">
<!-- Page Content -->
<!--liquid signs are removed for parsing-->
for post in site.posts reversed
capture thecycle | cycle 'odd', 'even' | endcapture
if thecycle == 'odd'
В заголовке этого файла page_content мы видим цикл for, который будет представлять каждый файл как сообщение, просматривать каждый из наших файлов в папке _post и генерировать раздел html для каждого из них.
В нашем случае есть также переменная thecycle, которая поможет создать другой макет для публикации с нечетным или четным номером.
А затем давайте посмотрим на один из файлов уценки, которые мы публикуем.
--- layout: default img: ipad.png category: Services title: Death to the Stock Photo:<br>Special Thanks description: | --- A special thanks to [Death to the Stock Photo](http://join.deathtothestockphoto.com/) for providing the photographs that you see in this template. Visit their website to become a member!
в линиях между тире мы видим, что определены некоторые свойства. Например, к какой категории принадлежит этот пост (опыт, проекты, образование?), Какие изображения с ним связаны, какое у него название и т. Д.
Но как нам получить доступ к этой информации? Давайте посмотрим на HTML-файл,
<div class="col-lg-5 col-sm-6">
<hr class="section-heading-spacer">
<div class="clearfix"></div>
<h2 class="section-heading"></h2>
<div class="lead"></div>
</div>
<div class="col-lg-5 col-lg-offset-2 col-sm-6">
<img class="img-responsive" src="img/services/" alt="">
</div>
как мы видим, мы можем получить доступ к контенту (всему, что ниже тире) и свойствам файла, просто вызвав ``, и затем мы можем взаимодействовать с нашим контентом с нашим макетом html / css, а для доступа к изображению мы просто переходим к img / services и найдите изображение с правильным именем, связанное с публикацией.
Одна небольшая вещь в файле уценки, поскольку Jekyll предназначен для заполнения блогов, а не личной информации, его имена файлов уценки должны быть отформатированы как ГОД-МЕСЯЦ-ДЕНЬ-ФАЙЛ, поэтому, если вам все равно нужно будет выполнить форматирование, даже если ваша уценка file - это ваше резюме, а не блоги.
V. Сделать публичным
После того, как вы закончите тестирование своей личной веб-страницы на местном уровне, вы можете опубликовать свой сайт через Github.
Сначала вы переходите в свою учетную запись github и создаете репозиторий github под названием
ИМЯ ПОЛЬЗОВАТЕЛЯ.github.io
а затем вы можете отправить все свое содержимое в это репо, и через пару минут ваш веб-сайт должен появиться на USERNAME.github.io.
P.S. Для тех из вас, у кого нет опыта работы с Github, просмотрите эту ссылку: http://lifehacker.com/5983680/how-the-heck-do-i-use-github.
VI. Заключение
В целом, я думаю, что фреймворк Jekyll очень прост, поэтому, если у вас есть некоторый опыт веб-дизайна, это должно быть просто кусок пирога, и что делает его удивительным, так это то, что вам просто нужно добавить файл разметки для обновления вашего сайта. Однако, поскольку сайт статичен, его сложно использовать для взаимодействия с пользователем. Так что, если вы просто хотите просто представить что-то, особенно вещи, которые должны быть заполнены аналогичным образом, Jekyll определенно ваш путь.
Написать учебник сложнее, чем я думал, и я должен лучше объяснять вещи. Дайте мне знать, если у вас возникнут дополнительные вопросы или обнаружите какие-либо ошибки в сообщении.
