Awesome
Template HTML
Static site generator based on Go's text/template with development web server integrated.
Install latest version using Go
go install github.com/leonelquinteros/thtml
Quick Start
$ thtml -h
Usage of thtml:
-build
Build the assets from the -public directory to the -output directory by parsing the -templates directory.
-exts string
Provides a comma separated filename extensions list to support when parsing templates. (default ".html")
-init
Creates a new project structure into the current directory.
-listen string
Run the dev server listening on the provided host:port. (default "localhost:5500")
-minify
Minify the build output. (default true)
-output string
Sets the path for the build output. (default "build")
-public string
Sets the path for the web root. (default "public")
-run
Run a dev web server serving the public directory.
-templates string
Sets the path for the template files. (default "templates")
-version
Prints version number.
Go template syntax and docs: https://golang.org/pkg/text/template
Creating static websites
1. Prepare the environment
After installing the thtml tool, we'll create a new project directory for our website development files.
thtml will create a scaffolded website structure, based on a dummy Twitter Bootstrap template, were we can start working on.
$ mkdir mywebsite
$ cd mywebsite
$ thtml -init
2019/10/16 22:43:23 => Creating directory structure...
2019/10/16 22:43:23 public/css
2019/10/16 22:43:23 public/js
2019/10/16 22:43:23 public/img
2019/10/16 22:43:23 templates/layouts
2019/10/16 22:43:23 templates/components
2019/10/16 22:43:23 => Fetching files...
2019/10/16 22:43:23 public/css/bootstrap.min.css
2019/10/16 22:43:24 public/css/bootstrap.min.css.map
2019/10/16 22:43:25 public/img/bg-banner.jpg
2019/10/16 22:43:25 public/js/bootstrap.min.js
2019/10/16 22:43:25 public/js/bootstrap.min.js.map
2019/10/16 22:43:25 public/js/jquery-3.2.1.slim.min.js
2019/10/16 22:43:26 public/js/popper.min.js
2019/10/16 22:43:26 public/index.html
2019/10/16 22:43:26 public/page.html
2019/10/16 22:43:27 templates/components/footer.html
2019/10/16 22:43:27 templates/components/head.html
2019/10/16 22:43:27 templates/components/nav.html
2019/10/16 22:43:27 templates/layouts/default.html
2019/10/16 22:43:27 templates/layouts/two-columns.html
Finished.
$
Inside the project directory 2 new directories are created.
templates will contain all our template files that will be reused from our website pages.
public will contain the website pages and structure.
2. Work with the layout
We'll start by putting together a basic website layout based on Bootstrap that will be used by all the pages of our example website.
The newly created file templates/layouts/default.html has the following content:
{{ template "components/head.html" }}
<div class="container">
<div class="row">
<div class="col-md-12">
<small>
Edit <code>templates/layouts/default.html</code> to change this layout
</small>
</div>
</div>
{{ template "components/nav.html" }}
<div class="row">
<div class="col-md-12">
{{ block "view-content" . }}{{ end }}
</div>
</div>
</div>
{{ template "components/footer.html" }}
The entire file is a basic Bootstrap template, the only interesting line here is the one that says {{ block "view-content" . }}{{ end }}, which defines a content block that will be extended by our pages.
3. Create the first page
Now lets see the file at public/index.html with the following content:
{{ template "layouts/default.html" }}
{{ define "layout-title" }}Home title{{ end }}
{{ define "view-content" }}
<h1>Home page</h1>
<p>
<img class="img-fluid" src="/img/bg-banner.jpg" alt="Image" />
<br />
<small>
Edit <code>public/index.html</code> to change this page
</small>
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
<a href="/page.html" class="btn btn-primary">I'm a button!</a>
</p>
{{ end }}
Here we see 2 new interesting lines. First one is {{ template "layouts/default.html" }} that loads the template located in templates/layouts/default.html by referencing it using a relative path from the templates directory.
Then there is the {{ define "view-content" }} that defines a block of code with the name of view-content that's the name of the content block we defined in our layout file.
4. Run development server
While we create our pages, we need to quickly see what's happening and how they look. For that purpose, we'll use the run mode of the thtml tool to run a local development web server to serve our website before being compiled to a static form:
thtml -run
With all the default options, the tool will use the templates and public directories properly. After running the command, we can open http://localhost:5500 in our browser to see our home page compiled and running.
After making any changes to the page or the layout, we can refresh the browser to see these changes while the web server keeps running. Try it!
5. Continue working
Go ahead and create more pages. You can also take the menu to a different file into a different directory (under the templates directory). Feel free to get ideas from the _example website.
6. Build your static website
After you finish developing and your website is ready to go live, you can compile it by running:
thtml -build
This will create a static version of your website into the build directory by default, but you can configure the output to compile to any directory you want.
Now you can deploy the contents of the build directory to your web server root.
Full documentation
https://godoc.org/github.com/leonelquinteros/thtml
Using the thtml/templates package
https://godoc.org/github.com/leonelquinteros/thtml/templates