-
Notifications
You must be signed in to change notification settings - Fork 3
/
Copy pathindex.html
128 lines (104 loc) · 4.6 KB
/
index.html
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
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>Blogtini</title><!-- xxx -->
<link rel="icon" href="favicon.ico" type="image/x-icon">
<meta name='viewport' content='width=device-width, initial-scale=1'>
<!-- xxx SPA meta & make specific or auto-make page dynaically for any website?? -->
<meta name="author" content="">
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="twitter:title" content="Blogtini"/><!--xxx-->
<meta name="twitter:card" content="summary"/>
<meta name="twitter:description" content=""/>
<meta name="twitter:site" content="@tracey_pooh"/>
<meta property="og:title" content="Blogtini"><!--xxx-->
<meta property="og:image" content="img/traceymonet.jpg">
<meta property="og:description" content="">
<meta property="og:type" content="website"/>
<meta property="og:url" content="https://blogtini.com" />
<!-- xxx SPA meta & make specific or auto-make page dynaically for any website?? -->
<link href="css/blogtini.css" rel="stylesheet" type="text/css"/>
<script type="module" src="theme.js"></script>
</head>
<body class="homepage">
# Welcome to Blogtini!
A modern "content first" approach to blogs & websites made entirely from easy to write and human readable `markdown` text files.
## Overview
- All your pages and blog posts are in [markdown](https://en.wikipedia.org/wiki/Markdown#Examples) -- this means your content is clean and **just** content. No formatting mixed into your files.
- A single line of javascript in each post or page file is used to load the page contents and process it. eg:
```html
comment: <script src="../theme.js" type="module" charset="utf-8"></script>
```
In turn, the single `theme.js` at the top of your website, is _itself_ a simple one line `import 'https://...'` file, pointing to whatever theme URL you'd like to use for your site.
- To change your theme, all you have to do is change that one line in your `theme.js` file to use another theme URL.
## Features
- no build step
- static pages
- sitewide quick search in nav
- comments can still be integrated
## Example page
```markdown
---
title: Blogtini Overview
date: 2022-07-25
categories:
- website
tags:
- markdown
- javascript
comment: <script src="https://blogtini.com/js/blogtini.js" type="module" charset="utf-8"></script>
---
# Blogtini!
An entire website, blog, or mixed setup which is entirely `markdown` and one line of `javascript`.
This is a new paragraph.
## This is a 2nd level heading
Here is a list:
- blogtini is _exciting in italics_!
- blogtini boldly **loves** you
```
## Get Started in seconds
- Copy all the text in the "Example Page" box above
- Paste it into a new file called `index.html` (change text if desired)
- Run any simple static file server, eg: `python3 -m http.server` in a `terminal` in the same directory where `index.html` lives
- Load the printed serving url in a browser, eg: http://localhost:8000/
## Take it to the next level
For multiple posts & pages:
- Change the `https://blogtini.com/js/blogtini.js` in your markdown file(s) to `./theme.js`
- Create a `theme.js` file with `import 'https://blogtini.com/js/blogtini.js'`
- Now you can change the `theme.js` contents to another theme anytime you like and your entire site will change with one line change :)
- Create directory names that "sort in reverse order", to make a `sitemap.xml` file easier.
- We like directory and filenames like:
```
2023-05-may-the-fourth-was-wild-this-year/index.html
2022-12-christmas-with-family/index.html
index.html
theme.js
sitemap.xml
```
You can add days into the filenames/urls, too:
```
2023-05-04-may-the-fourth-was-wild-this-year/index.html
2022-12-25-christmas-with-family/index.html
index.html
theme.js
sitemap.xml
```
- Create a `sitemap.xml` with contents like:
```xml
<urlset xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xsi:schemaLocation="http://www.sitemaps.org/schemas/sitemap/0.9 http://www.sitemaps.org/schemas/sitemap/0.9/sitemap.xsd">
<url><loc>/index.html</loc></url>
<url><loc>/2023-05-may-the-fourth-was-wild-this-year/</loc></url>
<url><loc>/2022-12-christmas-with-family/</loc></url>
</urlset>
```
- Reload your simple web server browser url to see the site
- You can create a free https://github.com/ (new account if needed) and new repository and add your files there
- xxxxx document sitemap auto-generator setup & explain sitemap importance
- xxxxx document setting up top-level `index.html` file
```
## More info
- https://traceypooh.github.io/slides/dweb-2023 (tracey talk at https://dwebcamp.org )
## Example Blog <i class="fa fa-angle-down"></i>
</body>