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
配置主题
#这个很重要,解析到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方式