Camel — это блог-платформа Node.js, которая была разработана, чтобы быть быстрой, простой и простой.
По словам Кейси Лисс, автора книги Camel:
Camel не является ни статической платформой для блогов, ни действительно динамичной. Это немного из столбца A и немного из столбца B. При первой загрузке сообщения оно обрабатывается путем преобразования Markdown в HTML, а затем подвергается последующей обработке с добавлением верхних и нижних колонтитулов, а также заменой метаданных. , По окончании рендеринга результирующий HTML-код сохраняется и используется с этого момента.
Если вы хотите посмотреть на некоторые примеры работы Camel в дикой природе, вы можете проверить оригинальный блог на базе Camel на Liss is More или два моих блога на базе Camel: The Data McFly Blog и RogerStringer.com . Последний ранее был блогом WordPress с более чем 2,550 публикациями в блогах, охватывающими более десяти лет ведения блога, и он довольно плавно перешел на Camel.
Я использую Camel с октября 2014 года, и с ним интересно работать, хотя первоначальная настройка может быть немного интересной. Помня об этом, в этой статье мы рассмотрим настройку вашего первого блога Camel и его развертывание на Heroku.
Начало работы с верблюдом
Во-первых, убедитесь, что у вас установлены Node.js и npm. Вы можете скачать Node отсюда и npm отсюда . Если вам нужна помощь в установке Node.js (или npm), ознакомьтесь с этой недавней статьей SitePoint, посвященной этой теме.
Далее нам нужна копия верблюжьего репо:
git clone https://github.com/cliss/camel.git Это создаст папку с именем camel , перейдите в эту папку и запустите npm install для установки зависимостей.
Теперь мы можем проверить, работает ли Camel, набрав node camel.js . Если все прошло гладко, вы можете посетить http://localhost:5000 в вашем браузере и увидеть базовую установку Camel.
Система шаблонов Camel
Файлы шаблонов Camel хранятся в папке templates .
+ - шаблоны / | + - defaultTags.html | + - header.html | + - footer.html | + - postHeader.html | `- rssFooter.html
-
defaultTags.html— это место, где мы храним метаданные всего сайта, такие как информация об авторе, URL сайта и заголовок сайта. -
header.html— это заголовок нашего блога, который отображается на каждой странице сайта. -
footer.html— это нижний колонтитул сайта, также отображаемый на каждой странице. -
postHeader.html— это файл, который используется для отображения заголовковpostHeader.html. Он вставляется после заголовка сайта и отображается для каждого сообщения. -
rssFooter.htmlотображается в конце каждого элемента RSS. Это может быть ссылка на ваш блог или реклама, чтобы рассказать читателям, откуда пришло сообщение.
Циклы обрабатываются в Camel немного по-другому, вместо того, чтобы находиться в отдельных файлах, они хранятся как шаблоны Handlebars в файле posts/index.md :
@@ Title=Home @@ BodyClass=homepage @@ DayTemplate=<div class="day">...</div> @@ ArticlePartial=<div class="article">...</div> @@ FooterTemplate=<div class="paginationFooter">...</div>
Эта страница содержит три шаблона Handlebars, которые используются во всем сайте:
-
DayTemplateиспользуется для отображения каждого дня в списке сообщений. -
ArticlePartialиспользуется для визуализации одной статьи. -
FooterTemplateиспользуется для отображения нумерации страниц внизу страницы.
Наконец, нам нужно рассмотреть стиль. Откройте templates/header.html и замените <body> :
<body class="@@BodyClass@@"> <div class="container"> <div class="content"> <div class="header"> <div class="siteTitle"><a href="/">@@SiteTitle@@</a></div> <div class="siteByline">By @@siteAuthor@@</div> <nav> <a href="/about" rel="author">About</a> <span class="dot">•</span> <a href="/rss">RSS</a> </nav> </div><!-- header --> <div class="main">
Это даст нашему заголовку сайта определение.
Откройте templates/footer.html и добавьте нижний колонтитул сайта:
</div><!-- main --> </div><!-- content --> <footer> <p class="copyright">Copyright © 2015 - My Site</p> </footer> </div><!-- container --> </body> </html>
Наконец, откройте public/css/site.css чтобы добавить несколько стилей. Мы собираемся использовать этот фрагмент , но не стесняйтесь добавлять свой.
Передайте ваши изменения в Git:
git add . git commit -m "Added basic styling"
Затем перезагрузите сервер и обновите ваш браузер
Слово о кешировании
По умолчанию вам нужно перезагружать сервер каждый раз, когда вы вносите какие-либо изменения в свой блог Camel, и вы хотите просмотреть их в браузере (кэш очищается каждые тридцать минут). Это может раздражать довольно быстро.
Для решения этой проблемы раскомментируйте следующие строки в camel.js :
// app.get('/tosscache', function (request, response) { // emptyCache(); // response.send(205); // });
Перезапустите сервер, и вы получите доступный маршрут /tosscache , который, как следует из названия, очищает кэш и позволяет просматривать изменения без необходимости перезапуска.
Верблюжий Live
Теперь пришло время запустить ваш блог Camel для всеобщего обозрения. Мы будем использовать Heroku в качестве нашего веб-хостинга, так как он прекрасно обрабатывает сайты Node.js.
Во-первых, зарегистрируйтесь на бесплатную учетную запись. Затем загрузите и установите Heroku Toolbelt — действительно удобный инструмент командной строки, который позволяет вам управлять своими сайтами из терминала.
В пять простых шагов мы собираемся создать наше приложение Heroku и развернуть наш блог. Из терминала в вашей camel папке:
-
heroku loginчтобы войти в Heroku. -
heroku createдля создания приложения в Heroku. -
git push heroku masterчтобы подтолкнуть ваш сайт к Heroku. -
heroku ps:scale web=1чтобы сообщить Heroku о создании динамо (рабочего, отвечающего на веб-запросы). -
heroku openчтобы открыть ваш браузер по новому пользовательскому URL.
Добавление вашего собственного доменного имени
Теперь вы получите случайно сгенерированный поддомен, который представлен как http://random-name-12345.herokuapp.com . Это хорошо для тестирования, но не для вашего настоящего блога мирового уровня, который вы хотите, чтобы все читали.
Чтобы добавить свое собственное доменное имя в приложение Heroku, выполните в терминале следующую команду:
heroku domains:add www.mysite.com
Затем, когда вы переходите к своему инструменту управления DNS, который может быть GoDaddy, CloudFlare (или где-либо еще), вы просто указываете свой домен как запись CNAME на свой сайт.
Поэтому, если у вас есть поддомен Heroku: random-name-12345.herokuapp.com , и вы указываете его на домен myawesomeblog.com , ваш CNAME будет выглядеть следующим образом:
www CNAME random-name-12345.herokuapp.com myawesomeblog.com CNAME random-name-12345.herokuapp.com
Управление сообщениями локально
Когда вы добавляете новое сообщение, файл добавляется сначала путем перехода в папку года, затем в папку месяца, а затем в папку дня, для которого вы создаете сообщение. Например, чтобы добавить сообщение на 24 февраля 2015 года, мы бы имели следующую структуру папок:
`- сообщения / + - 2015 / | + - 2 / | | + - 24 / | | | `- my-new-blog-post.md
Файл my-new-blog-post.md — это новый пост. Если вы создаете сообщение в новый месяц или день, вы можете создавать эти папки по мере необходимости.
Страницы, такие как /about , создаются в корне папки posts .
Теперь давайте отредактируем наш my-new-blog-post.md и добавим немного контента. Для каждого поста метаданные указываются в верхней части и могут использоваться в теле.
@@ Title=Hello, World! @@ Date=2015-03 17:50 @@ Description=This is a short description used in Twitter cards and Facebook Open Graph. @@ Image=http://somehost.com/someimage.png This is a *test post* entitled "@@Title@@".
Поля Title и Date обязательны для заполнения. Любые другие метаданные, такие как Description и Image , являются необязательными.
Выдвижение обновлений Heroku
После добавления или редактирования сообщений вы захотите развернуть обновленный блог в Heroku.
Для этого передайте файлы в Git ( как показано выше ), затем запустите:
git push heroku master heroku open
Который будет толкать ваши изменения в Heroku и открыть обновленный блог в вашем браузере
Единственный недостаток этого метода — это то, что вы ограничены компьютером, на котором вы его настроили. Это не подходит, если вы мобильны и хотите редактировать сообщения на планшете или телефоне.
К счастью, Heroku покрывает вас и позволяет синхронизировать с вашей учетной записью Dropbox.
Управление сообщениями из вашего аккаунта Dropbox
Настройка вашего блога Camel для синхронизации с учетной записью Dropbox позволяет редактировать сообщения из любого места. Я регулярно создаю сообщения с моего iPhone или iPad, а затем размещаю новые сообщения в Heroku.
Чтобы настроить это, перейдем в вашу учетную запись Heroku и нажмите на приложение Heroku, которое вы настроили для своего блога.
Нажмите кнопку Deploy и выберите Dropbox .
Затем вам будет предложено связать вашу учетную запись Dropbox с приложением Heroku. Как только вы это сделаете, ваш блог Camel появится в вашей учетной записи Dropbox.
Heroku настраивает ваш сайт в следующей структуре папок:
`- Приложения / + - Heroku / | + - мой верблюд-блог /
Отныне вы можете просто перейти в эту папку и добавлять или редактировать сообщения и шаблоны.
Развертывание через Dropbox
После внесения изменений вы готовы к развертыванию снова.
С помощью настройки Dropbox изменения передаются в Heroku, войдя в панель управления Heroku, а не отправляя изменения из терминала.
Когда вы будете готовы к развертыванию изменений, введите краткое описание изменений и нажмите кнопку « Deploy на панели инструментов Heroku. Сообщение, которое вы вводите для развертывания, служит сообщением фиксации.
Панель инструментов покажет прогресс релиза после его запуска и сообщит, есть ли какие-либо проблемы.
Вывод
В этом уроке вы узнали, как развернуть свой первый блог Camel в Heroku, как работать с вашим блогом локально и как использовать Dropbox для редактирования и создания сообщений с любого устройства.
В целом, Camel — это аккуратный блог-движок, его легко расширять и расширять. Например, если вы посмотрите на версию Camel для Data McFly , я добавил поддержку категорий и карт сайтов.
Я на самом деле предпочитаю Camel, чем другие блог-движки, в основном из-за его простоты и отсутствия раздувания.