目录

Hugo(一)Github Pages 搭建个人博客

序言

Hugo 号称构建网站最快的框架,看过其他相关资料,hexo 在文章数量大的前提下,建站成静态文件的速度很慢,另外从主题(themes)这个角度去考虑,简单也是我的首选,于是从 hugo 下手自己的第一个博客网站。

安装

  1. mac 安装 hugo
1
brew install hugo
  1. 确认安装成功,可用命令行检查版本号进行测试
1
hugo version
  1. 其他平台可用直接下载二进制包进行使用,无需编译

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

构建 hugo 项目

  1. 新建博客站点
1
hugo new site MyBlogHugo
  1. 创建完站点后的文件结构
1
2
3
4
5
6
7
8
9
MyBlogHugo
├── archetypes
│   └── default.md
├── config.toml
├── content
├── data
├── layouts
├── static
└── themes

添加 LoveIt 主题

  1. Why choose it?

    Hugo 主题市场 挑了半天,还是决定用 LoveIt 这个主题。

    这个 themes 简单好看,功能齐全,作者也一直在努力更新,还支持多语言版本,包括 seo、搜索等功能都有,可以参考 demo 地址

  2. 将主题作为子模块

    1
    2
    3
    
    cd MyBlogHugo
    git init
    git submodule add https://github.com/dillonzq/LoveIt.git themes/LoveIt
    

启动 hugo server

  1. 启动 hugo 作为本地调试使用,在浏览器打开 http://localhost:1313/ 即可查看效果。

    1
    
    hugo server --disableFastRender
    

    参数含义:

    disableFastRender:实时将文章的内容更新到站点,不需要重启也能边修改边观看效果。

  2. 生成静态文件,会在MyBlogHugo 下面生成 public 的静态文件目录

    1
    
    hugo
    
  3. 我是使用 LoveIt 主题自带的 exampleSite 的 config.toml 来进行修改和配置的。

    1
    2
    
    cd MyBlogHugo     
    cp themes/LoveIt/exampleSite/config.toml .                
    
  4. 创建博客文章之前,我会使用example 的默认创建初始化详情来进行配置和修改.

    1
    2
    3
    
    cp themes/LoveIt/archetypes/default.md archetypes/
    # 这样,你每次创建文章的时候,都会使用这里的默认配置进行创建
    hugo new posts/test01.md
    
  5. default.md 查看

     1
     2
     3
     4
     5
     6
     7
     8
     9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    
    \---
    title: "{{ replace .TranslationBaseName "-" " " | title }}"
    subtitle: ""
    date: {{ .Date }}
    lastmod: {{ .Date }}
    draft: false #是否作为草稿,如果为 true,不会生产静态文件到 public 目录
    author: "赵叔"
    authorLink: ""
    description: ""
       
    tags: []
    categories: []
       
    hiddenFromHomePage: false
    hiddenFromSearch: false
       
    featuredImage: ""
    featuredImagePreview: ""
       
    toc:
      enable: true	#是 否展开右边目录栏
    math:
      enable: false
    lightgallery: false
    license: ""
       
    \---
       
    <!--more-->
       
       
    

配置 Github Pages

  1. 登录 github,在设置那里创建个人 repo 仓库,一共 2 个,一个是 .github.io 作为个人站点 public 的静态文件,一个是 MyBlogHugo 作为除了 public 这个静态目录的所有文件的仓库。记得创建空repo,不要添加 README 文件哦。
  1. 初始化仓库 MyBlogHugo,public 目录要忽略,不上传
1
2
3
4
5
6
7
8
cd MyBlogHugo
echo "!public/" >> .gitignore 
git init
git remote add origin [email protected]:ZhaoUncle/MyBlogHugo.git
git add .
git commit -m "no public"
git pull --rebase origin master
git push -u origin master
  1. 初始化仓库 zhaouncle.github.io
1
2
3
4
5
6
7
cd public
git init
git remote add origin [email protected]:ZhaoUncle/zhaouncle.github.io.git
git add .
git commit -m "my blog hugo"
git pull --rebase origin master
git push -u origin master

之后就可以打开 http://<username>.github.io 进入到你的博客了。