使用Hugo搭建博客

工欲善其事, 必先利其器. 既然决定要开始记流水帐, 当然要先找到一款趁手的博客工具.

简单搜索了一下, 目前比较火的几款基于Github Pages的博客工具有:

对Ruby和JavaScript繁琐的环境比较反感, 而Hugo基于Golang开发, 脱离解释器很是吸引我. 简单思考后选择了Hugo作为工具.

安装

如刚才提到的, Hugo直接提供了目标文件, 直接去Github下载就好了:

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

hugo new site banyunlai
cd banyunlai
git init
git submodule add  https://github.com/flysnow-org/maupassant-hugo themes/maupassant
echo 'theme = "maupassant"' >> config.toml
hugo new post/my-first-post.md
hugo server -D

主题

fuji

最开始看重了fuji这款主题, 但是因为首页的缩略图做不到demo里的效果就放弃了. (后来看了example site发现demo用了…)

maupassant

maupassant是一款国人做的主题, 提供中文文档, 相对好配置一些. example site里也有比较完整的config.toml文件. 我参照作者给的建议做了一些调整.

部署

本地

编译完成后, hugo会在public目录生成静态文件, 将静态文件推到GitHub上去就可以了.

Travis

第一次使用Travis, 折腾了很久, 主要有以下几个步骤:

申请token
Travis上申请账号
填写token值及其他环境变量
完成Travis配置文件

这里贴一下我的配置文件, 参考了很多别人的成果, 还行… 😄

 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


dist: xenial
os: linux
language: shell

before_install:
  - sudo apt-get update -qq
  - sudo apt-get -yq install apt-transport-https

# Install Hugo
install:
  # install latest hugo release version
  - wget -qO- https://api.github.com/repos/gohugoio/hugo/releases/latest | sed -r -n '/browser_download_url/{/Linux-64bit.deb/{s@[^:]*:[[:space:]]*"([^"]*)".*@\1@g;p;q}}' | xargs wget
  - sudo dpkg -i hugo*.deb
  - rm hugo*.deb
  - rm -rf public 2> /dev/null

before_script:
  - git config --global user.email $GITHUB_EMAIL
  - git config --global user.name $GITHUB_USERNAME
  - git clone -b master https://$GITHUB_TOKEN@github.com/wmpluto/wmpluto.github.io.git public

script:
  - hugo
  - echo 'banyunlai.com' > public/CNAME

# Deploy to GitHub pages
after_success:
  - cd public
  - git add -A
  - git commit -m "rebuilding site, commit ${TRAVIS_COMMIT:0:6} and job ${TRAVIS_JOB_NUMBER}" || true
  - git push origin master

技巧

新建文章: hugo new post/my-first-post.md
本地预览: hugo server -D
编译: hugo -D
使能表情: enableemoji: true
表情参考: https://www.webfx.com/tools/emoji-cheat-sheet/
插入JS: shortcode, 我自己仿制了一个倒计时的页面
引用思源黑体: https://lug.ustc.edu.cn/wiki/lug/services/googlefonts

使用Hugo搭建博客

安装

主题

fuji

maupassant

部署

本地

Travis

技巧

Hugo博客

参考

CATALOG

FEATURED TAGS

FRIENDS