hugo - introduction

26
Static Webpage Generator Hugo Eueung Mulyana https://eueung.github.io/112016/hugo CodeLabs | Attribution-ShareAlike CC BY-SA 1 / 26

Upload: eueung-mulyana

Post on 17-Feb-2017

53 views

Category:

Internet


0 download

TRANSCRIPT

Static Webpage Generator

HugoEueung Mulyana

https://eueung.github.io/112016/hugoCodeLabs | Attribution-ShareAlike CC BY-SA

1 / 26

Outline

Introduction

Quick Start

Notes

2 / 26

Introduction

3 / 26

Hugo is a general-purpose website frameworkHugo is a static site generatorA Fast and Flexible Static Site Generator built withlove by spf13 and friends in Go.

4 / 26

What is Hugo?Web site generators render content into HTML �les. Most are "dynamic site

generators". That means the HTTP server (which is the program running on yourwebsite that the user's browser talks to) runs the generator to create a new HTML �le

each and every time a user wants to view a page.

Hugo renders all HTML �les on your computer. You can review the �les before youcopy them to the computer hosting the HTTP server. Since the HTML �les aren't

generated dynamically, we say that Hugo is a "static site generator".

Refs: Introduction to Hugo

5 / 26

Static Site GeneratorsThe typical CMS driven website works by building each page on-demand, fetching content from a

database and running it through a template engine. This means each page is assembled fromtemplates and content on each request to the server.

A Static Site Generator takes a di�erent approach and generate all the pages of the website oncewhen there's actually changes to the site.

This means there's no moving parts in the deployed website. Caching gets much easier, performancegoes up and static sites are far more secure.

Ref: StaticGen

6 / 26

Hugo is a static HTML and CSS website generator written in Go. It is optimized for speed, easyuse and con�gurability. Hugo takes a directory with content and templates and renders them

into a full HTML website.

Hugo relies on Markdown �les with front matter for meta data. And you can run Hugo from anydirectory. This works well for shared hosts and other systems where you don't have a privileged

account.

Hugo renders a typical website of moderate size in a fraction of a second. A good rule of thumbis that each piece of content renders in around 1 millisecond.

Hugo is designed to work well for any kind of website including blogs, tumbles and docs. [Ref:spf13/hugo]

7 / 26

Quick Start

8 / 26

$ which hugo/usr/bin/hugo$ hugo versionHugo Static Site Generator v0.17 BuildDate: 2016-10-07T21:45:27+07:00

# ---

$ hugo new site me.github.ioCongratulations! Your new Hugo site is created in "/home/em/now/hugo-work/me.github.io".

Just a few more steps and you're ready to go:

1. Download a theme into the same-named folder. Choose a theme from https://themes.gohugo.io/, or create your own with the "hugo new theme <THEMENAME>" command.2. Perhaps you want to add some content. You can add single files with "hugo new <SECTIONNAME>/<FILENAME>.<FORMAT>".3. Start the built-in live server via "hugo server".

Visit https://gohugo.io/ for quickstart guide and full documentation.

9 / 26

Step #1Download & Install

Step #2Sca�old A New Site

Step #3Select & Download A Theme

Step #4Copy exampleSite & Run

10 / 26

$ cd me.github.io$ tree.--- archetypes--- config.toml--- content--- data--- layouts--- static--- themes

6 directories, 1 file

# ---

$ cd me.github.io/$ git clone https://github.com/digitalcraftsman/hugo-steam-theme.git themes/hugo-steam-theme

$ cp -av themes/hugo-steam-theme/exampleSite/* .

$ hugo server --watchStarted building sites ...Built site for language en:0 draft content, 0 future content, 0 expired content5 pages created, 0 non-page files copied10 paginator pages created, 2 categories created, 6 tags createdtotal in 66 ms, Watching for changes in /home/em/now/hugo-work/me.github.io/{data,content,layouts,static,themes}Serving pages from memoryWeb Server is available at http://localhost:1313/ (bind address 127.0.0.1)Press Ctrl+C to stop

localhost:1313

11 / 26

$ tree.--- archetypes--- config.toml--- content------- about----------- index.md------- post----------- creating-a-new-theme.md----------- goisforlovers.md----------- hugoisforlovers.md----------- migrate-from-jekyll.md--- data--- layouts--- static--- themes------- hugo-steam-theme----------- ...

12 / 26

Content&

config.toml

Example Post

13 / 26

post/creating-a-new-theme.md

---author: "Michael Henderson"date: 2014-09-28linktitle: Creating a New Themenext: /tutorials/github-pages-blogprev: /tutorials/automated-deploymentstitle: Creating a New Themeweight: 10description: "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum similique, ipsum officia amet blanditiis provident ratione nihil ipsam dolorem repellat."---

### **Introduction**

This tutorial will show you how to create a simple theme in Hugo. I assume that you are familiar with HTML, the bash command line, and that you are comfortable using Markdown to format content. I'll explain how Hugo uses templates and how you can organize your templates to create a theme. I won't cover using CSS to style your theme.

We'll start with creating a new site with a very basic template. Then we'll add in a few pages and posts. With small variations on that, you will be able to create many different types of web sites.

...

about/index.md

+++date = "2015-08-22"title = "Link custom pages"menu = "main"+++

You can add custom pages like this by adding ̀menu = "main"̀ in the frontmatter:

'''toml+++date = "2015-08-22"title = "About me"menu = "main"+++'''

This site is just a usual document. Create a new subfolder in ̀content̀ and name this document ̀index.md̀

But you can also link posts that way without moving them.

If no document contains ̀menu = "main"̀ in the frontmatter the navigation will not be shown. Sounds easy, right?

14 / 26

Example Page

Rendering Homepage/List

15 / 26

Rendering Single

16 / 26

config.toml

17 / 26

baseurl = "https://example.org/"languageCode = "en-us"title = "Steam - a minimal theme for Hugo"theme = "hugo-steam-theme"disqusShortname = "spf13"paginate = 10

[params] title = "Steam" subtitle = "a minimal theme for ~~Ghost~~ Hugo" copyright = "Released under the MIT license."

themeColor = "green" googleAnalytics = ""

name = "John Doe" bio = "I'm just a theme. That's it. If you like my design clone [me](//github.com/digitalcraftsman/hugo-steam-theme) from Github. Thanks." description = "Your description of the blog" location = "" # optional twitter = "spf13" # optional github = "spf13" # optional gitlab = "" # optional

comments = "disqus"

keepReadingStr = "Keep reading" backtotopStr = "Back to top" shareStr = "Share" pageNotFoundTitle = "404 - Page not found"

Rendering - Example

18 / 26

Rendering - Example

19 / 26

Version Control# source version control

$ git init$ echo "/public/" >> .gitignore$ echo "/themes/" >> .gitignore$ echo "/others-if-any/" >> .gitignore$ cat .gitignore

20 / 26

Publish (GHP)# create new GHP repo me.github.io (without readme)$ cd public/$ [sudo] git init$ [sudo] git remote add origin [email protected]:me/me.github.io.git$ [sudo] git add .$ [sudo] git commit -am "add disqus"$ [sudo] git push --set-upstream origin master

# repo ghp$ git checkout -b gh-pages$ git push -f origin gh-pages

Notes

21 / 26

FROM alpine:3.4MAINTAINER EM <[email protected]>

ENV HUGO_VERSION=0.17

RUN apk add --update wget ca-certificates && \ cd /tmp/ && \ wget https://github.com/spf13/hugo/releases/download/v${HUGO_VERSION}/hugo_${HUGO_VERSION}_linux-64bit.tar.gz && \ tar xzf hugo_${HUGO_VERSION}_linux-64bit.tar.gz && \ rm -r hugo_${HUGO_VERSION}_linux-64bit.tar.gz && \ mv hugo_${HUGO_VERSION}_linux_amd64/hugo_${HUGO_VERSION}_linux_amd64 /usr/bin/hugo && \ apk del wget ca-certificates && \ rm /var/cache/apk/*

WORKDIR /work

CMD /usr/bin/hugo

22 / 26

Dockerfile

$ docker build -t eueung/hugo:v2 .$ docker images | grep hugo$ docker login$ docker push eueung/hugo:v2The push refers to a repository [docker.io/eueung/hugo]11c97b295820: Pushed d4546b2b59fd: Pushed 011b303988d2: Layer already exists v2: digest: sha256:764e9f134ad736fc67e29f4af136e523b557449562c3016ede3a456b7ace5ad7 size: 945

$ docker run -ti --rm -v $(pwd):/work eueung/hugo:v2

$ docker run -ti --rm eueung/hugo:v2 sh$ docker run -ti --rm eueung/hugo:v2 hugo versionHugo Static Site Generator v0.17 BuildDate: 2016-10-07T14:45:27Z

23 / 26

Hugo onDocker

Refs

24 / 26

Refs1. Top Open-Source Static Site Generators - StaticGen2. Hugo :: A fast and modern static website engine3. spf13/hugo: A Fast and Flexible Static Site Generator built with love in GoLang4. Hugo Themes Site

25 / 26

ENDEueung Mulyana

https://eueung.github.io/112016/hugoCodeLabs | Attribution-ShareAlike CC BY-SA

26 / 26