Hugo+github搭建个人网站

Sat, Jun 22, 2019

一 安装Hugo

在github上找到相应版本github地址，本人是mac，就下载了hugo_0.55.6_macOS-64bit.tar.gz。下载解压后，将hugo添加进环境变量中。

二 在Hugo中写文章

在硬盘中选取合适的存储路径，然后命令行中使用如下指令生成网页本地文档：

hugo new site personal-site

由此可得到如下文件目录：

personal-site ├── archetypes ├── config.toml ├── content ├── data ├── layouts ├── static └── themes 常用目录用处如下

子目录名称	功能
archetypes	新文章默认模板
config.toml	Hugo配置文档
content	存放所有Markdown格式的文章
layouts	存放自定义的view，可为空
static	存放图像、CNAME、css、js等资源，发布后该目录下所有资源将处于网页根目录
themes	存放下载的主题

使用下面的命令生成新的文章草稿：

hugo new posts/first-post.md 在content目录中会自动以archetypes/default.md为模板在content/posts目录下生成一篇名为first-post.md的文章草稿：

---
title: "First Post"
date: 2017-12-27T23:15:53-05:00
draft: true
---

我们可以加一个标题在下面并去掉标记为草稿的这一行：draft: true

---
title: "First Post"
date: 2017-12-27T23:15:53-05:00
---

## Hello world

然后随便下载一个主题并加载到config.toml文件中：

git init
git submodule add https://github.com/spf13/hyde.git themes/hyde
# Edit your config.toml configuration file
# and add the Ananke theme.
echo 'theme = "hyde"' >> config.tom

现在使用如下命令建立本地服务器：

hugo server

并在浏览器中输入网址http://localhost:1313/就可以在浏览器中查看网页效果了。 如果觉得没有问题了便可以使用如下命令：

如此一来网页便生成在默认的public子目录中了。
# 三 发布到github上
将生成的public目录下的所有文件，上传至github.io上。
```c
git add .
git commit -m "edit"
git push -u origin master

四 hyde配置

刚下的hyde有一些不方便使用的地方，需要略作调整。 1. 修改标题 在Hugo的config.toml中，修改title。 比如，本站的修改如下。

title = "ZHY笔记"

这是最简单的修改。 2. 修改描述 描述的内容来源，可以在Hyde的layouts/partials/sidebar.html中发现端倪。

    <div class="sidebar-about">
      <a href="{{ .Site.BaseURL }}"><h1>{{ .Site.Title }}</h1></a>
      <p class="lead">
      {{ with .Site.Params.description }} {{.}} {{ else }}An elegant open source and mobile first theme for <a href="http://hugo.spf13.com">hugo</a> made by <a href="http://twitter.com/mdo">@mdo</a>. Originally made for Jekyll.{{end}}
      </p>
    </div>

可见，只要设置.Site.Params.description参数，就可以直接展示了。 标题也是用类似的方式来完成模板填充的。

[params]
description = "一个程序员的探索过程。"
copyright = "Copyright (c) 2019, Zhou HongYi"
版权声明也顺便改了。

3.首页显示不完整内容 查看Hyde的layouts/index.html，可以发现问题所在。

<div class="post">
  <h1 class="post-title">
    <a href="{{ .Permalink }}">
      {{ .Title }}
    </a>
  </h1>

  <span class="post-date">{{ .Date.Format "Mon, Jan 2, 2006" }}</span>

  {{ .Content }}
</div>

把{{ .Content }}替换成{{ .Description }}，就可以避免显示完整内容了。 这个{{ .Description }}，是在页面头部的Front Matter中设置的。

比如，本文就设置如下：

title: "Hugo+github搭建个人网站"
description: "详细介绍Hugo+github搭建个人网站的方法，并使用Hyde作为Hugo的Theme，并对Hyde进行了必要的定制。还介绍了Markdown编辑器MWeb的图床设置。"

还有另一种方法是使用{{ .Summary }}，自动截取前70个字的内容。 不过，这种自动截取的实际效果非常差。

4.修改日期样式 像Mon, Jan 2, 2006这种样式，只适合西方人阅读。 孤更喜欢2017-06-22 23:36:54的这种样式。 这可以修改Hyde的layouts/index.html来实现。

<span class="post-date">{{ .Date.Format "2006-01-02 15:04:05" }}</span>

5.自定义页面添加默认样式 自定义页面，比如/tags页面并不在hyde的样式中，需要手工添加样式的支持，创建layouts/_default/terms.html文件，在里面填上如下内容：

{{ define "main" -}}
<h1>分类标签有{{ len .Data.Terms }}个</h1>
{{ $data := .Data }}
{{ range .Data.Terms.ByCount }}
{{ $termLink := printf "/%s/%s/" $data.Plural .Term | urlize }}
<h2>
    <a href="{{ $termLink }}">{{ .Term }}</a>
    有{{ .Count }}篇
</h2>
<ul>
    {{ range .Pages | first 5 }}
    <li><a href="{{ .Permalink }}">{{ .Title }}</a></li>
    {{ end }}
    {{ if gt (len .Pages) 5 }}
    <li><a href="{{ $termLink }}">……</a></li>
    {{ end }}
</ul>
{{- end}}
{{- end}}

这样就可以得到美观的分类标签，如下所示：

五 MWeb图床配置

5.1 思路

在mac上写markdown有很多解决方案，我最终选择了MWeb。 在使用过程中，提交图片的时候，需要提供图床。 思路如下： 1:mac上面应用对本地存储有严格访问权限，使用git上的路径。 2:在git上的同repo上存储图片。 3:本地搞一个 python3 的服务，将图片用规律存储到本地。 4：MWeb 的相关想法。 1）将图片全部存放在本地，和自己的博文存放在一起。 2）用 MWeb 写博文的时候，图片用其自带的图床管理 api 将图片存放到本机目录。 3）由于 github 的图片路径是有规律的，所以计算出来最终路径，直接保存到博文当中。 5:用 git 将文章和图片全部推到仓库，然后就啥都可以了。

5.2 python 脚本撰写以及启动

main_upimg.py 主程序代码

#!/usr/bin/env python3
# -*- coding: UTF-8 -*-
from sanic import Sanic
from sanic.response import json, text, file
import os, sys
import hashlib

app = Sanic()
baseDir = '/Users/fungleo/Documents/Blog/articles/image/'

# 成功以及失败的返回脚本
def ok(data):
    return json({"data": data, "status": 0})

def fail(data):
    return json({"data": data, "status": 1})

# 字节码转16进制字符串
def bytes2hex(bytes):
    hexstr = u""
    for i in range(10):
        t = u"%x" % bytes[i]
        if len(t) % 2:
            hexstr += u"0"
        hexstr += t
    return hexstr.lower()

# 根据16进制字符串获取文件后缀
def getSuffix(hexStr):
    SUPPORT_TYPE = {
            'ffd8ffe':'jpg',
            '89504e470d0a1a0a0000':'png',
            '474946383961':'gif',
        }
    for i in SUPPORT_TYPE:
        if i in hexStr:
            return SUPPORT_TYPE[i]
    return 'error type'
# 上传文件接口
@app.route('/upimg', methods=['POST'])
async def upimg(request):

    # 判断参数是否正确
    if not request.files and not request.files.get('file'):
        return fail('error args')
    image = request.files.get('file').body

    # 判断文件是否支持
    imageSuffix = getSuffix(bytes2hex(image))
    if 'error' in imageSuffix:
        return fail(imageSuffix)

    # 组织图片存储路径
    m1 = hashlib.md5()
    m1.update(image)
    md5Name = m1.hexdigest()

    saveDir = baseDir + md5Name[0:2] + '/'
    savePath = saveDir + md5Name[2:] + '.' + imageSuffix
    resPath = '/' + md5Name[0:2] + '/' + md5Name[2:] + '.' + imageSuffix

    # 如果文件夹不存在，就创建文件夹
    if not os.path.exists(saveDir):
        os.makedirs(saveDir)

    # 将文件写入到硬盘
    tempFile = open(savePath, 'wb')
    tempFile.write(image)
    tempFile.close()

    # 给客户端返回结果
    return ok({"path": resPath})

if __name__ == "__main__":
    app.run(host="127.0.0.1", port=7000)

5.3 python 脚本开机启动

编写脚本 查看main_upimg.py位置，在目录下输入pwd查看

nohup python3 path/main_upimg.py &

并赋予执行权限。

chmod +x run.sh

mac中进入系统偏好设置->用户与群组->登陆项，将run.sh添加到登陆项，并勾选前面的隐藏选项卡，重新启动即可。

5.4 配置 MWeb 编辑器

通过上面的一系列折腾之后，我们的图床服务就算是搞好了，下面我们要来配置我们的编辑器，通过编辑器的配置，我们可以很方便的使用我们的图床。

名称	值
名称	myblog
API地址	http://127.0.0.1:7000/upimg
POST文件名	file
图片URL路径	data/path
图片URL前缀	https://raw.githubusercontent.com/pj1987111/pj1987111.github.io/master/images

六 markdown与confluence markup相互转换

进入 http://chunpu.github.io/markdown2confluence/browser/ 页面，即可转换。