aboutsummaryrefslogtreecommitdiff
path: root/_posts
diff options
context:
space:
mode:
authorclarkzjw <[email protected]>2020-06-16 08:36:31 +0000
committerclarkzjw <[email protected]>2020-06-16 08:36:31 +0000
commitd886abacbc797d5b1a45d0042750329fa577c6ae (patch)
tree407df684bf8ff2c1a11ef983d02be93fd77ae0b5 /_posts
parent3a5a51d9028b48d6762e6bedf8c124593fc5f99b (diff)
downloadblog.jinwei.me-d886abacbc797d5b1a45d0042750329fa577c6ae.tar.gz
Tue Jun 16 08:36:31 UTC 2020
Diffstat (limited to '_posts')
-rw-r--r--_posts/2018/01/new-blog.html286
1 files changed, 286 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..302f4b5
--- /dev/null
+++ b/_posts/2018/01/new-blog.html
@@ -0,0 +1,286 @@
1<!DOCTYPE html>
2<html lang="zh-Hans-CN" xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <meta content="text/html; charset=utf-8" http-equiv="Content-Type"/>
5 <title>
6 又一个新的博客 — Hello World
7 </title>
8 <link href="../../../_static/alagitpull.css" rel="stylesheet" type="text/css"/>
9 <link href="../../../_static/pygments.css" rel="stylesheet" type="text/css"/>
10 <link href="../../../_static/flexboxgrid.min.css" rel="stylesheet" type="text/css"/>
11 <link href="../../../_static/git-pull.css" rel="stylesheet" type="text/css"/>
12 <link href="../../../_static/han.min.css" rel="stylesheet" type="text/css"/>
13 <script type="text/javascript">
14 var DOCUMENTATION_OPTIONS = { URL_ROOT: '../../../', VERSION: '0.0', COLLAPSE_INDEX: false, FILE_SUFFIX: '.html', HAS_SOURCE: true, SOURCELINK_SUFFIX: '.txt' };
15 </script>
16 <script src="../../../_static/jquery.js" type="text/javascript">
17 </script>
18 <script src="../../../_static/underscore.js" type="text/javascript">
19 </script>
20 <script src="../../../_static/doctools.js" type="text/javascript">
21 </script>
22 <link href="../../../_static/favicon.ico" rel="shortcut icon"/>
23 <link href="../../../genindex.html" rel="index" title="Index"/>
24 <link href="../../../search.html" rel="search" title="Search"/>
25 <link href="../../../_static/custom.css" rel="stylesheet" type="text/css"/>
26 <meta content="width=device-width, initial-scale=0.9, maximum-scale=0.9" name="viewport"/>
27 </head>
28 <body>
29 <div class="document">
30 <div class="documentwrapper">
31 <div class="body" role="main">
32 <div class="section" id="newblog">
33 <span id="id1">
34 </span>
35 <h1>
36 又一个新的博客
37 <a class="headerlink" href="#newblog" title="Permalink to this headline">
38
39 </a>
40 </h1>
41 <table class="docutils field-list" frame="void" rules="none">
42 <colgroup>
43 <col class="field-name"/>
44 <col class="field-body"/>
45 </colgroup>
46 <tbody valign="top">
47 <tr class="field-odd field">
48 <th class="field-name">
49 Publish Date:
50 </th>
51 <td class="field-body">
52 2018-01-15
53 </td>
54 </tr>
55 </tbody>
56 </table>
57 <p>
58 前段时间有朋友和我抱怨博客加载速度太慢了（。之前的博客架在Blogger上，为了让排版稍微美观一些，找了一个第三方的主题，加载了许多外部的资源，导致网页载入速度非常慢。虽然我自己对于网站在国内的加载速度毫不在意，但是既然还有读者（少的可怜）在看，以及在这极少的读者中有用户提出了这个问题，那就得解决。前段时间无意中看到一个博客（
59 <a class="reference external" href="https://www.git-pull.com/index.html">
60 git-pull
61 </a>
62 ），觉得主题简洁而又美观，于是开始着手改造自己的博客。
63 </p>
64 <p>
65 这次用了「大名鼎鼎」的
66 <a class="reference external" href="http://www.sphinx-doc.org/en/stable/">
67 Sphinx
68 </a>
69 ，一个软件开发过程中的文档生成工具来作为博客的静态网页生成引擎。上手Sphinx非常简单，sphinx-quickstart这个工具和一般的博客生成器一样，集成了很多功能，把Makefile都写好了，可以说是完全开箱即用了。Sphinx的默认主题是
70 <a class="reference external" href="https://alabaster.readthedocs.io/en/latest/">
71 Alabaster
72 </a>
73 ，现在你看到的这个主题就是在Alabaster上修改而来的。
74 </p>
75 <p>
76 Sphinx的文档书写采用的是*.rst格式的文本，即
77 <a class="reference external" href="http://docutils.sourceforge.net/rst.html">
78 reStructuredText
79 </a>
80 ，而不是Markdown。相比之前，rst比Markdown的语法更加丰富/复杂，同时也提供了更加丰富的功能和可扩展性（虽然我估计我只能用到其中的20%甚至更少啦）。不清楚rst和Emacs社区的
81 <a class="reference external" href="https://orgmode.org/">
82 Org Mode
83 </a>
84 相比哪一个的语法更加复杂呢。（
85 </p>
86 <p>
87 建设博客离不开几件事情。首先当然就是部署运维啦。Sphinx通过Makefile可以生成静态html网页，托管静态html最方便的地方当然是GitHub Pages啦。最简单粗暴的方法是在本地的环境中写完rst文本，然后本地 make html 通过之后，将html推送到GitHub Pages中。但是这种方式的移植性不高，想写博客的话必须坐在自己的电脑前，同时依然存在一些手动的工作。所以当然选择Docker啦。但是这次用Docker的姿势和以往不同。平时我们用Docker的时候最终都是想要得到docker build的产物docker image，然后由image来进行部署。但是我们这次的目标是GitHub Pages，没法部署容器。所以我在Dockerfile中生成静态html网页，然后在构建的过程中将静态网页push到repo的gh-pages分支中。当然其实不用Docker也能做到这一点。写一个脚本，然后在CI平台上执行脚本也行，就不做优劣对比了。
88 </p>
89 <p>
90 值得一提的是，Docker在17.05-ce版本之后引入了multi stage build的功能，可以在Dockerfile中FROM多个基础镜像，在下一个stage可以直接使用之前stage构建出的产物。以我的博客这个项目为例。假如我是想通过image来部署，那么我最终的产物是静态html文件，那么我可能需要一个nginx的基础镜像。nginx:alpine 这个基础镜像很小，不到10MB，在Dockerfile里面将html文件COPY进去之后，最终得到的image也只有10MB左右的大小。但是之前我们为了得到静态html文件，可能得选用一个python的基础镜像，然后再apt/apk安装一些必要的编译工具，最终只是为了几百kb的html文件，但是构建的镜像已经上百MB了。有了multi stage build之后，这个问题便非常好地被解决了。看了下面的Dockerfile之后，整体思路就非常清晰了。目前我在本地写完rst文本，然后git push之后，CircleCI会自动进行Dockerfile的构建，然后将编译生成的静态html推送到gh-pages分支。
91 </p>
92 <embed/>
93 <script src="https://gist.github.com/clarkzjw/0cb4e15794a5a132b12df9741e0cc1e0.js">
94 </script>
95 <p>
96 另外一个问题是博客的RSS。由于Sphinx最初的设计是作为一个文档生成工具，目前市面上有的和Sphinx结合的RSS生成工具大致有：
97 </p>
98 <ul class="simple">
99 <li>
100 Sphinx-contrib模块中的
101 <a class="reference external" href="https://bitbucket.org/birkenfeld/sphinx-contrib/src/tip/feed/">
102 feed
103 </a>
104 </li>
105 <li>
106 在sphinxcontrib.feed基础上开发的
107 <a class="reference external" href="https://github.com/junkafarian/sphinxfeed">
108 sphinxfeed
109 </a>
110 </li>
111 <li>
112 以及更新一点的
113 <a class="reference external" href="https://pypi.python.org/pypi/sphinxcontrib-newsfeed">
114 sphinxcontrib-newsfeed
115 </a>
116 </li>
117 </ul>
118 <p>
119 其中sphinxcontrib.feed和sphinxfeed的功能性更新都停止在2011年，不兼容Python 3，GitHub上有几个fork，但是也基本没有太多的改进。至于sphinxcontrib-newsfeed，并不能生成符合RSS规范的输出。。。所以只好自己简单粗暴造一个轮子了！（至少生成的xml能被RSS阅读器认识。。。
120 </p>
121 <p>
122 RSS 订阅地址是
123 <a class="reference external" href="https://blog.jinwei.me/rss">
124 https://blog.jinwei.me/rss
125 </a>
126 </p>
127 <p>
128 至于评论嘛。虽然博客流量小，2017年下来一年也没有10条评论，但是作为一个博客，这个功能还是必须得有！考察了目前市面上的评论方案，Disqus现在差不多可以算是一家独大了。但是十分不喜欢Disqus。一个页面要加载的无关的数据太多了。然后看到了
129 <a class="reference external" href="https://github.com/posativ/isso">
130 Isso
131 </a>
132 , 第一印象还不错，但是需要自己单独部署。为了一年10条评论不到的数量级单独部署似乎成本略高。之前还见到了
133 <a class="reference external" href="https://staticman.net">
134 Staticman
135 </a>
136 , 但是这个方案和GitHub的issue绑定，一个博客实例对应GitHub的一个repo，然后每篇文章的评论对应这个repo中的issue。但是我不太能接受，毕竟不能强制每个评论的用户都有GitHub帐号。今天无意中看到了
137 <a class="reference external" href="https://just-comments.com/">
138 just-comments
139 </a>
140 , 也是一个SaaS解决方案，但是非常地极简，决定先用着试试效果。（
141 </p>
142 <p>
143 下一步，打算在博客中加入
144 <a class="reference external" href="https://css.hanzi.co/">
145 漢字標準格式
146 </a>
147 这套排版框架。毕竟现在的页面排版看起来怪怪的，以及并不美观。（
148 </p>
149 </div>
150 <div>
151 <br/>
152 <div style="text-align: center; margin: 25px auto 15px;">
153 <svg height="20" width="140" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
154 <linearGradient id="b" x2="0" y2="100%">
155 <stop offset="0" stop-color="#bbb" stop-opacity=".1">
156 </stop>
157 <stop offset="1" stop-opacity=".1">
158 </stop>
159 </linearGradient>
160 <clipPath id="a">
161 <rect fill="#fff" height="20" rx="3" width="140">
162 </rect>
163 </clipPath>
164 <g clip-path="url(#a)">
165 <path d="M0 0h75v20H0z" fill="#555">
166 </path>
167 <path d="M75 0h65v20H75z" fill="#e05d44">
168 </path>
169 <path d="M0 0h140v20H0z" fill="url(#b)">
170 </path>
171 </g>
172 <g fill="#fff" font-family="DejaVu Sans,Verdana,Geneva,sans-serif" font-size="110" text-anchor="middle">
173 <text fill="#010101" fill-opacity=".3" textLength="650" transform="scale(.1)" x="385" y="150">
174 Powered by
175 </text>
176 <text textLength="650" transform="scale(.1)" x="385" y="140">
177 Powered by
178 </text>
179 <text fill="#010101" fill-opacity=".3" textLength="550" transform="scale(.1)" x="1065" y="150">
180 Cloudflare
181 </text>
182 <text textLength="550" transform="scale(.1)" x="1065" y="140">
183 Cloudflare
184 </text>
185 </g>
186 </svg>
187 <svg height="20" width="112" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
188 <linearGradient id="b" x2="0" y2="100%">
189 <stop offset="0" stop-color="#bbb" stop-opacity=".1">
190 </stop>
191 <stop offset="1" stop-opacity=".1">
192 </stop>
193 </linearGradient>
194 <clipPath id="a">
195 <rect fill="#fff" height="20" rx="3" width="112">
196 </rect>
197 </clipPath>
198 <g clip-path="url(#a)">
199 <path d="M0 0h65v20H0z" fill="#555">
200 </path>
201 <path d="M65 0h47v20H65z" fill="#97ca00">
202 </path>
203 <path d="M0 0h112v20H0z" fill="url(#b)">
204 </path>
205 </g>
206 <g fill="#fff" font-family="DejaVu Sans,Verdana,Geneva,sans-serif" font-size="110" text-anchor="middle">
207 <text fill="#010101" fill-opacity=".3" textLength="550" transform="scale(.1)" x="335" y="150">
208 Hosted on
209 </text>
210 <text textLength="550" transform="scale(.1)" x="335" y="140">
211 Hosted on
212 </text>
213 <text fill="#010101" fill-opacity=".3" textLength="370" transform="scale(.1)" x="875" y="150">
214 GitHub
215 </text>
216 <text textLength="370" transform="scale(.1)" x="875" y="140">
217 GitHub
218 </text>
219 </g>
220 </svg>
221 <br/>
222 <svg height="20" width="78" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
223 <linearGradient id="b" x2="0" y2="100%">
224 <stop offset="0" stop-color="#bbb" stop-opacity=".1">
225 </stop>
226 <stop offset="1" stop-opacity=".1">
227 </stop>
228 </linearGradient>
229 <clipPath id="a">
230 <rect fill="#fff" height="20" rx="3" width="78">
231 </rect>
232 </clipPath>
233 <g clip-path="url(#a)">
234 <path d="M0 0h57v20H0z" fill="#555">
235 </path>
236 <path d="M57 0h21v20H57z" fill="#e05d44">
237 </path>
238 <path d="M0 0h78v20H0z" fill="url(#b)">
239 </path>
240 </g>
241 <g fill="#fff" font-family="DejaVu Sans,Verdana,Geneva,sans-serif" font-size="110" text-anchor="middle">
242 <text fill="#010101" fill-opacity=".3" textLength="470" transform="scale(.1)" x="295" y="150">
243 Made w/
244 </text>
245 <text textLength="470" transform="scale(.1)" x="295" y="140">
246 Made w/
247 </text>
248 <text fill="#010101" fill-opacity=".3" textLength="110" transform="scale(.1)" x="665" y="150">
249 ❤
250 </text>
251 <text textLength="110" transform="scale(.1)" x="665" y="140">
252 ❤
253 </text>
254 </g>
255 </svg>
256 </div>
257 </div>
258 </div>
259 </div>
260 <div aria-label="main navigation" class="sphinxsidebar" role="navigation">
261 <div class="sphinxsidebarwrapper">
262 <h1 class="logo">
263 <a href="../../../index.html">
264 </a>
265 </h1>
266 <div class="relations">
267 <h3>
268 Related Topics
269 </h3>
270 <ul>
271 <li>
272 <a href="../../../index.html">
273 Documentation overview
274 </a>
275 <ul>
276 </ul>
277 </li>
278 </ul>
279 </div>
280 </div>
281 </div>
282 <div class="clearer">
283 </div>
284 </div>
285 </body>
286</html> \ No newline at end of file
Powered by cgit v1.2.3 (git 2.41.0)