“Yeah It’s on. ”

前言

Erhan 的 Blog 就这么开通了。

跳过废话，直接看技术实现

2018 年，Hux 总算有个地方可以好好写点东西了。

作为一个程序员， Blog 这种轮子要是挂在大众博客程序上就太没意思了。一是觉得大部分 Blog 服务都太丑，二是觉得不能随便定制不好玩。之前因为太懒没有折腾，结果就一直连个写 Blog 的地儿都没有。

在玩了一段时间知乎之后，答题的快感又激起了我开博客的冲动。之前的个人网站是作品集形式的（现在集成进来了），并不适合用来写博文，一不做二不休，花一天搞一个吧！

正文

接下来说说搭建这个博客的技术细节。

正好之前就有关注过 GitHub Pages + Jekyll 快速 Building Blog 的技术方案，非常轻松时尚。

其优点非常明显：

  • Markdown 带来的优雅写作体验
  • 非常熟悉的 Git workflow ，Git Commit 即 Blog Post
  • 利用 GitHub Pages 的域名和免费无限空间，不用自己折腾主机
    • 如果需要自定义域名，也只需要简单改改 DNS 加个 CNAME 就好了
  • Jekyll 的自定制非常容易，基本就是个模版引擎

本来觉得最大的缺点可能是 GitHub 在国内访问起来太慢，所以第二天一起床就到 GitCafe(Chinese GitHub Copy) 迁移了一个镜像出来，结果还是巨慢。

哥哥可是个前端好嘛！ 果断开 Chrome DevTool 查了下网络请求，原来是 pending 在了 Google Fonts 上，页面渲染一直被阻塞到请求超时为止，难怪这么慢。
忍痛割爱，只好把 Web Fonts 去了（反正超时看到的也只能是 fallback ），果然一下就正常了，而且 大专栏  Welcome to Erhan BlogGitHub 和 GitCafe 对比并没有感受到明显的速度差异，虽然 github 的 ping 值明显要高一些，达到了 300ms，于是用 DNSPOD 优化了一下速度。

配置的过程中也没遇到什么坑，基本就是 Git 的流程，相当顺手

大的 Jekyll 主题上直接 fork 了 Clean Blog（这个主题也相当有名，就不多赘述了。唯一的缺点大概就是没有标签支持，于是我给它补上了。）

本地调试环境需要 gem install jekyll，结果 rubygem 的源居然被墙了……后来手动改成了我大淘宝的镜像源才成功

Theme 的 CSS 是基于 Bootstrap 定制的，看得不爽的地方直接在 Less 里改就好了（平时更习惯 SCSS 些），不过其实我一直觉得 Bootstrap 在移动端的体验做得相当一般，比我在淘宝参与的团队 CSS 框架差多了……所以为了体验，也补了不少 CSS 进去

最后就进入了耗时反而最长的做图、写字阶段，也算是进入了写博客的正轨，因为是类似 Hack Day 的方式去搭这个站的，所以折腾折腾着大半夜就过去了。

第二天考虑中文字体的渲染，fork 了 Type is Beautiful 的 font CSS，调整了字号，适配了 Win 的渣渲染，中英文混排效果好多了。

后记

回顾这个博客的诞生，纯粹是出于个人兴趣。在知乎相关问题上回答并获得一定的 star 后，我决定把这个博客主题当作一个小小的开源项目来维护。

在经历 v1.0 - v1.5 的蜕变后，这个博客主题愈发完整，不但增加了诸多 UI 层的优化（opinionated）；在代码层面，更加丰富的配置项也使得这个主题拥有了更好的灵活性与可拓展性。而作为一个开源项目，我也积极的为其完善文档与解决 issue。

如果你恰好逛到了这里，希望你也能喜欢这个博客主题。

—— Erhan 后记于 2018.12

Welcome to Erhan Blog的更多相关文章

  1. 日向blog开发记录

    一点历史关于,Sonne Blog 2016.03.25springmvc + hibernate框架搭建.2016.04.21日向blog首页.2016.04.24分页实现.2016.04.30登录 ...

  2. blog (后续更新)

    设计Model(设计数据库) from django.db import models # Create your models here. class BlogsPost(models.Model) ...

  3. tensorflow 一些好的blog链接和tensorflow gpu版本安装

    pading :SAME,VALID 区别  http://blog.csdn.net/mao_xiao_feng/article/details/53444333 tensorflow实现的各种算法 ...

  4. http://blog.csdn.net/java2000_wl/article/details/8627874

    http://blog.csdn.net/java2000_wl/article/details/8627874

  5. [Android Pro] http://blog.csdn.net/wuyinlei/article/category/5773375

    http://blog.csdn.net/wuyinlei/article/category/5773375

  6. android 蓝牙 http://blog.csdn.net/u012843100/article/details/52384219

    http://blog.csdn.net/u012843100/article/details/52384219

  7. 【三】用Markdown写blog的常用操作

    本系列有五篇:分别是 [一]Ubuntu14.04+Jekyll+Github Pages搭建静态博客:主要是安装方面 [二]jekyll 的使用 :主要是jekyll的配置 [三]Markdown+ ...

  8. django开发个人简易Blog—nginx+uwsgin+django1.6+mysql 部署到CentOS6.5

    前面说完了此项目的创建及数据模型设计的过程.如果未看过,可以到这里查看,并且项目源码已经放大到github上,可以去这里下载. 代码也已经部署到sina sea上,地址为http://fengzhen ...

  9. 使用Hexo搭建专属Blog

    喜欢折腾的自己最开始在博客园有仿写几篇Blog,虽也可以自己改变风格,可是到底不是独立的一块儿地方,要知道独立的才是自己的;有属于自己独立的域名和Blog,真真是一件很爽的存在.在各种大牛的分享下在G ...

随机推荐

  1. 将keras的h5模型转换为tensorflow的pb模型

    h5_to_pb.py from keras.models import load_model import tensorflow as tf import os import os.path as ...

  2. iPhoneX的后遗症要持续多久？

    iPhone X的推出算得上苹果历史上的大事件,这款梳着刘海头型的手机作为iPhone十周年纪念款手机,承载着苹果和整个产业链巨大的希望,正因如此,包括苹果在内的大量企业,把宝都压到了这款手机上.后来 ...

  3. JavaScript学习笔记 - 进阶篇（6）- JavaScript内置对象

    什么是对象 JavaScript 中的所有事物都是对象,如:字符串.数值.数组.函数等,每个对象带有属性和方法. 对象的属性:反映该对象某些特定的性质的,如:字符串的长度.图像的长宽等: 对象的方法: ...

  4. 将List 分成n个长度由调用者指定的子List

    public static void main(String[] args) { List<Integer> list = Arrays.asList(1,2,3,4,5,6,7,8); ...

  5. 题解-------CF372C Watching Fireworks is Fun

    传送门 一道有趣的DP 题目大意 城镇中有$n$个位置,有$m$个烟花要放.第$i$个烟花放出的时间记为$t_{i}$,放出的位置记为$a_{i}$.如果烟花放出的时候,你处在位置$x$,那么你将收获 ...

  6. uniapp结合小程序第三方插件“WechatSI”实现语音识别功能，进而实现终端控制

    最近在用soket实现终端控制器的功能,然后就想用语音控制,这样显得更AI WechatSI在manifest.json中配置: 在vue中插入如下展示代码: <view class=" ...

  7. 吴裕雄--天生自然C语言开发：typedef

    #include <stdio.h> #include <string.h> typedef struct Books { ]; ]; ]; int book_id; } Bo ...

  8. day10-time模块

    import time print(time.time()) #时间戳1553070877.0166008 print(time.strftime('%Y-%m-%d %H %M %S')) #201 ...

  9. day08-内置函数和匿名函数

    1. 1)网络编程只能是二进制.2)照片和视频也是以二进制储存. 3)html网页爬取到的也是二进制编码. 2. 非常重要的4个内置函数:zip ,filter,map,sorted 1)zip: 例 ...

  10. 《C Prime Plus》第九节笔记

    第九节 函数 9.1 复习函数 函数原型 function prototype 函数调用 function call 函数定义 function definition 形参 实参 典型的ANSI C函 ...