80 lines
3.6 KiB
Markdown
80 lines
3.6 KiB
Markdown
# Blog setup with markdown, rust & git
|
|
|
|
Hey everyone. This is the first post I write for the blog I'm starting, which is Coincidentally about how I've structured the software surrounding my blog.
|
|
|
|
First off, I've been wanting to do a lot recently:
|
|
|
|
- Moving away from Windows to using Linux and MacOS for development and gaming
|
|
- Switching from VSCode/Cursor to neovim
|
|
- Switching from working for an employer to becoming a solo dev/freelancer
|
|
- Dedicate time to solo game development
|
|
|
|
Because of this, I figured it would be a good time to set up a blog, both for documenting whatever I'm working on and to get the word out about my work.
|
|
|
|
## The blog design
|
|
|
|
I wanted to have a setup that generates static html from something like markdown. Then recently I stumbled across this [https://gaultier.github.io/blog/making_my_static_blog_generator_11_times_faster.html](https://gaultier.github.io/blog/making_my_static_blog_generator_11_times_faster.html)
|
|
|
|
I decided to do something similar, however I used rust as it has some popular existing libraries for web servers and parsing markdown. The reason for writing an application to host the blog is that I wanted to have it automatically respond to a git webhook which would automatically pull the latest git repo and then rebuild the articles from their markdown files.
|
|
|
|
## HTML
|
|
|
|
Of course there is also some styling and markup required for the shell, like the navigation bar and footers.\
|
|
I decided to go with a simple list of html templates that get included by the application and scan it for tags to inject certain magic values, like the list of posts or timestamps.
|
|
|
|
For example, here is what the page you're looking at looks like:
|
|
|
|
```html
|
|
$<include src="header.html"/>
|
|
<article>
|
|
$<post-html/>
|
|
</article>
|
|
<p><a href="/">← Back to home</a></p>
|
|
$<include src="footer.html"/>
|
|
```
|
|
|
|
Which can be parsed very quickly by a simple scanner that triggers on $< and then reads the key and map of `<String,String>` parameters.
|
|
|
|
This allows me to just write template code like this:
|
|
```html
|
|
<title>$<title default="Guus' blog" pre="Guus - "></title>
|
|
```
|
|
|
|
and process it in rust like this:
|
|
```rs
|
|
"title" => {
|
|
if let Some(post_name) = current_post {
|
|
let post = post_manager
|
|
.get_post(post_name)
|
|
.await
|
|
.ok_or_else(|| format!("Post '{}' not found", post_name))?;
|
|
|
|
let none: String = "".to_string();
|
|
let pre = attrs.get("pre").unwrap_or(&none);
|
|
let postfix = attrs.get("post").unwrap_or(&none);
|
|
|
|
Ok(format!("{}{}{}", pre, post.title, postfix))
|
|
} else {
|
|
let def = attrs
|
|
.get("default")
|
|
.and_then(|s| Some(s.clone()))
|
|
.unwrap_or("<title not set>".to_string());
|
|
Ok(def.to_string())
|
|
}
|
|
}
|
|
```
|
|
|
|
All the HTML code that has been generated like this is then cached until the next the blog update is triggered by my pushing a new post to git.
|
|
|
|
## Styling
|
|
|
|
For the styling, I added some minimal CSS to center the contents, limit the width and change the font sizes.\
|
|
I wanted to keep it simple so the layout works on both a desktop browser, and on mobile phone screens. This also allows you to dock the window to a side of your screen or second vertical monitor in case you wanted to reference it for some code which I find useful.
|
|
|
|
## Conclusion
|
|
|
|
I like this design as it's easy to deploy locally for previewing, and adding new posts or making edits is as simple as `git commit && git push`. I can keep posts I'm working on in separate branches and progressively work on them like that.
|
|
|
|
If you're interested in the source code, or would like to use it for yourself feel free to check it out [here](https://git.bakje.coffee/guus/blog).
|
|
|