Hugo+GitHub 静态博客 折腾笔记

May 1, 2017   #hugo  #个人博客 

为了个人博客

五一期间,用 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 重新配置了一次

参考文档:http://www.jianshu.com/p/7de00c73a2bb

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 的操作文档可参考如下网站:

中文文档:http://www.gohugo.org

英文文档:http://gohugo.io/overview/quickstart/

hugo 建立站点和发文的内容和步骤不在此介绍了,文档上都有,下面重点说一下我折腾 theme 的主要过程


下载 theme 我在 网站上下载了 几套皮肤预览了一下,最后选择了性冷淡的主题 “Angel’s Ladder” 主题风格比较简单,内容纯文本界面,基本没有什么需要填充和修改图的地方;

皮肤下载:http://www.gohugo.org/theme/angels-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

删除

  • Twitter
  • Facebook

进入 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 " }} &nbsp;
      {{ range .Params.tags }}
        #<a href="/tags/{{ . | urlize }}">{{ . }}</a>&nbsp;
        {{ end }}
    </div>
      {{ .Summary }} &nbsp;
      {{ if .Truncated }}
        <div class="read-more-link">
        <a href="{{ .RelPermalink }}">Read More…</a>
        </div>
      {{ end }}
  </div>
  {{ end }}
</main>

至此,theme 修改和个性化完毕,po 上 GitHub链接:

https://github.com/chaomifan/anglesladder.git

后续有时间会持续更新一下

  • 社交账号的 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

参考教程 http://blog.csdn.net/hcbbt/article/details/11651229/

参考教程 http://www.runoob.com/w3cnote/git-guide.html

参考教程 http://www.codesec.net/view/194341.html

现在,浏览器访问 yourgithubname.github.io 就应该能访问你的博客了

个性域名绑定

有条件和基础的同学可以购买自己的域名,绑定在 GitHub 博客的仓库上,具体在 GitHub 的 setting 中有详细步骤,本文不详述过程了

https://help.github.com/articles/using-a-custom-domain-with-github-pages/

原型文件上传至 GitHub 并浏览(实施之前看到的文章方法)

在网站上看到一位 PM 分享的干货,一直想实施(公司原型 page 服务器因安全问题被 技术总监 木头·丝毫不照顾我的感受·见 毫不留情的关闭了 ),因此顺手搞了下,也成功了;

分享干货:http://www.chanpin100.com/article/101246


写在最后 做什么事情都不容易,因为是先折腾,后补文字,好些步骤,命令,代码和参考文章都是回头重新查找一遍的,但是感觉上还是很有收获,比如 git 就从无到有学习起来了,最好的学习还是实践,最好的老师还是兴趣;

如果觉得本文有用,还请打赏一下下,欢迎持续关注我的博客,对我持续研究和码字也是鞭策