zoukankan      html  css  js  c++  java
  • 使用Hugo搭建GitHub个人博客

    主题概况

    Hugo 是一个用 Go 语言编写的静态网站生成器。类似的静态网站生成器还有Jekyllhexo等等。以上生成器都使用过,但感觉要么环境麻烦,要么生成静态页面步骤繁琐以及生成缓慢。如果你正想在GitHub上搭建个静态的博客,搜索一大堆都是关于Jekyll和hexo的相关文章,使用Hugo的相关文章却很少,但是我认为使用Hugo方便一点。本着学习分享的原则,下面整理下如何使用Hugo。

    Hugo官方主页:https://gohugo.io/

    安装指南

    安装Hugo

    Hugo Releases上下载最新版的Release程序。没错,下下来就是一个二进制的程序。

    配置环境

    本例以Widows为例设置Hugo运行环境变量,如需更详细的Windows/macOSX的步骤说明,请移步至官网:
    Installation on OS X /
    Installation on Windows

    在本地电脑上建立以下文件目录:(文件路径随意)

    D:GitHubHugoinhugo.exe

    D:GitHubHugoSites

    我已将下载下来的Hugo二进制程序重命名为hugo.exe并放进bin文件夹内了。

    设置Windows系统环境变量,我的电脑右键-->属性-->高级系统设置-->在"高级"标签页中-->环境变量...,选中PATH变量,并编辑...,在编辑值中新添加hugo程序的路径即可,一张图说明:
    设置Hugo系统环境变量

    运行

    安装并配置Hugo环境后,打开cmd命令行,可以直接使用hugo命令了。

    $ hugo version
    

    hugo version

    创建本地网站

    生成站点

    之前创建的Sites就是用来存放创建的网站的,创建文件夹名为blog的网站:

    $ hugo new site blog
    

    hugo new site

    创建的站点文件目录说明:

    |- archetypes :存放default.md,头文件格式

    |- content :content目录存放博客文章(.markdown/.md文件)

    |- data :存放自定义模版,导入的toml文件(或json,yaml)

    |- layouts :layouts目录存放的是网站的模板文件

    |- static :static目录存放js/css/img等静态资源

    |- config.toml :config.toml是网站的配置文件

    当前网站是没有任何内容的,需要下载个主题跑起来才有内容。

    安装主题

    这里暂时不使用git命令clone下载主题,我们通过手动下载方式进行下载。

    Hugo官方主题:https://themes.gohugo.io/

    Hugo官方主题GitHub:https://github.com/spf13/hugoThemes/

    这里选取Hyde主题为例,从gitHub下载下来,将解压出的文件放到themes文件夹下。主题存放的路径为:Siteslog hemeshyde,包含以下文件:

    |- archetypes :存放default.md,头文件格式

    |- layouts :主题模板文件

    |- static :静态资源

    |- theme.toml :主题配置文件

    运行Hugo Server

    Hugo内置http server,在你的站点根目录执行hugo server命令,即可在浏览器里输入: http://localhost:1313访问网站。

    $ hugo server --theme=hyde
    

    (注明:需要指定主题,如果在config.toml中配置指定主题可以省略--theme参数)
    浏览器访问

    发表文章

    可以看到现在博客里没有文章,使用hugo new命令创建文章。

    $ hugo new post/test.md
    

    可以用文本文件或markdown编辑器打开文件 post/test.md ,并增加点内容。

    +++
    date = "2017-02-10T15:01:33+08:00"
    title = "test"
    draft = false
    
    +++
    
    Hello Hugo!测试内容
    

    注意:默认创建的是草稿类型,需要将draft值改为false才能看到页面。

    查看文章

    生成静态网站

    $ hugo --theme=hyde --baseUrl="https://YOURNAME.github.io/"
    

    所有静态页面都会生成到 public 目录下,生成静态网站后并push到你的GitHub Pages上,就能得到一个在线的个人博客了。

    本文对GitHub如何使用不做详细介绍。请参考GitHub Pages在线帮助文档。

    首先在GitHub上创建个Repository,命名为:YOURNAME.github.io(YOURNAME替换为自己的用户名),然后用git 将刚才创建的YOURNAME.github.io项目clone下来。

    将生成的 public 目录下所有文件拷贝到YOURNAME.github.io项目中,并提交版本。

    git提交

    OK!至此你可以打开浏览器开始访问:https://ciey.github.io/ 你的博客了。

  • 相关阅读:
    【JZOJ 4274】【NOIP2015模拟10.28B组】终章-剑之魂
    【JZOJ 4281】【NOIP2015模拟10.29A组】三色树
    【Luogu P2824】[HEOI2016/TJOI2016]排序
    【Luogu P5490】【模板】扫描线
    【Luogu P2502】[HAOI2006]旅行
    【Luogu P1629】 邮递员送信
    【Luogu P4047】[JSOI2010]部落划分
    【Luogu P4071】[SDOI2016]排列计数
    【Luogu P2508】 [HAOI2008]圆上的整点
    【Luogu P1102】A-B 数对
  • 原文地址:https://www.cnblogs.com/ciey/p/6393150.html
Copyright © 2011-2022 走看看