Creating websites

Grigori Fursin edited this page Jun 5, 2018 · 7 revisions

[ Home ]

Please do not forget to check Getting Started Guides to understand CK concepts!

CK web service with unified JSON API, originally used to exchange knowledge and browse repository, can also be easily used as a simple and personal web server similar to Drupal and Mediawiki (or even integrated with them). The difference is to use open, file-based, schema-free CK repository with DOI style Unique IDs and Hadoop-based ElasticSearch instead of MySQL databases. Furthermore, it makes it possible to easily embed output of various CK modules to create live and interactive content (interactive graphs, interactive articles, etc).

Here, we demonstrate yet another CK feature: creating static and fast websites with the CK content which can be used with any webserver (Apache2, IIS, etc).

We now use this approach to power multiple websites:

For example, we've shared ADAPT workshop website as a standard CK repository via GITHUB. It is possible to obtain it simply as:
$ ck pull repo:ck-web-adapt-workshop

All ADAPT files (html templates, html pages, css styles, images, etc) can be found in wfe:adapt-workshop entry:

$ ck find wfe:adapt-workshop

The meta description of this entry (.cm/meta.json) describes main html template used for all pages, global keywords, share code and top menu description:

 {
 "template_file": "_resources/_template.html",
 "menu_desc":[
   {
     "html_start":"<div id=\"ck_menu_0\"><div style=\"padding:3px;margin-top:6px;\">",
     "html_end":"</div></div>",
     "html_on_start":"<span id=\"ck_menu_text_0_selected\">",
     "html_on_end":"</span>",
     "html_off_start":"<span id=\"ck_menu_text_0\">",
     "html_off_end":"</span>",
     "nodes":[
       {"id":"index", "name":"Home", "link":"$#wfe_url_prefix_page#$index"},
       {"id":"cfp", "name":"CFP","link":"$#wfe_url_prefix_page#$cfp2016"},
       {"id":"program", "name":"Program","link":"$#wfe_url_prefix_page#$program2016"},
       {"id":"submission", "name":"Submission","link":"$#wfe_url_prefix_page#$submission"},
       {"id":"reproducibility", "name":"Reproducibility","link":"$#wfe_url_prefix_page#$reproducibility"},
       {"id":"prior", "name":"Prior workshops","link":"$#wfe_url_prefix_page#$prior_workshops"},
       {"id":"committees", "name":"Committees","link":"$#wfe_url_prefix_page#$committees"}
     ]
   }
 ],
 "global_keywords":"adapt workshop, self-tuning, adaptation, performance, energy, size, cost, reproducible experimentation, big data, predictive analytics",
 "share":" \n <div class=\"a2a_kit a2a_default_style\" style=\"margin:0 auto;font-size:12px;width:60px;\">\n  <a class=\"a2a_dd\" href=\"https://www.addtoany.com/share_save\">Share</a>\n </div>\n <script type=\"text/javascript\" src=\"//static.addtoany.com/menu/page.js\"></script>\n \n"
 }

Images and other files can be found in the given entry in _resources directory.

HTML template used by default for all pages can be found in this entry in _resources/_template.html. Note, that it has various $#ck_...#$ variables that are substituted when CK visualizes pages:

  • $#ck_url_template_pull#$ - will be substituted with the URL to pull files (for example, $#ck_url_template_pull#$_resources/ck-logo.png will be substituted with URL to show CK logo image)
  • $#ck_page_keywords#$- will be substituted with keywords from ADAPT meta-information above
  • $#ck_var_share#$ - will be substituted with the share code from ADAPT meta-information
  • $#ck_template_middle#$ - will be substituted with the HTML of a given page (see below)
  • $#ck_menu#$ - will be substituted with the menu HTML (per page)
  • $#ck_title#$ - will be substituted with the title of a given page
  • $#ck_var_page_name#$ - will be substituted with a page name (file)
Each individual page is also kept inside ADAPT wfe entry and always has an associated .json file with extra parameters (title, menu, etc). For example, ADAPT CFP page is represented by two files:
  • cfp2016.html
  • cfp2016.json
The last file simply describes an HTML template (to be able to change global one), page title and menu index:
 {
  "template_file":"_resources/_template.html",
  "title":"ADAPT 2016 CFP",
  "menu":["cfp"]
 }

It is possible to visualize this website interactively via CK web server via:

$ ck start web
$ firefox http://localhost:3344/?template=adapt-workshop&page=index

where template specifies ADAPT wfe entry.

We also provided a script in script:compile-website-adapt-workshop to convert this website into static pages:

$ ck find script:compile-website-adapt-workshop

Go to this directory and run create_website.bat. This script will simply execute ck process_all_pages wfe:adapt-workshop and will create a tmp-website directory with static pages that can be uploaded to your web server such as Apache2 or Microsoft IIS. Do not forget to also copy _css and _resources directories to your web server from the original wfe:adapt-workshop entries.

That's all!

You may now create your own website by using above information and CK ADAPT entry as example, copying it to a new entry, and customizing it for your needs:

$ ck cp wfe:adapt-workshop :my-website
$ ck start web --browser --template=my-website

Questions and comments

You are welcome to get in touch with the CK community if you have questions or comments!

Clone this wiki locally
You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.
Press h to open a hovercard with more details.