Вы несколько лет писали свой проект и теперь хотите привлечь пользователей? У меня есть простой, как холостяцкая яичница с беконом, рецепт специально для вас.
Для приготовления простого сайта вам понадобится:
- репозитарий на 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
P.S.: Если не сложно, проверьте пожалуйста, работают ли социальные кнопки.
ссылка на оригинал статьи http://habrahabr.ru/post/270141/
Добавить комментарий