added custom css fpot html, markdown. fixed formatting in post

This commit is contained in:
2021-12-19 08:12:25 -07:00
parent 3e84b95ff0
commit 02a8cd932e
2 changed files with 23 additions and 19 deletions

View File

@@ -3,3 +3,5 @@
.language-bash {color: gray} .language-bash {color: gray}
.language-make {color: gray} .language-make {color: gray}
.language-txt {color: gray} .language-txt {color: gray}
.language-html {color: gray}
.language-md {color: gray}

View File

@@ -125,34 +125,36 @@ These fragments are combined with an HTML header fragment...
...and stitched into a webpage using bash: ...and stitched into a webpage using bash:
```bash ```bash
cat header.html > index.html cat header.html > index.html
echo "<div class="row">" >> index.html echo "<div class="row">" >> index.html
echo "<div class="column">" >> index.html echo "<div class="column">" >> index.html
cat basketball.html >> index.html cat basketball.html >> index.html
echo "</div>" >> index.html echo "</div>" >> index.html
echo "<div class="column">" >> index.html echo "<div class="column">" >> index.html
cat football.html >> index.html cat football.html >> index.html
echo "</div>" >> index.html echo "</div>" >> index.html
echo "</div>" >> index.html echo "</div>" >> index.html
echo "<div class="row">" >> index.html echo "<div class="row">" >> index.html
echo "<div class="column">" >> index.html echo "<div class="column">" >> index.html
cat volleyball.html >> index.html cat volleyball.html >> index.html
echo "</div>" >> index.html echo "</div>" >> index.html
echo "</div>" >> index.html echo "</div>" >> index.html
``` ```
The combind result is that each sport's HTML fragment is put into its own div, which are organized hierarchically into a table of `row` and `column`. The combind result is that each sport's HTML fragment is put into its own div.
A bit of CSS is used to handle the responsive layout of those divs. The divs are organized into a table of `row` and `column`.
A bit of CSS is used to handle the responsive layout of the divs wrapping the sports.
## Hosting ## Hosting
I chose to host on Netlify. I chose to host on Netlify.
Netlify can run some automated steps every time there is a push to a github repository. Instead of creating an `index.html` file and uploading it, Netlify can run some automated steps every time there is a push to a github repository.
I automated the generation of the website from the markdown files using GNU Make. I automated the generation of the website from the markdown files using GNU Make.
Then, on Netlify under "Site Settings" > "Build and Deploy", I specified `make` as the build command. Then, on Netlify under "Site Settings" > "Build and Deploy", I specified `make` as the build command.
Netlify will clone the repository every time I push a modification to the markdown files, run `make` to produce `index.html`, and serve that as the site.
As of this writing, Netlify provides 100GB bandwidth and 300 build minutes, which is more than sufficient for a 0-traffic small static website. As of this writing, Netlify provides 100GB bandwidth and 300 build minutes, which is more than sufficient for a 0-traffic small static website.
Netlify [provides instructions](https://docs.netlify.com/domains-https/custom-domains/configure-external-dns/) for how to configure the external DNS (more on that below). Netlify [provides instructions](https://docs.netlify.com/domains-https/custom-domains/configure-external-dns/) for how to configure the external DNS.