Когда я начал писать для Rubysource, я вскоре понял, что мне нужен веб-сайт с моей маленькой биографией внизу каждой статьи. До сих пор я баловался ссылками на различные сайты, которые я написал, и моей страницей в Твиттере , но ни один из них на самом деле не был МОИМ сайтом.
В результате я решил провести некоторое время на выходных, собирая что-то вместе. Я просто хотел быстро настроить его, поэтому я собрал быстрое приложение Sinatra и разместил его на Heroku . Если вы не использовали их раньше, то установить оба Rubygems действительно легко:
gem install sinatra heroku Я был поражен тем, как быстро было развернуто веб-сайт с использованием этих двух технологий — весь процесс занял пару часов от начала до конца *. Теперь сайт работает , и я подумал, что смогу описать опыт и рабочий процесс создания и развертывания веб-сайта таким образом.
- Я должен добавить, что пока сайт заработал и заработал всего пару часов. Прошло довольно много часов после того, как изменили дизайн и сделали его «просто правильным»! Это по-прежнему не меняет того факта, что голые сайты работали очень быстро.
Это Манчестер — мы делаем все по-другому здесь
Когда я начал думать о теме для своего сайта, я очень быстро поселился в моем городе Манчестере . Я действительно горжусь тем, что приехал из такого замечательного города, и хотел включить его аспекты (особенно музыку) в простой дизайн. Поиграв с множеством различных цветовых комбинаций, я остановился на черном и желтом, которые являются городскими цветами (талисман города — шмель). Эти цвета также представлены в Factory Records и печально известном брендинге ночного клуба Hacienda . Я не много занимался дизайном компьютера — всего несколько набросков карандашом и бумагой и разработка логотипа в Inkscape . Как только это было сделано, я пошел прямо к созданию сайта.
Почему Синатра?
Для начала я просто хотел создать одностраничный сайт, который я мог бы создать с использованием простого старого статического HTML-файла. Так почему я пошел с Синатрой? Было несколько причин. Первой была простота: я начал с одного файла — main.rb — используя встроенные представления:
| ########### DAZ4126 website ########### | |
| require ‘bundler’ | |
| Bundler.require | |
| get ‘/’ do | |
| @title = «DAZ, Made in Manchester» | |
| slim :index | |
| end | |
| __END__ | |
| ########### Views ########### | |
| @@index | |
| h1 title=’Traditional Mancunian Greeting’ Alright Mate! | |
| p Welcome to my website! My name is DAZ and I work, rest and play in Manchester,UK. | |
| p I build websites, play water polo and eat burgers. | |
| p Thanks for visiting. Have a nice day! |
by Это означало, что я мог быстро разработать сайт на начальных этапах, так как все (представления, стили, маршруты и т. Д.) Было в целом в одном файле. Использование Sinatra также позволило мне писать свои взгляды, используя Slim , делая разметку намного проще. Кроме того, я мог бы использовать файл макета, который можно восстановить, если я добавлю другие страницы в будущем.
Чтобы перейти к моей теме о Манчестере, я хотел добавить несколько цитат о городе в баннер в верхней части страницы, которые будут меняться при каждом посещении. Это было легко сделать, используя немного Ruby, но это было бы невозможно при использовании статической страницы. Я начал с написания 3-х кавычек в виде встроенных представлений внизу моего файла main.rb:
| @@quote1 | |
| blockquote rel=«http://www.flickr.com/photos/nativephotography/4343566244/» We Do Things Differently Here | |
| cite Anthony H Wilson | |
| @@quote2 | |
| blockquote rel=«http://shop.visitmanchester.com/store/product/2265/Quote-magnet—dark-blue/» They return the love around here, don‘t they? | |
| cite Guy Garvey | |
| @@quote3 | |
| blockquote rel=«http://shop.visitmanchester.com/store/product/2265/Quote-magnet—dark-blue/» It All Comes from Here | |
| cite Noel Gallagher |
Затем я создал переменную экземпляра в обработчике, который случайно выбрал одну из кавычек:
| @banner = «quote#{(rand(3)+1)}« |
Теперь я мог бы поместить этот кусок кода в соответствующую позицию в макете:
| —if @banner | |
| #banner | |
| == slim @banner.to_sym |
Использование Sinatra также облегчило добавление некоторых параметров конфигурации с помощью блока конфигурации в верхней части main.rb. Этот блок содержит любые настройки для всех сайтов.
| ########### configuration & settings ########### | |
| configure do | |
| set :name, ENV[‘NAME’] || ‘DAZ4126’ | |
| set :author, ENV[‘AUTHOR’] || ‘DAZ’ | |
| set :analytics, ENV[‘ANALYTICS’] || ‘UA-XXXXXXXX-X’ | |
| set :javascripts, %w[ ] | |
| set :fonts, %w[ Abel ] | |
| set :markdown, :layout_engine => :slim | |
| end |
Обратите внимание на настройки среды (которые начинаются с ENV ) — они используются Heroku для настроек в любой точке мира. Их легко настроить с помощью простой команды:
heroku config:add AUTHOR=DAZ
Блок configure сначала будет искать их, и если они не были установлены, используйте значение по умолчанию, которое следует после ||.
Синатра также позволяет мне реализовывать страницы 404 «Страница не найдена» и «500 ошибок» всего за пару строк:
| not_found { slim :’404′ } | |
| error { slim :’500′ } |
Все, что мне нужно сделать, это создать пару представлений, которые будут отображаться в случае возникновения следующих ошибок:
| @@404 | |
| h1 404! | |
| p That page is missing | |
| @@500 | |
| h1 500 Error! | |
| p Oops, something has gone terribly wrong! |
В будущем я планирую создать небольшой блог-движок, чтобы я мог добавить блог на сайт — это будет легко, так как фонды сайта уже используют Sinatra.
Использование Sinatra также позволило быстро и легко добавить контактную форму (подробнее об этом позже). Опять же, я мог бы сделать это с помощью некоторого php, который легко найти в Интернете, но я предпочитаю использовать Ruby, и я думаю, что это говорит о том, что Sinatra можно использовать как современную Ruby-альтернативу PHP для создания небольших динамических сайтов. ,
Нахальные Стили
Синатра сделал простым добавление использования Sass для предварительной обработки CSS. Все, что мне было нужно, это следующая строка кода:
| get(‘/styles.css’){ scss :styles } |
Использование Sass было важно для быстрой итерации стиля сайта и поддержания организованных стилей. Я использовал отдельные файлы для сброса , настроек , микшинов и адаптивного макета . хранение их в отдельных файлах сделало их намного проще в управлении. Затем их можно импортировать в основную таблицу стилей с помощью команды @import:
| @import «reset«; | |
| @import «settings«; | |
| @import «mixins«; | |
| @import «responsive«; |
В файле настроек я использовал переменные для цветов и шрифтов, которые я хотел использовать.
| $normalfont: «Courier New«, «Nimbus Mono L«, Monospace; | |
| $headingfont: Abel,«Liberation Sans«,Helvetica ,Arial, «Nimbus Sans L«, FreeSans, Sans-serif; | |
| $basefontsize: 13px; | |
| $thickness:6px; | |
| $width: 90%; | |
| $mainwidth: 62%; | |
| $sidebarwidth: 32%; |
Я использовал следующую технику для управления своими цветами:
| $grey:#A1A794; | |
| $yellow:#F1E166; | |
| $banner:$yellow; |
Затем в моем основном файле stylesheet.scss я бы поместил эту строку:
| #banner{background:$banner} |
Это означало, что я мог поэкспериментировать с желаемыми оттенками цветов, отредактировав значение переменных $ yellow и $ grey. Я также мог решить, какого цвета должен быть баннер, просто изменив переменную $ banner в файле настроек. Это избавило меня от необходимости просматривать основную таблицу стилей, чтобы найти стили для баннера. Я использовал эту технику для цветов всех основных разделов.
Я также использовал миксины для повторяющихся бит кода.
| @mixin links($color:white,$hovercolor:red,$background:$color){ | |
| a,a:link,a:visited{ | |
| text-decoration: underline; | |
| text-shadow: none; | |
| color:$color; | |
| &:hover{ | |
| background: $background; | |
| color:$hovercolor; | |
| } | |
| } | |
| } |
Это позволило очень просто использовать один и тот же стиль ссылок с разными цветовыми схемами в разных частях страницы. Например, в нижнем колонтитуле я хотел, чтобы желтые ссылки были черными при наведении:
| footer{ | |
| @include links($yellow,$black); | |
| } |
Все это заняло около часа, чтобы создать базовый функционирующий сайт. Следующий час занялся разбором хостинга.
Хостинг на Heroku
Далее был хостинг на Heroku. Опять это было легко. Я создал приложение для их нового стека Celadon Cedar:
heroku create daz4126 — стек кедра
Это создает приложение, которое можно найти на http://daz4126.herokuapp.com. Но мне нужен был собственный домен, поэтому я купил daz4126.com, а затем установил дополнения Heroku Custom Domains и Zerigo:
heroku addons:add custom_domains:basic heroku addons:add zerigo_dns:basic
Затем я добавил свой недавно приобретенный домен (а также субдомен www. На тот случай, если кто-то еще его использует):
домены герои: добавить daz4126.com
домены герои: добавить www.daz4126.com
И наконец, я изменил имена серверов своего регистратора, чтобы они указывали на серверы Zerigo:
a.ns.zerigo.net b.ns.zerigo.net c.ns.zerigo.net d.ns.zerigo.net
Процесс обновления серверов имен варьируется и зависит от того, кем вы зарегистрировали домен. Большинство регистраторов позволяют вам делать это самостоятельно онлайн (мой сделал), но вам, возможно, придется связаться с некоторыми, чтобы попросить их сделать это для вас.
И бум! Http://daz4126.com и http://www.daz4126.com сразу показывали мое новое творение.
Форма обратной связи
Я также хотел контактную форму, чтобы люди могли связаться. Это было действительно легко, используя самоцвет Pony и бесплатную надстройку Heroku SendGrid для управления доставкой электронной почты. Для их установки просто необходим следующий код:
sudo gem install pony heroku addons:add sendgrid:starter
Все, что мне было нужно, это форма на веб-сайте, которую я построил в Slim:
| form action=‘/’ method=‘post’ | |
| label for=‘message’ Write me a short message below | |
| textarea rows=’12’ cols=’40’ name=‘message’ | |
| input#send.button type=’submit’ value=’Send’ |
После этого это был просто случай настройки Pony в обработчике. Поскольку форма была на главной странице, я только что сделал обратную ссылку на корневой URL:
| post ‘/’ do | |
| require ‘pony’ | |
| Pony.mail( | |
| from: «DAZ4126<[email protected]>», | |
| to: ‘[email protected]’, | |
| subject: «A message from the DAZ4126 website», | |
| body: params[:message], | |
| port: ‘587’, | |
| via: :smtp, | |
| via_options: { | |
| :address => ‘smtp.sendgrid.net’, | |
| :port => ‘587’, | |
| :enable_starttls_auto => true, | |
| :user_name => ENV[‘SENDGRID_USERNAME’], | |
| :password => ENV[‘SENDGRID_PASSWORD’], | |
| :authentication => :plain, | |
| :domain => ‘heroku.com’ | |
| }) | |
| redirect ‘/success’ | |
| end |
Поскольку я использую Heroku, все параметры были предварительно настроены при установке дополнения SendGrid. Настройки ENV автоматически заполняются именем пользователя и паролем для Sendgrid, поэтому больше ничего не нужно делать.
Как только это будет передано в Heroku, контактная форма работает безупречно — не стесняйтесь, отправьте мне сообщение !.
Добавление дополнительного контента
Что-то еще, что я реализовал, было простым способом добавления дополнительного контента с помощью этого небольшого фрагмента кода:
| get ‘/:page’ do | |
| if File.exists?(‘views/’+params[:page]+‘.slim’) | |
| slim params[:page].to_sym | |
| elsif File.exists?(‘views/’+params[:page]+‘.md’) | |
| markdown params[:page].to_sym | |
| else | |
| raise error(404) | |
| end | |
| end |
Это в основном проверяет, есть ли какие-либо страницы в папке представлений. Сначала он проверяет, есть ли тонкая страница, затем на страницу уценки. Если он не может найти, то показывает страницу ошибки 404. Это означает, что я могу добавить любые новые страницы на сайт, просто добавив тонкий файл или файл уценки в папку представлений. Адрес страницы будет http://daz4126.com/filename. Опять же, это способствует некоторому быстрому развитию — я могу добавлять страницы очень быстро и без добавления дополнительных маршрутов или контроллеров.
Одна вещь, которая мне нравится в этом, заключается в том, что она позволяет легко создать динамический сайт. С небольшими изменениями это можно было бы использовать для быстрого макетирования сайта, чтобы показать его клиентам — забудьте об использовании программного обеспечения каркаса, просто создайте сайт там и тогда в браузере!
Я собираюсь продолжить работу над сайтом в течение следующих нескольких недель, а затем приступить к написанию этого блогового движка (о котором я напишу здесь в качестве учебного пособия). Вы можете увидеть готовый сайт здесь (и он также связан с моей био ниже!), И весь код находится на github .
Я, безусловно, рекомендую попробовать Sinatra и Heroku, если вы хотите быстро создать относительно простой сайт. Это идеальное сочетание скорости и мощности с возможностью расширения сайта в будущем.
Я хотел бы услышать любые отзывы или если у кого-то есть мысли по поводу использования Sinatra и Heroku для быстрого развития, пожалуйста, оставьте комментарий ниже.