使用Hugo+GitHub Pages快速搭建博客

工具准备

Hugo：博客框架 https://github.com/gohugoio/hugo
Git：用来发布博客内容 https://git-scm.com/
Github：保存和显示博客内容 https://github.com/
MarkDown编辑软件：用来进行博客文章的编辑 Typora
Cmder：替代 Windows 命令行的工具 https://cmder.net/

Hugo

Hugo 是由 Go 语言实现的静态网站生成器。简单、易用、高效、易扩展、快速部署。

官方网址 https://gohugo.io/，关于 Hugo 的介绍十分详细。

安装 Hugo

在 Github 版本库中选择合适的版本下载并解压，将解压出来的可执行文件 hugo.exe 放到自定义目录。将对应的文件夹路径配置到环境变量中；hugo version查看对应的版本。

hugo version

初始化博客目录

选择一个自定义路径来存放博客，在该路径下执行hugo new site myBlog；会创建一个名为 myBlog 的文件夹存放博客内容。

初始化的目录结构：

├─ archetypes：生成新文件时的默认模板配置
│  └─ default.md
├─ config.toml：配置文件，在里面可以定义博客地址、构建配置、标题、导航栏等等
├─ content：博客文章存放的目录
├─ data
├─ layouts：网站的模板文件
├─ static：图片、css、js 等资源
└─ themes：主题目录，可以将喜欢主题，下载到该目录下

安装主题

在 themes.gohugo.io 选择喜欢的主题，下载到 themes 目录中，然后在 config.toml 中配置 theme = "KeepIt"即可。

在 themes 目录下执行
- git clone https://github.com/Fastbyte01/KeepIt
也可以添加到 git 的 submodule 中，优点是后面讲到用 travis 自动部署时比较方便。如果需要对主题做更改，最好 fork 主题再做改动。
- git submodule add https://github.com/Fastbyte01/KeepIt.git themes/KeepIt
- 如果需要调整更改主题，需要在 themes/even 目录下重新 build
  - cd themes/KeepIt
  - npm i
  - npm start

创建新文件

hugo new about.md：会在 content 文件夹下产生一个 about.md 的文件。

文件抬头信息的设定：可以根据需求进行添加或则删除

---
title: "My First Post"
date: 2017-12-14T11:18:15+08:00
keywords: ["hugo"]
description: "The First"
tags: ["hugo", "pages"]
categories: ["pages"]
author: ""
---

配置 config.toml

该文件用于配置整个网站，根据自己的需求配置。

# <head> 里面的 baseurl 信息，填你的博客地址
baseURL = "https://example.com"
# 浏览器的标题
title = "MyBlog" 
# 语言
languageCode = "en" 
defaultContentLanguage = "en"
# 开启可以让「字数统计」统计汉字
hasCJKLanguage = true 
# 主题     
theme = "KeepIt" 
# 是否禁止URL Path转小写
disablePathToLower = true
# 每页的文章数
paginate = 14
# 支持 Emoji
enableEmoji = true 
# 支持 robots.txt
enableRobotsTXT = true 
# Google 统计 id
googleAnalytics = "" 
[sitemap]
  changefreq = "monthly"
  filename = "sitemap.xml"
  priority = 0.5
[blackfriday]
  hrefTargetBlank = true
  nofollowLinks = true
  noreferrerLinks = true
[Permalinks]
  posts = "/:year/:filename/"
[menu]
  [[menu.main]]
    name = "Blog"
    url = "/posts/"
    weight = 1
  [[menu.main]]
    name = "Categories"
    url = "/categories/"
    weight = 2
  [[menu.main]]
    name = "Tags"
    url = "/tags/"
    weight = 3
  [[menu.main]]
    name = "About"
    url = "/about"
    weight = 4
[params]
  since = 2017
  author = ""    #Author's name
  subtitle = "If you're not doing what you love,you're wasting your time"
  avatar = "/images/me/avatar.jpg" 
  cdn_url = ""   # Base CDN URL
  home_mode = "" # post or other
  google_verification = ""
  bing_verification = ""
  yandex_verification = ""
  pinterest_verification = ""
  baidu_verification = ""
  socialShare = false
  description = "" # site description
  keywords = ""    # site keywords
  license= 'Released under <a rel="license external nofollow noopener noreffer"
     href="https://creativecommons.org/licenses/by-nc/4.0/" target="_blank">CC BY-NC 4.0</a>'
[params.gravatar]
  email = "example@gmail.com"  # uncomment and insert your email address to use gravatar
[params.social]
  #GitHub = "XXXX"
  #Linkedin = "xxxx"
  #Twitter = "xxxx"
  #Instagram = "xxxx"
  #Email   = "XXXXX"
  Zhihu = " "
  Douban = ""
[params.share]
  #Twitter = true
  #Facebook = true
  #Reddit = true
  Linkedin = true
  #Pinterest = true
  #HackerNews = true
  #Mix = true
  #Tumblr = true
  #VKontakte = true
  Douban = true
  #Weibo = true
[author]
  name = ""
  [params.publisher]
    name = "SmallFire"
    [params.publisher.logo]
      url = "logo.png"
      width = 127
      height = 40
  [params.logo]
    url = "logo.png"
    width = 127
    height = 40
  [params.image]
    url = "cover.png"
    width = 800
    height = 600
[params.gitalk]           
  clientID = "" # Your client ID
  clientSecret = "" # Your client secret
  repo = "" # The repo to store comments
  owner = "" # Your GitHub ID
  admin= "" # Required. Github repository owner and collaborators. (Users who having write access to this repository)
  id= "location.pathname" # The unique id of the page.
  labels= "gitalk" # Github issue labels. If you used to use Gitment, you can change it
  perPage= 15 # Pagination size, with maximum 100.
  pagerDirection= "last" # Comment sorting direction, available values are 'last' and 'first'.
  createIssueManually= false # If it is 'false', it is auto to make a Github issue when the administrators login.
  distractionFreeMode= false # Enable hot key (cmd|ctrl + enter) submit comment.
[params.valine]
  enable = false
  appId = 'your appId'
  appKey = 'your appKey'
  notify = false  # mail notifier , https://github.com/xCss/Valine/wiki
  verify = false # Verification code
  avatar = 'mm'
  placeholder = 'your comments ...'
  visitor = true

生成网站

hugo server -D -w

-w：监控更改，如果发生更改直接显示到博客上
生成之后就可以通过 http://localhost:1313/ 查看网站效果。

部署到 Github Pages

为了后续通过 Travis-CI 自动部署，这里需要在 Github 上创建两个 repo：一个是文件 repo ，自定义名称(blog)，一个是博客展示 repo，必须为 [username].github.io。

Git 连接 Github 远程仓库

将修改后的内容发布到 blog 仓库中，Travis CI 会自动将生成的博客展示界面部署完成。通过https://<user_name>.github.io/可以访问博客。

git add -a
git commint -m "initial all files"
git remote add origin https://github.com/<username>/blog
git remote add origin git@github.
git push -u origin master

配置 Travis

生成 Github Access Token，只勾 repo 内容。

生成Token

进入 Travis CI 关联 Github 账号，同步账号并激活 blog repo。

进入 blog 的设置界面设置自动部署触发条件；并把刚刚生成的 GitHub Access Token 添加到环境变量GITHUB_TOKEN里。

在 blog 目录中添加触发部署文件.travis.yml，当 blog repo 文件发生变化时触发该文件内容

默认情况下，travis 会自动下载 git submodules
github_token：$GITHUB_TOKEN 要和 travis 设置的环境变量名一致

sudo: false
language: go
git:
  depth: 1

go:
  - "1.8"

install:
  - wget https://github.com/gohugoio/hugo/releases/download/v0.62.2/hugo_0.62.2_Linux-64bit.deb
  - sudo dpkg -i hugo*.deb

# install: go get -v github.com/gohugoio/hugo
script:
  #运行HUGO命令
  - hugo -D
  - npm install
  - npm run algolia
after_script:
  # 部署
  - cd ./public
  - git init
  - git config user.name "<github_username>"
  - git config user.email "<github_email>"
  - git add .
  - git commit -m "Update Blog By TravisCI With Build $TRAVIS_BUILD_NUMBER"
  # Github Pages
  - git push --force --quiet "https://$GITHUB_TOKEN@${GH_REF}" master:master
  # Github Pages
  - git push --quiet "https://$GITHUB_TOKEN@${GH_REF}" master:master --tags
env:
 global:
   # Github Pages URL
   - GH_REF: github.com/<github_username>/<username>.github.io.git
deploy:
  provider: pages              # 重要，指定这是一份github pages的部署配置
  skip_cleanup: true           # 重要，不能省略
  local_dir: public            # 静态站点文件所在目录
  github_token: $GITHUB_TOKEN  # 重要，$GITHUB_TOKEN是变量，需要在GitHub上申请、再到配置到Travis
  keep-history: true           # 是否保持target-branch分支的提交记录
  on:
    branch: master           # 博客源码的分支
  repo: <username>/<username>.github.io
# fqdn:                       # 如果是自定义域名，此处要填
  target_branch: master         # 要将静态站点文件发布到哪个分支
  email: <github_email>
  name: <github_username>

添加.gitignore文件

在 Hugo 本地编译时会产生 public 文件夹，但是这个文件夹中的内容对于 blog repo 来说是不需要的 (包括用来存放主题的 themes 文件夹和主题产生的 resources 文件夹也是不需要的)

我们可以用一个.gitignore 文件来排除这些内容
在 blog 目录下创建并修改 .gitignore，然后提交到 github 仓库
```
public/*
themes/*
resources/*
```

添加 Gittalk

创建 Github Application

在 Github 上创建一个 Github Application，记录下 ClientID 和 Client Secret，后面配置文件需要配置。

Github Application

配置config.toml文件

[params.gitalk] 
  clientID = "[Client ID]" # Your client ID`
  clientSecret = "[Client Secret]" # Your client secret`
  repo = "<username>.github.io" # The repo to store comments`
  
将 [Client ID] 替换为 Github Application 的 Client ID
将 [Client Secret]替换为 Github Application 的 Client Secret
将 repo 设置为你的博客的地址

具体配置参考gittalk官网