1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
|
---
title: How I published my site on compost.party
lang: en
...
These are the steps I took to publish my site on compost.party.
*I wrote this page off of the top my head (and copied/pasted the content of files); feedback and corrections welcome.*
--
Create a directory:
$ mkdir compost
Then change directory:
$ cd compost
Create a file for your homepage:
$ touch index.md
then edit that file using the text editor nano, for example:
$ nano index.md
Type some text, for example:
---
lang: en
title: This is the title of my page.
...
some text.
[a link](https://compost.party).
Save.
Now add a CSS file called style.css:
$ touch style.css
You can copy mine if you want:
html, body{
font-family:monospace;
font-size: 1em;
color: black;
background: white;
max-width: 600px;
margin-left: auto;
margin-right: auto;
padding: 5px;
}
/* unvisited link */
a:link {
color: lightseagreen;
}
/* visited link */
a:visited {
color: hotpink;
}
/* mouse over link */
a:hover {
color: magenta;
}
/* selected link */
a:active {
color: pink;
}
You can also add a favicon. This, you can find online; there are websites that help you generate a favicon.
Add a header; create a file header.html, and populate the file with:
<title> whatever title you want </title>
<meta charset="utf-8">
<html lang="en">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link href="style.css" rel="stylesheet" type="text/css" />
Now we add a script to convert the markdown file index.md into an HTML file
index.html.
To do so, create a file called build.sh containing the following script:
```
# (c) 2024 w. kennedy
#!/bin/bash
echo Welcome to the markdown to html converter.
markdown_file="$1"
echo file is "$markdown_file"
if [[ -z "$markdown_file" ]]; then
printf "Usage: %s <markdown_file>\n" "$0"
exit 1
fi
output_file="${markdown_file%%.*}.html"
pandoc "$markdown_file" -f markdown+hard_line_breaks \
-t html5 -H "header.html" \
--template="default.html5" \
-o "$output_file" --verbose --highlight-style=breezedark
printf "markdown_file: %s\n" "$markdown_file"
printf "output_file: %s\n" "$output_file"
echo We did it capitan, we converted to html.
```
Make this script executable:
$ chmod +x build.sh
Download Pandoc:
$ sudo apt install pandoc
Run the script:
$ ./build.sh index.md
You should have a file called index.html, check:
$ ls
Now that you have index.html, you want to upload it onto the server.
To do so, I use the programme rsync.
We will create a short script to upload your files to the server, and then you'll use that script to update your website.
$ touch deploy.sh
In this file add the following command:
$ rsync -vz index.html style.css "$@" -e 'ssh -p23' --progress username@compost.party:/var/www/username.compost.party/html
Substitute username for your actual username.
Make the script executable:
$ chmod +x deploy.sh
To publish your site to the server, run:
$ ./deploy
If you want to add pages or other files, e.g. pdf or images, to your site, run:
$ ./deploy page.html file.pdf image.png
PS: you might need to edit the template Pandoc uses; I don't remember if I did so. If you need to do so, you can find the file default.html5 on the repository of Pandoc, and then customise it. Feel free to email me if you have questions. You can find my email address on the flyers published on https://yctct.compost.party.
## Shortcomings of this setup
When you delete files locally, on your machine, you need to log in the server to remove them.
|
