Вы несколько лет писали свой проект и теперь хотите привлечь пользователей? У меня есть простой, как холостяцкая яичница с беконом, рецепт специально для вас.
Для приготовления простого сайта вам понадобится:
- репозиторий на GitHub — 1 штука
- готовый html шаблон, для придания приятного вида — 1 штука
- кусочек свежего компилирущегося C++ кода — минимум 1 строка кода
- готовые javascript соусы из магазина — ~500Kb
- картинки
и анимашкипо вкусу
Меняйте любые компоненты, экспериментируйте и готовьте свои сайты для любимого языка!
Готовим хостинг
В данном примере для хостинга я буду использовать GitHub. Да-да, он позволяет не только работать с репозиториями, но и предоставляет возможность публиковать сайты для проекта. Всё что нужно сделать, это создать ветку gh-pages и закоммитить туда файл index.html с сайтом:
# Прим: здесь и далее не забывайте заменять user на ваше имя в GitHub,
# а repository на имя вашего репозитория.
# Клонируем наш репозиторий в локальную папку:
git clone github.com/user/repository.git
# Создаем ветку gh-pages
cd repository
git checkout --orphan gh-pages
# Удаляем всё лишнее
git rm -rf .
# Создаём и коммитим index.html
echo "Test" > index.html
git add index.html
git commit -a -m "Testing gh-pages"
# Закидываем изменения обратно на GitHub
git push origin gh-pages
Теперь ваша страница доступна по адресу http(s)://user.github.io/repository/. Разумеется, при желании, вы можете выбрать другой хостинг.
Украшаем блюдо html статикой
Самое время наполнить сайт чем-либо полезным. Находим в интернете приятный для глаза html шаблон и закидываем его на наш хостинг.
# Закидываем наш html шаблон в репозиторий:
cp -rf ../folder_with_template/* ./
Сейчас самая сложная и творческая часть блюда. Необходимо готовый шаблон наполнить содержимым, добавить описание проекта, документацию и прочие полезные вещи.
По завершении, не забываем все закоммитить и отправить на GitHub:
git add *
git commit -m "Added some content"
git push
Подготавливаем мясо код
Для маринада нам понадобится jQuery и редактор Ace написанный на javascript. Можно обойтись и без этих компонентов, или заменить их на что-то иное. Лично я попробовал несколько редакторов и Ace.js показался мне самым удобным и функциональным. Из недостатков у него большой вес ~500Kb.
Выбираем местечко на странице, куда мы поместим онлайн компиляцию. Добавляем в нужное место:
<div id="code">
... your code goes here ...
</div>
Не забываем добавить CSS и загрузку javascript:
<style type="text/css" media="screen">
#code {
width: 100%;
float:left;
min-height:100px;
overflow: hidden;
}
</style>
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/ace/ace.js"></script>
Теперь нужно настроить наш редактор:
<script>
var code;
$(function() {
code = ace.edit("code"); // создаем редактор из элемента с id="code"
code.setTheme("ace/theme/textmate"); // выбираем тему оформления для подсветки синтаксиса
code.getSession().setMode("ace/mode/c_cpp"); // говорим что код надо подсвечивать как C++ код
code.setShowPrintMargin(false); // опционально: убираем вертикальную границу в 80 сиволов
code.setOptions({
maxLines: Infinity, // опционально: масштабировать редактор вертикально по размеру кода
fontSize: "12pt", // опционально: размер шрифта ставим побольше
});
code.$blockScrolling = Infinity; // отключаем устаревшие, не поддерживаемые фишки редактора
});
</script>
С GitHub избежать этого достаточно просто, благо он позволяет cross-origin resource sharing. То есть вы можете запрашивать со своей статической страницы на http(s)://user.github.io/repository/ ресурсы, например с raw.githubusercontent.com. Просто допишите следующее после code.$blockScrolling = Infinity;
$.get("https://raw.githubusercontent.com/user/repository/master/" + "path_to_source_file_in_repo.cpp", function(data) {
code.setValue(data); // обновляем содержимое редактора полученными данными
code.clearSelection(); // опционально: снимаем выделение строк в редакторе
});
Продвинутые кулинары могут самостоятельно добавить проверку ошибок и вывод соответствующего сообщения пользователю.
В результате вы должны увидеть ваш код в редакторе с красивой подсветкой синтаксиса:
Жарим бекон код
Итак, теперь нам надо добавить кнопку для компиляции кода и место для вывода результата на нашу страницу:
<button id="run" onclick='run();'>Run</button>
<p>Output:</p><pre id="output">Waiting...</pre>
С онлайн компиляцией нам будет помогать сервис Coliru:
function run() {
// Команда для компиляции на удаленном сервере
var cmd = "g++ -Wall main.cpp -o main_prog && echo 'Compilation: SUCCESS."
+ " Program output is:\n' && ./main_prog && echo \"\nExit code: $?\"";
var output = $("#output");
output.text('');
var to_compile = {
"src": code.getValue(),
"cmd": cmd,
};
output.text("Executing... Please wait.");
$.ajax({
url: "http://coliru.stacked-crooked.com/compile",
type: "POST",
data: JSON.stringify(to_compile),
contentType:"text/plain; charset=utf-8",
dataType: "text"
}).done(function(data) {
output.text(data);
}).fail(function(data) {
output.text("Server error: " + data);
});
};
Даём попробовать блюдо друзьям
Остались последние штрихи, вишенка на
<link rel="stylesheet" href="social-likes_flat.css">
<meta property="og:title" content="Your Title"/>
<meta property="og:image" content="Your logo"/>
<link rel="canonical" href="https://user.github.io/repository/">
<meta property="og:url" content="https://user.github.io/repository/"/>
<meta property="og:site_name" content="Your repository name"/>
<meta property="og:type" content="website"/>
<meta property="og:description" content="Your short description"/>
...
<script src="social-likes.min.js"></script>
...
<div class="social-likes right" data-counters="no">
<div class="facebook" title="Share on Facebook">Facebook</div>
<div class="twitter" title="Share on Twitter">Twitter</div>
<div class="plusone" title="Share on Google+">Google+</div>
<div class="vkontakte" title="Share on VK">VK</div>
<div class="odnoklassniki" title="Share on Odnoklassniki">Odnoklassniki</div>
<div class="mailru" title="Share on MyWorld">MyWorld</div>
</div>
Готово! Осталось хитростью и обманом заставить людей вас полайкать. Например написать им: «Привет, Вася. Проверь, пожалуйста, работают ли у меня социальные кнопки!».
Вместо итога
Получившееся блюдо можно модифицировать на ваш вкус. Вместо GitHub можно использовать любые понравившиеся вам сервисы, Coliru умеет компилировать и С код (возможно что другие языки так же поддерживаются). Сервисов для онлайн-компиляции имеется достаточно много, если поискать, то можно найти аналогичные сервисы и для вашего любимого языка.
Надеюсь этот мини-рецепт будет кому-то полезен и добавит интерактивности вашим проектам.
Результат в моем случае выглядит вот так: apolukhin.github.io/Boost-Cookbook-4880OS
Комментарии (16)
Fedcomp
05.11.2015 10:01+2> С онлайн компиляцией нам будет помогать сервис Coliru
пожалуй с этого и стоило начинать.
Antelle
05.11.2015 10:35А я думал, вы скомпириловали emscripten на emscripten. Что-то вроде этой демки, только не из LLVM а прямо из C++.
antoshkka
05.11.2015 13:32Основная проблема с таким подходом для С++/С — необходимость отдавать пользователю большое количество библиотек и заголовочных файлов. Для библиотеки Boost придется отдавать более 100MB данных (точнее 100MB — это если в бинарном виде; в emscripten размер наверняка увеличится раза в два-три).
К тому же некоторые вещи очень сложно перенести в браузер (многопоточность, работа с файлами и директориями, coroutines, true random numbers).
Высокие требования к производительности тоже проблема: примеры на Boost.Spirit или Boost.GIL на среднем железе могут собираться более 20 секунд, а на сайт могут заходить и с мобильных устройств. Уж лучше собирать эти примеры на мощном удаленном сервере и быстрее показывать пользователю результат.
xenohunter
05.11.2015 12:33+2Что вами движет, когда вы пишете «репозитарий»? Repository же.
antoshkka
05.11.2015 13:03+1С русским языком в технических статьях всегда сложно. С одной стороны надо стараться писать статью на русском, с другой стороны необходимо минимально коверкать термины.
Придерживаюсь следующего (неидеального) правила:
* переводить на русский созвучные часто употребимые термины (static -> статический, class -> класс, repository -> репозитарий)
* оставлять неизменными редкие или звучащие на русском абсолютно по другому термины (inline-> встраиваемые, alignment-> выравнивание)xenohunter
05.11.2015 13:09+2Мне кажется, что «репозитарий» — уж очень редкое слово в русском языке, и что калька с английского была бы уместнее.
deniskreshikhin
05.11.2015 15:14Калька это заменять «репозиторий» на слово «хранилище».
А в данном случае репозитарий это просто устоявшееся и ошибочное написание лат. repositorium (хранилище). Видимо под воздействием другого однокоренного слова лат. depositarius (хранитель), где действительно пишется «а».
Т.е. если бы слово репозитарий существовало, то оно должно было означать человека который хранит, а не место для хранения.
В английском такая же ситуация — a repository, но a depositary.xenohunter
05.11.2015 16:16+1Да, с «калькой» я погорячился. Не знаю тогда, как назвать обычное заимствование.
Репозитарий Торвальдс, я понял.
Спасибо за разъяснение!
boxfrommars
05.11.2015 13:46+6Грамота.ру говорит, что репозиторий.
new.gramota.ru/spravka/buro/search-answer?s=274414
withkittens
05.11.2015 21:49+2А лично меня ещё коробит порядок слов в «html шаблон», «C++ код». В английском это нормальный порядок слов, но в русском он кажется чужим. Ведь почему-то не говорят «gh-pages ветку», «index.html файл», «Ace редактор», «Coliru сервис» и т.д.
/discussxenohunter
05.11.2015 22:50Это можно легко игнорировать, мысленно подставив девис: «HTML-шаблон» уже не так сильно режет взгляд, правда? В целом же, я согласен, мне тоже не нравится заимствование чуждых структур речи. Правда, хоть это и просторечие, многие говорят «сентябрь-месяц», и здесь я даже насчёт дефиса не уверен.
webhamster
Не думал что когда-нибудь на самом деле появятся сервисы онлайн компиляции. Просто предстваить себе не могу, для чего они нужны? Единственный сеттинг который улавливаю — это для обучения студентов и обмена маленькими программами-лабораторками.
Просветите меня, зачем это вообще нужно?
risik
Имхо для обучения в первую очередь.
Но бывают и другие случаи :) Например, хочется попробовать новый язык или быстро наваять что-то на ходу, попробовать какую-то идею, алгоритм, а на нетбуке нет среды разработки и компилятора, они только дома на десктопе или ноутбуке помощнее и потяжелее или, вообще, у Вас ChromeBook. В этих случах online IDE самое то.
Сам пользуюсь для таких случаев c9.io поддерживает github, bitbacket, кучу разных языков программирования.
antoshkka
В основном для обучения и экспериментов.
Обучение:
Допустим что пользователь хочет понять, нужна ли ему библиотека Boost для проекта и научиться делать простые вещи на её основе. Для обучения и экспериментов ему понадобится скачать+скомпилировать+установить библиотеку, подобрать компилятор, скачать примеры, научиться их собирать. С непривычки это может занять пару часов.
С онлайн компилятором же, пользователь получает уже всё готовое и настроенное, он готов пробовать программировать как только страница загрузится.
Эксперименты:
«О! У меня есть гениальная идея как сделать очень крутую штуку под Windows. Надо только убедиться, что подобное можно сделать и под Linux».
Перезагружаться из одной ОС в другую — занятие долгое и скучное, особенно если приходится это делать по несколько раз на дню (виртуалка конечно спасает, но на слабых ноутбуках она сильно тормозит и есть много ресурсов хост системы). Онлайн компилятор тут сильно спасает.
m0Ray
Я, конечно, рискую огрести, но установка библиотек и прочего инструментария в linux — это одна команда или три клика мышью. А ещё есть WINE, которая позволяет обкатать практически что угодно для винды (за исключением, конечно, того, что ещё не реализовано проектом WINE).
Так что я по-прежнему не убеждён в нужности таких сервисов.