You have been writing your project for several years and now you want to attract users? I have a simple, as bachelor scrambled eggs with bacon, recipe especially for you.

To make a simple website you will need:

• repository on GitHub - 1 piece
• ready html template, to give a nice view - 1 piece
• a piece of fresh compiled C ++ code - at least 1 line of code
• ready-made javascript sauces from the store - ~ 500Kb
• pictures and animations to taste

Change any components, experiment and prepare your sites for your favorite language!

We are preparing a hosting

In this example, I will use GitHub for hosting. Yes, it allows not only working with repositories, but also provides the ability to publish sites for the project. All you need to do is to create a gh-pages branch and commit the index.html file with the site there:

# :       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 

Now your page is available at http (s): //user.imtqy.com/repository/. Of course, if you wish, you can choose another hosting.

We decorate the dish with html statics

It's time to fill the site with something useful. We find a nice html template on the Internet and upload it to our hosting.

 #   html   : cp -rf ../folder_with_template/* ./ 

Now the most difficult and creative part of the dish. It is necessary to fill a ready-made template with content, add a description of the project, documentation and other useful things.
')
At the end, we do not forget everything to commit and send to GitHub:

 git add * git commit -m "Added some content" git push 

Preparing meat code

For the marinade, we need jQuery and Ace editor written in javascript. You can do without these components, or replace them with something else. Personally, I tried several editors and Ace.js seemed to me the most convenient and functional. Of the shortcomings he has a lot of weight ~ 500Kb.

Choose a place on the page where we put the online compilation. Add to the right place:

 <div id="code"> ... your code goes here ... </div> 

Do not forget to add CSS and javascript download:

 <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> 

Now we need to configure our editor:

 <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> 

As a result, you should see your code in an editor with beautiful syntax highlighting:

Fry bacon code

So, now we need to add a button to compile the code and a place to display the result on our page:

 <button id="run" onclick='run();'>Run</button> <p>Output:</p><pre id="output">Waiting...</pre> 

With online compilation we will be helped by the Coliru service:

 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); }); }; 

Give the dish to friends

There were final touches, the cherry on our scrambled eggs is our cake! If we started all this to attract users, then it would be a sensible step to add social buttons.


Done! It remains cunning and deceit to make people go wild. For example, write to them: “Hello, Vasya. Please check if my social buttons work! ”

Instead of the total

The resulting dish can be modified to your taste. Instead of GitHub, you can use any services you like, Coliru can compile and C code (it is possible that other languages ​​are also supported). There are quite a few services for online compilation; if you search, you can find similar services for your favorite language.

I hope this mini-recipe will be useful to someone and will add interactivity to your projects.

The result in my case looks like this: apolukhin.imtqy.com/Boost-Cookbook-4880OS

PS: If it's not difficult, please check if the social buttons work.