2016-03-08 10:43:08 +00:00
# Beautiful Hugo - A port of Beautiful Jekyll Theme
2017-02-18 21:06:04 +00:00
![Beautiful Hugo Theme Screenshot ](https://github.com/halogenica/beautifulhugo/blob/master/images/screenshot.png )
2016-03-08 10:43:08 +00:00
## Installation
$ mkdir themes
$ cd themes
2017-02-18 21:06:04 +00:00
$ git clone https://github.com/halogenica/beautifulhugo.git beautifulhugo
2016-03-08 10:43:08 +00:00
See [the Hugo documentation ](http://gohugo.io/themes/installing/ ) for more information.
## Extra Features
### Responsive
This theme is designed to look great on both large-screen and small-screen (mobile) devices.
### Syntax highlighting
2017-11-10 18:29:44 +00:00
This theme has support for either Hugo's lightning fast Chroma, or both server side and client side highlighting.
#### Chroma
To enable Chroma, add the following to your site parameters:
```
2017-11-10 18:37:49 +00:00
pygmentsCodeFences = true
pygmentsUseClasses = true
2017-12-29 08:00:25 +00:00
[Params]
UseChroma = true
2017-11-10 18:29:44 +00:00
```
2017-11-10 18:37:49 +00:00
Then, you can use a different style by running:
2017-11-10 18:29:44 +00:00
```
2017-11-10 18:37:49 +00:00
hugo gen chromastyles --style=manni > static/css/syntax.css
2017-11-10 18:29:44 +00:00
```
See [the Hugo docs for more ](https://gohugo.io/content-management/syntax-highlighting/ ).
2017-02-12 12:26:35 +00:00
#### Server side syntax highlighting
Use the `highlight` shortcode (with Pygments),
2016-03-08 10:43:08 +00:00
see [the Hugo documentation ](http://gohugo.io/extras/highlighting/ ) for more information.
2017-11-10 18:29:44 +00:00
To use this feature install Pygments (`pip install Pygments`) and add
```
pygmentsUseClasses = true
pygmentsUseClassic = true
```
to your `config.toml` .
2016-03-08 10:43:08 +00:00
2017-02-12 12:26:35 +00:00
#### Client side syntax highlighting
2017-02-19 10:23:31 +00:00
Use triple backticks ( ``` ) or triple tilde ( ~~~ ) around code blocks.
2017-02-12 12:26:35 +00:00
2017-11-10 18:37:49 +00:00
Client side highlighting does not require pygments to be installed. This currently is only active if you have not selected Chroma, because they don't play well together.
2017-02-12 12:26:35 +00:00
2016-03-08 10:43:08 +00:00
### Disqus support
To use this feature, uncomment and fill out the `disqusShortname` parameter in `config.toml` .
2017-11-17 21:57:41 +00:00
### Staticman support
Add *staticman* configuration section in `config.toml` or `config.yaml`
2017-11-18 05:00:33 +00:00
Sample `config.yaml` configuration
2017-11-17 21:57:41 +00:00
```
staticman:
2017-11-18 05:00:33 +00:00
api: https://api.staticman.net/v2/entry/< USERNAME > /< REPOSITORY-BLOGNAME > /master/comments
pulls: https://github.com/< USERNAME > /< REPOSITORY-BLOGNAME > /pulls
2017-11-17 21:57:41 +00:00
recaptcha:
sitekey: "6LeGeTgUAAAAAAqVrfTwox1kJQFdWl-mLzKasV0v"
secret: "hsGjWtWHR4HK4pT7cUsWTArJdZDxxE2pkdg/ArwCguqYQrhuubjj3RS9C5qa8xu4cx/Y9EwHwAMEeXPCZbLR9eW1K9LshissvNcYFfC/b8KKb4deH4V1+oqJEk/JcoK6jp6Rr2nZV4rjDP9M7nunC3WR5UGwMIYb8kKhur9pAic="
```
2017-11-18 05:00:33 +00:00
You must also configure the `staticman.yml` in you blog website.
```
comments:
allowedFields: ["name", "email", "website", "comment"]
branch : "master"
commitMessage : "New comment in {options.slug}"
2017-11-18 06:59:53 +00:00
path: "data/comments/{options.slug}"
2017-11-18 05:00:33 +00:00
filename : "comment-{@timestamp}"
format : "yaml"
moderation : true
requiredFields : ['name', 'email', 'comment']
transforms:
email : md5
generatedFields:
date:
type : "date"
options:
format : "iso8601"
reCaptcha:
enabled: true
siteKey: "6LeGeTgUAAAAAAqVrfTwox1kJQFdWl-mLzKasV0v"
secret: "hsGjWtWHR4HK4pT7cUsWTArJdZDxxE2pkdg/ArwCguqYQrhuubjj3RS9C5qa8xu4cx/Y9EwHwAMEeXPCZbLR9eW1K9LshissvNcYFfC/b8KKb4deH4V1+oqJEk/JcoK6jp6Rr2nZV4rjDP9M7nunC3WR5UGwMIYb8kKhur9pAic="
```
2016-03-08 10:43:08 +00:00
### Google Analytics
To add Google Analytics, simply sign up to [Google Analytics ](http://www.google.com/analytics/ ) to obtain your Google Tracking ID, and add this tracking ID to the `googleAnalytics` parameter in `config.toml` .
2017-02-06 11:15:53 +00:00
### Commit SHA on the footer
If the source of your site is in a Git repo, the SHA corresponding to the commit the site is built from can be shown on the footer. To do so, two environment variables have to be set (`GIT_COMMIT_SHA` and `GIT_COMMIT_SHA_SHORT` ) and parameter `commit` has to be defined in the config file:
```
[Params]
commit = "https://github.com/< username > /< siterepo > /tree/"
```
This can be achieved by running the next command prior to calling Hugo:
```
GIT_COMMIT_SHA=`git rev-parse --verify HEAD` GIT_COMMIT_SHA_SHORT=`git rev-parse --short HEAD`
```
See at [xor-gate/xor-gate.org ](https://github.com/xor-gate/xor-gate.org ) an example of how to add it to a continuous integration system.
2016-03-08 10:43:08 +00:00
## About
This is a port of the Jekyll theme [Beautiful Jekyll ](http://deanattali.com/beautiful-jekyll/ ) by [Dean Attali ](http://deanattali.com/aboutme#contact ). It supports most of the features of the original theme.
## License
2017-02-18 21:06:04 +00:00
MIT Licensed, see [LICENSE ](https://github.com/halogenica/Hugo-BeautifulHugo/blob/master/LICENSE ).