Hugo和GitPages搭建博客

空闲时间，使用Hugo和Git Pages搭建一个博客，这里整理了以下整个过程，希望你看到了有所帮助，本站主题地址:https://github.com/kakawait/hugo-tranquilpeak-theme 喜欢的拿去吧~

Hugo优势

• Hugo 是使用 Go 编写的快速而现代的静态站点生成器，效率很高
• 结合Git Pages最大的卖点是完全免费，不需要任何其他服务器或者费用

安装Hugo

• Mac安装

brew install hugo 

• 其他安装，下载二进制包安装

https://github.com/gohugoio/hugo/releases

Hugo检查安装是否成功

hugo version

创建站点

#创建站点目录
mkdir myblog

#使用hugo创建站点，生成所需站点文件
hugo new site /path/to/myblog

创建后站点目录结构

.
├── archetypes # 存放生成博客的模版
├── config # 存放 hugo 配置文件 支持 JSON YAML TOML 三种格式配置文件
├── content # 存放 markdown 文件
├── data # 存放 Hugo 处理的数据
├── layouts # 存放布局文件
├── static # 存放静态文件 图片 CSS JS文件
└── themes # 存放主题

添加主题

• 自己选个主题， 主题库传送门
• 下载主题

cd /path/to/myblog/themes
git clone https://github.com/kakawait/hugo-tranquilpeak-theme.git

启动Hugo

• 直接本机启动（未配置主题，启动使用默认主题）

hugo server

• 指定主题本机启动

hugo server --theme=hugo-tranquilpeak-theme

配置主题

• 修改config.tom文件配置,如下为我的配置文件
• 官方参数说明
• 三方参数说明传送门

#这个很重要，解析到gitpage必填的一项，请填写你的gitpage地址：https://这里填写你github的用户名.github.io/， 如：https://shawn888.github.io/，另外这里要注意，这里填写https的地址，后面的支持https配置才可以正常显示页面
baseURL = "https://shawn888.github.io/"
languageCode = "zh-cn"
defaultContentLanguage = "zh-cn"
title = "网站标题"
# 使用的皮肤，也就是刚才clone下来的皮肤名称（在/path/to/myblog/themes/hugo-tranquilpeak-theme）
theme = "hugo-tranquilpeak-theme"
disqusShortname = "hugo-tranquilpeak-theme"
paginate = 11
canonifyurls = true
enableEmoji = true # 支持 Emoji
enableRobotsTXT = true # 支持 robots.txt
[permalinks]
  post = "/:year/:month/:slug/"
[taxonomies]
  tag = "tags"
  category = "categories"
  archive = "archives"
[author]
  name = "你的名字"
  bio = "个性签名"
  job = "工作的公司"
  location = "你的地址"
  picture = "头像地址 使用网络地址"
  twitter = "推特账号"
[[menu.main]]
  weight = 1
  identifier = "home"
  name = "Home"
  pre = "<i class=\"sidebar-button-icon fa fa-lg fa-home\"></i>"
  url = "/"
[[menu.main]]
  weight = 2
  identifier = "categories"
  name = "Categories"
  pre = "<i class=\"sidebar-button-icon fa fa-lg fa-bookmark\"></i>"
  url = "/categories"
[[menu.main]]
  weight = 3
  identifier = "tags"
  name = "Tags"
  pre = "<i class=\"sidebar-button-icon fa fa-lg fa-tags\"></i>"
  url = "/tags"
[[menu.main]]
  weight = 4
  identifier = "archives"
  name = "Archives"
  pre = "<i class=\"sidebar-button-icon fa fa-lg fa-archive\"></i>"
  url = "/archives"
[[menu.main]]
  weight = 5
  identifier = "about"
  name = "About"
  pre = "<i class=\"sidebar-button-icon fa fa-lg fa-question\"></i>"
  url = "/#about"
[[menu.links]]
  weight = 1
  identifier = "github"
  name = "GitHub"
  pre = "<i class=\"sidebar-button-icon fa fa-lg fa-github\"></i>"
  url = "https://github.com/shawn888"
[[menu.misc]]
  weight = 1
  identifier = "rss"
  name = "RSS"
  pre = "<i class=\"sidebar-button-icon fa fa-lg fa-rss\"></i>"
  url = "/index.xml"
[params]
  dateFormat = "2006-01-02"
  keywords = ["PHP", "Golang", "Linux", "大数据", "黑灰产", "反作弊", "Python", "随笔"]
  syntaxHighlighter = "highlight.js"
  clearReading = false
  hierarchicalCategories = true
  description = ""
  sidebarBehavior = 2
  coverImage = "images/cover.jpg"
  imageGallery = true
  thumbnailImage = true
  thumbnailImagePosition = "left"
  autoThumbnailImage = true
  [[params.sharingOptions]]
    name = "Facebook"
    icon = "fa-facebook-official"
    url = "https://www.facebook.com/sharer/sharer.php?u=%s"
  [[params.sharingOptions]]
    name = "Twitter"
    icon = "fa-twitter"
    url = "https://twitter.com/intent/tweet?text=%s"
  [[params.sharingOptions]]
    name = "Google+"
    icon = "fa-google-plus"
    url = "https://plus.google.com/share?url=%s"
  [params.header.rightLink]
    class = "open-algolia-search"
    icon = "search"
    url = "/#search"
  [params.sidebar.profile]
    url = "/#about"
  [params.footer]
    copyright = "<a href=\"https://github.com/shawn888\">shawn888</a>"

编写文章

• 创建文章

#该命令会使用模板创建文件，首先查找用户的模板文件，没有就会查找主题的模板文件
hugo new post/my-first-blog.md
# 使用markdown编辑文章,生成的文章在/path/to/myblog/content/post/my-first-blog.md下
vim post/my-first-blog.md

• 编写文章

#这里要注意创建的文章中,如下
---
列表页缩略显示简述内容编辑区
<!--more-->
在more标识之后就是文章内容编写区域

• 修改创建文章的模板

# 用户模板文件路径
cd /path/to/myblog/archetypes/default.md

#皮肤主题默认模板文件（如果没有，可以自己复制用户模板文件到这边来）
cd /path/to/myblog/themes/hugo-tranquilpeak-theme/archetypes/default.md

• 我的文章模板配置如下

---
#文章标题
title: "{{ replace .Name "-" " " | title }}"
#添加日期
date: {{ .Date }}
#文章描述
description: ""
#是否草稿
draft: true
#文章标签
tags: []
#文章分类
categories: []
#文件关键词
keywords: []
#打开文章详情页，是否保持清爽阅读模式（也就是屏蔽左侧菜单栏）
clearReading: true
#文章列表页缩略图地址
thumbnailImage: ""
#文章列表页缩略图展示位置
thumbnailImagePosition: left
#自动提取文章第一个图作为缩略图
autoThumbnailImage: yes
#图像太大截取保留中间图像显示
metaAlignment: center
# 封面
# coverImage: https://s2.ax1x.com/2020/01/10/lhyP2Q.md.png
# coverCaption: "Hugo"
# coverMeta: out
# coverSize: full
# 轮播图
# gallery:
#     - image-3.jpg "New York"
#     - image-4.png "Paris"
#     - http://i.imgur.com/o9r19kD.jpg "Dubai"
#     - https://example.com/orignal.jpg https://example.com/thumbnail.jpg "Sidney"
#评论开启
comments: true
#显示标签
showTags: true
#显示上一篇、下一篇
showPagination: true
#显示社交空间
showSocial: true
#显示文章日期
showDate: true
#页面简述，一般卸载<!--more-->中
# summary: "good,Hugo~"
---

打包发布到Git

• 打包命令

# -t 后必须跟皮肤名，不然没办法生成对应的样式
hugo -t hugo-tranquilpeak-theme

• 打包后，会再目录下生成一个public的目录

cd path/to/myblog/public

tree -L 1

.
├── 2020
├── 404.html
├── CNAME
├── about
├── archives
├── categories
├── css
├── favicon.png
├── images
├── index.html
├── index.xml
├── js
├── page
├── post
├── robots.txt
├── sitemap.xml
└── tags

使用Git Pages建立外网站点

• 创建github仓库,这里必须注意仓库的名称必须为,github用户名.github.io,如下图

• 进入/path/to/myblog/

cd path/to/myblog/public

# 将代码提交到刚建立的github中
git init
git remote add origin git@github.com:shawn888/shawn888.github.io.git
git add -A
git commit -m 'blog init'
git push -u origin master

• 提交后可以使用https://github用户名.github.io访问你的博客了

自动部署发布GitHub脚本

• deploy.sh 脚本如下

#!/bin/bash
# 部署到 github pages 脚本
# 错误时终止脚本
set -e

# 删除打包文件夹
#rm -rf public

# 打包。even 是主题
#hugo --theme=hugo-tranquilpeak-theme  --baseUrl="https://shawn888.github.io/" 
hugo --theme=hugo-tranquilpeak-theme # if using a theme, replace with `hugo -t <YOURTHEME>`

# 进入打包文件夹
cd public

# Add changes to git.

git init
git add -A

# Commit changes.
msg="blog update `date`"
if [ $# -eq 1 ]
  then msg="$1"
fi
git commit -m "$msg"

# 推送到githu  
# nusr.github.io 只能使用 master分支
git push -f git@github.com:shawn888/shawn888.github.io.git master

# 回到原文件夹
cd ..

最后编辑完文章，进入到项目根目录，运行自动发布脚本即可

./deploy.sh

DNS解析自定义域名配置（前提是你要有一个域名哈~）

• 我的域名是阿里云购买的，解析配置如下

gitpage支持https解析配置

• 首先配置github代码仓库的，打开代码仓库选择settings,填写你的域名.必须使用https方式

代码参考

• 本站博客代码

参考材料

官方文档