Hugo+GitHub 静态博客折腾笔记

作者: chaomifan | 来源:发表于2017-05-01 16:39 被阅读361次

为了个人博客

五一期间，用 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

官网皮肤截图：

image.png

这个主题蛮喜欢，但是有两点没满足要求：

字体替换（个人很喜欢苹果系统的手札体，经测试网站也可引用）
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 " }}  
      {{ 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链接：

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 就从无到有学习起来了，最好的学习还是实践，最好的老师还是兴趣；

网友评论

本文标题：Hugo+GitHub 静态博客折腾笔记

本文链接：https://www.haomeiwen.com/subject/ivtqtxtx.html

延伸阅读

深度阅读

您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

Hugo+GitHub 静态博客折腾笔记

为了个人博客

Overview

环境介绍

iterm2 + oh-my-zsh update+ homebrew update

hugo 安装

git 安装与部署

个性域名绑定

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

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

搭建博客

Ethan's PMbook

产品经理的技能树🌲

Github + Hexo

Hugo+GitHub 静态博客 折腾笔记

为了个人博客

Overview

环境介绍

iterm2 + oh-my-zsh update+ homebrew update

hugo 安装

git 安装与部署

个性域名绑定

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

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

搭建博客

Ethan's PMbook

产品经理的技能树🌲

Github + Hexo

Hugo+GitHub 静态博客折腾笔记