为了个人博客
五一期间，用 WordPress 为好朋友的公司配置了一个网站，替换原来的简易公司官网，在搭建的过程中，萌生了建立一个独立个人博客的想法，恰巧节前技术总监木头大大着重安利了 Hugo 这个静态博客建站工具，于是就开始了一天一夜的折腾之旅
Overview
- 环境介绍+个人知识储备
- iterm2 + oh-my-zsh install + homebrew update
- hugo 安装
- git 安装与部署
- 个性域名绑定
- 原型文件上传至 GitHub 并浏览（实施之前看到的文章方法）
环境介绍
我一共有三台机器：
- 公司 iMac
- 移动 MacBook Pro
- 家里 黑苹果（兼容性不错，性能超好）
五一期间在身边的是 黑苹果和 MacBook，其中 MacBook pro 里面 iterm2+oh-my-zsh 没有配置完全；
另外由于我不是 Coder 因此，git、 html、 go 语言以及 Hugo 都属于知识空白，需要一边看文档，一边度娘；
好在网上文档和文章较多，我还算能钻研，但是后面还是遇到了不少坑，填坑花了不少时间；
iterm2 + oh-my-zsh update+ homebrew update
step 1: update iterm2 + oh-my-zsh 之前黑苹果已经配置好 MacBook Pro 重新配置了一次
step 2: 安装+update homebre
mac 下超好用神器，黑苹果已经久没有更新过发现很多软件已经过期了
安装文档：https://brew.sh
Mac下终端安装命令：
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
更新命令(会更新 homebrew和 由其安装的所有软件)：
$ brew update
之前由于黑苹果的 homebrew 版本很低，导致 brew 安装 hugo 的版本也较低。重新 update 之后 hugo 版本升级到最新
step 3: 安装oh-my-zsh plugin
如何开启和安装 oh-my-zsh plugin 具体可百度和参考上文中列出的参考文章；
本次需要用到 git 插件，同时墙裂推荐 自动补全插件 inrc 和 高亮插件 zsh-syntax-highlighting
hugo 安装
Mac 下安装 hugo 非常方便
$ brew hugo
hugo 的操作文档可参考如下网站：
hugo 建立站点和发文的内容和步骤不在此介绍了，文档上都有，下面重点说一下我折腾 theme 的主要过程
下载 theme
我在 网站上下载了 几套皮肤预览了一下，最后选择了性冷淡的主题 “Angel's Ladder” 主题风格比较简单，内容纯文本界面，基本没有什么需要填充和修改图的地方；
作者官方网站：http://tanksuzuki.com
官网皮肤截图：
这个主题蛮喜欢，但是有两点没满足要求：
- 字体替换 （个人很喜欢苹果系统的手札体，经测试网站也可引用）
- header 部分的社交账号默认是 Twitter、Facebook，不适合于国内；
- 没有文章分类（hugo 支持分类）
- 没有文章摘要（很奇怪，作者官网的模板有，但下载的模板没有 ：(
以下是修改 Angel's Ladder 主题的步骤和方法
字体替换
进入 angels-ladder/static/css 文件夹，用编辑器打开 theme.css 文件
编辑如下代码中的 font-family 值，将需要的字体替换
body
{
background-color: #fff;
font-family: "Hannotate SC", Meiryo, sans-serif;
/*font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;*/
font-size: 14px;
color: #666;
line-height: 1.6em;
letter-spacing: 0.5px;
}
不知道字体如何对应的 请前往：CSS font-family中文字体对应的英文名称一览表
添加替换国内的社交账号
我根据自己的情况添加
- 新浪微博：Weibo
- 微信：Wechat
- 简书：JianShu
- 邮件：Mail Me
保留
- GitHub
删除
进入 angels-ladder/layouts/partials/文件夹，用编辑器打开header.html文件
编辑如下代码中的 ul 内的内容;
另外 Site.Params.xx 需要在 hugo 网站根目录中的 config.toml 文件中定义
<header role="banner">
<div class="row gutters">
<div id="site-title" class="col span_6">
<h1><a href="{{ .Site.BaseURL }}">{{ .Site.Title }}</a></h1>
{{ with .Site.Params.subtitle }}<h2>{{ . }}</h2>{{ end }}
</div>
<div id="social" class="col span_6">
<ul>
{{ with .Site.Params.weibo }}<li><a href="{{ . }}" target="_blank">Weibo</a></li>{{ end }}
{{ with .Site.Params.wechat }}<li><a href="{{ . }}" target="_blank">Wechat</a></li>{{ end }}
{{ with .Site.Params.jianshu }}<li><a href="{{ . }}" target="_blank">JianShu</a></li>{{ end }}
{{ with .Site.Params.github }}<li><a href="{{ . }}" target="_blank">GitHub</a></li>{{ end }}
{{ with .Site.Params.mail }}<li><a href="{{ . }}" target="_blank">Mail Me</a></li>{{ end }}
{{ if .Site.Params.showsRSS }}<li><a href="{{ .Site.BaseURL }}index.xml" type="application/rss+xml" target="_blank">RSS</a></li>{{ end }}
</ul>
</div>
</div>
</header>
贴上我的 config.toml文件中 Params 定义（有部分 params 是为了添加文章分类页面设置的）
[params]
subtitle = "信心是黑暗中的灯塔，任何时候都不能丢"
about = "/about"
weibo = "http://www.baidu.com"
wechat = "htttp://www.baidu.com"
jianshu = "http://www.jianshu.com/users/f5820a96231b/timeline"
github = "http://www.baidu.com"
mail = "mailto:xielm@qq.com"
guifan = "/categories/产品规范/"
fenxi = "/categories/产品分析/"
jiqiao = "/categories/技巧分析/"
yanjiu = "/categories/技术研究/"
demo = "/categories/产品原型/"
profile = "/images/ethan.png"
copyright = "Written by Ethan，转载请注明出处，谢谢！"
添加文字分类页面入口
暂时不会为这个皮肤增加侧边栏（见其他的皮肤有过），因此选择在页脚部分添加文字分类入口
首先看了下发文章时默认分类的存储地方，查文档发现在：/angels-ladder/archetypes/defoult.md
+++
Description = ""
Tags = ["规范", "分析", "技巧", "研究","原型"]
Categories = ["产品规范", "产品分析", "技巧分析", "技术研究","产品原型"]
+++
根据自己的文章需求，修改默认需要的 Tags 和 Categories，貌似在 执行hugo命令时，会根据此文件中的设置，在 public 下 tags 和 categories 文件夹下建立相关的文件夹；
进入 /angels-ladder/layouts/partials/ 文件夹，用编辑器打开 footer.html 文件
在文件中插入如下代码
<div>
<br>
</div>
<div style="text-align: center;" id="social">
{{ with .Site.Params.about }}<li><a href="{{ . }}" target="_blank">关于Ethan</a></li>{{ end }}
{{ with .Site.Params.demo }}<li><a href="{{ . }}" target="_blank">产品原型</a></li>{{ end }}
{{ with .Site.Params.guifan }}<li><a href="{{ . }}" target="_blank">产品规范</a></li>{{ end }}
{{ with .Site.Params.fenxi }}<li><a href="{{ . }}" target="_blank">产品分析</a></li>{{ end }}
{{ with .Site.Params.jiqiao }}<li><a href="{{ . }}" target="_blank">技巧分析</a></li>{{ end }}
{{ with .Site.Params.yanjiu }}<li><a href="{{ . }}" target="_blank">技术研究</a></li>{{ end }}
</div>
也懒得调整太多样式，直接引用了 header 部分样式
添加文章摘要
分别找到
/angels-ladder/layouts/_default/ 中的 list.html
/angels-ladder/layouts/ 中的 index.html
添加 {{.Summary}} 部分的代码
参考 hugo 的官方文档 http://gohugo.io/content/summaries/
我的代码示例如下，这部分完全是生吞活剥，每想到最后还行了 ：）
<main id="index" role="main">
<div class="article-header light-gray"><h2>最新文章</h2></div>
{{ $paginator := .Paginate (where .Data.Pages "Type" "post") }}
{{ range $paginator.Pages }}
<div class="summary">
<h2><a href="{{ .Permalink }}">{{ .Title }} {{ if .Draft }}:: DRAFT{{end}}</a></h2>
<div class="meta">
{{ .Date.Format "Jan 2, 2006 " }}
{{ range .Params.tags }}
#<a href="/tags/{{ . | urlize }}">{{ . }}</a>
{{ end }}
</div>
{{ .Summary }}
{{ if .Truncated }}
<div class="read-more-link">
<a href="{{ .RelPermalink }}">Read More…</a>
</div>
{{ end }}
</div>
{{ end }}
</main>
至此，theme 修改和个性化完毕，po 上 GitHub链接：
后续有时间会持续更新一下
- 社交账号的 foot-awsome 图标
- 解决微信/微信公众号关注
- 测试修改 bug 等
git 安装与部署
将静态网站部署在GitHub 上比较简单，网上有较多的文章和教程，我主要的问题是 git 是现学的，同时还要解决几台电脑上 public 和 theme 文件夹的同步和修改，因此耗费了很多时间踩坑；
git 全新部署只要建立 pbulic 文件夹的 git 并 git remote 远程仓库即可，大体步骤如下：
- 登录 git 新建仓库 命名要以 yourgithubname.github.io, 具体原理本菜暂讲不太详细，可自行度娘；
- 如果用 ssh 方式连接GitHub需先添加SSH keys 详见下文中的参考教程，不细说了；
- 在 pbulic 文件夹内建立 git；
$ echo "xxxx" >> README.md
$ git init
$ git add -A
$ git commit -m "first commit"
$ git remote add origin git@github.com:yourgithubname/yourgithubname.github.io.git
$ git push -u orgin master
以后每次 运行 hugo 命令 之后 使用如下命令将本地更新推送到 GitHub
$ git add -A
$ git commit -m "xxxx"
$ git push -u orgin master
现在，浏览器访问 yourgithubname.github.io 就应该能访问你的博客了
个性域名绑定
有条件和基础的同学可以购买自己的域名，绑定在 GitHub 博客的仓库上，具体在 GitHub 的 setting 中有详细步骤，本文不详述过程了
https://help.github.com/articles/using-a-custom-domain-with-github-pages/
原型文件上传至 GitHub 并浏览（实施之前看到的文章方法）
在网站上看到一位 PM 分享的干货，一直想实施（公司原型 page 服务器因安全问题被 技术总监 木头·丝毫不照顾我的感受·见 毫不留情的关闭了 ），因此顺手搞了下，也成功了；
写在最后
做什么事情都不容易，因为是先折腾，后补文字，好些步骤，命令，代码和参考文章都是回头重新查找一遍的，但是感觉上还是很有收获，比如 git 就从无到有学习起来了，最好的学习还是实践，最好的老师还是兴趣；
