This is a starting point for a web site built with Nanoc 4.
Features:
- extends Nanoc helpers and provides templates to fully support blogs, including feeds, archives, and tags.
- works with Compass out of the box;
- builds development/production version of your site;
- aggregates JavaScript and CSS files, and minifies JavaScript, CSS and HTML;
- provides helper functions for placeholder text and images;
- adds syntax highlighting using Pygments;
- web framework agnostic (use it with Zurb Foundation, Bootstrap, etc…, or with no framework at all).
With this template, you may:
- write your posts in Markdown or Multimarkdown;
- easily add Google Analytics, Disqus, MathJax and user defined snippets to a page by editing a page's frontmatter;
- deploy via Git to GitHub Pages or other hosts.
- Nanoc 4.5.0 or later.
Optional:
- Bundler (recommended).
- Multimarkdown (only if you write content in Multimarkdown).
git clone git://github.com/lifepillar/nanoc4-template
cd nanoc4-template
bundle install
bundle exec nanoc
bundle exec nanoc view
Point your browser to http://localhost:3000.
- Edit the “Deployment” and “Site-specific metadata” sections in
nanoc.yaml. - Edit or replace
content/index.erb. - Delete
content/blog/posts/examples. You may delete the wholecontent/blogandlayouts/blogfolders if you do not need a blog. - If you do not plan to use Compass, you may delete
compass_config.rb. Do not forget to update the corresponding compilation rule inRules, too (search forfilter :compass). - Replace the favicon (
content/assets/images/favicon.png). - Put JavaScript scripts into
content/assets/scripts. If you want to aggregate some scripts, put them somewhere insidecontent/assets/componentsinstead, and add their paths to the array inall.js.erb. - Put (S)CSS files in
content/assets/stylesheets. If you use Compass, additional paths to stylesheets may be specified incompass_config.rb. Files whose name starts with an underscore are not copied to the output: you may import them inmain.scssto get a single aggregated CSS file in the output. - Put additional components, libraries or frameworks into
content/assets/components. Updatecompass_config.rb,all.js.erbandmain.scssto include the necessary files. If you need to copy stuff into your web site (e.g., fonts), define suitable routing rules inRules.
The site's content goes into the content folder. Blog posts go anywhere under
content/blog/posts. Content written in HTML, ERB or (Multi)Markdown is
processed according to predefined rules. For content in other formats, you have
to define your own rules.
In the frontmatter of any item, you may use the variables head, beginbody,
and endbody to load additional partials, just before the </head> tag, just
after <body>, and just before </body>, respectively. For example, for a page
that includes MathJax, Disqus comments and Google Analytics, the frontmatter
might look like this:
---
title: My Page
head: [mathjax]
endbody: [disqus, analytics]
---
Each variable takes a list of names of partials, which must exist inside
layouts/partials. You may use your own partials in the same way. Of course,
for a bunch of pages having the same structure, it is better to define a custom
layout.
The file lib/helpers/lorem.rb contains a few functions to put placeholder text
and images for quick prototyping. For example:
Lorem.paragraphs(n): generatesnparagraphs of random text.Lorem.sentences(n): generates a string consisting ofnrandom sentences.Lorem.words(n): generates a string ofnrandom words.Lorem.image(size, options): generates a placeholder image, by default using placehold.it.
Refer to the source code for a complete list and to the sample code for some examples of usage.
To build a production version of your site, use:
bundle exec nanoc --env=production
In the production version of your site, HTML, JavaScript and CSS files are
minified (CSS files are minified by Compass: if you do not want to use Compass,
Nanoc provides the :yui_compressor filter).
This template is configured to deploy your site on GitHub Pages. See Deploying Nanoc sites for further details.
Note: you may need to apply Nanoc's :relativize_paths filter to the
generated content.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent