0

使用hugo搭建github个人博客站点

 7 months ago
source link: https://xinjiayu.github.io/post/%E4%BD%BF%E7%94%A8hugo%E6%90%AD%E5%BB%BAgithub%E4%B8%AA%E4%BA%BA%E5%8D%9A%E5%AE%A2%E7%AB%99%E7%82%B9/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

使用hugo搭建github个人博客站点

Thu, May 18, 2017

做静态网站是很多年前的事了,随着技术的发展,制作静态网站也会有这么多的花样。从最初的做成自我展示的个人网站,到后来一些博客服务的提供,再到各种在线笔记的提供,对于个人知识管理与分享方面真是越来越多样化了。   最近了解一下通过Github发布个人博客的方式,有点意思。平时用git管理源程序,及一些MackDown文档。这些内容从利他的角度来说,除了给自己看,也应该分享出来。这儿也是我弄了这个博客的原因。

一、通过Hugo创建博客站点

  Hugo是由Go语言实现的静态网站生成器。简单、易用、高效、易扩展、快速部署。对于我来说选择它的原因只有一个,是采用Go语言开发的。

  Hugo安装很简单。有两种安装方式:

1.1 二进制安装

  到 Hugo Releases 下载对应的操作系统版本的Hugo二进制文件(hugo或者hugo.exe)

Mac下直接使用 Homebrew 安装:

brew install hugo

1.2 源码安装

  在GO的开发环境下,通过获取源代码进行安装。

$ go get -v github.com/spf13/hugo

  如果需要更新所有Hugo的依赖库,增加-u参数:

$ go get -u -v github.com/spf13/hugo

二、生成站点

2.1 创建站点

  使用Hugo快速生成站点,比如希望生成到 /gowork/site 路径:

$ hugo new site /gowork/site

  这样就在 /gowork/site 目录里生成了初始站点,进去目录:

$ cd /gowork/site

  站点目录结构:

|- archetypes :存放default.md,头文件格式
|- content :content目录存放博客文章(.markdown/.md文件)
|- data :存放自定义模版,导入的toml文件(或json,yaml)
|- layouts :layouts目录存放的是网站的模板文件
|- static :static目录存放js/css/img等静态资源
|- <config class="tom"></config>l :config.toml是网站的配置文件

2.2 安装主题

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

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

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

  在config.toml文件中指定hyde作为默认主题。只需添加一行:

theme = "hyde"

  主题存放的路径为:themes\hyde,包含以下文件:

|- archetypes :存放default.md,头文件格式
|- layouts :主题模板文件
|- static :静态资源
|- theme.toml :主题配置文件

2.3 运行Hugo Server

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

  $ hugo server --theme=hyde --buildDrafts

三、内容维护

3.1 发表文章:

    $ 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才能看到页面。

3.2 列表页概要处理

  通常在博客首页显示多篇文章,都采用了摘要显示的方式。这儿需要修改某个主题下面layouts/index.html文件

  {{ range first 10 .Data.Pages }}
  <div class="summary">
    <h1><a href="{{ .RelPermalink }}">{{ .Title }}</a></h1>
        <span class="post-date">{{ .Date.Format "Mon, Jan 2, 2006" }}</span>
    {{ .Summary }}
  </div>
  {{ if .Truncated }}
  <div class="read-more-link">
    <a href="{{ .RelPermalink }}">Read More…</a>
  </div>
  {{ end }}
{{ end }}

  默认的.Summary显示70字符,有的时候显示的内容并不是自己想要截取的内容,可以在.MD文档内容里,直接使用

    <!--more --> 把more后面的空格删除再用

四、生成Github静态网站

$ 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项目中,并提交版本。

  现在你可以打开浏览器访问:https://xinjiayu.github.io/ 你的博客了。


About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK