用hugo搭建自己的博客

为什么是hugo?

其实无所谓hugo还是hexo,我是为了paperMod这个皮肤才搭的这个博客.它排版简洁素雅,让注意力容易集中到内容本身,而且我特别喜欢点击文章的这个特效,有种按钮按下去的感觉.

这些天在"十年之约"和"开往"中逛了很多博客,也算增长了一些见力.很多博客整得花里胡哨的,这种特效那种特效一个劲儿的往上面加,动画加载时间拉得那么长,完全不顾游客体验.就像刚学会化妆的小姑娘,妆容夸张而突兀,如果玩了一段时间博客后还是这种调调,也实在太没品味了.你品品,挂个天气在博客上面是想干嘛呢?

回归正题,本文整理了搭建hugo,使用paperMod皮肤并发布到github page的简单过程.你看官网也是可以的,不过有些小坑官网的新手教程没提.

hugo中文文档

paperMod

安装Hugo

二进制安装（推荐：简单、快速）

到 Hugo Releases 下载对应的操作系统版本的Hugo二进制文件（hugo或者hugo.exe）
把hugo.exe加到环境变量里

生成站点

$ hugo new site /my-blog
$ cd /my-blog

站点目录结构:

  ▸ archetypes/
  ▸ content/
  ▸ layouts/
  ▸ static/
    config.toml

content是文章存放的目录,这里有个小坑,文档里面示范用的hyde皮肤能扫描content目录下的全部md文档,但是paperMod不行,paperMod只能读取/content/posts/下面的md文档,然后我搜了一下,还有些皮肤只支持/content/post,这里不同皮肤的规则比较混乱,使用时要注意文档位置是否正确.

config.toml是配置文件,hugo官方用的是toml格式,有点冷门,然后paperMod又推荐回yml配置,得把toml改成yml.

这里还需要自己创建个theme目录放皮肤.

  ▸ archetypes/
  ▸ content/
  ▸ layouts/
  ▸ static/
  ▸ theme/
    config.toml

创建文章

创建第一篇文章放到post目录.

$ hugo new posts/first.md

通过hugo创建的文章会有个默认头

date = "2015-10-25T08:36:54-07:00"
title = "about"
draft = true

draft = true 表示草稿,得把这里改成false或者删掉后发布github才可见,或者想本地预览的话hugo server得加个–buildDrafts参数

安装皮肤

挑选一个皮肤然后clone下来.我有选择困难症,所以一开始是跳过下载皮肤直接运行hugo的,结果发现文章显示不了,一定得先下载个皮肤

$ cd /theme
$ git clone https://github.com/adityatelange/hugo-PaperMod.git

运行Hugo

在站点根目录启动本地预览

$ hugo server --theme=hugo-PaperMod --buildDrafts

在config.yml里面指定皮肤后这里就不需要了.

浏览器里打开： http://localhost:1313

部署到Github

假设你需要部署在 GitHub Pages 上，首先在GitHub上创建一个Repository，命名为：xxxx.github.io （xxxx替换为你的github用户名）。

在站点根目录执行 Hugo 命令生成最终页面：

$ hugo --theme=hugo-PaperMod --baseUrl="http://xxxx.github.io/"

（注意，以上命令并不会生成草稿页面，如果未生成任何文章，请去掉文章头部的 draft=true 再重新生成。）

如果一切顺利，所有静态页面都会生成到 public 目录，将pubilc目录里所有文件 push 到刚创建的Repository的 master 分支。

$ cd public
$ git init
$ git remote add origin https://github.com/xxxx/xxxx.github.io.git
$ git add -A
$ git commit -m "first commit"
$ git push -u origin master

浏览器里访问：http://xxxx.github.io/

然后创建另一个github项目保存我们的源码,不要忘了在.gitignore里面把public目录加上.