点击登录

    使用Hugo搭建个人博客站点

    前端观察 norbert 5384次浏览 已收录 0个评论 扫描二维码

    Hugo是一个用Go语言编写的静态网站生成器,它使用起来非常简单,相对于Jekyll复杂的安装设置来说,Hugo仅需要一个二进制文件hugo(hugo.exe)即可轻松用于本地调试和生成静态页面。Hugo生成静态页面的效率很高,对于260多篇博客文章生成几乎是瞬间完成的,而之前用Jekyll需要等待10秒左右。Hugo自带watch的调试模式,可以在修改MarkDown文章之后切换到浏览器,页面会检测到更新并且自动刷新,呈现出最终效果,能极大的提高博客书写效率。再加上Hugo是使用Go语言编写,已经没有任何理由不使用Hugo作为个人博客站点生成器了。

    GitHub托管

    对于没有购买网站空间的用户,可以借助GitHub建立自己的个人主页。你只需要在GitHub上创建一个项目,然后将生成出来的静态页面文件push到这个项目的gh-pages分支,保证根目录有一个index.html文件即可。这样,一个免费、无限流量的博客系统就搭建完成了。同时,通过github你可以方便对博客文章进行管理和追踪。

    Hugo简介

    Hugo是什么?能做什么?下面给出简单的总结:

    • Hugo只有一个二进制文件(比如Windows里只是一个hugo.exe)
    • Hugo可以将你写好的MarkDown格式的文章自动转换为静态的网页。
    • Hugo内置web服务器,可以方便的用于本地调试。

    Hugo官方主页在这里,GitHub上有其代码托管,可以看这里。Hugo的安装方式有两种,一种是直接下载编译好的Hugo二进制文件。如果只是使用Hugo推荐用这种方式。另一种方式是获取Hugo的源码,自己编译。由于各种不可预料的网络问题,第二种方式不是那么轻易能成功。如果想下载Hugo二进制文件,可以看这里,可以得到hugo或者hugo.exe的程序。

    Hugo生成主页

    接下来,逐步生成自己的站点:
    1.产生新站点

    $ hugo new site mysite
    

    会产生如下的目录结构:

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

    其中,config.toml是网站的配置文件,这是一个TOML文件,全称是Tom’s Obvious, Minimal Language,这是它的作者GitHub联合创始人Tom Preston-Werner 觉得YAML不够优雅,捣鼓出来的一个新格式。如果你不喜欢这种格式,你可以将config.toml替换为YAML格式的config.yaml,或者json格式的config.json。hugo都支持。content目录里放的是你写的markdown文章,layouts目录里放的是网站的模板文件,static目录里放的是一些图片、css、js等资源。
    2.进入新创建的站点目录

    $ cd mysite
    

    3.创建一个页面

    $ hugo new about.md
    

    如果是博客日志,最好将md文件放在content的post目录里。

    $ hugo new post/first.md
    

    执行完后,会在content/post目录自动生成一个MarkDown格式的first.md文件:

    +++
    date = "2015-01-08T08:36:54-07:00"
    draft = true
    title = "first"
     
    +++
    

    +++可以替换为Jekyll一样的—,里面的内容是这篇文章的一些信息。下面就可以开始写你的文章内容,比如:

    +++
    date = "2015-01-08T08:36:54-07:00"
    draft = true
    title = "first"
     
    +++
    
    ### Hello Hugo
    
     1. aaa
     1. bbb
     1. ccc
    

    好了,刚才的about.md也有内容,该看看最后的效果了。然后你屁颠屁颠的使用hugo server启动,打开浏览器里一看,发现什么都没有!肿么了!这是Hugo对初学者非常不友好的地方,默认生成的网站是没有任何皮肤模板的。为了看看第一个写的示例,还得去Github上把一个网页模板下载下来。如果你网络够好,网速够快,你可以在刚才的目录将Hugo官方的所有模板都下载下来:

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

    我尝试过,也失败过,且从未成功一次性将所有的模板下载下来。所以,我们还是老老实实只下载其中一个模板来看看效果吧:

    $ cd themes
    $ git clone https://github.com/spf13/hyde.git
    

    4.启动本地调试

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

    浏览器里打开:http://127.0.0.1:1313,等待片刻就能看到页面了。在上面的命令中,–watch或者-w 选项打开的话,将会监控到文章的改动从而自动去刷新浏览器,不需要自己手工去刷新浏览器,非常方便。
    如果你看了上面的说明已经有冲动去试一试Hugo了,我的目的也算达到了,接下来你需要的只是查看官方的说明文档就够了,所以具体的一些设置我就不重复了。
    文档链接:官方文档皮肤Configuring HugoFront MatterMenusTemplate VariablesHosting on GitHub Pages中文文档

    关于部署

    假设你需要部署在 GitHub Pages 上,首先在GitHub上创建一个Repository,命名为:coderzh.github.io (coderzh替换为你的github用户名)。在站点根目录执行 Hugo 命令生成最终页面:

    $ hugo --theme=hyde --baseUrl="http://coderzh.github.io/"
    

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

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

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


    网站内容采用BY-NC-SA协议分享 , 转载请注明: 使用Hugo搭建个人博客站点
    喜欢 (3)
    [norbert_jxl@163.com]
    分享 (0)

    您必须 登录 才能发表评论!