more
@ -0,0 +1,396 @@
|
||||
---
|
||||
title: "Budibase - Form Builder & Database"
|
||||
publish: true
|
||||
---
|
||||
|
||||
Budibase is shaping up to be out webapp development platform of choice! Learning as we go with it :)
|
||||
|
||||
## Budibase Installation and Public Deployment Manual with Cloudflared Tunnel
|
||||
|
||||
### Table of Contents:
|
||||
1. Overview
|
||||
2. Requirements
|
||||
3. Installing Docker and Docker Compose on Ubuntu
|
||||
4. Configuring Budibase with Docker Compose
|
||||
5. Setting Up Cloudflare Tunnel for Public Access
|
||||
6. Cloudflare SSL Configuration and HTTPS for Secure Traffic
|
||||
7. Setting Up Network Proxies for Budibase
|
||||
8. Outbound Allow-list Configuration
|
||||
9. Complete Deployment Instructions
|
||||
10. Monitoring and Future Management
|
||||
11. Helpful Commands and Troubleshooting
|
||||
|
||||
---
|
||||
|
||||
### 1. Overview
|
||||
|
||||
This guide provides step-by-step instructions to install **Budibase** on an **Ubuntu** server and securely deploy it using a **Cloudflare Tunnel**. By following these instructions, Budibase will be available over the internet with a Cloudflare-proxied domain, secured by HTTPS, and configured to route traffic through an organizational HTTP/HTTPS proxy.
|
||||
|
||||
---
|
||||
### 2. Requirements
|
||||
|
||||
Before we start, here is what you'll need:
|
||||
|
||||
- An Ubuntu (or other Linux) system with typical system requirements (Docker supported).
|
||||
- An internet connection.
|
||||
- A Cloudflare account (free-tier works fine).
|
||||
- Domain registered in Cloudflare (you will point your domain's DNS to Cloudflare).
|
||||
- A proxy (if you are using an organizational proxy for HTTP and HTTPS).
|
||||
|
||||
---
|
||||
|
||||
### 3. Installing Docker and Docker Compose on Ubuntu
|
||||
|
||||
#### 3.1 Install Docker
|
||||
|
||||
Run the following commands to install Docker on your Ubuntu machine:
|
||||
|
||||
```bash
|
||||
# Update the system packages.
|
||||
sudo apt update
|
||||
|
||||
# Install prerequisite packages.
|
||||
sudo apt install apt-transport-https ca-certificates curl software-properties-common
|
||||
|
||||
# Add Docker's official GPG key.
|
||||
curl -fsSL https://download.docker.com/linux/ubuntu/gpg | sudo gpg --dearmor -o /usr/share/keyrings/docker-archive-keyring.gpg
|
||||
|
||||
# Set up the Docker stable repository.
|
||||
echo \
|
||||
"deb [arch=$(dpkg --print-architecture) signed-by=/usr/share/keyrings/docker-archive-keyring.gpg] https://download.docker.com/linux/ubuntu \
|
||||
$(lsb_release -cs) stable" | sudo tee /etc/apt/sources.list.d/docker.list > /dev/null
|
||||
|
||||
# Install Docker.
|
||||
sudo apt update
|
||||
sudo apt install docker-ce docker-ce-cli containerd.io
|
||||
```
|
||||
|
||||
Enable and start Docker:
|
||||
|
||||
```bash
|
||||
sudo systemctl enable docker
|
||||
sudo systemctl start docker
|
||||
```
|
||||
|
||||
Verify Docker is successfully installed:
|
||||
|
||||
```bash
|
||||
docker --version
|
||||
```
|
||||
|
||||
#### 3.2 Install Docker Compose
|
||||
|
||||
Install Docker Compose to manage multi-container Docker environments like Budibase:
|
||||
|
||||
```bash
|
||||
sudo curl -L "https://github.com/docker/compose/releases/download/v$(curl -s https://api.github.com/repos/docker/compose/releases/latest | grep -Po '"tag_name": "\K[0-9.]+')" -o /usr/local/bin/docker-compose
|
||||
sudo chmod +x /usr/local/bin/docker-compose
|
||||
docker-compose --version
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### 4. Configuring Budibase with Docker Compose
|
||||
|
||||
#### 4.1 Download Budibase Docker Compose Configuration Files
|
||||
|
||||
Start by creating a directory to store Budibase Docker Compose files:
|
||||
|
||||
```bash
|
||||
mkdir ~/budibase && cd ~/budibase
|
||||
```
|
||||
|
||||
Create the `docker-compose.yml` file:
|
||||
|
||||
```bash
|
||||
nano docker-compose.yml
|
||||
```
|
||||
|
||||
Paste the following content into this file:
|
||||
|
||||
```yaml
|
||||
version: "3"
|
||||
|
||||
services:
|
||||
app-service:
|
||||
restart: unless-stopped
|
||||
image: budibase.docker.scarf.sh/budibase/apps
|
||||
container_name: bbapps
|
||||
environment:
|
||||
SELF_HOSTED: 1
|
||||
COUCH_DB_URL: http://${COUCH_DB_USER}:${COUCH_DB_PASSWORD}@couchdb-service:5984
|
||||
WORKER_URL: http://worker-service:4003
|
||||
MINIO_URL: http://minio-service:9000
|
||||
MINIO_ACCESS_KEY: ${MINIO_ACCESS_KEY}
|
||||
MINIO_SECRET_KEY: ${MINIO_SECRET_KEY}
|
||||
INTERNAL_API_KEY: ${INTERNAL_API_KEY}
|
||||
BUDIBASE_ENVIRONMENT: ${BUDIBASE_ENVIRONMENT}
|
||||
PORT: 4002
|
||||
API_ENCRYPTION_KEY: ${API_ENCRYPTION_KEY}
|
||||
JWT_SECRET: ${JWT_SECRET}
|
||||
REDIS_URL: redis-service:6379
|
||||
REDIS_PASSWORD: ${REDIS_PASSWORD}
|
||||
BB_ADMIN_USER_EMAIL: ${BB_ADMIN_USER_EMAIL}
|
||||
BB_ADMIN_USER_PASSWORD: ${BB_ADMIN_USER_PASSWORD}
|
||||
|
||||
worker-service:
|
||||
restart: unless-stopped
|
||||
image: budibase.docker.scarf.sh/budibase/worker
|
||||
container_name: bbworker
|
||||
environment:
|
||||
SELF_HOSTED: 1
|
||||
PORT: 4003
|
||||
MINIO_URL: http://minio-service:9000
|
||||
COUCH_DB_URL: http://${COUCH_DB_USER}:${COUCH_DB_PASSWORD}@couchdb-service:5984
|
||||
|
||||
minio-service:
|
||||
restart: unless-stopped
|
||||
image: minio/minio
|
||||
volumes:
|
||||
- minio_data:/data
|
||||
command: server /data --console-address ":9001"
|
||||
|
||||
redis-service:
|
||||
restart: unless-stopped
|
||||
image: redis
|
||||
command: redis-server --requirepass "${REDIS_PASSWORD}"
|
||||
volumes:
|
||||
- redis_data:/data
|
||||
|
||||
couchdb-service:
|
||||
restart: unless-stopped
|
||||
image: budibase/couchdb
|
||||
environment:
|
||||
- COUCHDB_PASSWORD=${COUCH_DB_PASSWORD}
|
||||
- COUCHDB_USER=${COUCH_DB_USER}
|
||||
volumes:
|
||||
- couchdb3_data:/opt/couchdb/data
|
||||
|
||||
volumes:
|
||||
couchdb3_data: {}
|
||||
minio_data: {}
|
||||
redis_data: {}
|
||||
```
|
||||
|
||||
Create the `.env` file to store environment variables:
|
||||
|
||||
```bash
|
||||
nano .env
|
||||
```
|
||||
|
||||
Paste the following values into the file:
|
||||
|
||||
```bash
|
||||
# Port configuration
|
||||
MAIN_PORT=10000
|
||||
|
||||
# Secrets (change these for security)
|
||||
API_ENCRYPTION_KEY=testsecret
|
||||
JWT_SECRET=testsecret
|
||||
MINIO_ACCESS_KEY=budibase
|
||||
MINIO_SECRET_KEY=budibase
|
||||
COUCH_DB_PASSWORD=budibase
|
||||
COUCH_DB_USER=budibase
|
||||
REDIS_PASSWORD=budibase
|
||||
INTERNAL_API_KEY=budibase
|
||||
|
||||
# Optional Admin account
|
||||
BB_ADMIN_USER_EMAIL=admin@example.com
|
||||
BB_ADMIN_USER_PASSWORD=admin
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### 5. Setting Up Cloudflare Tunnel for Public Access
|
||||
|
||||
#### 5.1 Installing Cloudflared
|
||||
|
||||
To expose Budibase publicly while hiding your server’s real IP address, use Cloudflare Tunnel. First, install the `cloudflared` utility.
|
||||
|
||||
```bash
|
||||
sudo apt-get install -y curl
|
||||
curl -fsSL https://pkg.cloudflare.com/gpg.pkg.cloudflare.com/gpg | sudo gpg --dearmor -o /usr/share/keyrings/cloudflare-tunnel-archive-keyring.gpg
|
||||
echo "deb [signed-by=/usr/share/keyrings/cloudflare-tunnel-archive-keyring.gpg] https://pkg.cloudflare.com/ $(lsb_release -cs) main" | sudo tee /etc/apt/sources.list.d/cloudflared.list
|
||||
sudo apt-get update
|
||||
sudo apt-get install cloudflared
|
||||
```
|
||||
|
||||
#### 5.2 Authenticating Cloudflared with Cloudflare
|
||||
|
||||
Run the following command to log into Cloudflare and authenticate the tunnel:
|
||||
|
||||
```bash
|
||||
cloudflared tunnel login
|
||||
```
|
||||
|
||||
#### 5.3 Creating the Cloudflare Tunnel
|
||||
|
||||
```bash
|
||||
cloudflared tunnel create budibase-tunnel
|
||||
```
|
||||
|
||||
Note the **tunnel ID** and **name** from the output—it is needed later.
|
||||
|
||||
#### 5.4 Configuring the Cloudflared Tunnel
|
||||
|
||||
Create the configuration for the tunnel to proxy traffic to Budibase:
|
||||
|
||||
```bash
|
||||
sudo mkdir -p /etc/cloudflared/
|
||||
sudo nano /etc/cloudflared/config.yml
|
||||
```
|
||||
|
||||
Add the following lines:
|
||||
|
||||
```yaml
|
||||
tunnel: budibase-tunnel
|
||||
credentials-file: /etc/cloudflared/<TUNNEL_ID>.json
|
||||
ingress:
|
||||
- hostname: your-subdomain.example.com
|
||||
service: http://localhost:10000
|
||||
- service: http_status:404
|
||||
```
|
||||
|
||||
Replace `<TUNNEL_ID>` with the tunnel ID from the previous step. Replace `your-subdomain.example.com` with your actual domain/subdomain.
|
||||
|
||||
#### 5.5 Start the Tunnel
|
||||
|
||||
```bash
|
||||
cloudflared tunnel run budibase-tunnel
|
||||
```
|
||||
|
||||
Optionally, install **cloudflared** as a service to ensure it runs automatically:
|
||||
|
||||
```bash
|
||||
sudo cloudflared service install
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### 6. Cloudflare SSL Configuration and HTTPS for Secure Traffic
|
||||
|
||||
#### 6.1 Enable HTTPS in Cloudflare Dashboard
|
||||
|
||||
1. Go to **SSL/TLS** in your Cloudflare account.
|
||||
2. Set the mode to **Full** or **Full (Strict)** (recommended for production).
|
||||
3. Enable **Always Use HTTPS** to make sure all traffic is routed over HTTPS.
|
||||
|
||||
#### 6.2 [Optional] Setup Origin SSL Certificates
|
||||
|
||||
To ensure secure traffic between Cloudflare and your server:
|
||||
|
||||
1. Go to **SSL/TLS** > **Origin Server**.
|
||||
2. Click **Create Certificate**.
|
||||
3. Copy the **certificate** and **private key** and install them on your server.
|
||||
|
||||
---
|
||||
|
||||
|
||||
### 7. Setting Up Network Proxies for Budibase
|
||||
|
||||
If your server is inside a restricted network where a proxy service is necessary, modify the environment settings to allow proxying for HTTP/HTTPS services:
|
||||
|
||||
- Modify Docker Compose as follows:
|
||||
|
||||
```yaml
|
||||
services:
|
||||
app-service:
|
||||
environment:
|
||||
GLOBAL_AGENT_HTTP_PROXY: http://your-proxy.net
|
||||
GLOBAL_AGENT_HTTPS_PROXY: https://your-proxy.net
|
||||
GLOBAL_AGENT_NO_PROXY: couchdb-service,minio-service,localhost
|
||||
```
|
||||
|
||||
Update **both** `app-service` and `worker-service` to ensure traffic is routed through your proxy server.
|
||||
|
||||
---
|
||||
|
||||
|
||||
### 8. Outbound Allow-list Configuration
|
||||
|
||||
Make sure your firewall or proxy settings allow outbound traffic to the following URLs for Budibase to function fully:
|
||||
|
||||
- `https://cdn.jsdelivr.net`
|
||||
- `https://fonts.gstatic.com`
|
||||
- `https://rsms.me`
|
||||
- `https://maxcdn.bootstrapcdn.com`
|
||||
- `https://prod-budi-templates.s3-eu-west-1.amazonaws.com`
|
||||
- `https://account.budibase.app` (for license check if required).
|
||||
|
||||
---
|
||||
|
||||
|
||||
### 9. Complete Deployment Instructions
|
||||
|
||||
Now that everything is set up, you can start the deployment:
|
||||
|
||||
1. **Start Docker Compose**:
|
||||
|
||||
```bash
|
||||
docker-compose up -d
|
||||
```
|
||||
|
||||
2. **Check Cloudflare Tunnel**:
|
||||
|
||||
```bash
|
||||
cloudflared tunnel info
|
||||
```
|
||||
|
||||
3. Visit your application in the browser at `https://your-subdomain.example.com`.
|
||||
|
||||
---
|
||||
### 10. Monitoring and Future Management
|
||||
|
||||
- **Monitor Docker Logs** to check the status of your Budibase services:
|
||||
|
||||
```bash
|
||||
docker-compose logs -f
|
||||
```
|
||||
|
||||
- **Check the Status of the Tunnel**:
|
||||
|
||||
```bash
|
||||
cloudflared tunnel info
|
||||
```
|
||||
|
||||
- **Stop or Restart the Budibase Deployment**:
|
||||
|
||||
```bash
|
||||
docker-compose down
|
||||
docker-compose up -d
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### 11. Helpful Commands and Troubleshooting
|
||||
|
||||
- **Restart Docker Containers**:
|
||||
|
||||
```bash
|
||||
docker-compose down && docker-compose up -d
|
||||
```
|
||||
|
||||
- **Edit Configuration**:
|
||||
|
||||
```bash
|
||||
nano docker-compose.yml
|
||||
nano .env
|
||||
```
|
||||
|
||||
- **Debugging Issues**:
|
||||
|
||||
Check Docker logs for issues:
|
||||
```bash
|
||||
docker-compose logs
|
||||
```
|
||||
|
||||
Check tunnel status and logs:
|
||||
```bash
|
||||
cloudflared tunnel info
|
||||
cloudflared tunnel logs
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
|
||||
Congratulations! Following these steps, Budibase should now be securely running and available to the public through your Cloudflare-proxied hostname.
|
@ -0,0 +1,80 @@
|
||||
# Cloudflare Tunnel Setup Guide for Localhost Applications
|
||||
|
||||
## Prerequisites
|
||||
|
||||
Install[ cloudflare tunnel ](https://developers.cloudflare.com/cloudflare-one/connections/connect-networks/get-started/)for your local machine.
|
||||
## Step 1: Create a Cloudflare Tunnel
|
||||
|
||||
1. Open a terminal and run:
|
||||
```
|
||||
cloudflared tunnel create <tunnel-name>
|
||||
```
|
||||
Replace `<tunnel-name>` with a name for your tunnel.
|
||||
|
||||
2. Note the Tunnel ID from the output. You'll need this later.
|
||||
|
||||
## Step 2: Create the Configuration File
|
||||
|
||||
1. Create a new YAML file:
|
||||
```
|
||||
nano ~/.cloudflared/config-<app-name>.yml
|
||||
```
|
||||
Replace `<app-name>` with your application name (e.g., plex, nextcloud).
|
||||
|
||||
2. Add the following content to the file:
|
||||
```yaml
|
||||
tunnel: <tunnel-id>
|
||||
credentials-file: /home/<your-username>/.cloudflared/<tunnel-id>.json
|
||||
ingress:
|
||||
- hostname: <app-subdomain>.<your-domain>.com
|
||||
service: http://localhost:<port>
|
||||
- service: http_status:404
|
||||
```
|
||||
Replace the placeholders:
|
||||
- `<tunnel-id>`: The Tunnel ID from step 1
|
||||
- `<your-username>`: Your system username
|
||||
- `<app-subdomain>`: The subdomain for your app (e.g., plex, nextcloud)
|
||||
- `<your-domain>`: Your actual domain name
|
||||
- `<port>`: The local port your application uses (e.g., 32400 for Plex)
|
||||
|
||||
3. Save and exit the editor (Ctrl+X, then Y, then Enter in nano).
|
||||
|
||||
## Step 3: Configure DNS
|
||||
|
||||
1. Log in to your Cloudflare dashboard.
|
||||
2. Go to the DNS settings for your domain.
|
||||
3. Add a CNAME record:
|
||||
- Type: CNAME
|
||||
- Name: `<app-subdomain>` (e.g., plex, nextcloud)
|
||||
- Target: `<tunnel-id>.cfargotunnel.com`
|
||||
- Proxy status: Proxied (orange cloud icon)
|
||||
|
||||
## Step 4: Start the Tunnel
|
||||
|
||||
1. Run the tunnel:
|
||||
```
|
||||
cloudflared tunnel --config ~/.cloudflared/config-<app-name>.yml run
|
||||
```
|
||||
|
||||
## Step 5: Configure Your Application (if necessary)
|
||||
|
||||
For some applications, you may need to update their settings:
|
||||
|
||||
1. Open your application's settings.
|
||||
2. Look for options like "Custom URLs", "Remote Access", or "Trusted Proxies".
|
||||
3. Add your Cloudflare Tunnel URL: `https://<app-subdomain>.<your-domain>.com`
|
||||
|
||||
## Step 6: Access Your Application
|
||||
|
||||
1. Open a web browser.
|
||||
2. Go to `https://<app-subdomain>.<your-domain>.com`
|
||||
|
||||
## Troubleshooting
|
||||
|
||||
If you encounter issues:
|
||||
1. Ensure your application is running and accessible at `http://localhost:<port>`
|
||||
2. Check the cloudflared logs for any error messages
|
||||
3. Verify your Cloudflare DNS settings
|
||||
4. Check your application's logs for any connection or proxy-related issues
|
||||
|
||||
Remember to replace all placeholders with your actual values when following these steps.
|
@ -0,0 +1,150 @@
|
||||
# Customizing Your Listmonk Subscription Form
|
||||
|
||||
This guide will walk you through customizing your Listmonk subscription form to create an eye-catching, user-friendly design that integrates well with your website.
|
||||
|
||||
Feed this guide to any Ai chatbot and request that they update the code to match your own site details.
|
||||
|
||||
## Overview of Changes
|
||||
|
||||
We'll be making the following improvements:
|
||||
1. Creating a full-width form with a bright background
|
||||
2. Adjusting the layout for better visual flow
|
||||
3. Improving spacing and alignment of form elements
|
||||
4. Ensuring mobile responsiveness
|
||||
|
||||
## Step 1: Customizing the CSS
|
||||
|
||||
First, let's modify the CSS for your Listmonk form. Access your Listmonk admin panel and navigate to `Settings > Appearance`. In the "Custom CSS" text area, paste the following code:
|
||||
|
||||
```css
|
||||
.listmonk-form {
|
||||
background-color: #ffc107 !important;
|
||||
color: #1c1f26 !important;
|
||||
font-family: Arial, sans-serif !important;
|
||||
padding: 20px !important;
|
||||
width: 100% !important;
|
||||
box-sizing: border-box !important;
|
||||
margin: 20px 0 !important;
|
||||
display: flex !important;
|
||||
flex-wrap: wrap !important;
|
||||
align-items: center !important;
|
||||
gap: 10px !important;
|
||||
}
|
||||
|
||||
.listmonk-form h3 {
|
||||
color: #1c1f26 !important;
|
||||
font-size: 22px !important;
|
||||
margin: 0 0 15px 0 !important;
|
||||
font-weight: bold !important;
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
.listmonk-form input[type="email"],
|
||||
.listmonk-form input[type="text"] {
|
||||
background-color: #fff !important;
|
||||
border: 1px solid #e0a800 !important;
|
||||
color: #1c1f26 !important;
|
||||
padding: 10px !important;
|
||||
border-radius: 4px !important;
|
||||
font-size: 14px !important;
|
||||
flex: 1 !important;
|
||||
min-width: 150px !important;
|
||||
max-width: 250px !important;
|
||||
}
|
||||
|
||||
.listmonk-form input[type="submit"] {
|
||||
background-color: #1c1f26 !important;
|
||||
color: #fff !important;
|
||||
padding: 10px 20px !important;
|
||||
border: none !important;
|
||||
border-radius: 4px !important;
|
||||
cursor: pointer !important;
|
||||
font-weight: bold !important;
|
||||
font-size: 16px !important;
|
||||
transition: background-color 0.3s !important;
|
||||
flex: 0 0 auto !important;
|
||||
}
|
||||
|
||||
.listmonk-form input[type="submit"]:hover {
|
||||
background-color: #2c3038 !important;
|
||||
}
|
||||
|
||||
.listmonk-form label {
|
||||
color: #1c1f26 !important;
|
||||
font-weight: normal !important;
|
||||
font-size: 14px !important;
|
||||
display: inline-flex !important;
|
||||
align-items: center !important;
|
||||
margin-right: 15px !important;
|
||||
flex: 1 1 100% !important;
|
||||
}
|
||||
|
||||
.listmonk-form input[type="checkbox"] {
|
||||
margin-right: 5px !important;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.listmonk-form {
|
||||
flex-direction: column !important;
|
||||
align-items: stretch !important;
|
||||
}
|
||||
|
||||
.listmonk-form input[type="email"],
|
||||
.listmonk-form input[type="text"],
|
||||
.listmonk-form input[type="submit"] {
|
||||
width: 100% !important;
|
||||
max-width: none !important;
|
||||
margin-right: 0 !important;
|
||||
margin-bottom: 10px !important;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## Step 2: Adjusting the HTML Structure
|
||||
|
||||
To ensure the form works correctly with the new CSS, update your form's HTML structure. If you're embedding the form on your website, use the following structure:
|
||||
|
||||
```html
|
||||
<form method="post" action="https://your-listmonk-url.com/subscription/form" class="listmonk-form">
|
||||
<h3>Subscribe for Updates</h3>
|
||||
<input type="hidden" name="nonce" />
|
||||
<input type="email" name="email" required placeholder="E-mail" />
|
||||
<input type="text" name="name" placeholder="Name (optional)" />
|
||||
<label>
|
||||
<input type="checkbox" name="l" checked value="your-list-id-here" />
|
||||
Periodic Updates (~1 Weekly)
|
||||
</label>
|
||||
<input type="submit" value="Subscribe" />
|
||||
</form>
|
||||
```
|
||||
|
||||
Replace `https://your-listmonk-url.com` with your actual Listmonk URL, and `your-list-id-here` with the ID of the list you want subscribers to join.
|
||||
|
||||
## Step 3: Customizing the Form (Optional)
|
||||
|
||||
You can further customize the form by adjusting the following:
|
||||
|
||||
- Change the header text by modifying the content of the `<h3>` tag.
|
||||
- Adjust placeholder text in the input fields.
|
||||
- Modify the checkbox label to match your update frequency.
|
||||
- Change the submit button text by altering the `value` attribute.
|
||||
|
||||
## Step 4: Testing
|
||||
|
||||
After applying these changes:
|
||||
|
||||
1. View your Listmonk public subscription page to ensure the styling is applied correctly.
|
||||
2. If embedding the form, test it on your website to verify it integrates well with your design.
|
||||
3. Test on various devices to confirm mobile responsiveness.
|
||||
|
||||
## Troubleshooting
|
||||
|
||||
- If styles aren't applying, check that the CSS is saved correctly in Listmonk settings.
|
||||
- For embedded forms, ensure the form has the `listmonk-form` class.
|
||||
- Clear your browser cache if you don't see changes immediately.
|
||||
|
||||
## Conclusion
|
||||
|
||||
You should now have a customized, visually appealing Listmonk subscription form. Remember, you can always adjust the colors, sizes, and layout in the CSS to better match your website's design.
|
||||
|
||||
For more advanced customizations or if you encounter any issues, refer to the Listmonk documentation or reach out to the Listmonk community for support.
|
@ -0,0 +1,90 @@
|
||||
---
|
||||
title: How to Add to the Repo
|
||||
publish: true
|
||||
---
|
||||
# How do I add to this repo?
|
||||
First, you are going to need to know someone who is already on the repo. For now the system is 100% referral based. Anyone who has been added to the repo should understand the process of adding more people to the repo.
|
||||
|
||||
If you don't know anyone who is already on the repo, you can [email the admin](mailto:admin@thebunkerops.ca). Requests are reviewed every other day.
|
||||
|
||||
Don't wanna be beholden to some admin somewhere? Well you can get started making your own repo. It takes only a few steps, and around $5, to set one up.
|
||||
## [Click here to go to How to Replicate this Repo](How%20to%20Replicate%20this%20Repo.md)
|
||||
|
||||
You might take one look at this guide and think to yourself:
|
||||
## Wow that's a lot of steps 😮
|
||||
That is true! Getting onto the repo does require more then one click. That is by design. In addition to contributing to the repo, by learning how to use and operate these programs, you will also gain the skills of:
|
||||
|
||||
- Writing notes in a universal and open source manner, and
|
||||
- Syncing files across devices without the need for a cloud provider.
|
||||
|
||||
By doing this **you can potentially save thousands of dollars** in subscription costs over your lifetime. Want to save even more? Check out the [The Stack](../Free%20Office%20Software%20Stack%20🤯/The%20Stack.md)
|
||||
## I want to be on this repo and I have a referral
|
||||
Cool! Your referral can walk you through getting online. If they are busy right now and you want to get started:
|
||||
### Mac, Windows, Linux, and Android Install
|
||||
#### Install [Obsidian](https://obsidian.md/)
|
||||
> Obsidian is the private and flexible writing app that adapts to the way you think.
|
||||
|
||||
The first software you need to install on your device is [Obsidian](https://obsidian.md/download). We recommend Obsidian for its ease of use, strong community, and functionality. The core system uses Obsidian, so if you are contributing using it, your contributions should always load according the [Syntax, Embedding, HTML, and Other Code](Syntax,%20Embedding,%20HTML,%20and%20Other%20Code.md) guide.
|
||||
|
||||
Theoretically we could use any markdown editor however we cannot be certain that your files will be properly converted by the website builder.
|
||||
#### Install [Syncthing](https://syncthing.net/)
|
||||
> Syncthing is a **continuous file synchronization** program. It synchronizes files between two or more computers in real time, safely protected from prying eyes. Your data is your data alone and you deserve to choose where it is stored, whether it is shared with some third party, and how it’s transmitted over the internet.
|
||||
|
||||
Syncthing is incredible. Straight up baller software. Used correctly, it can really change the way that a person stores data.
|
||||
|
||||
Again, theoretically, we could use any peer-to-peer transfer agent. We are currently locked to syncthing simply because it is what the core machine is using. Likely we will need a different solution at some point.
|
||||
#### Configure
|
||||
##### "I am a new contributor and want to set up my own environment"
|
||||
|
||||
**Option 1 - Create Vault**
|
||||
|
||||
Create a new vault inside Obsidian. Note the directory where your vault is stored. Once a location is selected, you will not be able to move it without causing a headache.
|
||||
|
||||
Open your vault and add some notes.
|
||||
|
||||
**Option 2 - Load a Folder.**
|
||||
|
||||
If you already have a folder with markdown files and content, you can load that folder into Obsidian to be shared through the repo.
|
||||
|
||||
Open obsidian and [create a vault from that folder](https://help.obsidian.md/Files+and+folders/Manage+vaults).
|
||||
|
||||

|
||||
|
||||
**Sync Folder** - Open up syncthing and [add the folder or vault you created](https://docs.syncthing.net/intro/getting-started.html). Make sure to disable file versioning.
|
||||
|
||||

|
||||
|
||||

|
||||
|
||||
**Request Access**
|
||||
Request your referrals device id and add that device.
|
||||
|
||||
If you are in person, syncthing is capable of connecting to nearby devices or you can add other accounts using the Show ID Function.
|
||||
|
||||
You can send your ID over another service. **Be Advised** - do not share your id with anyone other then trusted sources.
|
||||
|
||||

|
||||
|
||||
**Share your folder**
|
||||
Now you want to share your folder with your referral. Do so inside your folders settings.
|
||||
|
||||

|
||||
|
||||
**For Referral**
|
||||
When you request comes in, add the folder to a sub directory already in your vault. Syncthing will automatically create a new folder if it doesn't already exist in the directory.
|
||||
##### "I am already a contributor and want to add someone to my repo as a sub"
|
||||
Sweet! You already know the drill.
|
||||
In your existing Obsidian vault, create a new folder.
|
||||
Add that folder to Syncthing.
|
||||
Share that folder using your respective ID.
|
||||
##### "I am already a contributor and want to share my repo"
|
||||
Baller! You know the drill.
|
||||
Locate your vault folder.
|
||||
Share it using Syncthing.
|
||||
### What about iPhone?
|
||||
|
||||
So far [Mobious Sync](https://mobiussync.com/) is the best option. Mobious is a clone for Syncthing in iPhone and iPad however the sync is not constant. This means that users have to "push" their update or wait for sync to trigger. Other issues include issues syncing top level folders.
|
||||
|
||||
This one is more tricky because iPhone is a [walled garden](https://slate.com/technology/2021/06/apple-wwdc-ios15-new-features-walled-garden.html). There are some methods however we are still working through what the best possible solution is. We have tried some configurations however nothing works to satisfaction at this time.
|
||||
|
||||
If you have a potential solution, [please email us. ](mailto:admin@thebunkerops.ca)
|
@ -0,0 +1,142 @@
|
||||
---
|
||||
title: "How to Replicate this Repo"
|
||||
publish: true
|
||||
---
|
||||
## How do I replicate this Repo?
|
||||
|
||||
This is going to be a quick and dirty explanation on how to host a public website on your own domain that functions exactly like this one. The process of hosting this site is new to our organization, so by publishing this 'work-in-progress' manual, we hope that solutions to bugs are learned in real time and fixed accordingly.
|
||||
|
||||
Reasons why you should consider hosting your own website like this one:
|
||||
|
||||
- It is the cheapest method we have found to host a website (under $10 a year),
|
||||
- The site is built on text files, which are small, lightweight, and easy to update,
|
||||
- All of the files of this site are hosted locally however are editable remotely & collaboratively, including from mobile devices; and
|
||||
- The simplicity of this site generator allows for fast iteration and updates.
|
||||
## Pre-Requisites
|
||||
This site is being served on a Ubuntu machine with mid-range consumer hardware. You could host this site on almost any hardware, however, this guide walks through a install on a Ubuntu system. If you need to, you can install [Ubuntu OS](https://ubuntu.com/tutorials/install-ubuntu-desktop) as your operating system however this process should be replaceable on other operating systems.
|
||||
## TLDR
|
||||
Don't wanna read this whole repo? Here are your steps to do this quickly:
|
||||
|
||||
- Create [Cloudflare](https://www.cloudflare.com/) account and purchase a domain (some domains available for under $5).
|
||||
- [Download Obsidian](https://github.com/obsidianmd/obsidian-releases/releases/download/v1.6.7/Obsidian-1.6.7.AppImage).
|
||||
- Install [Publisher for MkDocs ](https://mkdocs-publisher.github.io/in) in a virtual environment and a directory of your choice.
|
||||
- Create Obsidian Vault inside directory and add knowledge.
|
||||
- Serve Website on localhost.
|
||||
- [Create CloudFlared Tunnel & DNS Settings](https://developers.cloudflare.com/cloudflare-one/connections/connect-networks/get-started/create-local-tunnel/).
|
||||
- Set Access Settings.
|
||||
- Enjoy!
|
||||
# Quick Setup
|
||||
Assuming you already have set up a cloudflare account and purchased a domain
|
||||
## Build Project Folder
|
||||
Open terminal (ctrl.alt.t)
|
||||
Tweak the following command with your own user name and directory
|
||||
```
|
||||
cd /home/{your_username}/{your_website_directory}
|
||||
python3 -m venv venv
|
||||
source venv/bin/activate
|
||||
pip install mkdocs-publisher
|
||||
```
|
||||
## Create Site Config File & Build Site
|
||||
Create a mkdocs.yml in the directory with the following command:
|
||||
```
|
||||
nano mkdocs.yml
|
||||
```
|
||||
|
||||
Paste (ctrl.shift.v) the following into the file
|
||||
```
|
||||
site_name: my_website
|
||||
theme:
|
||||
name: material
|
||||
```
|
||||
Save the file (ctrl.x - y - enter)
|
||||
|
||||
This is the most basic mkdocs site that you could serve. There are extensive configurations that you could add.
|
||||
## Create a docs folder
|
||||
```
|
||||
mkdir -p docs
|
||||
```
|
||||
## Build the site
|
||||
```
|
||||
mkdocs build
|
||||
```
|
||||
If successful, your directory will have new folders (site, docs) populated in your project directory
|
||||
## Create a Obsidian Vault
|
||||
Create a vault in Obsidian using the docs folder in your directory. Instructions on [how to choose a folder for a vault here. ](https://help.obsidian.md/Files+and+folders/Manage+vaults)
|
||||
- Create a few test notes inside Obsidian
|
||||
## Serve the Site
|
||||
Edit the following command to serve your site
|
||||
```
|
||||
cd /home/path/to/your/website/project
|
||||
source venv/bin/activate
|
||||
mkdocs build
|
||||
mkdocs serve
|
||||
```
|
||||
|
||||
Visit [http://127.0.0.1:8000/](http://127.0.0.1:8000/) to confirm site build
|
||||
|
||||
**Note:** If the default port (8000) is already in use, update command -
|
||||
```
|
||||
mkdocs serve --dev-addr localhost:{insert a port number}
|
||||
```
|
||||
## Create cloudflared tunnel
|
||||
|
||||
Follow instructions to install [cloudflared](https://developers.cloudflare.com/cloudflare-one/connections/connect-networks/get-started/create-local-tunnel/)
|
||||
|
||||
Create a Cloudflared Tunnel
|
||||
```
|
||||
cloudflared tunnel create <insert-website-name>
|
||||
```
|
||||
Note the Tunnel ID from the output.
|
||||
|
||||
Create a config file for your tunnel
|
||||
```
|
||||
nano ~/.cloudflared/config-<wesbite-name>.yml
|
||||
```
|
||||
|
||||
Paste (ctrl.shift.v) the following content to the config file. **Make sure to update the tunnel id, your username, the tunnel id again, your hostname, and the port number.**
|
||||
```
|
||||
tunnel: <tunnel-id>
|
||||
credentials-file: /home/<your-username>/.cloudflared/<tunnel-id>.json
|
||||
ingress:
|
||||
- hostname: <app-subdomain>.<your-domain>.com
|
||||
service: http://localhost:<port>
|
||||
- service: http_status:404
|
||||
```
|
||||
Save and exit the editor (Ctrl+X, then Y, then Enter in nano).
|
||||
## Configure Cloudflare DNS
|
||||
Configure DNS settings in Cloudflare.
|
||||
|
||||
**Protip** - the search bar is excellent way to get straight to the dns records of your domain.
|
||||
|
||||
1. Log in to your Cloudflare dashboard.
|
||||
2. Go to the DNS settings for your domain.
|
||||
3. Add a CNAME record:
|
||||
- Type: CNAME
|
||||
- Name: `<app-subdomain>` (e.g., plex, nextcloud)
|
||||
- Target: `<tunnel-id>.cfargotunnel.com`
|
||||
- Proxy status: Proxied (orange cloud icon)
|
||||
|
||||
## Access Settings
|
||||
Inside of Cloudflare you can set access protocols through Zero Trust. This allows you to build a walled garden of information. If you do decided to create a walled garden of info, be aware that we cannot vouch for the security of these systems.
|
||||
## Remote Editing
|
||||
Combining Syncthing and a remote device allows you edit your site live from anywhere, including your phone. First install Obsidian an Syncthing on your remote device. Share your vault folder across the devices. You can now edit your site live from anywhere! 🤠🤔
|
||||
# More Info - Obsidian, Markdown, Cloudflare, mkdocs, etc.
|
||||
## [Obsidian ](https://obsidian.md/)
|
||||
Obsidian is a markdown text editor that is free for personal use and limited commercial use. It is not a open-source software however the code base is inspect-able and the files it creates are open-source and can be ported to any other markdown editor. We recommend it because of its speed, community, and effectiveness.
|
||||
|
||||
**Note:** Consider using [Obsidian Syn](https://obsidian.md/pricing)c; a $6 a month hosting service that is effortless and supports this incredible tool.
|
||||
## [Markdown ](https://www.markdownguide.org/basic-syntax/)
|
||||
Markdown is a simple and easy-to-use markup language you can use to format virtually any document. It is the backbone of almost all text-editing software that you use today.
|
||||
|
||||
We recommend that you learn the basics of markdown syntax (although with obsidian you are not forced to) because it is a great introduction to generating text that is free from license.
|
||||
## [Cloudflare ](https://www.cloudflare.com/what-is-cloudflare/)
|
||||
Cloudflare is a web services provider that has a generous free tier and affordable domain registration. We used them for this project because they provide authentication systems for your website, if you so choose to enable them. If your site scales, it can scale almost infinitely on this service. That said, we hold no corporate loyalties, and are curious what suggestions readers may have for stronger dns services.
|
||||
## [mkdocs](https://www.mkdocs.org/)
|
||||
Software engineers have been using this system to publish documentation for their projects for some time. As such, the system is robust, and allows for a incredible amount of customization. It is also simple and easy to get started with.
|
||||
## [Budibase](https://docs.budibase.com/docs/what-is-budibase) - Form & Webapp Builder
|
||||
We are just now exploring buidbase and so far the system is impressive and required minimal set-up to a working live state. Highly recommend for building user forms in a no-code enviroment.
|
||||
# Want Help?
|
||||
Bnkops is happy to help. Email [admin@thebunkerops.ca ](mailto:admin@thebunkerops.ca) and we would be thrilled to chat.
|
||||
|
||||
Don't want to talk to a human? Chat with Daisy through email - [daisy.does.email@gmail.com](mailto:daisy.does.email.com)
|
||||
|
After Width: | Height: | Size: 23 KiB |
After Width: | Height: | Size: 4.0 KiB |
After Width: | Height: | Size: 12 KiB |
After Width: | Height: | Size: 7.3 KiB |
After Width: | Height: | Size: 26 KiB |
After Width: | Height: | Size: 7.7 KiB |
After Width: | Height: | Size: 188 KiB |
After Width: | Height: | Size: 271 KiB |
After Width: | Height: | Size: 36 KiB |
After Width: | Height: | Size: 29 KiB |
After Width: | Height: | Size: 4.6 KiB |
After Width: | Height: | Size: 7.6 KiB |
@ -0,0 +1,26 @@
|
||||
## Simple Targeter is a open source web-app that facilitates a email campaign pointed at a single inbox.
|
||||
|
||||
The following documentation is for the bnkops app 'Simple Targeter'.
|
||||
|
||||
[Simple Target Manual](Simple%20Target%20Manual.md)
|
||||
|
||||
[Demonstration Page](https://budibase.bnkops.com/app/simple-target-latest#/public)
|
||||
|
||||
Embedded demonstration at bottom of this page.
|
||||
|
||||
This app can be deployed for free. The bnkops server buildout available here: [The Bunker Ops Server Build-Out](../Free%20Office%20Software%20Stack%20🤯/The%20Bunker%20Ops%20Server%20Build-Out.md)
|
||||
|
||||
Want to build apps like this for free? This was built using Budibase:
|
||||
[Budibase - Form Builder & Database](Budibase%20-%20Form%20Builder%20&%20Database.md)
|
||||
|
||||
Code for Simple Targeter is available on request:
|
||||
[Email the Bunker Admin to get started.](mailto:admin@thebunkerops.ca)
|
||||
|
||||
The app uses markdown as its document formatting language:
|
||||
[Simple Markdown Manual](Simple%20Markdown%20Manual.md)
|
||||
|
||||
Learn how to host a website or repo for ~$10 a year: [How to Replicate this Repo](How%20to%20Replicate%20this%20Repo.md)
|
||||
|
||||
Why are we publishing all this? Learn more about the theory here: [If you do politics who is reading your secrets - why you should de-corp your software stack](../thatreallyblondehuman/Thoughts%20🤔/If%20you%20do%20politics%20who%20is%20reading%20your%20secrets%20-%20why%20you%20should%20de-corp%20your%20software%20stack.md)
|
||||
|
||||
<iframe width="800" height="2000" frameborder="0" allow="clipboard-write;camera;geolocation;fullscreen" src="https://budibase.bnkops.com/embed/simple-target-latest"></iframe>
|
BIN
mkdocs/docs/archive/repo.archive/Website Manuals 🤓/example.gif
Normal file
After Width: | Height: | Size: 37 MiB |
BIN
mkdocs/docs/archive/repo.archive/Website Manuals 🤓/example.png
Normal file
After Width: | Height: | Size: 137 KiB |
BIN
mkdocs/docs/archive/repo.archive/Website Manuals 🤓/example1.png
Normal file
After Width: | Height: | Size: 11 KiB |
BIN
mkdocs/docs/archive/repo.archive/Website Manuals 🤓/image.png
Normal file
After Width: | Height: | Size: 43 KiB |
@ -0,0 +1,6 @@
|
||||
---
|
||||
title: "note_test"
|
||||
publish: true
|
||||
---
|
||||
Congrats! You found the test note. Go back to the [Syntax, Embedding, HTML, and Other Code](Syntax,%20Embedding,%20HTML,%20and%20Other%20Code.md) page.
|
||||
# note_test
|
After Width: | Height: | Size: 2.1 MiB |
After Width: | Height: | Size: 1.3 MiB |
After Width: | Height: | Size: 1.3 MiB |
After Width: | Height: | Size: 1.5 MiB |
After Width: | Height: | Size: 1.5 MiB |
After Width: | Height: | Size: 1.9 MiB |
After Width: | Height: | Size: 2.3 MiB |
After Width: | Height: | Size: 1.5 MiB |
After Width: | Height: | Size: 1.7 MiB |
After Width: | Height: | Size: 2.0 MiB |
After Width: | Height: | Size: 2.0 MiB |
After Width: | Height: | Size: 2.6 MiB |
After Width: | Height: | Size: 2.0 MiB |
After Width: | Height: | Size: 1.9 MiB |
After Width: | Height: | Size: 1.9 MiB |
After Width: | Height: | Size: 2.2 MiB |
After Width: | Height: | Size: 2.2 MiB |
After Width: | Height: | Size: 1.8 MiB |
After Width: | Height: | Size: 1.8 MiB |
After Width: | Height: | Size: 1.7 MiB |
After Width: | Height: | Size: 1.7 MiB |
After Width: | Height: | Size: 2.3 MiB |
After Width: | Height: | Size: 1.2 MiB |
After Width: | Height: | Size: 2.3 MiB |
After Width: | Height: | Size: 1.9 MiB |
After Width: | Height: | Size: 2.1 MiB |
After Width: | Height: | Size: 2.1 MiB |
After Width: | Height: | Size: 2.4 MiB |
After Width: | Height: | Size: 2.4 MiB |
After Width: | Height: | Size: 1.7 MiB |
After Width: | Height: | Size: 1.7 MiB |
After Width: | Height: | Size: 1.7 MiB |
After Width: | Height: | Size: 2.4 MiB |
After Width: | Height: | Size: 1.9 MiB |
After Width: | Height: | Size: 2.4 MiB |
After Width: | Height: | Size: 2.4 MiB |
After Width: | Height: | Size: 2.1 MiB |
After Width: | Height: | Size: 2.1 MiB |
After Width: | Height: | Size: 2.1 MiB |
After Width: | Height: | Size: 1.6 MiB |
After Width: | Height: | Size: 2.3 MiB |
After Width: | Height: | Size: 1.8 MiB |
After Width: | Height: | Size: 1.6 MiB |
After Width: | Height: | Size: 1.8 MiB |
After Width: | Height: | Size: 2.0 MiB |
After Width: | Height: | Size: 858 KiB |