- Прежде всего, некоторые определения для вас не знают:
- Зачем использовать Github Pages для размещения личных сайтов
- 1. Базовый уровень
- Начните с темы Красивая Джекилл.
- Некоторые ссылки, связанные с Джекилом:
Несколько дней назад я полностью изменил свой сайт CMS Wordpress Используйте хостинг Namecheap для Джекил использование Github Pages Храните сайты прямо на Github. Поначалу использование Jekyll было трудным, и были времена, когда я чувствовал себя более разочарованным (использовал его WordPress Это слишком просто), но после нескольких дней использования Jekyll я обнаружил обратное: это так просто и удобно! Вот почему я хочу написать эту статью для всех.
Сайт Vietnhevev.com Сайт после переезда в Джекилл
Примечание. Эта статья, которую я хочу с нетерпением ждать, имеет небольшой опыт работы в Интернете. Технология Jekyll, которой я хочу поделиться, - это отличная технология для создания личных веб-сайтов, но ее настройка и использование немного сложнее.
Прежде всего, некоторые определения для вас не знают:
- CMS WordPress является одной из самых популярных систем управления контентом, поэтому вы можете легко создавать свои сайты с различными интерфейсами и возможностями оптимизации для SEO. С WordPress можно многое сделать, начиная с блогов, веб-сайта продаж, форума и т. Д. Многие разные большие и маленькие сайты используют WordPress. Эта CMS написана на языке PHP, и созданный ею веб-сайт является динамическим веб-сайтом с большим количеством взаимодействия с пользователем.
- Джекилл это совершенно другая вещь. Это программное обеспечение, написанное на Ruby, которое помогает создавать статические веб-сайты. Он не так эффективен, как WordPress, его сложно использовать с новыми людьми, но благодаря созданию личных веб-сайтов, блогов, страниц документов, возможность создавать статичные веб-сайты позволяет ему добиться выдающейся производительности. Вы можете настроить стиль на своем веб-сайте и сохранить его на Github - бесплатном хостинге исходного кода. Еще одним преимуществом является то, что статическая сеть позволит вашему сайту быть защищенным от вредоносного кода, хакерских атак, которые мы часто видим на CMS, таких как WordPress.
Зачем использовать Github Pages для размещения личных сайтов
Github - это хостинг, который знакомы программистам. Github также предлагает сервис Github Pages, который позволяет размещать веб-сайты проектов, личные и организационные сайты на самом Github. Преимущество использования Github для хранения личных веб-сайтов:
Это абсолютно бесплатно . Это сэкономило мне более 1 млн. Донгов (я должен использовать его для того, чтобы нанимать хостинг Namecheap на WordPress каждый год). Вы можете использовать бесплатное доменное имя .github.io, но вы также можете использовать свое доменное имя как vietanhdev.com: D
Поддержка Джекила . Jekyll - это программа, которая создает статические веб-сайты из Markdown или html-файлов. Обычно вам нужно скомпилировать все файлы с предыдущим HTML-кодом перед загрузкой на хост. Но с Github это не обязательно. Вы можете редактировать статьи, страницы веб-сайта Jekyll и комментировать Github, вот и все.
Довольно знаком с программистами . Если вы программист, фиксация кода на Github - довольно знакомая вещь. Создание сайта, ведение блога таким образом, безусловно, заставит вас чувствовать себя комфортно.
1. Базовый уровень
Базовый уровень использует Github Pages для хранения веб-сайтов и тем. Прекрасный Джекилл создать персональный сайт с Jekyll.
Сначала давайте найдем основную тему (интерфейс), чтобы начать с веб-сайта. Есть много тем, которые я нахожу очень хорошо в jekyllthemes.org или themes.jekyllrc.org , Тем не менее, на базовом уровне с использованием Github Pages мы начнем с простой темы, но мне лично очень приятно создать персональный сайт: Beautiful Jekyll от Dean Attali.
Интересный факт: нынешний веб-сайт Вьетнама использует эту тему.
Чтобы использовать эту тему с Github Pages, вам сначала нужно Зарегистрируйте аккаунт на Github , Github довольно знаком программистам. Вы должны всегда устанавливать один для использования для многих других целей позже. Обратите внимание, что ваше имя пользователя Github будет определять личный адрес веб-сайта, хранящийся на Github. Например, имя пользователя Viet Anh - vietanhdev.com, доменное имя по умолчанию для веб-сайта, предоставленного Github, - vietanhdev.github.io.
Затем вы должны ознакомиться с языком, используемым в основном для написания контента для веб-сайта Jekyll под названием Markdown. Этот язык также обычно используется в Github для написания файлов README.Md - общего введения в каждый проект с открытым исходным кодом на Github. Вы можете узнать Markdown на www.markdowntutorial.com (Английский) или Инструкции по использованию Markdown на здесь ,
Начните с темы Красивая Джекилл.
Принесите прекрасный Джекилл на свой сайт
Войти в Github.
Посетите страницу с исходным кодом Beautiful Jekyll на Github: https://github.com/daattali/beautiful-jekyll ,
Форк (сделайте копию) исходного кода Beautifull Jekyll в свою учетную запись Github, нажав кнопку Fork в правом верхнем углу страницы с исходным кодом.
Переименуйте репозиторий Fork medium в форму <username> .github.io, где <username> - это ваше имя для входа в Github.
Отредактируйте файл _config.yml, чтобы создать начальные настройки для вашего сайта. Откройте файл, и строки с # в начале являются строками комментариев, которые инструктируют вас отредактировать файл конфигурации. После редактирования файлов в Github нажмите кнопку «Применить изменения», чтобы сохранить изменения. Для сайтов, работающих на Jekyll, Github будет автоматически переводить весь исходный код вашего сайта каждый раз, когда вы редактируете файл на веб-странице.
После того, как вы закончили редактирование настроек по пути (раздел url в файле _config.yml), посетите .github.io, чтобы увидеть, был ли ваш сайт успешно создан.
Описание моих шагов довольно общее, может быть, вы еще не поняли. И более того, сотня услышанных не равна единице, сотня прочитана, не наблюдая за практикой. Я хотел бы процитировать учебник по теме Beautiful Jekyll Дина Аттали, чтобы вы представили:
Опыт : Если ваш сайт где-то неисправен, Github отправит уведомление о вашей электронной почте. Откройте его и проверьте, есть ли проблема. Если ошибка находится в файле конфигурации _config.yml (написано на языке YAML), используйте инструмент по адресу http://codebeautify.org/yaml-validator - Скопируйте в нее содержимое файла _config.yml и проверьте ошибку.
Структура каталогов Jekyll
Вы переходите на страницу Github, содержащую исходный код Beautiful Jekyll, я просто разобрался, чтобы увидеть ряд папок и файлов с различными функциями, которые необходимо предпринять, чтобы освоить свой веб-сайт.
- Некоторые файлы в корневой папке требуют внимания:
- _config.yml: файл конфигурации Jekyll. Вам необходимо ликовать этот файл, чтобы понять, как настроить страницу Jekyll.
- index.html: это источник домашней страницы. Внутри HTML-кода находится YAML, шаблонизатор Liquid.
- aboutme.md: страница, представляющая себя на сайте. Я думаю, что вы должны начать редактировать этот файл в первую очередь.
- Папки, чтобы обратить внимание на новых людей:
- _posts: содержит статьи на вашей странице.
- _layouts: редактировать структуры страниц, используемые в сообщениях и страницах вашего блога.
- CSS, JS: содержит CSS-файлы, настройки интерфейса JS и делает ваш сайт более ярким.
Как написать статью (построить страницу) в Jekyll
Вы можете создавать страницы, вести блог, используя Markdown, HTML, жидкие шаблоны шаблонов, но есть несколько моментов, о которых следует помнить о структуре:
- Название статьи должно быть в стиле yyyy-mm-dd-ten-bai-viet.md. пример: 2016-09-13-xay-dung-website-voi-jekyll.md.
- В начале каждого файла статьи (страницы) будут коды YAML, содержащие информацию о статье (страницы). Этот код написан между двумя строками, содержащими три дефиса (-).
--- код YAML> ---
Пример кода YAML этой статьи:
--- макет: post title: "Опыт создания личного сайта с помощью Jekyll". Подзаголовок: "Некоторый опыт, полученный мной после переноса моего сайта WordPress на Jekyll". Дата: 2016-09-16 Категории: [Jekyll ] теги: [Jekyll, веб-сайт] постоянная ссылка: / blogging / kinh-nghiem-tao-webiste-ca-nhan-elephant-jekyll / bigimg: "/assets/img/blogging/jekyll/jekyllhomepage.png" ---
Некоторые из тем YAML, которые поддерживает тема Beautiful Jekyll:
Параметр Описание title Подзаголовок заголовка страницы / статьи Подзаголовок (в настоящее время под основным заголовком) bigimg Вставить картинку в начало страницы / статьи. Вы можете связать фотографию или список комментариев. Чтобы добавить функцию комментария (используя disqus), вы можете использовать комментарии: true show-avatar Скрыть / показать изображения авартара на любой странице / в статье share-img Предоставить ссылки к изображению, которое вы хотите показать при публикации поста в Facebook, Twitter. social-share Включение / выключение строки кнопки «Поделиться» постов макета структуры страницы. Вы можете использовать страницу для страницы, пост для статьи. js Список локальных файлов js (в том же хранилище Github) (например, /js/mypage.js ) ext-js Список внешних встроенных файлов js (например, //cdnjs.cloudflare.com/ajax/libs/underscore .js / 1.8.2 / underscore-min.js ) css Список локальных css-файлов (в том же репозитории Github) ex-css Список css-файлов, встроенных извне googlefonts. Используется список Google Fonts (например, [" Монотон "," Лобстер "] ))
После темы Beautiful Jekyll Fork настройте ее немного. Отредактируйте содержимое файлов index.html, aboutme.md, вы можете удалить файлы в папке _posts и начать писать статьи. Однако для новичков я думаю, что вы должны прочитать раздел YAML каждой доступной статьи в _posts, чтобы понять, как писать и копировать куда-то, если вы хотите использовать структуру YAML для следующей статьи.
Выше приведено очень простое руководство по использованию тем Jekyll и Beautiful Jekyll для создания веб-сайтов. Вьет Ань имеет много советов и опыта, которыми можно поделиться. Увидимся в следующей статье!
Некоторые ссылки, связанные с Джекилом:
vietanhdev 28 мая 2017 г.