第一滴水

发表于 | 分类于

碎碎前言

这些年自己一直用WP系统来维护个人博客，它还能同步相应的文章到新浪博客和微博，已经完全满足了我的日常需求。

所以我也没有想过做什么改变；至于众说一词的“臃肿”，我倒是真有体会，做一次备份往往就要几百兆，其中的核心数据也就几十兆不到，其他大多是平台或支撑数据；但这并不妨碍我的日常写作，因此很自然地趁着主机商优惠，定了120个月的量，我是准备在WP上打持久战了。

事情的转折是在最近，我想搞一个融合Tushare和Excharts的ag.fyi网站。后端的框架已经定了Django，前端的框架还一直在学习了解中。这时候Hexo很自然地跃入了视野。它本身是做静态页面的，所以和ag.fyi网站关系不大。但它确实蛮火的，前端圈子里的文章每每总有提及。看着各种例文，各种MD清新风，同时实现起来又相当简单，弄得我实在心痒难，转念一想何不先捣鼓一个轻博客，来记录自己开发部署的点滴？成败不论，享受过程。

于是果断地按照如下教程实操起来：

20分钟教你使用hexo搭建github博客
HEXO+Github,搭建属于自己的博客
GitHub+Hexo 搭建个人网站详细教程
我的Hexo博客站的创建历程(一)【Github&Coding双管齐下部署Hexo】

一路参考下来，确实也没遇到什么“大坑”，基本顺顺当当地搭建完毕。前人们的分享很具体很到位，不过我还是有两个地方，想拿出来抛砖引玉一下。

小议DNS

在域名绑定的问题上，我有些跳跃，没有一步一步地按照上述教程里的步骤做。只是依照自己的理解，直接用“ping kennliu.github.io”获得的IP地址去绑kennliu.net的A记录，一开始没什么差别，也能直接访问。但是重新“deploy”一遍以后，发觉无法用自己的域名再次访问页面了。接着“ping kennliu.github.io”，发现解析出来的IP地址已经变了。

于是我又回过头来核对教程，同时对比官网文档，这才发觉github是明确给出了，A记录需要用到的IP地址。

Follow your DNS provider’s instructions to create two A records that point your custom domain to the following IP addresses:
192.30.252.153
192.30.252.154

说这个例子到不是想分享DNS设置本身，而是自己使用教程的方法。按部就班固然能很快见到实效，不过在自己原先理解的基础上，做一些适当的试错，也算是磨刀不误砍柴功。有时候主动遇“坑”，反而能事半功倍。

所以在后续coding pages的域名设置上，我就直接读了官方文档：

首先，在您的域名管理面板中添加 CNAME 记录指向到 pages.coding.me。然后，在「Pages 服务」设置页中的自定义域名栏目输入您欲绑定的域名，点击「保存」即可通过自定义域名访问您的网站。

因而也就没再遇到什么问题。同时还进一步了解了github于coding两个网站对于定制域名的不同处理，也算一举两得。

NexT模板微调

在选择模板的时候，我就已经发觉NexT的排名高居榜首。不过自己的性格又不怎么喜欢随大流，所以一开始我是抵触它的。因此我楞是把其他模板都浏览了一遍，无奈我的审美却是随大流的，实在没觉得有比NexT更漂亮的。

对比再三，确定了NexT的Pisces主题。就是有点不大喜欢下面那种默认的黑底黑框风格。
IIssNans

我是想搞成如下，这种浅蓝配色。
kennliu

NexT的配置文档写得很详细，但貌似没有提供配色的接口，看来是还是需要直接修改CSS。
所以我用了Firefox的开发者查看器，来获得相关CSS的命名。
headband
sitemeta
从上图我们可以看到一个名为“headband”，另一个名为“site-meta”。

接下来就简单粗暴了，直接用grep命令查询“../themes/next/source/css/”目录里的.styl文件，找到含有“headband”和“site-meta”的文件。
“headband”在“../themes/next/source/css/_variables/base.styl”里。
“site-meta”在“../themes/next/source/css/_schemes/Pisces/_brand.styl”里。

因为css已经预设变量了，所以就直接取$blue-bright。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// Colors
// colors for use across theme.
// --------------------------------------------------
$whitesmoke   = #f5f5f5
$gainsboro    = #eee
$gray-lighter = #ddd
$grey-light   = #ccc
$grey         = #bbb
$grey-dark    = #999
$grey-dim     = #666
$black-light  = #555
$black-dim    = #333
$black-deep   = #222
$red          = #ff2a2a
$blue-bright  = #87daff
$blue         = #0684bd
$blue-deep    = #262a30
$orange       = #fc6423

base.styl修改：

1
2
3
4
// Headband
// --------------------------------------------------
$headband-height                = 3px
$headband-bg                    = $blue-bright

_brand.styl修改：

1
2
3
4
.site-meta {
  padding: 20px 0;
  color: white;
  background: $blue-bright;

把上述两处的背景色从$black-deep修改成$blue-bright，就大功告成了。