Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/michimani/simplog
SimpLog is a simple blog theme for Hugo.
https://github.com/michimani/simplog
hugo hugo-theme
Last synced: about 1 month ago
JSON representation
SimpLog is a simple blog theme for Hugo.
- Host: GitHub
- URL: https://github.com/michimani/simplog
- Owner: michimani
- License: mit
- Created: 2021-01-03T06:27:56.000Z (about 4 years ago)
- Default Branch: master
- Last Pushed: 2024-02-20T21:39:56.000Z (12 months ago)
- Last Synced: 2024-05-01T17:45:20.728Z (9 months ago)
- Topics: hugo, hugo-theme
- Language: HTML
- Homepage:
- Size: 3.11 MB
- Stars: 19
- Watchers: 3
- Forks: 10
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
simplog
---
[](https://app.fossa.com/projects/git%2Bgithub.com%2Fmichimani%2Fsimplog?ref=badge_shield)
simplog is a simple blog theme for [Hugo](https://gohugo.io/).
Demo site is [here](https://michimani.github.io/simplog/).
## Features
- Google Analytics
- Disqus
- Some theme colors
- Responsive
- Custom CSS
- Adobe Fonts
- Lazy load image
- Support tags, categories and archives page
- Show related tags and categories posts
## Installation
```bash
git submodule add https://github.com/michimani/simplog.git ./themes/simplog
```
## Updating
```bash
git submodule update --remote --merge
```
## Detail of features
### Google Analytics
You can insert the Google Analytics tracking code into top of `head` tag. If you insert the tag, set tracking ID at `config.toml`.
```toml
googleAnalytics = ""
```
### Disqus
You can set the comment form via Disqus. If you set the comment form, set disqus short name at `config.toml`.
```toml
disqusShortname = ""
```
And if you enable comment form, set `true` at `config.toml` and each post file.
- `config.toml`
```toml
[params]
[params.enabled]
comment = true
```
- each post file
```toml
+++
# some
# settings
# of
# post
comments = true
+++
```
The comment form will be enabled when both of them are `true`.
### Custom CSS
If you want to use your own CSS, set value that is path to your CSS file at `config.toml`
```toml
[params]
customCSS = ""
```
### Adobe Fonts
If you use Adobe Fonts in your site, set value that is Adobe Fonts Kit ID at `config.toml`. In this case you will need to set custom css as well.
```toml
[params]
adobeFontsKitId = ""
```
### Some theme colors
You can change theme color easily. Set the value one of `default`, `dark`, `red`, `green` and `blue` at `config.toml`.
```toml
[params]
colorTheme = "default"
```
- Dark
- Red/Green/Blue
### Lazy load image
You can easily set up an image tag for lazy loading by using the shortcode below.
```markdown
{{< lazy src="image-file-name.jpg" alt="attribute for this image" >}}
```
In the above case, the image files under the `images` directory will be displayed. (e.g. `/images/image-file-name.jpg`)
If you want to specify another path or a path with a different domain, write the full path to the image file and add `abs =" y "`.
```markdown
{{< lazy src="https://michimani.github.io/simplog/images/featured_image.jpg" alt="attribute for this image" abs="y" >}}
```
### Mermaid
You can use the mermaid language in Markdown code blocks.
```markdown
```mermaid
sequenceDiagram
participant Alice
participant Bob
Alice->>John: Hello John, how are you?
loop Healthcheck
John->John: Fight against hypochondria
end
Note right of John: Rational thoughts
prevail...
John-->Alice: Great!
John->Bob: How about you?
Bob-->John: Jolly good!
``
```
## Developmet
Install `nodenv` and install `node 18.x`
```bash
brew install nodenv
```
```bash
nodenv install 18.14.2
```
Install the node module for development such as CSS generation.
```bash
npm install
```
### Generate CSS from SCSS
To generate CSS from SCSS, run the following command.
```bash
npm run css:scss
```
If you want to monitor SCSS changes, run the following command.
```bash
npm run watch:scss
```
## License
[](https://app.fossa.com/projects/git%2Bgithub.com%2Fmichimani%2Fsimplog?ref=badge_large)