⬅️ **[[$-Tools|Tools]]**
***
# Ghost CMS Blog
- [[Blog - Tobi]]
[Ghost - Using Markdown Editor](https://ghost.org/help/using-markdown/)
[Ghost - The Ultimate Guide to Markdown](https://ghost.org/changelog/markdown/)
[DockerHub Ghost](https://hub.docker.com/_/ghost/)
[Ghost - Config Doku](https://ghost.org/docs/config/)
- [Ghost Blog and Mermaid](https://ghost.spforge.com/ghost-and-mermaid-blog/)
- [Ghost - Setup - How to add a table of contents](https://ghost.org/tutorials/adding-table-of-contents/)
- Setup [[Mailgun]]
- [Ghost - Setup - Redirects](https://ghost.org/tutorials/implementing-redirects/)
## Installation
### Docker
- [How to Deploy a Ghost Blog With Docker](https://www.howtogeek.com/devops/how-to-deploy-a-ghost-blog-with-docker/ "How to Deploy a Ghost Blog With Docker")
- **2022-09-26** with Ghost 5 and MySQL DB 8 as two services in `docker-compose.yml`
- Update Ghost Container like described in [[Docker]] by pulling newer image and re-run docker-compose
- **Issue: Subscribe not shown and View Site in Backend not shown** --> `https` anstatt `http` im `docker-compose.yml` eintragen
- `docker-compose.yml` Config
```yml
11-ghost-ryc:
image: ghost:5
container_name: 11-ghost-ryc
ports:
- 32368:2368
environment:
url: https://reign-your-chaos.de
database__client: mysql
database__connection__host: home-server-mysql-ghost-ryc
database__connection__user: root
database__connection__database: ghost-ryc
database__connection__password: ****************
mail__transport: 'SMTP'
mail__options__service: 'Mailgun'
mail__options__host: smtp.eu.mailgun.org
mail__options__port: 465
mail__options__secureConnection: 'true'
mail__options__auth__user:
[email protected]
mail__options__auth__pass: ****************
forceAdminSSL: 'true'
volumes:
- /mnt/SSD1_500/docker-data/ghost-ryc:/var/lib/ghost/content
restart: unless-stopped
networks:
home-server-nw:
aliases:
- home-server-ghost-ryc
11-mysql:
image: mysql:8
container_name: 11-mysql
expose:
- 3306
environment:
MYSQL_DATABASE: ghost-ryc
MYSQL_ROOT_PASSWORD: ****************
volumes:
- /mnt/SSD1_500/docker-data/mysqli-ghost-ryc:/var/lib/mysql
restart: unless-stopped
networks:
home-server-nw:
aliases:
- home-server-mysql-ghost-ryc
```
### Ghost Certbot Nginx Proxy
- [Install Ghost CMS on Docker with Nginx Proxy](https://blog.dataprik.com/install-ghost-cms-on-docker-with-nginx-proxy/)
- here the nginx config is useful
- a lot of headers need to be set `/etc/nginx/conf`
```
proxy_pass http://127.0.0.1:8588;
proxy_set_header Host $http_host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
proxy_set_header X-NginX-Proxy true;
proxy_redirect off;
```
## Theme anpassen
### ToC
Anleitung 1:1 durchgeführt: [ghost - How to add a table of contents](https://ghost.org/tutorials/adding-table-of-contents/)
- In `defaults.hbs` **oben** Styles direkt vor `{{ghost_head}}`
```CSS
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tocbot/4.12.3/tocbot.css">
<style>
.gh-content {
position: relative;
}
.gh-toc > .toc-list {
position: relative;
}
.toc-list {
overflow: hidden;
list-style: none;
}
@media (min-width: 1300px) {
.gh-sidebar {
position: absolute;
top: 0;
bottom: 0;
margin-top: 4vmin;
grid-column: wide-start / main-start; /* Place the TOC to the left of the content */
}
.gh-toc {
position: sticky; /* On larger screens, TOC will stay in the same spot on the page */
top: 4vmin;
}
}
.gh-toc .is-active-link::before {
background-color: var(--ghost-accent-color); /* Defines TOC accent color based on Accent color set in Ghost Admin */
}
</style>
```
- In `defaults.hbs` **unten** JavaScript **tocbot** einbinden direkt vor `{{ghost_foot}}`
```JS
<script src="https://cdnjs.cloudflare.com/ajax/libs/tocbot/4.12.3/tocbot.min.js"></script>
{{! Initialize Tocbot after you load the script }}
<script>
tocbot.init({
// Where to render the table of contents.
tocSelector: '.gh-toc',
// Where to grab the headings to build the table of contents.
contentSelector: '.gh-content',
// Which headings to grab inside of the contentSelector element.
headingSelector: 'h1, h2, h3, h4',
// Ensure correct positioning
hasInnerContainers: true,
});
</script>
```
- In `post.hbs` DIV Container einbinden direkt vor `{{content}}`
```JS
<aside class="gh-sidebar"><div class="gh-toc"></div></aside> {{! The TOC will be inserted here }}
```
#
***
Related:
- [[Docker]]
- [[Blog]]
- [[Jekyll - Blog Framework]]
- [[Markdown]]
- [[Blog - Tobi]]