bnkops.changemaker/mkdocs/docs/archive/repo.archive/Website Manuals 🤓/How to Replicate this Repo.md

---
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)