-
Notifications
You must be signed in to change notification settings - Fork 0
/
lizherui的程序世界.htm
337 lines (273 loc) · 20 KB
/
lizherui的程序世界.htm
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
<!DOCTYPE html>
<!-- saved from url=(0056)http://www.矮蛋蛋.com/pages/2013/08/17/build_blog.html -->
<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<title>矮蛋蛋的程序世界</title>
<meta name="description" content="">
<meta name="author" content="矮蛋蛋">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Le HTML5 shim, for IE6-8 support of HTML elements -->
<!--[if lt IE 9]>
<script src="../../../../theme/html5.js"></script>
<![endif]-->
<!-- Le styles -->
<script src="./矮蛋蛋的程序世界_files/ga.js"></script><script type="text/javascript" async="" src="./矮蛋蛋的程序世界_files/embed.js"></script><script src="./矮蛋蛋的程序世界_files/alfie.js" async="" charset="UTF-8"></script></head>
<body youdao="bind">
<div class="navbar navbar-inverse">
<div class="navbar-inner">
<div class="container">
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="brand" href="http://www.矮蛋蛋.com/">矮蛋蛋的程序世界</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li><a href="http://www.矮蛋蛋.com/pages/about.html">About</a></li>
</ul>
<form class="navbar-search pull-right" action="http://www.矮蛋蛋.com/search.html">
<input type="text" class="search-query" placeholder="Search" name="q" id="s">
</form>
</div>
</div>
</div>
</div>
<div class="container">
<div class="content">
<div class="row">
<div class="span9">
<div class="article">
<div class="content-title">
<h1>一步一步打造Geek风格的技术博客</h1>
2013-08-17
by <a class="url fn" href="http://www.矮蛋蛋.com/author/矮蛋蛋.html">矮蛋蛋</a>
</div>
<div><h2>如梦初醒</h2>
<hr>
<h3>Geek是什么</h3>
<p>Geek更多的是一种精神，一种态度，一种对技术的理解与信念。他们无法忍受丑陋的代码，拙劣的技术。他们思路开阔，技术娴熟，他们不甘平庸，追求完美。他们不会囿于常识，他们敢于突破。在常人眼中，他们不走寻常路，享受各种非主流的技术。但在他们自己眼中，这些又是那么得自然与优美。他们用自己的行为诠释着自己对于技术的理解，用那份固执传达着自己的信念。</p>
<p>他们掌握并热爱着技术，叛逆、执着，崇尚自由。</p>
<h3>为什么不选择CSDN、Wordpress、Jekyll等技术</h3>
<p>我在CSDN上发表博文被和谐了一次，就不会允许这种事发生第二次。</p>
<p>Wordpress上手容易、功能强大、插件丰富。但是在我看来，这些优点同时也是它的缺点：太笨重、太无脑、不够酷、无用功能太多、可定制的粒度不够小。我更喜欢简洁快速粗暴的博客系统。</p>
<p>Jekyll非常棒，可惜它基于Ruby。对于Python爱好者而言，基于Python的Pelican显然更加可口。</p>
<h2>卧薪尝胆</h2>
<hr>
<p>我在搭建这个博客的过程中学到了很多很多有意思的技术。</p>
<p>搭建环境为Mac OS X/Linux，Windows下可能会麻烦一些。</p>
<p>搭建过程中会涉及到的技术名词如下：</p>
<ul>
<li>Mac OS X</li>
<li>Python</li>
<li>Pip</li>
<li>Pelican</li>
<li>Jinja2</li>
<li>Github </li>
<li>Git</li>
<li>Makefile</li>
<li>Markdown</li>
<li>Mou</li>
<li>Google Analytics</li>
<li>Google Custom Search</li>
<li>Google Webmasters</li>
<li>Picasa</li>
<li>Disqus</li>
<li>Rss</li>
<li>Sitemap</li>
<li>Godaddy</li>
<li>Dnspod</li>
<li>A记录</li>
</ul>
<p>若对任何一个技术名词有疑问，请翻墙<a href="https://www.google.com/ncr">Google</a> it.</p>
<h2>初见端倪</h2>
<hr>
<p>开始动手。</p>
<h3>Github入门指南</h3>
<p>请参考<a href="http://blog.csdn.net/duxinfeng2010/article/details/8654690">http://blog.csdn.net/duxinfeng2010/article/details/8654690</a></p>
<h3>使用Github Pages创建个人博客</h3>
<p>Github为每一个用户分配了一个二级域名username.github.io，用户为自己的二级域名创建主页很简单，只需要在Github下创建一个名为username.github.io的版本库，并向其master分支提交网站静态页面即可。</p>
<ul>
<li>登陆Github，创建一个名为username.github.io的版本库（将username替换成自己的Github账户名）。</li>
<li>点击Setting，选择一个自己喜欢的模板，最后点击发布public按钮。</li>
<li>耐心等待一段时间（不超过10分钟），登陆http://username.github.io，会发现自己的个人博客已经生成。</li>
</ul>
<h3>安装Pelican和Markdown</h3>
<div class="highlight"><pre><span class="n">pip</span> <span class="n">install</span> <span class="n">pelican</span>
<span class="n">pip</span> <span class="n">install</span> <span class="n">markdown</span>
</pre></div>
<h3>搭建骨架</h3>
<div class="highlight"><pre><span class="n">mkdir</span> <span class="n">blog</span>
<span class="n">cd</span> <span class="n">blog</span>
<span class="n">pelican</span><span class="o">-</span><span class="n">quickstart</span>
</pre></div>
<p>根据提示一步步输入相应的配置项，不知道如何设置的接受默认即可，后续可以通过编辑pelicanconf.py文件更改配置)</p>
<p>以下是生成的目录结构：</p>
<div class="highlight"><pre><span class="n">blog</span><span class="o">/</span>
<span class="err">├──</span> <span class="n">content</span> <span class="err">#</span> <span class="err">存放输入的源文件</span>
<span class="err">│</span> <span class="err">└──</span> <span class="p">(</span><span class="n">pages</span><span class="p">)</span> <span class="err">#</span> <span class="err">存放手工创建的静态页面</span>
<span class="err">├──</span> <span class="n">output</span> <span class="err">#</span> <span class="err">生成的输出文件</span>
<span class="err">├──</span> <span class="n">develop_server</span><span class="p">.</span><span class="n">sh</span> <span class="err">#</span> <span class="err">方便开启测试服务器</span>
<span class="err">├──</span> <span class="n">Makefile</span> <span class="err">#</span> <span class="err">方便管理博客的</span><span class="n">Makefile</span>
<span class="err">├──</span> <span class="n">pelicanconf</span><span class="p">.</span><span class="n">py</span> <span class="err">#</span> <span class="err">主配置文件</span>
<span class="err">└──</span> <span class="n">publishconf</span><span class="p">.</span><span class="n">py</span> <span class="err">#</span> <span class="err">主发布文件，可删除</span>
</pre></div>
<p>进入output把自己刚刚建好的username.github.io版本库clone下来：</p>
<div class="highlight"><pre><span class="n">cd</span> <span class="n">output</span>
<span class="n">git</span> <span class="n">clone</span> <span class="n">git</span><span class="err">@</span><span class="n">github</span><span class="p">.</span><span class="n">com</span><span class="o">:</span><span class="n">username</span><span class="o">/</span><span class="n">username</span><span class="p">.</span><span class="n">github</span><span class="p">.</span><span class="n">io</span><span class="p">.</span><span class="n">git</span>
</pre></div>
<h3>开始写博文</h3>
<p>在content目录下用Markdown语法来写一篇文章，最好选择专业的Markdown编辑器，在Mac OS X下推荐使用Mou，在Linux/Windows下请Google。</p>
<p>用Markdown写博文截图如下：
<img alt="1" src="./矮蛋蛋的程序世界_files/%E5%B1%8F%E5%B9%95%E5%BF%AB%E7%85%A7+2013-08-17+%E4%B8%8A%E5%8D%881.57.09.png"></p>
<p>左半边是正在用markdown写的博文，右边是即时预览效果。</p>
<p>写完后，执行以下命令，即可在本机<a href="http://127.0.0.1:8000/">http://127.0.0.1:8000</a>看到效果。</p>
<div class="highlight"><pre><span class="n">make</span> <span class="n">publish</span>
<span class="n">make</span> <span class="n">serve</span>
</pre></div>
<p>若要一键上传到Github，需要修改Makefile两处地方：</p>
<div class="highlight"><pre><span class="nl">publish:</span>
<span class="err">$</span><span class="p">(</span><span class="n">PELICAN</span><span class="p">)</span> <span class="err">$</span><span class="p">(</span><span class="n">INPUTDIR</span><span class="p">)</span> <span class="o">-</span><span class="n">o</span> <span class="err">$</span><span class="p">(</span><span class="n">OUTPUTDIR</span><span class="p">)</span> <span class="o">-</span><span class="n">s</span> <span class="err">$</span><span class="p">(</span><span class="n">CONFFILE</span><span class="p">)</span> <span class="err">$</span><span class="p">(</span><span class="n">PELICANOPTS</span><span class="p">)</span>
<span class="nl">github:</span> <span class="n">publish</span>
<span class="n">cd</span> <span class="n">OUTPUTDIR</span> <span class="p">;</span> <span class="n">git</span> <span class="n">add</span> <span class="p">.</span> <span class="p">;</span> <span class="n">git</span> <span class="n">commit</span> <span class="o">-</span><span class="n">am</span> <span class="err">'</span><span class="n">your</span> <span class="n">comments</span><span class="err">'</span> <span class="p">;</span> <span class="n">git</span> <span class="n">push</span>
</pre></div>
<p>以后写完文章执行make github就可以一键部署了。</p>
<h2>如虎添翼</h2>
<hr>
<p>我们已经能成功地用markdown写出博文并部署到github了，但这远远不够。</p>
<h3>管理图片</h3>
<p>我觉得使用云相册比本地图片要方便的多，我使用<a href="https://picasaweb.google.com/?noredirect=1">Picasa</a>来维护blog的所有图片。</p>
<h3>挑选主题</h3>
<p>安装主题，比如bootstrap2：</p>
<div class="highlight"><pre><span class="n">git</span> <span class="n">clone</span> <span class="n">https</span><span class="o">:</span><span class="c1">//github.com/getpelican/pelican-themes.git</span>
<span class="n">cd</span> <span class="n">pelican</span><span class="o">-</span><span class="n">themes</span>
<span class="n">pelican</span><span class="o">-</span><span class="n">themes</span> <span class="o">-</span><span class="n">i</span> <span class="n">bootstrap2</span>
</pre></div>
<p>选择主题，在pelicanconf.py中添加</p>
<div class="highlight"><pre><span class="n">THEME</span> <span class="o">=</span> <span class="err">'</span><span class="n">bootstrap2</span><span class="err">'</span>
</pre></div>
<h3>安装第三方评论系统</h3>
<p>在<a href="https://disqus.com/admin/signup">Disqus</a>上申请一个站点，记牢Shortname。
在pelicanconf.py添加</p>
<div class="highlight"><pre><span class="n">DISQUS_SITENAME</span> <span class="o">=</span> <span class="n">Shortname</span>
</pre></div>
<h3>添加Google Analytics</h3>
<p>去<a href="http://www.google.com/analytics">Google Analytics</a>申请账号，记下跟踪ID。
在pelicanconf.py添加</p>
<div class="highlight"><pre><span class="n">GOOGLE_ANALYTICS</span> <span class="o">=</span> <span class="err">跟踪</span><span class="n">ID</span>
</pre></div>
<p>Google Analytics极其强悍，截图说明一切：
<img alt="2" src="./矮蛋蛋的程序世界_files/%E5%B1%8F%E5%B9%95%E5%BF%AB%E7%85%A7+2013-08-17+%E4%B8%8A%E5%8D%882.31.26.png"></p>
<p><img alt="3" src="./矮蛋蛋的程序世界_files/%E5%B1%8F%E5%B9%95%E5%BF%AB%E7%85%A7+2013-08-17+%E4%B8%8A%E5%8D%882.31.54.png"></p>
<h3>使用Google Webmasters</h3>
<p>在<a href="http://www.google.com/webmasters">Google Webmasters</a>上注册即可。</p>
<p>这个就是Google站长工具，使用它的目的是为了让博客被Google更好的收录，比如手动让Googlebot抓取、提交Robots、更新Sitemap等等，各方面完爆百度站长工具。</p>
<p>截图如下：
<img alt="3" src="./矮蛋蛋的程序世界_files/%E5%B1%8F%E5%B9%95%E5%BF%AB%E7%85%A7+2013-08-19+%E4%B8%8A%E5%8D%8811.36.32.png"></p>
<h3>添加插件</h3>
<div class="highlight"><pre><span class="n">git</span> <span class="n">clone</span> <span class="n">git</span><span class="o">:</span><span class="c1">//github.com/getpelican/pelican-plugins.git</span>
</pre></div>
<p>比如我要使用sitemap，在pelicanconf.py里配置如下</p>
<div class="highlight"><pre><span class="n">PLUGIN_PATH</span> <span class="o">=</span> <span class="n">u</span><span class="s">"pelican-plugins"</span>
<span class="n">PLUGINS</span> <span class="o">=</span> <span class="p">[</span><span class="s">"sitemap"</span><span class="p">]</span>
<span class="n">SITEMAP</span> <span class="o">=</span> <span class="p">{</span>
<span class="s">"format"</span><span class="o">:</span> <span class="s">"xml"</span><span class="p">,</span>
<span class="s">"priorities"</span><span class="o">:</span> <span class="p">{</span>
<span class="s">"articles"</span><span class="o">:</span> <span class="mf">0.7</span><span class="p">,</span>
<span class="s">"indexes"</span><span class="o">:</span> <span class="mf">0.5</span><span class="p">,</span>
<span class="s">"pages"</span><span class="o">:</span> <span class="mf">0.3</span><span class="p">,</span>
<span class="p">},</span>
<span class="s">"changefreqs"</span><span class="o">:</span> <span class="p">{</span>
<span class="s">"articles"</span><span class="o">:</span> <span class="s">"monthly"</span><span class="p">,</span>
<span class="s">"indexes"</span><span class="o">:</span> <span class="s">"daily"</span><span class="p">,</span>
<span class="s">"pages"</span><span class="o">:</span> <span class="s">"monthly"</span><span class="p">,</span>
<span class="p">}</span>
<span class="p">}</span>
</pre></div>
<h3>使用Google站内搜索</h3>
<p>请参考<a href="http://www.codenut.net/post/2013-06-30-cse">http://www.codenut.net/post/2013-06-30-cse</a></p>
<h3>申请独立域名</h3>
<ul>
<li>在<a href="https://www.godaddy.com/">Godaddy</a>上用支付宝花购买为期一年的顶级域名，并去修改Nameservers为这两个地址：f1g1ns1.dnspod.net、f1g1ns2.dnspod.net。</li>
<li>在<a href="https://www.dnspod.cn/">Dnspod</a>上添加新域名，并申请一条A记录指向Github Pages的ip:207.97.227.245；</li>
<li>在Pelican主目录新建CNAME文件，添上刚刚申请的域名，如我的www.矮蛋蛋.com</li>
</ul>
<h2>登峰造极</h2>
<hr>
<p>最后，如果感觉还不够味儿，可以参考Pelican官方文档和这个博客的完整源码。</p>
<p>Pelican : <a href="http://docs.getpelican.com/en/3.2">http://docs.getpelican.com/en/3.2</a></p>
<p>Source Code : <a href="https://github.com/矮蛋蛋/矮蛋蛋.github.io">https://github.com/矮蛋蛋/矮蛋蛋.github.io</a> </p>
<p>Have fun!</p></div>
<hr>
<h2>Comments</h2>
<div id="disqus_thread"><iframe id="dsq1" data-disqus-uid="1" allowtransparency="true" frameborder="0" role="complementary" style="width: 100%; border: none; overflow: hidden; height: 4558px;" width="100%" src="./矮蛋蛋的程序世界_files/saved_resource.htm" scrolling="no" horizontalscrolling="no" verticalscrolling="no"></iframe><iframe id="dsq-indicator-north" data-disqus-uid="-indicator-north" allowtransparency="true" frameborder="0" role="alert" style="width: 830px; border: none; overflow: hidden; top: 0px; min-width: 830px; max-width: 830px; position: fixed; max-height: 29px; min-height: 29px; height: 29px; display: none;" scrolling="no"></iframe><iframe id="dsq-indicator-south" data-disqus-uid="-indicator-south" allowtransparency="true" frameborder="0" role="alert" style="width: 830px; border: none; overflow: hidden; bottom: 0px; min-width: 830px; max-width: 830px; position: fixed; max-height: 29px; min-height: 29px; height: 29px; display: none;" scrolling="no"></iframe></div>
<script type="text/javascript">
var disqus_shortname = '矮蛋蛋sworld';
var disqus_title = '一步一步打造Geek风格的技术博客';
(function() {
var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
dsq.src = 'http://' + disqus_shortname + '.disqus.com/embed.js';
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
})();
</script>
<noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
</div>
</div>
<div class="span3">
<div class="well" style="padding: 8px 0; background-color: #FBFBFB;">
<ul class="nav nav-list">
<li class="nav-header">
Site
</li>
<li><a href="http://www.矮蛋蛋.com/archives.html">Archives</a>
</li><li><a href="http://www.矮蛋蛋.com/tags.html">Tags</a>
</li><li><a href="http://www.矮蛋蛋.com/feeds/all.rss.xml" rel="alternate">RSS</a></li>
</ul>
</div>
<div class="well" style="padding: 8px 0; background-color: #FBFBFB;">
<ul class="nav nav-list">
<li class="nav-header">
Categories
</li>
<li><a href="http://www.矮蛋蛋.com/category/life.html">Life</a></li>
<li><a href="http://www.矮蛋蛋.com/category/tech.html">Tech</a></li>
<li><a href="http://www.矮蛋蛋.com/category/work.html">Work</a></li>
</ul>
</div>
<div class="social">
<div class="well" style="padding: 8px 0; background-color: #FBFBFB;">
<ul class="nav nav-list">
<li class="nav-header">
Social
</li>
<li><a href="https://github.com/矮蛋蛋">Github</a></li>
<li><a href="https://twitter.com/lzrak47">Twitter</a></li>
<li><a href="https://www.facebook.com/profile.php?id=100004875786021">Facebook</a></li>
<li><a href="http://www.linkedin.com/profile/view?id=232391796">Linkedin</a></li>
<li><a href="http://weibo.com/lzrm4a1">Weibo</a></li>
<li><a href="http://www.zhihu.com/people/li-zhe-rui">Zhihu</a></li>
</ul>
</div>
</div>
<div class="well" style="padding: 8px 0; background-color: #FBFBFB;">
<ul class="nav nav-list">
<li class="nav-header">
Links
</li>
<li><a href="https://www.google.com/ncr">Google</a></li>
<li><a href="http://python.org/">Python</a></li>
<li><a href="http://docs.getpelican.com/">Pelican</a></li>
</ul>
</div>
</div>
</div> </div>
<footer>
<br>
<p><a href="http://www.矮蛋蛋.com/">矮蛋蛋的程序世界</a> © 矮蛋蛋 2013</p>
</footer>
</div> <!-- /container -->
<script src="./矮蛋蛋的程序世界_files/jquery.min.js"></script>
<script src="./矮蛋蛋的程序世界_files/bootstrap-collapse.js"></script>
<script>var _gaq=[['_setAccount','UA-42648273-1'],['_trackPageview']];(function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];g.src='//www.google-analytics.com/ga.js';s.parentNode.insertBefore(g,s)}(document,'script'))</script>
<a href="https://github.com/矮蛋蛋"><img style="position: absolute; top: 40px; right: 0; border: 0;" src="./矮蛋蛋的程序世界_files/forkme_right_white_ffffff.png" alt="Fork me on GitHub"></a>
</body></html>