搭建 Hugo 静态博客并配置自动部署

发布时间:2018年10月21日 阅读:1247 次

尝试了很多博客系统,比如 WordPress 和 Typecho 需要服务器或虚拟主机,或是 Ghost 和 Hexo 安装复杂更新太快,总觉得没有让人眼前一亮的产品,直到看到了 Hugo 静态博客系统。


一、Hugo 介绍

Hugo 是一款使用 Go 语言编写的静态博客生成系统,官方介绍其是“世界上最快的建站框架。Hugo 惊人的速度和扩展性,使得建站再一次的充满了乐趣。”

Hugo, the world’s fastest framework for building websites … With its amazing speed and flexibility, Hugo makes building websites fun again.

Hugo 有着 Go 语言的几大优点:跨平台、执行快、部署简单、无需安装依赖,同时作为一款静态博客系统,它主题多、拓展性好、操作简单。是用来搭建个人博客的绝佳选择。

二、快速上手

本文仅作简单介绍,详细的安装教程请访问 Hugo 的官方文档

1. 安装 Hugo

因为是 Go 语言编写的程序,可以直接到 Hugo Github 下载对应系统的二进制可执行文件,或者使用包管理器直接安装。比如 macOS 使用 brew install hugo 或者 Windows 使用 choco install hugo 或者 Debian/Ubuntu 使用 apt install hugo 。

在任意目录执行

2. 创建新网站

打开终端,在任意目录执行以下命令,即可创建一个空的网站:


user@localhost:~ $ hugo new site blog
user@localhost:~ $ cd ./blog/

3. 设置主题

Hugo 默认不带任何主题,你可以在官方的 主题商店 下载喜欢的主题,放到 themes 目录中,同时在 config.toml 文件添加 theme = [Your Theme] 即可安装并启用该主题。


user@localhost:~/blog $ git clone https://github.com/budparr/gohugo-theme-ananke.git theme/ananke
user@localhost:~/blog $ echo "theme = ananke" >> config.toml

4. 开始创作

使用 hugo new 命令创建一个新的文章,使用你喜欢的文本编辑器打开编辑即可。


user@localhost:~/blog $ hugo new posts/hello-world.md
user@localhost:~/blog $ code content/posts/hello-world.md

5. 预览或部署

可以使用下面的命令搭建本地服务器预览,注意 -D 命令代表渲染草稿,也就是元信息包括 draft: true 的文章。

user@localhost:~/blog $ hugo server -D

同时,直接运行 Hugo 就可以生成博客到 public 目录。

user@localhost:~/blog $ hugo

再将 public 文件夹的所有文件上传到你的服务器即可完成部署。

三、配置自动部署

本节我们会使用 Git 管理 Hugo 的站点,虽然本地安装 Hugo 已经可以满足大部分人的使用需求,但是使用 Git 不仅可以实现版本控制,同时增加了团队协作,自动部署等功能。另外 Hugo 的 --enableGitInfo 参数可以使其读取文章的 Git 历史,配合特定的主题可以很方便的展示文章的更改时间和变更历史。

而 Github 作为 全球最大同性交友平台 世界上最大的版本控制网站和开源社区,同时又有不计其数的扩展功能,当然是我们的不二之选。

1. 初始化 Git 项目

首先我们要为站点初始化 Git,同时为了方便更新,我们把主题项目配置成一个子模块,同时增加 .gitignore 忽略掉生成的网站。


user@localhost:~/blog $ rm -rf themes/ananke
user@localhost:~/blog $ git init .
user@localhost:~/blog $ git submodule add https://github.com/budparr/gohugo-theme-ananke.git theme/ananke
user@localhost:~/blog $ echo "public/" >> .gitignore
user@localhost:~/blog $ git add . && git commit -m "initial commit"

这样一个 Git 工程就配置好了,剩下的就是按照官方的教程将项目上传到 Github 了。

2. 自动部署到 GitHub pages

配合免费的 Travis CI 可以轻松实现 Hugo 的自动部署。仅仅需要将下面的内容复制到 .travis.yml 文件中,Push 到 Github 并在 Travis CI 简单配置。


sudo: true
dist: trusty
language: generic

addons:
  apt:
    packages:
    - snapd
    
install:
  - sudo snap install hugo
  - export PATH=/snap/bin:$PATH
  
script:
  - hugo --enableGitInfo
  
deploy:
  provider: pages
  skip-cleanup: true
  github-token: $GITHUB_TOKEN  # 在Travis CI 后台设置私密的 Gitbub Token 配置项

3. 自动部署到又拍云

又拍云是国内出色的储存、加速服务商,本站就搭建与又拍云,将 .travis.yml 修改为以下内容,即可实现自动部署到又拍云。

sudo: true
dist: trusty
language: generic

addons:
  apt:
    packages:
    - snapd
    
cache:
  directories:
    - $HOME/.upx.db
    
env:
  global:
    - UPX_VERSION=0.2.3
    - UPX_FILENAME=upx-linux-amd64-v${UPX_VERSION}
    - UPX_URL=http://collection.b0.upaiyun.com/softwares/upx/${UPX_FILENAME}
    
install:
  - sudo snap install hugo
  - echo $PATH
  - mkdir -p $HOME/bin; export PATH=$HOME/bin:$PATH
  - wget -O /tmp/${UPX_FILENAME} ${UPX_URL}
  - install /tmp/${UPX_FILENAME} $HOME/bin/upx
  
script:
  - /snap/bin/hugo --enableGitInfo
  - upx --auth $UPX_AUTH sync --delete --strong ./public

注意 $UPX_AUTH 为又拍云官方工具 upx 使用下面命令生成的 Token 密钥,需要增加到 Travis CI 的保密环境变量中。

user@localhost:~/blog $ upx auth [service name] [operator] [password]

配置中对 .upx.db 目录设置了缓存,是为了使 upx 工具自动同步被删除的文件,否则每次部署都会被当作全新的同步而不会删除文件。

至此,一个简单的自动部署博客就搭建完成了。

本文标题:搭建 Hugo 静态博客并配置自动部署
本文链接:http://malonghua.com/post/25.html
作者授权:除特别说明外,本文由 SylarM 原创编译并授权 猪逻辑公园工作室 刊载发布。
版权声明:本文不使用任何协议授权,您可以任何形式自由转载或使用。
Tag:Hugo 自动部署 GitHub 又拍云
相关文章
发表评论

发表评论: