使用 Hugo 搭建个人静态博客

Overview

Hugo 是一款使用 Go 编写的静态网站生成工具,和其它工具相比其静态页面的生成速度有很大优势。

安装 Hugo

直接访问以下地址下载对应的安装包即可

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

如果是Mac平台的话也可以直接执行以下命令进行安装

brew install hugo

使用 Hugo

建立站点

hugo new site /path/to/site

如果是 Windows 平台的话则使用 "hugo.exe" 替代上述命令中的 "hugo"

hugo.exe new site /path/to/site

创建文章

进入刚创建的站点的根目录

cd /path/to/site

创建 about.md

hugo new about.md

编辑创建的 about.md 文件,在文件尾端添加以下内容

## A headline

Some Content

创建另一篇文章

hugo new post/first.md

创建后随意输入任意内容

下载主题

在根目录执行以下命令会下载所有主题

git clone --recursive https://github.com/spf13/hugoThemes themes

如果网速慢的话,上述方式很可能不成功,此时在站点根目录执行以下命令下载任一一个主题(此处下载的是 hyde-x 主题)

mkdir themes
cd themes
git clone https://github.com/zyro/hyde-x

运行服务器

hugo server --theme=hyde-x --buildDrafts --watch

以上,theme 用于指定主题名,buildDrafts 用于运行 build 草稿,watch 用于监控文件的改动。

启动完毕后可以在浏览器中输入以下命令观察生成的站点

http://localhost:1313

托管博客到 Github Pages

Github Pages

Github Pages 是 Github提供的免费静态网页空间。总共分为两种类型:User 类型和 Project 类型。

User 仓库名必须为 username.github.io,该仓库的 master 分支用于托管静态网站,访问地址为 username.github.io

Project 仓库名可以为任意,该仓库的 gh-pages 分支用于托管静态网站,访问地址为 username.github.io/projectName

提交静态网页到 Github Pages

Hugo 创建的静态网页全部都在站点根目录的 public 目录,所以只需要提交 public 下的所有文件到 Github 上就可以生成静态网站。因此最基本的方法就是建立两个分支,一个管理除 public文件夹之外的全部源文件,一个管理 public 文件夹下的所有文件。不过这种方式使用比较繁琐,所以更推荐直接使用免费的 CI 工具进行自动部署。

使用 Wercker 进行自动部署

Wercker 和 TravisCI 一样都是免费的 CI 服务。Wercker 建立在Docker上,可以帮我们自动完成静态网站的生成和提交。

具体步骤

  1. 访问 http://wercker.com

  2. 注册账号

  3. 选择 settings -> Git Connection -> 选择 github 后连接到你的 github 账号

  4. 点击 create 按钮,创建你的应用

  5. 选择在 Github 上需要作为静态网站的仓库


  6. 选择仓库的拥有者,通常只要选择你自己的账号就可以了


  7. 配置访问权限 (Configure access),直接选择默认的选择 Next step

  8. 前面都执行后到这一步时 Wercker 会显示 wercker.yml 文件的代码模板,直接在作为静态网站的工程的根路径建立 wercker.yml 文件,拷贝网页上显示的代码到该文件并保存,选择 Next Step

  9. Make my app public 保持原样,选择 Finish

  10. 此时项目已经初步设置完毕,画面上会显示 Build now 按钮,不过还没有到 build 的时间,接下来需要修改 wercker.yml 文件

  11. 选择 Registry,检索 hugo build

  12. 根据提示将代码粘帖到 wercker.yml 文件

    box: debian
    build:
        steps:
            - arjen/hugo-build@1.5.0
    
  13. 提交 wercker.yml 文件,此时 wercker 应该会自动进行第一次构建

  14. 接下来继续检索 gh pages,根据提示继续修改 wercker.yml 文件,其中 domain 换成你自己的域名,这个值会被写到CNAME文件中,$GIT_TOKEN 为定义的一个变量,它的值之后会进行设置,basedir 为需要同步到 gh-pages 分支的文件夹名

    box: debian
    build:
        steps:
            - arjen/hugo-build@1.5.0
    deploy:
        steps:
            - lukevivier/gh-pages@0.2.1:
                token: $GIT_TOKEN
                domain: 你自己的域名
                basedir: public
    
  15. 选择应用 -> Settings -> Deploy targets -> Add deploy targets

  16. 按照下图进行配置,其中 Deploy target name 可以任意填写,GIT_TOKEN 变量对应的 text 需要填写你在 github 上建立的 token,具体可参照 https://help.github.com/articles/creating-an-access-token-for-command-line-use/

  17. 选择 OK 完成所有设置并提交 wercker.yml 文件,此时 wercker 会自动进行 build,完成后会将 public 文件夹下的文件同步到 gh-pages 分支下。

搭建问题汇总

  1. 有时 build 后会报 unknown host: github.com,此时无视即可,服务器偶尔的抽风,过个几分钟再试就可以了

  2. 如果报 wrecker.yml 无法解析的话通常是 yml 文件中含有 tab 键,全部替换成空格就可以了

  3. 如果 build 成功完成了,但是 deploy 时报 git: command not found,这是因为没有安装 git,需要修改 wrecker.yml 来安装 git,完整代码如下

    box: debian
    build:
        steps:
            - arjen/hugo-build@1.5.0
    deploy:
        steps:   
            - script:
                name: install git
                code: |
                    apt-get update
                    apt-get install git -y
            - lukevivier/gh-pages@0.2.1:
                token: $GIT_TOKEN
                domain: 你自己的域名
                basedir: public  
    

相关网站

推荐的主题

  • bootie-docs
  • casper
  • hyde-x

参考资料

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,271评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,275评论 2 380
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,151评论 0 336
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,550评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,553评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,559评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,924评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,580评论 0 257
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,826评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,578评论 2 320
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,661评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,363评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,940评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,926评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,156评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,872评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,391评论 2 342

推荐阅读更多精彩内容