-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
191 lines (152 loc) · 12.6 KB
/
index.html
File metadata and controls
191 lines (152 loc) · 12.6 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta charset="utf-8"/>
<title>从心所欲</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href='http://fonts.googleapis.com/css?family=Alegreya:400italic,700italic,400,700' rel='stylesheet'
type='text/css'>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.1/styles/default.min.css">
<link href="css/screen.css" rel="stylesheet" type="text/css" />
</head>
<body>
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/index.html">从心所欲</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active" ><a href="/index.html">Home</a></li>
<li
><a href="/archives.html">Archives</a></li>
<li
>
<a href="/pages/about.html">About</a>
</li>
<li><a href="/feed.xml">RSS</a></li>
</ul>
</div><!--/.nav-collapse -->
</div><!--/.container-fluid -->
</nav>
<div class="container">
<div class="row">
<div class="col-lg-9">
<div id="content">
<div id="post">
<div class="post-header">
<div id="post-meta" class="row">
<div class="col-lg-6">2016年1月7日</div>
</div>
<h2>Quick Start Guide</h2>
</div>
<div>
<ol class="content"><li><a href="#features">Features</a></li><li><a href="#prerequisites">Prerequisites</a></li><li><a href="#usage">Usage</a></li><ol><li><a href="#creating_a_new_site">Creating a New Site</a></li><li><a href="#running_the_server">Running the Server</a></li><li><a href="#site_configuration">Site Configuration</a></li><li><a href="#switching_between_markdown_and_asciidoc">Switching between Markdown and AsciiDoc</a></li><li><a href="#selecting_a_theme">Selecting a Theme</a></li><li><a href="#customizing_layouts">Customizing Layouts</a></li><li><a href="#code_syntax_highlighting">Code Syntax Highlighting</a></li></ol><li><a href="#deploying_your_site">Deploying Your Site</a></li><li><a href="#some_sites_made_with_cryogen">Some Sites Made With Cryogen</a></li></ol>
<p>This intro only documents a subset of Cryogen's features. For additional documentation please see the <a href='http://cryogenweb.org'>cryogen site</a>.</p><h2><a name="features"></a>Features</h2><ul><li>Blog posts and pages with Markdown (default) or AsciiDoc</li><li>Tags</li><li>Table of contents generation</li><li>Plain HTML page templates</li><li>Code syntax highlighting</li><li>Disqus support</li><li>Sitemap generation</li><li>RSS feed generation</li><li>Sass/SCSS compilation</li></ul><h2><a name="prerequisites"></a>Prerequisites</h2><p>You will need <a href='https://github.com/technomancy/leiningen'>Leiningen</a> 2.5.0 or above installed.</p><h2><a name="usage"></a>Usage</h2><h3><a name="creating_a_new_site"></a>Creating a New Site</h3><p>A new site can be created using the Cryogen template as follows:</p><pre><code>lein new cryogen my-blog
</code></pre><h3><a name="running_the_server"></a>Running the Server</h3><p>The web server can be started from the <code>my-blog</code> directory using the <code>lein-ring</code> plugin:</p><pre><code>lein ring server
</code></pre><p>The server will watch for changes in the <code>resources/templates</code> folder and recompile the content automatically.</p><h3><a name="site_configuration"></a>Site Configuration</h3><p>The site configuration file is found at <code>templates/config.edn</code>, this file looks as follows:</p><pre><code class="clojure">{:site-title "My Awesome Blog"
:author "Bob Bobbert"
:description "This blog is awesome"
:site-url "http://blogawesome.com/"
:post-root "posts"
:page-root "pages"
:post-root-uri "posts-output"
:page-root-uri "pages-output"
:tag-root-uri "tags-output"
:blog-prefix "/blog"
:rss-name "feed.xml"
:rss-filters ["cryogen"]
:recent-posts 3
:post-date-format "yyyy-MM-dd"
:sass-src nil
:sass-dest nil
:theme "blue"
:resources ["img"]
:keep-files [".git"]
:disqus? false
:disqus-shortname ""
:ignored-files [#"\.#.*" #".*\.swp$"]
:posts-per-page 5
:blocks-per-preview 2
:previews? false}
</code></pre><p>For information about each key please see the <a href='http://cryogenweb.org/docs/configuration.html'>"Configuration"</a> portion of the Cryogen documentation site.</p><h3><a name="switching_between_markdown_and_asciidoc"></a>Switching between Markdown and AsciiDoc</h3><p>Cryogen comes with Markdown support as default. If you want to use AsciiDoc instead, open the <code>project.clj</code> in your created blog (e.g. <code>my-blog</code>), and change the line in <code>:dependencies</code> that says <code>cryogen-markdown</code> to <code>cryogen-asciidoc</code>. Instead of looking for files ending in <code>.md</code> in the <code>resources/templates/md</code> directory, the compiler will now look for files ending in <code>.asc</code> in the <code>resources/templates/asc</code> directory.</p><h3><a name="selecting_a_theme"></a>Selecting a Theme</h3><p>The Cryogen template comes with two themes in the <code>resources/templates/themes</code> folder. To change your blog's theme, change the value of the <code>:theme</code> key in <code>config.edn</code>.</p><h3><a name="customizing_layouts"></a>Customizing Layouts</h3><p>Cryogen uses <a href='https://github.com/yogthos/Selmer'>Selmer</a> templating engine for layouts. Please refer to its documentation to see the supported tags and filters for the layouts.</p><p>The layouts are contained in the <code>resources/templates/themes/{theme}/html</code> folder of the project. By default, the <code>base.html</code> layout is used to provide the general layout for the site. This is where you would add static resources such as CSS and JavaScript assets as well as define headers and footers for your site.</p><p>Each page layout should have a name that matches the <code>:layout</code> key in the page metadata and end with <code>.html</code>. Page layouts extend the base layout and should only contain the content relaveant to the page inside the <code>content</code> block. For example, the <code>tag</code> layout is located in <code>tag.html</code> and looks as follows:</p><pre><code class="xml">{% extends "templates/html/layouts/base.html" %}
{% block content %}
<div id="posts-by-tag">
<h2>Posts tagged {{name}}</h2>
<ul>
{% for post in posts %}
<li>
<a href="{{post.uri}}">{{post.title}}</a>
</li>
{% endfor %}
</ul>
</div>
{% endblock %}
</code></pre><h3><a name="code_syntax_highlighting"></a>Code Syntax Highlighting</h3><p>Cryogen uses <a href='https://highlightjs.org/'>Highlight.js</a> for code syntax highlighting. You can add more languages by replacing <code>templates/js/highlight.pack.js</code> with a customized package from <a href='https://highlightjs.org/download/'>here</a>.</p><p>The <code> initHighlightingOnLoad</code> function is called in <code>{theme}/html/base.html</code>.</p><pre><code class="xml"><script>hljs.initHighlightingOnLoad();</script>
</code></pre><h2><a name="deploying_your_site"></a>Deploying Your Site</h2><p>The generated static content will be found under the <code>resources/public</code> folder. Simply copy the content to a static folder for a server such as Nginx or Apache and your site is now ready for service.</p><p>A sample Nginx configuration that's placed in <code>/etc/nginx/sites-available/default</code> can be seen below:</p><pre><code class="javascript">server {
listen 80 default_server;
listen [::]:80 default_server ipv6only=on;
server_name localhost <yoursite.com> <www.yoursite.com>;
access_log /var/log/blog_access.log;
error_log /var/log/blog_error.log;
location / {
alias /var/blog/;
error_page 404 = /404.html;
}
}
</code></pre><p>Simply set <code>yoursite.com</code> to the domain of your site in the above configuration and ensure the static content is available at <code>/var/blog/</code>. Finally, place your custom error page in the <code>/var/blog/404.html</code> file.</p><p>More information on deployment can be found <a href='http://cryogenweb.org/docs/deploying-to-github-pages.html'>here</a>.</p><h2><a name="some_sites_made_with_cryogen"></a>Some Sites Made With Cryogen</h2><ul><li><a href='http://carmenla.me/blog/index.html'>Creator's blog</a></li><li><a href='http://cryogenweb.org'>Cryogen Documentation Site</a></li><li><a href='http://yogthos.net/'>Yogthos' blog</a></li><li><a href='http://www.clojure.tn'>Clojure :in Tunisia</a></li><li><a href='http://dl1ely.github.io'>dl1ely.github.io</a></li><li><a href='http://jonase.github.io/nil-recur'>nil/recur</a></li><li><a href='http://tangrammer.github.io/'>on the clojure move</a></li><li><a href='http://blog.jethrokuan.com/'>cognizance</a></li><li><a href='http://www.agynamix.de'>AGYNAMIX Site & Blog</a></li><li><a href='http://eresident.me'>e-Resident Me</a></li><li><a href='http://www.chadstovern.com'>Chad Stovern's blog</a></li><li><a href='https://greative.jp/'>Greative</a></li></ul>
</div>
<div id="post-tags">
<b>Tags: </b>
<a href="/tags/cryogen.html">cryogen</a>
</div>
<div id="prev-next">
<a class="right" href="/posts/2014-11-04-second-post.html">Yet Another Post »</a>
</div>
</div>
</div>
</div>
<div class="col-md-3">
<div id="sidebar">
<h3>Links</h3>
<ul id="links">
<li><a href="http://cryogenweb.org/docs/home.html">Cryogen Docs</a></li>
<li><a href="http://carmenla.me/blog/index.html">Carmen's Blog</a></li>
<li><a href="/pages/another-page.html">Another Page</a></li>
</ul>
<div id="recent">
<h3>Recent Posts</h3>
<ul>
<li><a href="/posts/2016-01-07-docs.html">Quick Start Guide</a></li>
<li><a href="/posts/2014-11-04-second-post.html">Yet Another Post</a></li>
<li><a href="/posts/2014-03-10-first-post.html">A Post</a></li>
</ul>
</div>
<div id="tags">
<h3>Tags</h3>
<ul>
<li><a href="/tags/cryogen.html">cryogen</a></li>
<li><a href="/tags/very fetch.html">very fetch</a></li>
<li><a href="/tags/not fetch.html">not fetch</a></li>
</ul>
</div>
</div>
</div>
</div>
<footer>Copyright © David
<p style="text-align: center;">Powered by <a href="http://cryogenweb.org">Cryogen</a></p></footer>
</div>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="js/highlight.pack.js" type="text/javascript"></script>
<script>hljs.initHighlightingOnLoad();</script>
</body>
</html>