-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
345 lines (302 loc) · 17.7 KB
/
index.html
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
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
<!DOCTYPE html>
<html prefix="
og: http://ogp.me/ns#
article: http://ogp.me/ns/article#
" lang="ru">
<head>
<meta charset="utf-8">
<meta name="description" content="Blog">
<meta name="viewport" content="width=device-width">
<title>Блог Виталия Павленко | Блог Виталия Павленко</title>
<link href="assets/css/all-nocdn.css" rel="stylesheet" type="text/css">
<link rel="alternate" type="application/rss+xml" title="RSS" href="rss.xml">
<link rel="canonical" href="https://pavlenkov.github.io/blog/">
<!--[if lt IE 9]><script src="/assets/js/html5.js"></script><![endif]--><style>
div.input_prompt {
display: none;
}
</style>
</head>
<body>
<section class="social"><ul>
<li><a href="#" title="Home"><i class="icon-home"></i></a></li>
<li><a href="archive.html" title="Archives"><i class="icon-folder-open-alt"></i></a></li>
<li><a href="categories/index.html" title="Tags"><i class="icon-tags"></i></a></li>
<li><a href="pages/about-me/" title="About me"><i class="icon-user"></i></a></li>
<li><a href="https://github.com/PavlenkoV/links" title="Useful Links"><i class="icon-external-link"></i></a></li>
<li><a href="https://twitter.com/perfect_kingc/lists/programming" title="Twitter"><i class="icon-twitter"></i></a></li>
<li><a href="https://github.com/PavlenkoV" title="My Github"><i class="icon-github"></i></a></li>
<li><a href="rss.xml" title="RSS"><i class="icon-rss"></i></a></li>
</ul></section><section class="page-content"><div class="content" rel="main">
<div class="post">
<h1 class="title"><a href="posts/hello-world/">Hello World!</a></h1>
<div class="meta">
<div class="authordate">
<time class="timeago" datetime="2016-11-14T22:51:32+02:00">2016-11-14 22:51</time>
</div>
<div class="stats">
<a href="posts/hello-world/#disqus_thread" data-disqus-identifier="cache/posts/hello-world.html">Comments</a>
</div>
<div itemprop="keywords" class="tags">
<ul>
Тэги :
<li><a class="tag p-category" href="categories/jupyter-notebook/" rel="tag">Jupyter Notebook</a></li>
<li><a class="tag p-category" href="categories/nikola/" rel="tag">Nikola</a></li>
<li><a class="tag p-category" href="categories/web/" rel="tag">web</a></li>
</ul>
</div>
</div>
<div class="body">
<div tabindex="-1" id="notebook" class="border-box-sizing">
<div class="container" id="notebook-container">
<div class="cell border-box-sizing text_cell rendered">
<div class="prompt input_prompt">
</div>
<div class="inner_cell">
<div class="text_cell_render border-box-sizing rendered_html">
<blockquote>
<p>“Doesn’t matter if you can dream it or not, all that matters is if you can begin it or not? Take that first step.”</p>
</blockquote>
<p>Vikrmn, Corpkshetra
<br></p>
</div>
</div>
</div>
<div class="cell border-box-sizing text_cell rendered">
<div class="prompt input_prompt">
</div>
<div class="inner_cell">
<div class="text_cell_render border-box-sizing rendered_html">
<p><br><img src="images/nikola-site-950.png"><br></p>
</div>
</div>
</div>
<div class="cell border-box-sizing text_cell rendered">
<div class="prompt input_prompt">
</div>
<div class="inner_cell">
<div class="text_cell_render border-box-sizing rendered_html">
<p>В своём первом блоге хочется написать пару строк о том, без чего не получилось бы реализовать данный замысел, высказать мысли о выборе сервисов и поблагодарить комьюнити, которое разрабатывают и поддерживают данные технологии. Итак, поехали.</p>
<h4 id="Генератор-статических-сайтов-Nikola-">
<a href="https://getnikola.com/">Генератор статических сайтов Nikola </a><a class="anchor-link" href="posts/hello-world/#%D0%93%D0%B5%D0%BD%D0%B5%D1%80%D0%B0%D1%82%D0%BE%D1%80-%D1%81%D1%82%D0%B0%D1%82%D0%B8%D1%87%D0%B5%D1%81%D0%BA%D0%B8%D1%85-%D1%81%D0%B0%D0%B9%D1%82%D0%BE%D0%B2-Nikola-">¶</a>
</h4>
<p>Основной критерий выбора: он должен использовать Python. Пожалуй, самый известный из генераторов статических сайтов для Python - <a href="http://blog.getpelican.com/">Pelican </a>. К сожалению, я не успел его опробовать. В интернете есть замечательная статья о тонкостях настройки Pelican <a href="https://the-bosha.ru/2016/05/04/generator-staticheskih-blogov-pelican/">https://the-bosha.ru/2016/05/04/generator-staticheskih-blogov-pelican/</a>. Моё внимание привлёк Nicola. И в принципе, очень доволен выбором. Огромным преимуществом для меня была встроенная поддержка Jupyter notebooks (о чём расскажу ниже). Плюсом есть поддержка и доброжелательность комьюнити. К примеру, на свой вопрос я получил мгновенный ответ через <a href="https://twitter.com/getnikola">Nikola Generator Twitter </a>.</p>
<p>Полезные ссылки:</p>
<ul>
<li>Официальная документация <a href="https://getnikola.com/handbook.html">https://getnikola.com/handbook.html</a>
</li>
<li>PyPI link <a href="https://pypi.python.org/pypi/Nikola/">https://pypi.python.org/pypi/Nikola/</a>
</li>
<li><a href="http://louistiao.me/posts/how-i-customized-my-nikola-powered-site/">How I customized my Nikola-powered site</a></li>
<li><a href="http://www.shisaa.jp/postset/nikola-web.html">Nikola: the static blog engine A.K.A. How I build Shisaa.jp</a></li>
<li><a href="https://meshlogic.github.io/posts/web-design/starting-a-personal-blog-with-nikola/">Starting a Personal Blog with Nikola</a></li>
<li><a href="http://areskibelaid.com/nikola-one-kickass-site-generator/">Nikola, one kickass Site and Blog generator</a></li>
</ul>
<p>И, конечно, 'last but not least' - этот генератор назван в честь выдающегося ученого и изобретателя Николы Теслы.
Есть и определённые минусы, не всё гладко с отображением кириллицы (по крайней мере, я с этим столкнулся и пришлось подбирать шрифт), не всё в документации прописано прозрачно и многие моменты пробовал интуитивно. Но всё это мелочи по сравнению с огромным потенциалом, заложенным в данный генератор статических сайтов.</p>
</div>
</div>
</div>
<div class="cell border-box-sizing text_cell rendered">
<div class="prompt input_prompt">
</div>
<div class="inner_cell">
<div class="text_cell_render border-box-sizing rendered_html">
<h4 id="The-Jupyter-Notebook">
<a href="http://jupyter.org/">The Jupyter Notebook</a><a class="anchor-link" href="posts/hello-world/#The-Jupyter-Notebook">¶</a>
</h4>
<p><br><img src="images/jupyter-site-950.png"><br></p>
</div>
</div>
</div>
<div class="cell border-box-sizing text_cell rendered">
<div class="prompt input_prompt">
</div>
<div class="inner_cell">
<div class="text_cell_render border-box-sizing rendered_html">
<p>С помощью jupyter notebook (запустив онлайн или установив на компьютер), вы сможете создавать документы notebooks (по сути, JSON c расширение ipynb), которые содержат как программный код, который можно интерактивно запускать, вносить изменения (например, на Python), так и расширенный текст, и диаграммы. Данными документами очень удобно делиться в интернете или конвертировать в различные форматы, например, HTML, Markdown, reST, pdf. Кроме этого, это и удобная оболочка c 'магическими командами', которая позволяет тесно взаимодейстовать с Python.
<br></p>
</div>
</div>
</div>
<div class="cell border-box-sizing code_cell rendered">
<div class="input">
<div class="prompt input_prompt">In [7]:</div>
<div class="inner_cell">
<div class="input_area">
<div class=" highlight hl-ipython3"><pre><span></span><span class="o">%</span><span class="k">ll</span>
</pre></div>
</div>
</div>
</div>
<div class="output_wrapper">
<div class="output">
<div class="output_area">
<div class="prompt"></div>
<div class="output_subarea output_stream output_stdout output_text">
<pre>total 568
-rw-r--r-- 1 vitaliy 9260 лис 2 15:49 base_blog.html
-rw-r--r-- 1 vitaliy 163 жов 26 14:13 checker_div.py
drwxr-xr-x 3 vitaliy 4096 жов 26 14:13 <span class="ansi-blue-intense-fg ansi-bold">css</span>/
-rw-r--r-- 1 vitaliy 13328 лис 2 15:39 index2.html
-rw-r--r-- 1 vitaliy 17607 лис 2 15:30 index.html
drwxr-xr-x 2 vitaliy 4096 лис 14 19:13 <span class="ansi-blue-intense-fg ansi-bold">__pycache__</span>/
-rw-r--r-- 1 vitaliy 3869 лис 2 15:39 script.js
-rw-r--r-- 1 vitaliy 256336 лис 2 13:35 Untitled1.html
-rw-r--r-- 1 vitaliy 250093 лис 2 13:37 Untitled.html
drwxr-xr-x 2 vitaliy 4096 жов 26 14:13 <span class="ansi-blue-intense-fg ansi-bold">w3images</span>/
</pre>
</div>
</div>
</div>
</div>
</div>
<div class="cell border-box-sizing text_cell rendered">
<div class="prompt input_prompt">
</div>
<div class="inner_cell">
<div class="text_cell_render border-box-sizing rendered_html">
<p><br>
Пример использования Jupyter Notebook. В ходе работы над оформлением одного из сайтов, возникла необходимость просмотреть количество незакрытых div. Конечно, это удобно сделать с помощью любого текстового редактора, например, моего любимого <a href="https://www.sublimetext.com/3">Sublime Text3</a>. Но, чтобы показать как выделяется код в документе Jupyter notebook, напишем модуль на Python.
<br><br></p>
</div>
</div>
</div>
<div class="cell border-box-sizing code_cell rendered">
<div class="input">
<div class="prompt input_prompt">In [8]:</div>
<div class="inner_cell">
<div class="input_area">
<div class=" highlight hl-ipython3"><pre><span></span><span class="n">x</span> <span class="o">=</span> <span class="mi">0</span>
<span class="k">with</span> <span class="nb">open</span><span class="p">(</span><span class="s1">'index.html'</span><span class="p">)</span> <span class="k">as</span> <span class="n">f</span><span class="p">:</span>
<span class="k">for</span> <span class="n">line</span> <span class="ow">in</span> <span class="n">f</span><span class="p">:</span>
<span class="k">if</span> <span class="s1">'<div'</span> <span class="ow">in</span> <span class="n">line</span><span class="p">:</span>
<span class="n">x</span> <span class="o">+=</span> <span class="mi">1</span>
<span class="k">if</span> <span class="s1">'</div'</span> <span class="ow">in</span> <span class="n">line</span><span class="p">:</span>
<span class="n">x</span> <span class="o">-=</span> <span class="mi">1</span>
<span class="nb">print</span><span class="p">(</span><span class="n">x</span><span class="p">)</span>
</pre></div>
</div>
</div>
</div>
<div class="output_wrapper">
<div class="output">
<div class="output_area">
<div class="prompt"></div>
<div class="output_subarea output_stream output_stdout output_text">
<pre>5
</pre>
</div>
</div>
</div>
</div>
</div>
<div class="cell border-box-sizing code_cell rendered">
<div class="input">
<div class="prompt input_prompt">In [9]:</div>
<div class="inner_cell">
<div class="input_area">
<div class=" highlight hl-ipython3"><pre><span></span><span class="kn">import</span> <span class="nn">json</span>
</pre></div>
</div>
</div>
</div>
</div>
<div class="cell border-box-sizing code_cell rendered">
<div class="input">
<div class="prompt input_prompt">In [15]:</div>
<div class="inner_cell">
<div class="input_area">
<div class=" highlight hl-ipython3"><pre><span></span><span class="n">help</span><span class="p">(</span><span class="s1">'json.load'</span><span class="p">)</span>
</pre></div>
</div>
</div>
</div>
<div class="output_wrapper">
<div class="output">
<div class="output_area">
<div class="prompt"></div>
<div class="output_subarea output_stream output_stdout output_text">
<pre>Help on function load in json:
json.load = load(fp, cls=None, object_hook=None, parse_float=None, parse_int=None, parse_constant=None, object_pairs_hook=None, **kw)
Deserialize ``fp`` (a ``.read()``-supporting file-like object containing
a JSON document) to a Python object.
``object_hook`` is an optional function that will be called with the
result of any object literal decode (a ``dict``). The return value of
``object_hook`` will be used instead of the ``dict``. This feature
can be used to implement custom decoders (e.g. JSON-RPC class hinting).
``object_pairs_hook`` is an optional function that will be called with the
result of any object literal decoded with an ordered list of pairs. The
return value of ``object_pairs_hook`` will be used instead of the ``dict``.
This feature can be used to implement custom decoders that rely on the
order that the key and value pairs are decoded (for example,
collections.OrderedDict will remember the order of insertion). If
``object_hook`` is also defined, the ``object_pairs_hook`` takes priority.
To use a custom ``JSONDecoder`` subclass, specify it with the ``cls``
kwarg; otherwise ``JSONDecoder`` is used.
</pre>
</div>
</div>
</div>
</div>
</div>
<div class="cell border-box-sizing text_cell rendered">
<div class="prompt input_prompt">
</div>
<div class="inner_cell">
<div class="text_cell_render border-box-sizing rendered_html">
<p>Ccылки:</p>
<ul>
<li><a href="http://jupyter.readthedocs.io/en/latest/">Jupyter Documentation</a></li>
<li><a href="http://openfablab.ru/play/default/showtask/196">Неплохая обзорная статья на русском языке</a></li>
</ul>
<p>Для меня удобство Jupyter Notebook состоит в том, что в своих блогах я планирую показывать Python код. Поэтому установив и запустив Jupyter Notebook App на компьютере, можно в браузере формировать участки в формате Markdown и вставлять Python код, сохранять в формате .ipynb и затем Nikola конвертирует результат в HTML.
<br>
Пример:</p>
<p>(nikola) vitaliy@comp:~/Documents/my_blog$ nikola new_post -i "first.ipynb" -f ipynb --tags='web','site generator'</p>
</div>
</div>
</div>
<div class="cell border-box-sizing text_cell rendered">
<div class="prompt input_prompt">
</div>
<div class="inner_cell">
<div class="text_cell_render border-box-sizing rendered_html">
<h4 id="GitHub-Pages">
<a href="https://pages.github.com/">GitHub Pages</a><a class="anchor-link" href="posts/hello-world/#GitHub-Pages">¶</a>
</h4>
<p><br><img src="images/gh-pages-950.png"><br></p>
</div>
</div>
</div>
<div class="cell border-box-sizing text_cell rendered">
<div class="prompt input_prompt">
</div>
<div class="inner_cell">
<div class="text_cell_render border-box-sizing rendered_html">
<p>В интернете есть масса информации по использованию GitHub Pages как бесплатного хостинга для статических сайтов. Пример, <a href="https://htmlacademy.ru/blog/99-github-as-hosting">https://htmlacademy.ru/blog/99-github-as-hosting</a>. Для этого необходимо лишь зарегистрироваться на Github. Отмечу, что Nikola уже с коробки умеет делать deploy на GitHub Pages.
<br><br><br></p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script>var disqus_shortname="https-pavlenkov-github-io-blog";(function(){var a=document.createElement("script");a.async=true;a.src="https://"+disqus_shortname+".disqus.com/count.js";(document.getElementsByTagName("head")[0]||document.getElementsByTagName("body")[0]).appendChild(a)}());</script><footer id="footer"><p>Contents © 2016 <a href="mailto:vivpavlenko@gmail.com">Vitaliy Pavlenko</a> - Powered by <a href="https://getnikola.com" rel="nofollow">Nikola</a> </p>
</footer>
</div>
</section><script src="assets/js/all-nocdn.js" type="text/javascript"></script><script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-87685072-1', 'auto');
ga('send', 'pageview');
</script><script type="text/javascript">
$(function(){
$('.timeago').timeago();
});
</script>
</body>
</html>