-
Notifications
You must be signed in to change notification settings - Fork 7
/
Copy pathindex.html
executable file
·127 lines (126 loc) · 5.56 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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- META FOR IOS & HANDHELD -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<meta name="HandheldFriendly" content="true">
<meta name="apple-mobile-web-app-capable" content="YES">
<!-- CSS STYLE -->
<link rel="stylesheet" type="text/css" href="./style.css">
<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
<script type="text/javascript" src="/showcase/onepage/plugins/system/t3/base/js/respond.min.js"></script>
<![endif]-->
<!-- FONTS -->
<link href='https://fonts.googleapis.com/css?family=Ubuntu:400,300,500' rel='stylesheet' type='text/css'>
<title>Title</title>
</head>
<body>
<!-- PAGE -->
<div id="pagewrap">
<!-- NAVIGATION -->
<nav id="navwrap">
<p>
<a href="https://github.com/fspaolo/makesite/">Download</a>
</p>
</nav>
<!-- HEADER -->
<header id="headerwrap">
<span>Makesite.py</span>
<p>Extremely simple static site generator.</p>
</header>
<!-- ARTICLE -->
<article id="articlewrap">
<p><code>Makesite.py</code> is an extremely simple (and extremely light) static site
generator written in Python. You write your content in text files and
<code>Makesite.py</code> does the rest for you. It works by taking as input an HTML
template, a CSS style, and a bunch of text files (in Markdown) and
generating static HTML pages.</p>
<h2>How it works</h2>
<p>1) Download and place the following files into a folder: </p>
<pre><code>makesite.py -- the Python script to generate each webpage
template.html -- the HTML skeleton of each webpage
style.css -- the CSS style of each webpage
index.md -- the text content of a webpage (Markdown)
</code></pre>
<p>2) Run: </p>
<pre><code>python makesite.py
</code></pre>
<p>This will generate an <code>index.html</code> that you can display with your browser.</p>
<p>Note that every time you make any modification you need to run
<code>python makesite.py</code> again (that's what <em>static</em> site means).</p>
<h2>What it is</h2>
<p><code>Makesite.py</code> is not a blog generator! If a blog is what you are looking for,
there are a few dozen blog softwares out there. <code>Makesite.py</code> was developed
with the following concepts in mind:</p>
<ul>
<li>Extremely simple (very easy to understand and modify)</li>
<li>No installation required (run it anywhere)</li>
<li>No configuration required (you provide a text file, you get a HTML page)</li>
<li>No templating language (just pure HTML, CSS and Python!)</li>
<li>All functions in one single script (that I can actually understand)</li>
<li>Navigation bar generated for you (customizable if you want)</li>
</ul>
<p>If all you want is to simply put HTML content on the web (such as a personal
webpage), then this might be the right tool for you.</p>
<p>Please note that this project is under development. Features are being added or modified.</p>
<h2>Example</h2>
<p>To get you started there a basic website example (with a <code>Makefile</code>
included):</p>
<pre><code>example/
|__ Makefile
|__ makesite.py
|__ template.html
|__ style.css
|__ index.md
|__ first/
|__ index.md
|__ second/
|__ index.md
|__ third/
|__ index.md
</code></pre>
<p>To generate the HTML pages (after you've downloaded the folder <code>example</code>): </p>
<pre><code>cd example
python makesite.py
</code></pre>
<p>or using the <code>Makefile</code>:</p>
<pre><code>cd example
make site
</code></pre>
<p>Now all you have to do is replace the content of the Markdown files (<code>.md</code>)
with your own. For each Markdown file an HTML page will be created and added
to the navigation bar. Then you just upload the content of the <code>example</code> folder
(the <code>.html</code>, <code>.css</code>, <code>.jpg</code>, etc.) to any webserver.</p>
<p>In the above example each webpage (Markdown file) is placed into a sub-folder
to keep things organized (with the exception of the website's landing page, the
'Home' page), but you can have all the pages in the same folder if you prefer
(just give them different names).</p>
<p>To customize your website you can play around with the <code>style.css</code> and/or
<code>template.html</code> (see how below).</p>
<p>A <code>Makefile</code> is also provided for convenience. For example, on a Mac/Linux
machine you can generate the website, display it in your browser, and upload
it to <a href="https://pages.github.com/">GitHub</a> as:</p>
<pre><code>cd example
make site
make show
make git
</code></pre>
<h2>In use</h2>
<p>Check my own website made with <code>Makesite.py</code>: <a href="http://fspaolo.net">http://fspaolo.net</a> </p>
<h2>How to</h2>
<p><a href="https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet">Markdown</a><br>
<a href="http://www.w3schools.com/html/html_intro.asp">HTML</a><br>
<a href="http://www.w3schools.com/css/">CSS</a> </p>
<p><strong>Questions/Comments?</strong> Send me an email: <a href="mailto:[email protected]?Subject=[Makesite.py]">[email protected]</a></p>
</article>
<!-- FOOTER -->
<footer id="footerwrap">
<p>Powered by <a href="http://fspaolo.github.io/makesite">Makesite.py</a></p>
</footer>
</div>
</body>
</html>