Статьи

Octopress 3 прибывает, чтобы сделать блог поколения сумасшедшим простым

octopress

Эта статья была рецензирована Фредом Хитом . Спасибо всем рецензентам 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 поставляется со стандартной страницей Abouthttp://localhost:4000/about/ Страницу можно найти в домашнем каталоге вашего сайта. Когда вы создали сайт с помощью jekyll buildabout Перейдите в каталог _site/about

Существует команда CLI Octopress, которую можно использовать для создания новой страницы, аналогичной той, которая использовалась при создании новой публикации.

 octopress new page contact.md

Это создаст новую страницу в домашнем каталоге вашего приложения. Созданный файл выглядит так:

 ---
layout: page
title: ""
---

Введите заголовок страницы, если хотите.

Вы можете ввести содержание для страницы под текстом YAML. Как и в случае с постом, содержимое написано в формате уценки. Вы также можете выбрать путь для создания страницы. Например:

 
octopress new page news/index.md

Это создаст новый каталог с именем news и файл index.md внутри него. Когда вы запускаете jekyll buildjekyll 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.iousername Моя выглядит так: 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, чтобы обнаружить их!

Спасибо, что остался со мной до конца. Ваши отзывы приветствуются 🙂