# Hugo + hyde quick static site implementation

## Install needed software

• Hugo: if you use Homebrew, then brew update && brew install hugo, for linux user you surely can figure it out yourself.
• A Hugo theme which we will use: called Hyde, if you don’t know git, you can download it as zip.

## The basics

• With Hugo, when we want to add a page to our site, we only focus on its content, which is contained in a “pagename.md” file in the ./contents/ folder. The md filetype is short for the Markdown language, which is very intuitive (c.f. examples later).
• Let us say that we will store our website in a folder ~/mysite, all you need to do is

• open a terminal, run mkdir mysite, which create the directory mysite under the home directory.
• enter the directory by typing cd mysite
• run hugo new site ./, you will see Hugo generates several folders and a config.toml configuration file in this folder
• Extract the contents of the zip file into mysite/themes/hyde/, make sure that README.md is placed in mysite/themes/hyde/README.md
• modify the config.toml file (using your text editor) as
here
 baseurl = "~sitename/"
languageCode = "en-us"
title = "Timmy's"
theme = "hyde"

[Author]
name = "me"

blog = "/:year/:month/:filename/"
code = "/:filename/"
themeColor = "theme-base-0d"
[Taxonomies]
tag = "tags"
series = "series"
series-desc = "series-desc"

[params]
gplus = ""

• Now we are ready to add our first page, run hugo new colloq.md, this will create a file named colloq.md in the mysite/content/ folder. Let us say we add a page for a coming conference, now change the file content into

this
+++
date = "2016-04-14T20:25:55+02:00"
title = "title of the page"
type = "post"
tags = ["conf"]

+++
## Name of the conference
### some big names

-------------
* Date: 1990-01-01 --- 1990-01-07
* Place: UMPA
* stuff: Timmy
---------------
Program:
- 10:00-10:30 welcome
- 1
- 2
- 3
- 4
-----------------
Summery
Some random results


Make sure to delete the draft = true in the heading (if any) in order to make the page appear during the auto generation.

• Now we are ready to test our site, just run
hugo server --watch


This will generate the site dynamically on localhost, you will see something like Web Server is available at http://127.0.0.1:1313/, open this address in your favorite navigator, it is already there. Note that if you modify your colloq.md file (or create another foo.md in /contents/ ), the page is updated dynamically, a handy way to test our new site.

## Customization

• Enable mathjax, which allows latex to be displayed. Just paste the following block into mysite/themes/hyde/layouts/partials/head.html (actually, any place that is included in the post page template works).
<script type="text/javascript"
src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
</script>

• Make some change to the sidebar, this can be done by changing /mysite/themes/hyde/layouts/partials/sidebar.html as you wish.
• Make a customize sidebar menu, there are many way to do this, the most simple will be to maintain a menu manually in the config.toml file, by adding
this piece of codes.
[[menu.main]]
weight = 1
name = "colloq"
weight = 2
identifier ="colloq"
url = "/colloq/"


Then, add the following html code to sidebar.html mentioned in the previous point (note that the menu is ordered by its entry weights):

<ul class="sidebar-nav">
<li><a href="{{.URL}}"> {{ .Name }} </a></li>
{{end}}

</ul>

• Lastly, you may also want to customize the home page, this can be achieved by modifying the mysite/themes/hyde/layouts/index.html file.

## Scripts

#!/bin/sh
HOST='perso.ens-lyon.fr'
USER=''
PASSWD=''

cd ~/hyde/
rm -rf /home/user/tmp/hyde/public/tags/
hugo

lftp $HOST <<END_SCRIPT USER$USER \$PASSWD
mirror --overwrite -c -e -R ~/tmp/hyde/public/ /
quit
END_SCRIPT
exit 0


## Appendix: some markdown syntax

click to expand
[like this](http://someurl)
[like this](http://someurl "this title shows up when you hover")

*this is in italic*  and _so is this_
**this is in bold**  and __so is this__
***this is bold and italic***  and ___so is this___
<s>this is strike through text</s>

A carriage return
makes a line break.

Two carriage returns make a new paragraph.

> Use it if you're quoting a person, a song or whatever.

> You can use *italic* or lists inside them also.
And just like with other paragraphs,
all of these lines are still
part of the blockquote, even without the > character in front.

To end the blockquote, just put a blank line before the following
paragraph.

* an asterisk starts an unordered list
* and this is another item in the list
+  or you can also use the + character
- or the - character
* just indent by 4 spaces (or tab) to make a sub-list
1. keep indenting for more sub lists
* here i'm back to the second level

Tables
------------- | -------------
Content Cell  | Content Cell
Content Cell  | Content Cell

Images
![alternate text](https://sourceforge.net/images/icon_linux.gif)
![tiny arrow](https://sourceforge.net/images/icon_linux.gif "tiny arrow")
<b>this will be bold</b>

# this is a huge header #
## this is a smaller header ##
### this is even smaller ###
#### more small ####
##### even smaller #####
###### smallest still: <h6> header

[TOC]

# Section 1
## Sub-section 1
# Section 2

For simple expand, use shortcode divexpand or hidexpand (inline), where % means parsed the markdown and < means do not, for inline expand, use <div> tag to make a block.

w