Hugo结合Github搭建博客

安装Hugo

• macOS环境

  brew install hugo
  # 检测安装成功
  hugo version
  Hugo Static Site Generator v0.55.6/extended darwin/amd64 BuildDate: 2019-08-26T15:23:01Z
  

生成站点

• 使用hugo创建blog站点

  hugo new site blog
  cd blog
  # 目录结构
  tree blog
  #blog
  #├── archetypes
  #│   └── default.md
  #├── config.toml
  #├── content
  #├── data
  #├── layouts
  #├── static
  #└── themes
  

  archetypes：包括内容类型，在创建新内容时自动生成内容的配置

  config.toml：是网站的配置文件，包含一些基本配置和主题特有的配置

  content：包括网站内容，全部使用markdown格式

  data：存放自定义模版，导入的toml文件（或json，yaml）

  layouts：包括了网站的模版，决定内容如何呈现

  static：包括了css, js, fonts, media等，决定网站的外观

  themes：用于存放主题，可以去官方https://themes.gohugo.io/下载喜欢的主题

• 安装主题

  git init
  git submodule add https://github.com/pacollins/hugo-future-imperfect-slim.git themes/hugo-future-imperfect-slim
  

  在 config.toml 中配置 theme = "hugo-future-imperfect-slim"

• 创建博客日志，最好将md文件放在content的post目录

  hugo new post/hello.md
  

  复制themes/hugo-future-imperfect-slim/exampleSite/config.toml至当前config.toml

• 效果预览

  hugo server --theme=hugo-future-imperfect-slim --buildDrafts --watch
  

  访问http://localhost:1313/，可以看到如下效果

  

部署到 GitHub Pages

Github Pages 是 Github 推出的一项功能，可以免费托管静态网站，将你的静态文件放在仓库里，然后在仓库的 Settings 里面，翻到下面的 GitHub Pages 部分，可以将此仓库设置为你的静态网站文件的存放仓库

• 创建github仓库

  

• 设置github pages

  静态文件存放位置有三种：

  • master 分支
  • master 分支下 docs 目录
  • gh-pages 分支(前提是这个分支存在才会显示)

  Github Pages 主仓库除外，必须是 master 分支

  

• 源文件与编译生成结果不在同仓库

  新建一个仓库存放源文件（此仓库不需要设置 Github Pages)，如 blog 仓库，编译结果放在主仓库里，如 <username>.github.io 仓库

  配置 config.toml 的 baseURL 设置成 https://<username>.github.io/

  生成编译结果关联github仓库

  hugo -d docs
  git submodule update
  git submodule add https://github.com/<username>/<username>.github.io.git docs