Updated styling and YAHOO first blog :3 :3 :3

Live
Johannes Hendrik Gerard van der Weide 2023-10-27 11:43:18 +02:00
parent 18fdc1ce99
commit 505fee778f
11 changed files with 381 additions and 195 deletions

View File

@ -15,10 +15,8 @@ left:
- text: "Blog Posts"
menu:
- text: "Example Project 1"
href: ./example_project1.html
- text: "Example Project 2"
href: ./example_project2.html
- text: "owncast.nix"
href: ./owncast.nix.html
right:
- text: "Source"

View File

@ -2,7 +2,7 @@ name: "HermitCollective Blogs"
output_dir: 'docs'
output:
html_document:
theme: darkly
css: main.css
highlight: zenburn
toc: true
toc_depth: 2

View File

@ -17,7 +17,7 @@
<script src="site_libs/header-attrs-2.25/header-attrs.js"></script>
<script src="site_libs/jquery-3.6.0/jquery-3.6.0.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link href="site_libs/bootstrap-3.3.5/css/darkly.min.css" rel="stylesheet" />
<link href="site_libs/bootstrap-3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<script src="site_libs/bootstrap-3.3.5/js/bootstrap.min.js"></script>
<script src="site_libs/bootstrap-3.3.5/shim/html5shiv.min.js"></script>
<script src="site_libs/bootstrap-3.3.5/shim/respond.min.js"></script>
@ -151,6 +151,7 @@ code span.wa { color: #7f9f7f; font-weight: bold; } /* Warning */
<link rel="stylesheet" href="main.css" type="text/css" />
@ -443,10 +444,7 @@ div.tocify {
</a>
<ul class="dropdown-menu" role="menu">
<li>
<a href="./example_project1.html">Example Project 1</a>
</li>
<li>
<a href="./example_project2.html">Example Project 2</a>
<a href="./owncast.nix.html">owncast.nix</a>
</li>
</ul>
</li>

Binary file not shown.

Before

Width:  |  Height:  |  Size: 16 KiB

View File

@ -16,7 +16,7 @@
<script src="site_libs/header-attrs-2.25/header-attrs.js"></script>
<script src="site_libs/jquery-3.6.0/jquery-3.6.0.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link href="site_libs/bootstrap-3.3.5/css/darkly.min.css" rel="stylesheet" />
<link href="site_libs/bootstrap-3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<script src="site_libs/bootstrap-3.3.5/js/bootstrap.min.js"></script>
<script src="site_libs/bootstrap-3.3.5/shim/html5shiv.min.js"></script>
<script src="site_libs/bootstrap-3.3.5/shim/respond.min.js"></script>
@ -46,6 +46,7 @@
<link rel="stylesheet" href="main.css" type="text/css" />
@ -259,10 +260,7 @@ $(document).ready(function () {
</a>
<ul class="dropdown-menu" role="menu">
<li>
<a href="./example_project1.html">Example Project 1</a>
</li>
<li>
<a href="./example_project2.html">Example Project 2</a>
<a href="./owncast.nix.html">owncast.nix</a>
</li>
</ul>
</li>
@ -285,18 +283,19 @@ $(document).ready(function () {
</div>
<p><strong>Welcome to my website!</strong></p>
<div id="this-is-still-very-much-work-in-progress"
class="section level1">
<h1>This is still very much work in progress</h1>
<p>Click the links in the menu above to look around.</p>
<p><strong>Welcome to blog archive and directory of <a
href="https://hermitcollective.net/">HermitCollective</a>!</strong></p>
<div id="info" class="section level1">
<h1>Info</h1>
<p>Blogs can be found under the “Blog Posts” tab.<br />
Under the “HermitCollective” tab you will find all of HermitCollectives
services.</p>
</div>
<div id="notes" class="section level1">
<h1>Notes</h1>
<p>This website is a collection of regular (R)Markdown document, so you
can use all the usual formatting.</p>
<p>If you are new to R Markdown, you can learn more about it <a
href="https://rmarkdown.rstudio.com/">on the R Markdown website</a>.</p>
<p>Every blog will have a link the the authors website and a link to a
<a href="https://en.wikipedia.org/wiki/Fediverse">fediverse</a> post
where you can comment on the blog.</p>
</div>

68
docs/main.css Normal file
View File

@ -0,0 +1,68 @@
body {
background: #1E1E1E;
color: white;
}
.bg {
background: #242424;
}
h1 {
background: #1E1E1E;
color: white;
}
dive {
background: #1E1E1E;
color: white;
}
a:link {
color: #b30000;
}
a:hover {
color: #EFEEEE;
}
.dropdown-menu {
position: absolute;
top: 100%;
left: 0;
z-index: 1000;
display: none;
float: left;
min-width: 160px;
padding: 5px 0;
margin: 2px 0 0;
margin-top: 2px;
list-style: none;
font-size: 15px;
text-align: left;
background-color: #242424;
}
.dropdown-menu > li > a {
display: block;
padding: 3px 20px;
clear: both;
font-weight: normal;
line-height: 1.42857143;
color: #EFEEEE;
white-space: nowrap;
}
.list-group-item.active, .list-group-item.active:hover, .list-group-item.active:focus {
z-index: 2;
color: #b30000;
background-color: #242424;
border-color: #242424;
}
.list-group-item:last-child {
margin-bottom: 0;
border-bottom-right-radius: 4px;
border-bottom-left-radius: 4px;
background-color: #242424;
}

View File

@ -9,15 +9,16 @@
<meta http-equiv="X-UA-Compatible" content="IE=EDGE" />
<meta name="author" content="Hertog" />
<meta name="date" content="2023-10-26" />
<meta name="date" content="2023-10-27" />
<title>Example Project 2</title>
<title>Setting Up Owncast with NixOS</title>
<script src="site_libs/header-attrs-2.25/header-attrs.js"></script>
<script src="site_libs/jquery-3.6.0/jquery-3.6.0.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link href="site_libs/bootstrap-3.3.5/css/darkly.min.css" rel="stylesheet" />
<link href="site_libs/bootstrap-3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<script src="site_libs/bootstrap-3.3.5/js/bootstrap.min.js"></script>
<script src="site_libs/bootstrap-3.3.5/shim/html5shiv.min.js"></script>
<script src="site_libs/bootstrap-3.3.5/shim/respond.min.js"></script>
@ -46,111 +47,11 @@
<style type="text/css">
code {
white-space: pre;
}
.sourceCode {
overflow: visible;
}
</style>
<style type="text/css" data-origin="pandoc">
pre > code.sourceCode { white-space: pre; position: relative; }
pre > code.sourceCode > span { display: inline-block; line-height: 1.25; }
pre > code.sourceCode > span:empty { height: 1.2em; }
.sourceCode { overflow: visible; }
code.sourceCode > span { color: inherit; text-decoration: inherit; }
div.sourceCode { margin: 1em 0; }
pre.sourceCode { margin: 0; }
@media screen {
div.sourceCode { overflow: auto; }
}
@media print {
pre > code.sourceCode { white-space: pre-wrap; }
pre > code.sourceCode > span { text-indent: -5em; padding-left: 5em; }
}
pre.numberSource code
{ counter-reset: source-line 0; }
pre.numberSource code > span
{ position: relative; left: -4em; counter-increment: source-line; }
pre.numberSource code > span > a:first-child::before
{ content: counter(source-line);
position: relative; left: -1em; text-align: right; vertical-align: baseline;
border: none; display: inline-block;
-webkit-touch-callout: none; -webkit-user-select: none;
-khtml-user-select: none; -moz-user-select: none;
-ms-user-select: none; user-select: none;
padding: 0 4px; width: 4em;
}
pre.numberSource { margin-left: 3em; padding-left: 4px; }
div.sourceCode
{ color: #cccccc; background-color: #303030; }
@media screen {
pre > code.sourceCode > span > a:first-child::before { text-decoration: underline; }
}
code span.al { color: #ffcfaf; } /* Alert */
code span.an { color: #7f9f7f; font-weight: bold; } /* Annotation */
code span.at { } /* Attribute */
code span.bn { color: #dca3a3; } /* BaseN */
code span.bu { } /* BuiltIn */
code span.cf { color: #f0dfaf; } /* ControlFlow */
code span.ch { color: #dca3a3; } /* Char */
code span.cn { color: #dca3a3; font-weight: bold; } /* Constant */
code span.co { color: #7f9f7f; } /* Comment */
code span.cv { color: #7f9f7f; font-weight: bold; } /* CommentVar */
code span.do { color: #7f9f7f; } /* Documentation */
code span.dt { color: #dfdfbf; } /* DataType */
code span.dv { color: #dcdccc; } /* DecVal */
code span.er { color: #c3bf9f; } /* Error */
code span.ex { } /* Extension */
code span.fl { color: #c0bed1; } /* Float */
code span.fu { color: #efef8f; } /* Function */
code span.im { } /* Import */
code span.in { color: #7f9f7f; font-weight: bold; } /* Information */
code span.kw { color: #f0dfaf; } /* Keyword */
code span.op { color: #f0efd0; } /* Operator */
code span.ot { color: #efef8f; } /* Other */
code span.pp { color: #ffcfaf; font-weight: bold; } /* Preprocessor */
code span.sc { color: #dca3a3; } /* SpecialChar */
code span.ss { color: #cc9393; } /* SpecialString */
code span.st { color: #cc9393; } /* String */
code span.va { } /* Variable */
code span.vs { color: #cc9393; } /* VerbatimString */
code span.wa { color: #7f9f7f; font-weight: bold; } /* Warning */
</style>
<script>
// apply pandoc div.sourceCode style to pre.sourceCode instead
(function() {
var sheets = document.styleSheets;
for (var i = 0; i < sheets.length; i++) {
if (sheets[i].ownerNode.dataset["origin"] !== "pandoc") continue;
try { var rules = sheets[i].cssRules; } catch (e) { continue; }
var j = 0;
while (j < rules.length) {
var rule = rules[j];
// check if there is a div.sourceCode rule
if (rule.type !== rule.STYLE_RULE || rule.selectorText !== "div.sourceCode") {
j++;
continue;
}
var style = rule.style.cssText;
// check if color or background-color is set
if (rule.style.color === '' && rule.style.backgroundColor === '') {
j++;
continue;
}
// replace div.sourceCode by a pre.sourceCode rule
sheets[i].deleteRule(j);
sheets[i].insertRule('pre.sourceCode{' + style + '}', j);
}
}
})();
</script>
<link rel="stylesheet" href="main.css" type="text/css" />
@ -443,10 +344,7 @@ div.tocify {
</a>
<ul class="dropdown-menu" role="menu">
<li>
<a href="./example_project1.html">Example Project 1</a>
</li>
<li>
<a href="./example_project2.html">Example Project 2</a>
<a href="./owncast.nix.html">owncast.nix</a>
</li>
</ul>
</li>
@ -464,38 +362,129 @@ div.tocify {
<h1 class="title toc-ignore">Example Project 2</h1>
<h4 class="date">2023-10-26</h4>
<h1 class="title toc-ignore">Setting Up Owncast with NixOS</h1>
<h4 class="author"><a
href="https://hertog.hermitcollective.net">Hertog</a></h4>
<h4 class="date">2023-10-27</h4>
</div>
<div id="r-markdown" class="section level2">
<h2>R Markdown</h2>
<p>This is an R Markdown document. Markdown is a simple formatting
syntax for authoring HTML, PDF, and MS Word documents. For more details
on using R Markdown see <a href="http://rmarkdown.rstudio.com"
class="uri">http://rmarkdown.rstudio.com</a>.</p>
<p>When you click the <strong>Knit</strong> button a document will be
generated that includes both content as well as the output of any
embedded R code chunks within the document. You can embed an R code
chunk like this:</p>
<div class="sourceCode" id="cb1"><pre class="sourceCode r"><code class="sourceCode r"><span id="cb1-1"><a href="#cb1-1" tabindex="-1"></a><span class="fu">summary</span>(cars)</span></code></pre></div>
<pre><code>## speed dist
## Min. : 4.0 Min. : 2.00
## 1st Qu.:12.0 1st Qu.: 26.00
## Median :15.0 Median : 36.00
## Mean :15.4 Mean : 42.98
## 3rd Qu.:19.0 3rd Qu.: 56.00
## Max. :25.0 Max. :120.00</code></pre>
<div id="what-is-owncast" class="section level2">
<h2>What is Owncast?</h2>
<p><a href="https://owncast.online/">Owncast</a> is a lightweight
program to set up your own livestreaming website as an alternative to
streaming on twitch or youtube.</p>
<p>It is fully free and open source licensed under the <a
href="https://mit-license.org/">MIT license</a> and can even be linked
with the <a
href="https://en.wikipedia.org/wiki/Fediverse">fediverse!</a></p>
<p>Which to me is perfect! I really wanted to get back into
livestreaming (I used to do this on twitch allot) but I wanted a
platform without adds or corporate influence and thus owncast.</p>
</div>
<div id="as-for-nixos" class="section level2">
<h2>As for NixOS</h2>
<p>I use NixOS to selfhost everything I can (including this website!)
but I couldnt find any wiki pages or concrete owncast configurations
online, I did eventually get it working and will share my configuration
here.</p>
<div id="the-owncast-part-of-the-config" class="section level3">
<h3>The Owncast part of the config</h3>
<p>This part is the easiest it is simply enabling it setting an unused
port (the default and recommended is 8080) and then let owncast open
that part of the firewall.</p>
<pre><code>services.owncast = {
enable = true;
port = 8080;
openFirewall = true;
};</code></pre>
</div>
<div id="the-nginx-part" class="section level3">
<h3>The nginx part!</h3>
<p>Nginx is needed to setup a proxy so we can link owncast to our domain
and ensure everything will run securely. We begin by setting the
(sub)domain that we wish to point at owncast and we enable SSL and ACME.
The locations part needs to point at the port we set earlier so that
nginx knows to point at owncast. Owncast also needs websockets so we set
that to true as wel, the extra config is to ensure our proxy works.</p>
<pre><code> services.nginx.virtualHosts.&quot;live.hermitcollective.net&quot; = {
forceSSL = true;
enableACME = true;
locations.&quot;/&quot; = {
proxyPass = &quot;http://localhost:8080&quot;;
proxyWebsockets = true; # needed if you need to use WebSocket
extraConfig =
# required when the target is also TLS server with multiple hosts
&quot;proxy_ssl_server_name on;&quot; +
# required when the server wants to use HTTP Authentication
&quot;proxy_pass_header Authorization;&quot;
;
};
};</code></pre>
</div>
<div id="the-full-config-and-some-extra-information"
class="section level3">
<h3>The full config and some extra information</h3>
<p>Your entire config should look something like this now at which point
you can sudo nixos-rebuild switch!:</p>
<pre><code>{ config, pkgs, ... }:
{
services.owncast = {
enable = true;
port = 8080;
openFirewall = true;
};
# Homepages
services.nginx.virtualHosts.&quot;yourdomain.net&quot; = {
forceSSL = true;
enableACME = true;
locations.&quot;/&quot; = {
proxyPass = &quot;http://localhost:8080&quot;;
proxyWebsockets = true; # needed if you need to use WebSocket
extraConfig =
# required when the target is also TLS server with multiple hosts
&quot;proxy_ssl_server_name on;&quot; +
# required when the server wants to use HTTP Authentication
&quot;proxy_pass_header Authorization;&quot;
;
};
};
}</code></pre>
<p>We are not done yet however there is one more this that is required
on the nixos side of things and quite a few things in your owncast
webpage.</p>
<p>While we did setup nginx for this owncast we didnt do a full nginx
setup, this is because in my homeserver nginx is used for many things
and I want to avoid duplicate nix code so I have a separate nginx config
which can be found <a
href="https://git.saragerretsen.nl/Hertog/HermitCollective.nix/src/branch/main/services/nginx.nix">here</a>.</p>
<p>Now that that is done we can go into our owncast web page at <a
href="https://yourdomain.net/admin"
class="uri">https://yourdomain.net/admin</a>. Here it will ask you to
log in the default for this is Username: Admin and Password: abc123 you
want to replace this as soon as possible! Luckely there is the owncast
admin page you just logged into for that, either hit view next to
streaming keys in the home page or head to Stream Keys in Server Setup
under the Configuration tab.</p>
<p>When you are done with that open your favourite streaming application
set the livestreaming service to custom and use this link <a
href="rtmp://yourdomain.net:1935/live"
class="uri">rtmp://yourdomain.net:1935/live</a> with the streamkey you
just set!</p>
</div>
<div id="further-help" class="section level3">
<h3>Further help</h3>
<p>If you need extra configuring (and know what you are doing) more
owncast options can be found <a
href="https://search.nixos.org/options?channel=unstable&amp;from=0&amp;size=50&amp;sort=relevance&amp;type=packages&amp;query=owncast">here</a>
and the owncast documentation can be found <a
href="https://owncast.online/docs/">here</a>. Is your version not up to
date with Nix pkgs? run <code>nix-channel --update</code>. Lastely if
this guide gets out of date my current owncast config can be found <a
href="https://git.saragerretsen.nl/Hertog/HermitCollective.nix/src/branch/main/services/owncast.nix">here</a>.</p>
</div>
<div id="including-plots" class="section level2">
<h2>Including Plots</h2>
<p>You can also embed plots, for example:</p>
<p><img src="example_project2_files/figure-html/pressure-1.png" width="672" /></p>
<p>Note that the <code>echo = FALSE</code> parameter was added to the
code chunk to prevent printing of the R code that generated the
plot.</p>
</div>

View File

@ -1,29 +0,0 @@
---
title: "Example Project 2"
output: html_document
date: "2023-10-26"
---
```{r setup, include=FALSE}
knitr::opts_chunk$set(echo = TRUE)
```
## R Markdown
This is an R Markdown document. Markdown is a simple formatting syntax for authoring HTML, PDF, and MS Word documents. For more details on using R Markdown see <http://rmarkdown.rstudio.com>.
When you click the **Knit** button a document will be generated that includes both content as well as the output of any embedded R code chunks within the document. You can embed an R code chunk like this:
```{r cars}
summary(cars)
```
## Including Plots
You can also embed plots, for example:
```{r pressure, echo=FALSE}
plot(pressure)
```
Note that the `echo = FALSE` parameter was added to the code chunk to prevent printing of the R code that generated the plot.

View File

@ -8,19 +8,19 @@ output:
**Welcome to my website!**
**Welcome to blog archive and directory of [HermitCollective](https://hermitcollective.net/)!**
# This is still very much work in progress
# Info
Click the links in the menu above to look around.
Blogs can be found under the "Blog Posts" tab.
Under the "HermitCollective" tab you will find all of HermitCollective's services.
# Notes
This website is a collection of regular (R)Markdown document, so you can use all the usual formatting.
If you are new to R Markdown, you can learn more about it [on the R Markdown website](https://rmarkdown.rstudio.com/).
Every blog will have a link the the authors website and a link to a [fediverse](https://en.wikipedia.org/wiki/Fediverse) post where you can comment on the blog.

68
main.css Normal file
View File

@ -0,0 +1,68 @@
body {
background: #1E1E1E;
color: white;
}
.bg {
background: #242424;
}
h1 {
background: #1E1E1E;
color: white;
}
dive {
background: #1E1E1E;
color: white;
}
a:link {
color: #b30000;
}
a:hover {
color: #EFEEEE;
}
.dropdown-menu {
position: absolute;
top: 100%;
left: 0;
z-index: 1000;
display: none;
float: left;
min-width: 160px;
padding: 5px 0;
margin: 2px 0 0;
margin-top: 2px;
list-style: none;
font-size: 15px;
text-align: left;
background-color: #242424;
}
.dropdown-menu > li > a {
display: block;
padding: 3px 20px;
clear: both;
font-weight: normal;
line-height: 1.42857143;
color: #EFEEEE;
white-space: nowrap;
}
.list-group-item.active, .list-group-item.active:hover, .list-group-item.active:focus {
z-index: 2;
color: #b30000;
background-color: #242424;
border-color: #242424;
}
.list-group-item:last-child {
margin-bottom: 0;
border-bottom-right-radius: 4px;
border-bottom-left-radius: 4px;
background-color: #242424;
}

95
owncast.nix.Rmd Normal file
View File

@ -0,0 +1,95 @@
---
title: "Setting Up Owncast with NixOS"
output: html_document
date: "2023-10-27"
author: "[Hertog](https://hertog.hermitcollective.net)"
---
## What is Owncast?
[Owncast](https://owncast.online/) is a lightweight program to set up your own livestreaming website as an alternative to streaming on twitch or youtube.
It is fully free and open source licensed under the [MIT license](https://mit-license.org/) and can even be linked with the [fediverse!](https://en.wikipedia.org/wiki/Fediverse)
Which to me is perfect! I really wanted to get back into livestreaming (I used to do this on twitch allot) but I wanted a platform without adds or corporate influence and thus owncast.
## As for NixOS
I use NixOS to selfhost everything I can (including this website!) but I couldn't find any wiki pages or concrete owncast configurations online, I did eventually get it working and will share my configuration here.
### The Owncast part of the config
This part is the easiest it is simply enabling it setting an unused port (the default and recommended is 8080) and then let owncast open that part of the firewall.
```
services.owncast = {
enable = true;
port = 8080;
openFirewall = true;
};
```
### The nginx part!
Nginx is needed to setup a proxy so we can link owncast to our domain and ensure everything will run securely.
We begin by setting the (sub)domain that we wish to point at owncast and we enable SSL and ACME.
The locations part needs to point at the port we set earlier so that nginx knows to point at owncast.
Owncast also needs websockets so we set that to true as wel, the extra config is to ensure our proxy works.
```
services.nginx.virtualHosts."live.hermitcollective.net" = {
forceSSL = true;
enableACME = true;
locations."/" = {
proxyPass = "http://localhost:8080";
proxyWebsockets = true; # needed if you need to use WebSocket
extraConfig =
# required when the target is also TLS server with multiple hosts
"proxy_ssl_server_name on;" +
# required when the server wants to use HTTP Authentication
"proxy_pass_header Authorization;"
;
};
};
```
### The full config and some extra information
Your entire config should look something like this now at which point you can sudo nixos-rebuild switch!:
```
{ config, pkgs, ... }:
{
services.owncast = {
enable = true;
port = 8080;
openFirewall = true;
};
# Homepages
services.nginx.virtualHosts."yourdomain.net" = {
forceSSL = true;
enableACME = true;
locations."/" = {
proxyPass = "http://localhost:8080";
proxyWebsockets = true; # needed if you need to use WebSocket
extraConfig =
# required when the target is also TLS server with multiple hosts
"proxy_ssl_server_name on;" +
# required when the server wants to use HTTP Authentication
"proxy_pass_header Authorization;"
;
};
};
}
```
We are not done yet however there is one more this that is required on the nixos side of things and quite a few things in your owncast webpage.
While we did setup nginx for this owncast we didn't do a full nginx setup, this is because in my homeserver nginx is used for many things and I want to avoid duplicate nix code so I have a separate nginx config which can be found [here](https://git.saragerretsen.nl/Hertog/HermitCollective.nix/src/branch/main/services/nginx.nix).
Now that that is done we can go into our owncast web page at https://yourdomain.net/admin.
Here it will ask you to log in the default for this is Username: Admin and Password: abc123 you want to replace this as soon as possible!
Luckely there is the owncast admin page you just logged into for that, either hit view next to streaming keys in the home page or head to Stream Keys in Server Setup under the Configuration tab.
When you are done with that open your favourite streaming application set the livestreaming service to custom and use this link rtmp://yourdomain.net:1935/live with the streamkey you just set!
### Further help
If you need extra configuring (and know what you are doing) more owncast options can be found [here](https://search.nixos.org/options?channel=unstable&from=0&size=50&sort=relevance&type=packages&query=owncast) and the owncast documentation can be found [here](https://owncast.online/docs/).
Is your version not up to date with Nix pkgs? run ``` nix-channel --update ```.
Lastely if this guide gets out of date my current owncast config can be found [here](https://git.saragerretsen.nl/Hertog/HermitCollective.nix/src/branch/main/services/owncast.nix).