空闲时间,使用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

配置主题

#这个很重要,解析到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,如下图 1PB7Dg.png

  • 进入/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 ..

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

  • 我的域名是阿里云购买的,解析配置如下 1PfE0P.png

gitpage支持https解析配置

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

代码参考

参考材料

官方文档