sample
code
block

1. Add a <script> tag inside the CUSTOM_HTML_HEAD variable

bw.sh

CUSTOM_HTML_HEAD="
<script src=\"$BASE_URL/assets/codecopy.js\" defer></script>
"

2. Create codecopy.js file in assets/

your-blog/
├─ assets/
│  ├─ codecopy.js    <<< New!
├─ write/
├─ bw.sh

3. Add code in ./assets/codecopy.js

assets/codecopy.js

// Copy button for code block
const codes = document.querySelectorAll('div.code-container');

codes.forEach(item => {
  // Container style
  item.setAttribute("style", "position: relative;");

  // Create button
  const copyBtn = document.createElement('button');
  copyBtn.textContent = 'Copy';
  copyBtn.setAttribute("style", "position: absolute; top: 0; right: 0; z-index: 3; background: var(--background-color); color: var(--main-theme); border: none;");

  // Add event
  copyBtn.addEventListener("click", () => {
    navigator.clipboard.writeText(copyBtn.previousElementSibling.textContent).then(()
=> {
      copyBtn.textContent = "Copied!"
      setTimeout(() => {
        copyBtn.textContent = "Copy"
      }, 1000)
    })
  });

  // Add element
  item.appendChild(copyBtn);
})

4. Save the file and run ./bw.sh b

Fin!

About BashWrite

Pure Bash, single script blog generator

• Minimal requirements (Common commands: sed, awk, grep, tar)
• Support Extended Markdown
• RSS
• Tags
• Darkmode
• Pinned posts
• Recent posts

Quick Start

Install

1. Download: bw.sh - Codeberg
2. Make file executable: chmod +x ./bw.sh
3. Edit and save script's user settings: nano ./bw.sh (Or use preferred text editor)
4. View help/first steps (See: Write New Posts): ./bw.sh
5. Generate blog: ./bw.sh b

Write New Posts

1. Create a markdown file in ./write/: touch ./write/first-post.md
2. Edit newly created markdown file: nano ./write/first-post.md (Or use preferred text editor)
3. Start markdown file with frontmatter

---
title: My new post
description: Write description of this post.
date: 2025-02-05
lastmod: 2025-05-02
tags: tags seperated by whitespace
draft: false
pin: 1
banner: image.png
---

1. Add post content in markdown syntax after frontmatter
2. Save markdown file
3. Update blog: ./bw.sh b

Remove posts

1. Remove a markdown file in ./write/: rm -i ./write/first-post.md
2. Update blog: ./bw.sh b

Commands

• ./bw.sh h : Show help
• ./bw.sh b : Build blog
• ./bw.sh r : Force blog rebuild

Directory Structure

Downloaded From Repository

• bw.sh

Automatically Generated

Note: Do not edit the following files

• ./backup/
• ./checksum/ - Checksum list to compare the diffrence of files
• ./posts/
• ./tags/
• ./404.html
• ./all-posts.html - List of every posts
• ./all-tags.html - List of every tags
• ./index.html
• ./robots.txt
• ./rss.xml
• ./style.css
• ./sitemap.xml

User Created Folders

Note: Only edit files within these folders

Create folders: mkdir ./assets ./write

• ./assets/ - For site assets (Example: Favicons)
• ./write/ - For post markdown files and post assets

1. Visit giscus homepage

Read the text on the homepage carefully and follow it.

2. Giscus setting

If you don't understand something, follow the settings below.

• Page ↔️ Discussions Mapping
  • Discussion title contains page pathname
• Discussion Category
  • -> Announcements
  • Only search for discussions in this category
• Features
  • Enable reactions for the main post
  • Emit discussion metadata
  • Place the comment box above the comments
  • Load the comments lazily
• Theme
  • -> Preferred color scheme

3. Copy script html code

<script 
  src="https://giscus.app/client.js"
  data-repo="RayCC51/BashWrite"
  data-repo-id="R_kgDOOQp0-w"
  data-category="Announcements"
  data-category-id="DIC_kwDOOQp0-84CpMGk"
  data-mapping="pathname"
  data-strict="0"
  data-reactions-enabled="1"
  data-emit-metadata="0"
  data-input-position="top"
  data-theme="preferred_color_scheme"
  data-lang="en"
  data-loading="lazy"
  crossorigin="anonymous"
  async>
</script>

4. Paste above code in bw.sh - CUSTOMEHTMLARTICLE_FOOTER

CUSTOM_HTML_ARTICLE_FOOTER="
<script 
  src=\"https://giscus.app/client.js\"
  data-repo=\"RayCC51/BashWrite\"
  data-repo-id=\"R_kgDOOQp0-w\"
  data-category=\"Announcements\"
  data-category-id=\"DIC_kwDOOQp0-84CpMGk\"
  data-mapping=\"pathname\"
  data-strict=\"0\"
  data-reactions-enabled=\"1\"
  data-emit-metadata=\"0\"
  data-input-position=\"top\"
  data-theme=\"preferred_color_scheme\"
  data-lang=\"en\"
  data-loading=\"lazy\"
  crossorigin=\"anonymous\"
  async>
</script>
"

You need to escape the ". That is, you should change " to \".

5. Save and run ./bw.sh b

Now there are comments on your blog post.

👇👇👇

Include images in posts

You can use markdown to include the images.

1. Prepare images.

2. Put your images in...

your-blog-directory/
├─ write/
│  ├─ new-post/           <<< New!
│  │  ├─ index.md         <<< New!
│  │  ├─ screenshot.png   <<< New!
├─ bw.sh

Create a new folder under the ./write/ folder. It’s best to name the folder after the title of the new post you will write.

Try to keep only 1 markdown file per folder if possible. This will make file management easier.

Name the markdown file index.md. This way, you can have a clean URL.

Also, include any images you want to put in this folder.

3. Write markdown

![screenshot](screenshot.png)

Banner Image

1. Prepare image or image link

...

2. Frontmatter

title: ...
description: ...
date: ...
banner: https://place-hold.it/100x400

Put your image path or image url in banner.

Source code: md2html

Original source code: md2html

Inline code

Need escape for special charactors

<hr>

\ . | # ! * + - _ ( ) { } [ ] < > `

`<hr>`

`\<hr\>`

`\\ \. \| \# \! \* \+ \- \_ \( \) \{ \} \[ \] \< \> \``

Can not use double backtick(``)

`double code backtick`

``double `code` backtick``

List

Other elements insides list

• list
• list

p

• list

> blockquote

• list

- list
- list

    p
    
- list

    > blockquote

- list

Footnote

Footnote link with space

How to call^{of this} things^{foot note}?

[of this]: Can not use whitespace in html id.

[foot note]: So this will not working well.

How to call[^of this] things[^foot note]?

[^of this]: Can not use whitespace in html id. 

[^foot note]: So this will not working well. 

Footnote with several lines

Footnote^with.

[with]: several lines

should be

work.

Footnote[^with]. 

[^with]: several lines

    should be

    work. 

Non ASCII characters in table? - Github Pages

||table|
|---|---|
|q|@|
|π|©|
|∆|•|
|ä|❓|

Text links

Multiple links on the same line do not work

Code:

[Link-1](https://www.example.com/) [Link-2](https://www.example.com/)

Output:

Pure markdown h1

# Pure markdown h1

h2

## h2

h3

### h3

h4

#### h4

h5

##### h5

h6

###### h6

hello world

hello 
world

two blank

line break

two blank  
line break

4 space = indent

    4 space = indent

italic em

italic *em*

bold strong

bold **strong**

italic and bold em strong

italic and bold ***em strong***

escape: \ . | # ! * + - _ ( { [ < ``

escape: \\ \. \| \# \! \* \+ \- \_ \( \{ \[ \< \``

---

***

___

• unordered ul
• list li
  • indented
• list

- unordered ul
- list li
    - indented
- list

1. ordered ol
2. list li
   1. indented
3. list

1. ordered ol
2. list li
    1. indented
4. list

1. mixed
   • ul
2. ol

1. mixed
    - ul
2. ol

block quote

blockquote

indented

blockquote

> block quote
>
> blockquote
>
> > indented
>
> blockquote

[Link a](https://example.com)

<https://example.com>

![img](https://place-hold.it/100x100)

![img alt](https://place-hold.it/100x100 "title")

inline code

inline `code`

plain code block
\ . | # ! * + - _ ( ) { } [ ] < > ''

```
plain code block
\ . | # ! * + - _ ( ) { } [ ] < > ''
```

print("python")

```python
print("python")
```

Extended markdown

https://www.example.com

strikethrough del

strikethrough ~~del~~

highlight mark

highlight ==mark==

_sub script

~sub~ script

^super script

^sup^er script

• checked box ul li
• input type="checkbox" checked disabled

- [ ] checked box ul li
- [x] input type="checkbox" checked disabled

heading with id 🔗

### heading with id {#extened}

|ttt|aaa|bbb|lll|
|---|:--|:-:|--:|
|.|l|c|r|

dl

definition list

dt

definition

data

dl
: definition list

dt
: definition
: data

foot¹ note^note sup a

[1]: first foot note

[note]: long

foot[^1] note[^note] sup a

[^1]: first foot note

[^note]: long

HTML Tag

<!-- comment -->

<br>

<b>html b tag</b>

<details>
<summary>details and summary</summary>
open

and

close

paragraph
</details>

iframe

<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/jNQXAC9IVRw" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>

Download github action

1. Download .github/workflows/build.yaml in Github RayCC51/BashWrite
2. Put the build.yaml file in your your-blog-path/.github/workflows/

Directory

your_blog/
├─ .github/           <<< New!
│  ├─ workflows/      <<< New!
│  │  ├─ build.yaml   <<< New!
├─ write/
│  ├─ post1.md
│  ├─ post2.md
├─ bw.sh

Settings in github.com

1. Push any files in your blog repository, or just run a github action. Then gh-pages branch will be created automatically.
2. Go to the your blog repository settings.
3. Settings -> Code and automation - Pages -> Build and deployment
   • Source: Deploy from a branch
   • Branch: gh-pages
4. Save the settings.
5. Your site is live at https://YOUR-NAME.github.io/ or https://YOUR-NAME.github.io/REPO-NAME/

---
title: Frontmatter
description: About frontmatter
date: 2025-04-17
lastmod: 2025-04-26
tags: sample frontmatter blog
draft: true
pin: 1
banner: image.png
---

yyyy-mm-dd is the date format

This is a yaml-like syntax.

There must always be a space after the colon(:).

The title and date are required, while the rest are optional. description is useful for the blog frontpage.

date and lastmod must always be written in yyyy-mm-dd format.

tags are separated by whitespaces. Tags must only use alphabets, numbers, dashes(-), and underscores(_). Duplicate tags will be ignored.

If you want to pin a post, you need to enter a natural number for pin. pin: 1 will be the top pinned post. If you do not want to pin a post, you can either leave it blank or delete the line.

The banner image can use relative paths, absolute paths, or external links.