Эта статья была рецензирована Фредом Хитом . Спасибо всем рецензентам SitePoint за то, что сделали контент SitePoint как можно лучше!
Octopress — это одержимо разработанный инструментарий для написания и развертывания блогов Jekyll. Довольно мило, а?
— Октопресс
Моей радости не было предела с тех пор, как я познакомился с Octopress, так как создать блог с его помощью невероятно легко. С появлением Octopress 3 все стало еще интереснее. Octopress 3 включает в себя функции, направленные на устранение недостатков предыдущих версий. Недавно созданный интерфейс Octopress CLI позволяет легко создавать новый сайт, создавать новые страницы, добавлять публикации и развертывать их.
В этом уроке мы создадим простой блог, добавим пост и страницу. Попутно мы также увидим, как включить обмен в Twitter и развернуть все на Github.
Раскрытие Октопресса
Во-первых, установите драгоценный камень Octopress. С вашего терминала:
gem install octopress
И с этим у вас установлен Octopress! Я люблю Ruby и Rubygems!
Создание блога
С новыми командами Octopress CLI легко начать работу. Перейдите в свой рабочий каталог и выполните команду ниже:
octopress new kinsomicrote
Это создаст каталог с именем kinsomicrote с лесами для веб-сайта. Замените «kinsomicrote» на то, что вы хотите назвать своим блогом. Перейдите во вновь созданный каталог и откройте текстовый редактор, чтобы увидеть, что у вас есть. Файлы и папки должны быть в формате дерева ниже:
cd kinsomicrote
→ tree
.
|____.gitignore
|_____includes
| |____head.html
| |____footer.html
| |____header.html
|____feed.xml
|_____sass
| |_____layout.scss
| |_____base.scss
| |_____syntax-highlighting.scss
|____css
| |____main.scss
|_____templates
| |____draft
| |____post
| |____page
|_____posts
| |____2015-10-15-welcome-to-jekyll.markdown
|____about.md
|____index.html
|_____layouts
| |____post.html
| |____default.html
| |____page.html
|_____config.yml
Если вы все использовали Jekyll, это должно выглядеть примерно одинаково.
Создание сообщения
Мы можем создать новый пост, используя одну из команд Octopress CLI:
octopress new post Welcome Aboard
Эта команда создает новую запись в блоге с заголовком Welcome Aboard
Очевидно, вы можете использовать любой заголовок по вашему выбору. Пост создается в каталоге _posts . Когда вы открываете этот новый файл поста в вашем текстовом редакторе, он должен выглядеть примерно так, как показано ниже:
---
layout: post
title: "Welcome Aboard"
date: 2015-10-15T09:31:09+01:00
---
По умолчанию пост будет записан как файл уценки . Содержание вашего сообщения должно быть ниже основного содержания YAML, как называется содержимое между ---
Обсуждаемые вопросы позволяют включать специфичные для страницы переменные вверху шаблона, используя YAML или JSON. Фронтальный материал должен находиться в самом верху шаблона и отделяться от остального содержимого начальным и конечным тройным дефисом ---
Между этими тремя пунктирными линиями вы можете установить предопределенные и пользовательские переменные, такие как Категории, Теги и Постоянная ссылка. Вы можете прочитать больше о первоисточниках в документации по Jekyll .
Просмотр сайта
Перед просмотром сайта его необходимо построить. Поскольку Octopress является оболочкой для Jekyll, мы будем использовать следующую команду для сборки:
jekyll build
Это создаст статический HTML-сайт, который можно найти в каталоге _site . Это построено из файлов уценки для страниц, сообщений, таблиц стилей и конфигурации.
Для просмотра сайта выполните команду ниже из своего терминала:
jekyll serve
Затем укажите в браузере адрес localhost:4000
Создание новой страницы
Octopress поставляется со стандартной страницей About
http://localhost:4000/about/
Страницу можно найти в домашнем каталоге вашего сайта. Когда вы создали сайт с помощью jekyll build
about
Перейдите в каталог _site/about
Существует команда CLI Octopress, которую можно использовать для создания новой страницы, аналогичной той, которая использовалась при создании новой публикации.
octopress new page contact.md
Это создаст новую страницу в домашнем каталоге вашего приложения. Созданный файл выглядит так:
---
layout: page
title: ""
---
Введите заголовок страницы, если хотите.
Вы можете ввести содержание для страницы под текстом YAML. Как и в случае с постом, содержимое написано в формате уценки. Вы также можете выбрать путь для создания страницы. Например:
octopress new page news/index.md
Это создаст новый каталог с именем news и файл index.md внутри него. Когда вы запускаете jekyll build
jekyll serve
.html
Когда сайт перезагружается, ссылка на страницу автоматически отображается на панели навигации.
конфигурация
Octopress имеет файл конфигурации, в котором вы управляете настройками веб-сайта. Это файл _config.yml, расположенный в домашнем каталоге сайта. Вот пример того, как это выглядит:
# Site settings
title: Your awesome title
email: [email protected]
description: > # this means to ignore newlines until "baseurl:"
Write an awesome description for your new site here. You can edit this
line in _config.yml. It will appear in your document head meta (for
Google search results) and in your feed.xml site description.
baseurl: "" # the subpath of your site, e.g. /blog/
url: "http://yourdomain.com" # the base hostname & protocol for your site
twitter_username: jekyllrb
github_username: jekyll
# Build settings
markdown: kramdown
Из файла конфигурации вы можете добавить свои имена пользователей в Twitter и Github. Они будут отображаться внизу вашей страницы вместе с описанием. Не стесняйтесь редактировать настройки по своему усмотрению, добавив необходимую информацию. Вам нужно будет перезагрузить сервер, чтобы изменения конфигурации отображались в вашем браузере. Вы можете остановить сервер, нажав CTRL+C
Обмен в социальных сетях
Публикация сообщений в блоге в социальных сетях, таких как Twitter, важна, если вы хотите привлечь большую аудиторию. К счастью, на Octopress есть драгоценный камень, который делает это возможным. Для целей этого урока мы сосредоточимся на Twitter. Вы можете проверить конфигурацию для Facebook и Google Plus здесь .
Создайте Gemfile в домашнем каталоге вашего сайта. Вы можете сделать это, используя свой терминал, вот так:
touch Gemfile
Добавьте следующее:
source 'https://rubygems.org'
group :jekyll_plugins do
gem 'octopress-social'
end
И bundle install
Откройте _config.yml и добавьте следующее:
twitter:
username: # Add your Twitter handle
tweet_count: false # Show number of shares on Twitter
size: normal # Or large
embedded_link_color: # Set link color for embedded tweets
follow_count: false # Show number of followers
tweet_message: ":title by :username :hashtags - :url" # With Tweet button Twitter add the URL last
tweet_link_text: Twitter # Configure the link text
tweet_link_title: Share on Twitter # Share link title
profile_link_text: Follow :username
profile_link_title: Follow :username on Twitter # Profile link title text
Введите свое имя пользователя Twitter во второй строке:
username: twitter_user
Другие настройки можно оставить по умолчанию.
Чтобы использовать кнопки общего доступа Twitter, перейдите к макету вашего сайта по умолчанию и добавьте этот тег чуть ниже закрывающего тега.
{% twitter_script_tag %}
Если вы хотите, чтобы кнопка общего доступа Twitter отображалась в каждом сообщении, перейдите к _layouts / post.html и добавьте его под тег content
{% tweet_button %}
Сделайте то же самое для страниц, если хотите. Перезагрузите браузер, чтобы увидеть кнопку.
Доступны и другие настройки, с которыми вы можете ознакомиться в Octopress Social .
Развертывание на страницах GitHub
Мы будем вести наш блог на GitHub. Создайте аккаунт, если у вас его еще нет.
Создайте новый репозиторий , дайте ему имя в этом формате; username.github.io
username
Моя выглядит так: kinsomicrote.github.io
Откройте свой терминал и инициализируйте git. ПРИМЕЧАНИЕ Замените имя пользователя вашим именем пользователя на Github:
git init
git remote add origin https://github.com/username/username.github.io.git
Создайте файл конфигурации развертывания для нашего блога с помощью команды octopress deploy init
octopress deploy init git [email protected]:user/project
Это создает файл с именем _deploy.yml , который содержит конфигурацию развертывания:
method: git # How do you want to deploy? git, rsync or s3.
site_dir: _site # Location of your static site files.
git_url: [email protected]:kinsomicrote/kinsomicrote.github.io # remote repository url, e.g. [email protected]:username/repo_name
# Note on git_branch:
# If using GitHub project pages, set the branch to 'gh-pages'.
# For GitHub user/organization pages or Heroku, set the branch to 'master'.
#
git_branch: master # Git branch where static site files are commited
# remote_path: # Destination directory
Теперь разверните!
octopress deploy
После этого ваш сайт должен быть доступен! Вы можете проверить мой kinsomicrote.github.io (очевидно, измените URL на свое имя пользователя).
Вывод
Теперь вы знаете, как настроить блог с помощью Octopress 3. Есть много интересных вещей, которые Octopress 3 приносит на стол. Я призываю вас глубже погрузиться в Octopress, чтобы обнаружить их!
Спасибо, что остался со мной до конца. Ваши отзывы приветствуются 🙂