aboutsummaryrefslogtreecommitdiff
path: root/_posts
diff options
context:
space:
mode:
authorclarkzjw <[email protected]>2018-01-15 15:00:18 +0000
committerclarkzjw <[email protected]>2018-01-15 15:00:18 +0000
commit76676e7decf7b910c7e62acc3f530e31d3ef7bd6 (patch)
tree41046a571177212b455b27130c8a92617d51e5e3 /_posts
parent936dc0c372b8d7b4c9adef020fc4395c44d8ec68 (diff)
downloadblog.jinwei.me-76676e7decf7b910c7e62acc3f530e31d3ef7bd6.tar.gz
Mon Jan 15 15:00:18 UTC 2018
Diffstat (limited to '_posts')
-rw-r--r--_posts/2018/01/new-blog.html196
1 files changed, 196 insertions, 0 deletions
diff --git a/_posts/2018/01/new-blog.html b/_posts/2018/01/new-blog.html
new file mode 100644
index 0000000..d90a82d
--- /dev/null
+++ b/_posts/2018/01/new-blog.html
@@ -0,0 +1,196 @@
1
2
3<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
4 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
5
6<html xmlns="http://www.w3.org/1999/xhtml">
7 <head>
8 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
9 <title>又一个新的博客 &#8212; Hello World</title>
10 <link rel="stylesheet" href="../../../_static/alagitpull.css" type="text/css" />
11 <link rel="stylesheet" href="../../../_static/pygments.css" type="text/css" />
12 <link rel="stylesheet" href="../../../_static/flexboxgrid.min.css" type="text/css" />
13 <link rel="stylesheet" href="../../../_static/git-pull.css" type="text/css" />
14 <script type="text/javascript">
15 var DOCUMENTATION_OPTIONS = {
16 URL_ROOT: '../../../',
17 VERSION: '0.0',
18 COLLAPSE_INDEX: false,
19 FILE_SUFFIX: '.html',
20 HAS_SOURCE: true,
21 SOURCELINK_SUFFIX: '.txt'
22 };
23 </script>
24 <script type="text/javascript" src="../../../_static/jquery.js"></script>
25 <script type="text/javascript" src="../../../_static/underscore.js"></script>
26 <script type="text/javascript" src="../../../_static/doctools.js"></script>
27 <link rel="shortcut icon" href="../../../_static/favicon.ico"/>
28 <link rel="index" title="Index" href="../../../genindex.html" />
29 <link rel="search" title="Search" href="../../../search.html" />
30
31 <link rel="stylesheet" href="../../../_static/custom.css" type="text/css" />
32
33
34 <meta name="viewport" content="width=device-width, initial-scale=0.9, maximum-scale=0.9" />
35
36 </head>
37 <body>
38
39
40
41 <div class="document">
42 <div class="documentwrapper">
43 <div class="bodywrapper">
44 <div class="body" role="main">
45
46 <div class="section" id="newblog">
47<span id="id1"></span><h1>又一个新的博客<a class="headerlink" href="#newblog" title="Permalink to this headline">¶</a></h1>
48<table class="docutils field-list" frame="void" rules="none">
49<col class="field-name" />
50<col class="field-body" />
51<tbody valign="top">
52<tr class="field-odd field"><th class="field-name">Publish Date:</th><td class="field-body">2018-01-15</td>
53</tr>
54</tbody>
55</table>
56<p>前段时间有朋友和我抱怨博客加载速度太慢了（。之前的博客架在Blogger上，为了让排版稍微美观一些，找了一个第三方的主题，加载了许多外部的
57资源，导致网页载入速度非常慢。虽然我自己对于网站在国内的加载速度毫不在意，但是既然还有读者（少的可怜）在看，以及在这极少的读者中有用
58户提出了这个问题，那就得解决。前段时间无意中看到一个博客（ <a class="reference external" href="https://www.git-pull.com/index.html">git-pull</a> ），觉得主题简洁而又美观，于是开始
59着手改造自己的博客。</p>
60<p>这次用了「大名鼎鼎」的 <a class="reference external" href="http://www.sphinx-doc.org/en/stable/">Sphinx</a> ，一个软件开发过程中的文档生成工具来作为博客的静态网页生成引擎。
61上手Sphinx非常简单，sphinx-quickstart这个工具和一般的博客生成器一样，集成了很多功能，把Makefile都写好了，可以说是完全开箱即用了。
62Sphinx的默认主题是 <a class="reference external" href="https://alabaster.readthedocs.io/en/latest/">Alabaster</a> ，现在你看到的这个主题就是在Alabaster上修改而来的。</p>
63<p>Sphinx的文档书写采用的是*.rst格式的文本，即 <a class="reference external" href="http://docutils.sourceforge.net/rst.html">reStructuredText</a> ，而不是Markdown。相比
64之前，rst比Markdown的语法更加丰富/复杂，同时也提供了更加丰富的功能和可扩展性（虽然我估计我只能用到其中的20%甚至更少啦）。不清楚rst和
65Emacs社区的 <a class="reference external" href="https://orgmode.org/">Org Mode</a> 相比哪一个的语法更加复杂呢。（</p>
66<p>建设博客离不开几件事情。首先当然就是部署运维啦。Sphinx通过Makefile可以生成静态html网页，托管静态html最方便的地方当然是GitHub Pages啦。
67最简单粗暴的方法是在本地的环境中写完rst文本，然后本地 make html 通过之后，将html推送到GitHub Pages中。但是这种方式的移植性不高，想写
68博客的话必须坐在自己的电脑前，同时依然存在一些手动的工作。所以当然选择Docker啦。但是这次用Docker的姿势和以往不同。平时我们用Docker的时候
69最终都是想要得到docker build的产物docker image，然后由image来进行部署。但是我们这次的目标是GitHub Pages，没法部署容器。所以我在
70Dockerfile中生成静态html网页，然后在构建的过程中将静态网页push到repo的gh-pages分支中。当然其实不用Docker也能做到这一点。写一个脚本，
71然后在CI平台上执行脚本也行，就不做优劣对比了。</p>
72<p>值得一提的是，Docker在17.05-ce版本之后引入了multi stage build的功能，可以在Dockerfile中FROM多个基础镜像，在下一个stage可以直接使用
73之前stage构建出的产物。以我的博客这个项目为例。假如我是想通过image来部署，那么我最终的产物是静态html文件，那么我可能需要一个nginx的基础
74镜像。nginx:alpine 这个基础镜像很小，不到10MB，在Dockerfile里面将html文件COPY进去之后，最终得到的image也只有10MB左右的大小。但是
75之前我们为了得到静态html文件，可能得选用一个python的基础镜像，然后再apt/apk安装一些必要的编译工具，最终只是为了几百kb的html文件，但是
76构建的镜像已经上百MB了。有了multi stage build之后，这个问题便非常好地被解决了。看了下面的Dockerfile之后，整体思路就非常清晰了。</p>
77<div class="highlight-bash"><div class="highlight"><pre><span></span>FROM python:3.6.0 as builder
78LABEL <span class="nv">maintainer</span><span class="o">=</span>clarkzjw&lt;[email protected]&gt;
79RUN pip install virtualenv
80COPY requirements.txt /app/requirements.txt
81COPY bootstrap.py /app/bootstrap.py
82RUN /app/bootstrap.py
83ADD . /app
84WORKDIR /app
85RUN /bin/bash -c <span class="s2">&quot;source /app/.venv/bin/activate &amp;&amp; make html &amp;&amp; make rss &amp;&amp; cp rss.xml _build/html&quot;</span>
86
87
88FROM alpine:latest
89RUN sed -i <span class="s1">&#39;s/dl-cdn.alpinelinux.org/mirrors.ustc.edu.cn/g&#39;</span> /etc/apk/repositories
90RUN apk add --update git openssh-client <span class="o">&amp;&amp;</span> rm -rf /var/cache/apk/*
91WORKDIR /html
92ENV <span class="nv">COMMIT_USER</span><span class="o">=</span><span class="s2">&quot;clarkzjw&quot;</span>
93ENV <span class="nv">COMMIT_EMAIL</span><span class="o">=</span><span class="s2">&quot;[email protected]&quot;</span>
94ARG <span class="nv">GIT_TOKEN</span><span class="o">=</span><span class="s2">&quot;&quot;</span>
95RUN git config --global user.email <span class="nv">$COMMIT_EMAIL</span> <span class="o">&amp;&amp;</span> git config --global user.name <span class="nv">$COMMIT_USER</span>
96RUN git clone https://clarkzjw:<span class="nv">$GIT_TOKEN</span>@github.com/clarkzjw/blog.jinwei.me.git /html <span class="o">&amp;&amp;</span> git checkout gh-pages
97COPY --from<span class="o">=</span>builder /app/_build/html /html
98RUN <span class="nb">echo</span> <span class="s2">&quot;`date`&quot;</span> &gt; /html/.lastmodify <span class="o">&amp;&amp;</span> git add -A <span class="o">&amp;&amp;</span> git commit -m <span class="s2">&quot;`date`&quot;</span> <span class="o">&amp;&amp;</span> git push origin gh-pages
99
100
101FROM nginx:alpine
102COPY --from<span class="o">=</span>builder /app/_build/html /usr/share/nginx/html
103</pre></div>
104</div>
105<p>另外一个问题是博客的RSS。由于Sphinx最初的设计是作为一个文档生成工具，目前市面上有的和Sphinx结合的RSS生成工具大致有：</p>
106<ul class="simple">
107<li>Sphinx-contrib模块中的 <a class="reference external" href="https://bitbucket.org/birkenfeld/sphinx-contrib/src/tip/feed/">feed</a></li>
108<li>在sphinxcontrib.feed基础上开发的 <a class="reference external" href="https://github.com/junkafarian/sphinxfeed">sphinxfeed</a></li>
109<li>以及更新一点的 <a class="reference external" href="https://pypi.python.org/pypi/sphinxcontrib-newsfeed">sphinxcontrib-newsfeed</a></li>
110</ul>
111<p>其中sphinxcontrib.feed和sphinxfeed的功能性更新都停止在2011年，不兼容Python 3，GitHub上有几个fork，但是也基本没有太多的改进。至于
112sphinxcontrib-newsfeed，并不能生成符合RSS规范的输出。。。所以只好自己简单粗暴造一个轮子了！（至少生成的xml能被RSS阅读器认识。。。</p>
113<p>至于评论嘛。虽然博客流量小，2017年下来一年也没有10条评论，但是作为一个博客，这个功能还是必须得有！考察了目前市面上的评论方案，Disqus现在
114差不多可以算是一家独大了。但是十分不喜欢Disqus。一个页面要加载的无关的数据太多了。然后看到了 <a class="reference external" href="https://github.com/posativ/isso">Isso</a> , 第一印象还不错，但是需要自己单独部
115署。为了一年10条评论不到的数量级单独部署似乎成本略高。之前还见到了 <a class="reference external" href="https://staticman.net">Staticman</a> , 但是这个方案和GitHub的issue绑定，一个博客实例对应
116GitHub的一个repo，然后每篇文章的评论对应这个repo中的issue。但是我不太能接受，毕竟不能强制每个评论的用户都有GitHub帐号。
117今天无意中看到了 <a class="reference external" href="https://just-comments.com/">just-comments</a> , 也是一个SaaS解决方案，但是非常地极简，决定先用着试试效果。（</p>
118<p>下一步，打算在博客中加入 <a class="reference external" href="https://css.hanzi.co/">漢字標準格式</a> 这套排版框架。毕竟现在的页面排版看起来怪怪的，以及并不美观。（</p>
119</div>
120
121
122 <div class="just-comments"
123 data-allowguests="true"
124 data-apikey="4bb18080-e236-4513-bd72-3a032f35d3bb">
125 </div>
126 <script async defer src="https://just-comments.com/w.js"></script>
127 <script async defer src="https://buttons.github.io/buttons.js"></script>
128 <script async defer src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
129 </div>
130 </div>
131 </div>
132 <div class="sphinxsidebar" role="navigation" aria-label="main navigation">
133 <div class="sphinxsidebarwrapper">
134<p class="logo">
135 <a href="../../../index.html">
136 <img class="logo" src="../../../_static/img/terminal-icon.png" alt="Logo"/>
137
138 </a>
139</p>
140
141
142
143
144
145
146
147
148<div class="relations">
149<h3>Related Topics</h3>
150<ul>
151 <li><a href="../../../index.html">Documentation overview</a><ul>
152 </ul></li>
153</ul>
154</div><h3>Projects</h3>
155
156<ul>
157 <li><a href="https://github.com/clarkzjw/Dehaze">Dehaze</a>
158 </li>
159 <li><a href="https://github.com/clarkzjw/GuidedFilter">GuidedFilter</a>
160 </li>
161 <li><a href="https://github.com/clarkzjw/LumberJack">LumberJack</a>
162 </li>
163 <li><a href="https://github.com/clarkzjw/one-two-three...infinity">one-two-three...infinity</a>
164 </li>
165 <li><a href="https://github.com/clarkzjw/nginx-proxy-google">nginx-proxy-google</a>
166 </li>
167 <li><a href="https://github.com/clarkzjw/brainfuck">brainfuck</a>
168 </li>
169</ul>
170
171<a class="github-button" href="https://github.com/clarkzjw" aria-label="Follow @clarkzjw on GitHub">Follow @clarkzjw</a>
172
173<a class="twitter-timeline" data-width="220" data-height="800" href="https://twitter.com/_clarkzjw">Tweets by
174 clarkzjw</a>
175
176 </div>
177 </div>
178 <div class="clearer"></div>
179 </div>
180 <div class="footer">
181 &copy;2013 - 2018, clarkzjw.
182
183 |
184 Powered by <a href="http://sphinx-doc.org/">Sphinx 1.6.6</a>
185 &amp; <a href="https://github.com/bitprophet/alabaster">Alabaster 0.7.10</a>
186
187 |
188 <a href="../../../_sources/_posts/2018/01/new-blog.rst.txt"
189 rel="nofollow">Page source</a>
190 </div>
191
192
193
194
195 </body>
196</html> \ No newline at end of file
Powered by cgit v1.2.3 (git 2.41.0)