Hugo -- Static site generator --


Overview:

Hugo is a static HTML and CSS website generator written in Go. Hugo relies on Markdown files with front matter. Pre-built binaries for Windows, Linux, FreeBSD, NetBSD, macOS (Darwin), and Android for x64, i386 and ARM architectures.

Version:
  - 2018/03/07: v0.37.1
  - 2018/02/27: v0.37.0
  - 2018/02/05: v0.36.0
  - 2017/10/16: v0.30.0
  - 2017/04/10: v0.20.0

Install:

Download:
  - https://github.com/gohugoio/hugo/releases

Linux:
  - $ apt-get install hugo
  - $ snap install hugo

MacOS:
  - $ brew install hugo

Windows:
  - > choco install hugo
  - PATH=<path/to/hugo/bin>

Quick Start:

# Create skelton:
- $ hugo new site mysite
- $ cd mysite

# Create repository
- $ git init
- $ git commit --allow-empty -m Initialized
- $ git remote add origin https://<USER>@bitbucket.org/<USER>/mysite.git
- $ git push -u origin master

# Get theme:
- $ git submodule add https://github.com/spf13/hyde.git themes/hyde

# Edit config:
- $ echo 'theme = "hyde"' >> config.toml
-.> echo theme = "hyde" >> config.toml    # Windows

# Run local server:
- $ hugo server --bind 0.0.0.0 --buildDrafts

# Create new post:
- $ hugo new post/first.md
- $ git add -A
- $ git commit -m first
- $ git push

Quick Start: (detail)

# Create skelton:
- $ hugo new site <DIR>
- $ cd <DIR>
- |
  ./
  ├─ config.toml            # config TOML/YAML/JSON
  ├─ archetypes/
     └─ default.md         # Markdown/AsciiDoc
  ├─ content/
  ├─ data/
  ├─ layouts/
  ├─ static/
  └─ themes/

# Create Repository:
- $ git init
- $ git commit --allow-empty -m initialized

# Set remote repository:
- github:
  - $ git remote add origin git@github.com:<USER>/<REPOS>.git       # SSH
  - $ git remote add origin https://github.com/<USER>/<REPOS>.git   # HTTPS
- bitbucket:
  - $ git remote add origin git@bitbucket.org:<USER>/<REPOS>.git            # SSH
  - $ git remote add origin https://<USER>@bitbucket.org/<USER>/<REPOS>.git # HTTPS

# push
- $ git push -u origin master

# Get theme:
- as clone:
  - $ git clone https://github.com/<THEME>.git themes/<THEME>
- as submodule:
  - $ git submodule add https://github.com/<THEME>.git themes/<THEME>
  - ex:
    - $ git submodule add https://github.com/SenjinDarashiva/hugo-uno.git themes/uno
    - $ git submodule add https://github.com/dim0627/hugo_theme_beg.git themes/beg
    - $ git submodule add https://github.com/vimux/mainroad.git themes/mainroad

# Edit site config:
- file: ./config.toml
- |
  baseURL        = "https://<URL>"      # Site URL
  languageCode   = "ja-jp"              # Language Code,"en-us","ja-jp"
  title          = "<TITLE>"            # Site Title
  theme          = "<THEME>"            # Theme
  hasCJKLanguage = "true"               # 日本語/中国語/韓国語の有無
  canonifyurls   = "true"               # Relative path

# Run local server: (http://localhost:1313/)
- $ hugo server --bind 0.0.0.0 --buildDrafts --cleanDestinationDir --forceSyncStatic

# Create new post:
- $ hugo new <PATH/FILE>.md
- |
  ./
  ├─ content/
       └─ <PATH>/
           └─ <FILE>.md

# Push to remote repository:
- $ git add -A
- $ git commit -m <MESSAGE>
- $ git push

# Build site:
- $ hugo --buildDrafts
- |
  ./
  ├─ public/

Build & deploy on Netlify:

url:
  - https://www.netlify.com/

# Setting:
- New site from Git:
  - Continuous Deployment:
    - Bitbucket/GitHub/GitLab
- Site setting:
  - Build & deploy:
    - Continuous Deployment:
      - Deploy settings:
        - Build command: hugo
        - Publish directory: public
      - Build environment variables:
        - HUGO_VERSION: 0.37.1

Syntax highlight:

# Create CSS:
 - $ hugo gen chromastyles --style=<SCHEME> > static/css/syntax.css

# Edit header:
- file: ./layouts/partials/header.html
- |
  <head>
      <link rel="stylesheet" href="css/syntax.css">
  </head>

# Edit site config:
- file: ./config.toml
- |
  pygmentsCodefences = true
  pygmentsUseClasses = true

# Source:
- MarkDown: |
    ```<LANG>
    <CODE>
    <CODE>
    ```

- AsciiDoc: |
    ----
    { {< highlight <LANG> >}}
    <CODE>
    <CODE>
    { {< /highlight >}}
    ----