Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/sporto/hugo-remark
A theme for using remark.js with hugo
https://github.com/sporto/hugo-remark
Last synced: about 1 month ago
JSON representation
A theme for using remark.js with hugo
- Host: GitHub
- URL: https://github.com/sporto/hugo-remark
- Owner: sporto
- License: mit
- Created: 2014-12-04T06:12:34.000Z (about 10 years ago)
- Default Branch: master
- Last Pushed: 2022-05-24T11:11:46.000Z (over 2 years ago)
- Last Synced: 2024-05-09T07:11:45.414Z (8 months ago)
- Language: CSS
- Size: 19.5 KB
- Stars: 23
- Watchers: 5
- Forks: 4
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# Hugo Remark theme
What is **hugo**?
[Hugo](http://gohugo.io/) is a great static site generator built in Go.
What is **remark.js**?
[Remark](https://github.com/gnab/remark) is a simple slide show generator from markdown files.
## About this theme
This theme creates a set of Remark presentations using Hugo. Hugo generates slideshow from markdown content.
## Why use Hugo and not just remark.js?
Remark.js doesn't come with a way of serving files or reload them on changes. Also it requires you to write all your slides on just one html page.
By using Hugo:
- You can serve your slideshows on localhost easily
- Hugo will watch for changes and reload immediatelly
- You can write your slides on different markdown files, Hugo will concatenate them
## Installation
Follow the hugo [installation intructions](https://gohugo.io/getting-started/installing/).
## How to use
### Generating the site
```bash
hugo new site /path/to/presentations
cd /path/to/presentations
```
### Install this theme
Inside the presentations folder do:
```bash
git clone https://github.com/sporto/hugo-remark themes/remark
```
Add to config file
```
theme = "remark"
```
### Generate new slideshows
Inside the presentations folder do:
```bash
hugo new slideshow.md
```
Note that each markdown file is a single slideshow, so adding multiple slides, you follow the remarkjs syntax of doing so:
```
## This is Slide 1
---
## This is Slide 2
---
## This is Slide 3
---
...
```
Slideshows will be created on `./content` subfolder.
Edit the slides using markdown.
### Serve the slideshow
To show your slides run:
```bash
hugo server --buildDrafts --watch
```
And open the given url in a browser, e.g. `http://localhost:1313`
### Custom styles
You can add custom styles to your slides:
- Create a file `./layouts/partials/custom_head.html`
- Link `custom_head.html` in `head.html` by adding `{{ partial "custom_head.html" }}` to where you want.
- In this file add a link to a CSS style sheet e.g.
``
- Add your CSS in `./static/css/[some-name].css`
- Or just write your CSS in this file using `style` tags.
### Custom JS on the head
- Create a file `./layouts/partials/custom_head.html`
- Link `custom_head.html` in `head.html` by adding `{{ partial "custom_head.html" }}` to where you want.
- In this file add a link to the JS libraries you want to load e.g.
``
``
- Add your JS in `./static/js/[some-name].js`
### Custom JS on the footer
You can also add custom JS on the footer, this is loaded after the remark initialisation. This is useful for adding custom behaviour to your presentation.
- Create a file `./layouts/partials/custom_footer.html`
- Link `custom_footer.html` in `footer.html` by adding `{{ partial "custom_footer.html" }}` to where you want.
- Add a JS script link there or just write the JS using `script` tags