build_a_blog: writing

This commit is contained in:
Collin Lefeber 2024-06-19 22:53:00 -04:00
parent 11a9582a4d
commit ecb38aaa68

View file

@ -1,24 +1,21 @@
Title: Build-a-blog Title: Build-a-blog
Date: 2024-06-17T14:46:36-04:00 Date: 2024-06-17T14:46:36-04:00
--- ---
I want to share my thought process for how to go about building a static blog generator from scratch. I want to share my thought process for how to go about building something from scratch in a stream-of-conciousness/live coding sort of format.
There will be nothing ground breaking here - in fact this software will not be good. So turn back now if you're expecting the new [Hugo][hugo]. So for the first stupid post on this stupid blog, I've set a goal to take 1 afternoon + caffeine + some DIY spirit → _something_ resembling a static site/blog generator to build this website.
Actually you should probably stop reading and just use [Hugo][Hugo]. There will be nothing ground breaking here - in fact this software will not be good.
In case you are still interested, the goal is to take 1 afternoon + caffeine + some DIY spirit → _something_ resembling a static site/blog generator. But if you decide to continue reading, I hope by the end of this post you might be inspired to re-invent your own wheel for the fun of it. Or don't and just use [Hugo][hugo].
And I hope by the end of this post you might be inspired to build your own generation scripts, maybe in a new language you always wanted to try.
Lets see how hard this will be. Lets see how hard this will be.
Here are the requirements for this blog: Here are the requirements for this blog:
* Generate an index with recent list of posts.
* Generate each individual post written in markdown -> html * Generate each individual post written in markdown -> html
* Support some metadata in each post * Generate an index with recent list of posts.
* A post title should have a slug * Will need some metadata (ex. date) in each post to do this.
* Generate RSS * Generate RSS
That boils down to: That boils down to:
@ -76,7 +73,7 @@ First, lets read 1 post file and render some html.
I'll store posts in `posts/` like `posts/build_a_blog.md`. I'll store posts in `posts/` like `posts/build_a_blog.md`.
And we'll store the HTML output in the same directory: `posts/build_a_blog.html`. And store the HTML output in the same directory: `posts/build_a_blog.html`.
```python ```python
import re import re
@ -106,7 +103,7 @@ if __name__ == '__main__':
render_post('posts/build_a_blog.md') render_post('posts/build_a_blog.md')
``` ```
And if we run it. And run it:
```shell ```shell
python3 ./main.py python3 ./main.py
@ -249,13 +246,13 @@ def render_post(fpath):
} }
``` ```
Now we have what we need to generate a complete index. Now I have what I need to generate the index page.
### Index templating ### Index templating
Lets start by defining what our index template file will be. Lets start by defining what our index template file will be.
I'll choose `index.html.tmpl` and after rendering we will write to `index.html`. I'll choose `index.html.tmpl` which will write to `index.html` when rendered.
So lets make a function that will take a list of our post structure above and render it in a `<ul>`. So lets make a function that will take a list of our post structure above and render it in a `<ul>`.
@ -302,7 +299,7 @@ Make sure that `index.html.tmpl` contains a template variable for `${posts}`
<div class="col-md-4 col-sm-12"> <div class="col-md-4 col-sm-12">
``` ```
And we now need to connect `render_posts()` which returns each post that was processed to `render_index()` And now need to connect `render_posts()` which returns each post that was processed to `render_index()`
```python ```python
def render_posts(): def render_posts():
@ -483,7 +480,7 @@ def render_post(fpath):
render_template('index.html.tmpl', destpath, {'content': out, 'more_title': ' - ' + title}) render_template('index.html.tmpl', destpath, {'content': out, 'more_title': ' - ' + title})
``` ```
At this point we have functioning blog post generation with templating. This is now a functioning blog generator with templating!
## RSS ## RSS