Проект

Общее

Профиль

Новости »

Учимся делать личный сайт на Ruby и CommonMark Markdown

Добавил(а) Михаил Губин около 2 месяца назад

Создание личного сайта может показаться сложной задачей, но с правильными инструментами и знаниями это становится гораздо проще. В этой статье мы рассмотрим, как использовать язык программирования Ruby и формат разметки текста CommonMark Markdown для создания персонального веб-сайта.

Что такое Ruby?

Ruby – это динамический, объектно-ориентированный язык программирования общего назначения. Он часто используется для разработки веб-приложений благодаря своей простоте и гибкости. Основные преимущества Ruby включают его читаемость, поддержку множества библиотек и фреймворков, а также широкое сообщество разработчиков.

Что такое CommonMark Markdown?

CommonMark Markdown – это стандартизированная версия формата Markdown, которая позволяет легко создавать форматированные текстовые документы. Это удобный способ структурировать контент без необходимости использовать HTML или другие сложные инструменты. CommonMark поддерживает такие элементы, как заголовки, списки, цитаты, ссылки и многое другое.

Инструменты для работы

Для создания сайта нам понадобятся следующие инструменты:

  • Ruby
  • RubyGems (для установки пакетов)
  • Puma (веб-сервер)
  • Sinatra (минималистичный веб-фреймворк)
  • Bundler (управление зависимостями)
  • CommonMark (библиотека для работы с CommonMark Markdown)

Установка необходимых инструментов

  1. Установите Ruby: Если у вас еще нет установленного Ruby, загрузите и установите последнюю версию с официального сайта. Для Windows пользователей есть официальный установщик, а для Linux и macOS можно воспользоваться менеджерами пакетов, такими как apt или brew.
  2. Установите Bundler: Используйте команду gem install bundler для установки пакета управления зависимостями.
  3. Установите Puma: Установите Puma с помощью команды gem install puma.
  4. Установите Sinatra: Установите Sinatra с помощью команды gem install sinatra.
  5. Установите CommonMark: Установите библиотеку CommonMark с помощью команды gem install commonmark.

Создание проекта

Создадим новый проект для нашего сайта.

  1. Перейдите в директорию, где хотите создать проект.
  2. Создайте новую директорию для вашего проекта: mkdir my_website && cd my_website.
  3. Создайте файл Gemfile с содержимым:
source 'https://rubygems.org'

gem 'sinatra', '~> 2.0'
gem 'commonmark', '~> 0.9'
  1. Запустите команду bundle install, чтобы установить необходимые зависимости.

Базовый шаблон

Теперь создадим базовый шаблон для нашего сайта. Откройте текстовый редактор и создайте файл app.rb с следующим содержанием:

require 'sinatra'
require 'commonmark'

get '/' do
  markdown = CommonMark::Parser.new('Hello World!').to_html
  erb :index, :locals => {:content => markdown}
end

get '/about' do
  markdown = CommonMark::Parser.new('About Me').to_html
  erb :index, :locals => {:content => markdown}
end

get '/contact' do
  markdown = CommonMark::Parser.new('Contact Us').to_html
  erb :index, :locals => {:content => markdown}
end

get '/articles/:id' do
  id = params[:id]
  filepath = File.join('articles', "#{id}.md")
  
  if File.exist?(filepath)
    markdown = File.read(filepath).strip
    content = CommonMark::Parser.new(markdown).to_html
    
    erb :index, :locals => {:content => content}
  else
    redirect '/404'
  end
end

get '/404' do
  erb :error404
end

get('/robots.txt') {
  erb :robotstxt
}

get('/favicon.ico') {
  erb :favicon
}

get('/css/:name') {
  erb :stylesheet, :locals => {:filename => params[:name]}
}

get('/js/:name') {
  erb :javascript, :locals => {:filename => params[:name]}
}

get('/images/:name') {
  send_file File.join('public/images', params[:name])
}

get('/fonts/:name') {
  send_file File.join('public/fonts', params[:name])
}

get('/favicons/:name') {
  send_file File.join('public/favicons', params[:name])
}

set :public, 'public'

helpers do
  def stylesheet_link(filename)
    "<link rel='stylesheet' href='/css/#{filename}'>"
  end

  def javascript_script(filename)
    "<script src='/js/#{filename}'></script>"
  end

  def favicon_link()
    "<link rel='shortcut icon' type='image/x-icon' href='/favicon.ico'>"
  end
end

set :logger, Logger.new($stdout)

run! if app_file == $PROGRAM_NAME

Этот код использует Sinatra для обработки HTTP-запросов и CommonMark для преобразования Markdown в HTML. Мы создали несколько маршрутов для основных страниц сайта, включая главную страницу, страницы «О себе», «Контакты» и статьи. Также добавлены дополнительные маршруты для статических ресурсов, таких как CSS, JavaScript, изображения и фавикон.

Шаблоны страниц

Создайте файлы .erb для наших шаблонов:

  1. views/index.erb:
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title><%= @page_title || "My Website" %></title>
  <%= favicon_link %>
  <% stylesheet_link("style.css") %>
</head>
<body>
  <header>
    <h1><%= @page_title || "My Website" %></h1>
  </header>
  <main>
    <%= yield %>
  </main>
  <footer>
    &copy; 2023 Your Name
  </footer>
  <% javascript_script("script.js") %>
</body>
</html>
  1. views/error404.erb:
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Error 404</title>
  <%= favicon_link %>
  <% stylesheet_link("style.css") %>
</head>
<body>
  <header>
    <h1>Error 404</h1>
  </header>
  <main>
    <p>Page not found.</p>
  </main>
  <footer>
    &copy; 2023 Your Name
  </footer>
  <% javascript_script("script.js") %>
</body>
</html>
  1. views/robotstxt:
User-agent: *
Disallow: /
  1. views/favicon:
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">
  1. views/stylesheet.erb:
<link rel="stylesheet" href="/css/#{filename}" />
  1. views/javascript.erb:
<script src="/js/#{filename}"></script>
  1. views/favicon.erb:
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">

Ресурсы и структура каталогов

  1. Public directory: Создайте директорию public внутри вашего проекта и поместите туда все статические ресурсы, такие как CSS, JavaScript, изображения и фавиконы.
  2. Стили и скрипты: Добавьте файлы style.css и script.js в директорию public/css и public/js соответственно.
  3. Фавикон: опционально, можно не добавлять.

Теперь ваш проект готов к запуску. Чтобы начать работу, выполните следующую команду:

bundle exec puma -C config/puma.rb

Затем откройте браузер и перейдите по адресу http://localhost:9292. Ваш сайт будет работать на порту 9292 по умолчанию.

Ваш сайт теперь работает на Ruby и CommonMark Markdown. Вы можете редактировать и добавлять новые статьи в формате Markdown в директории articles, и они будут автоматически преобразованы в HTML при загрузке страницы.

Вы можете найти дополнительную информацию и примеры использования CommonMark Markdown на официальном сайте: https://commonmark.org/.

Хотите добавить какие-нибудь дополнительные функции или оптимизировать структуру вашего сайта? Пожалуйста, дайте знать!


Комментарии