Simple website based on weblorg and org files

Nazar65 · Nov 26, 2024 · 32aaac6 · 32aaac6
1 parent 818b3fc
commit 32aaac6
Show file tree

Hide file tree

Showing 17 changed files with 606 additions and 0 deletions.
diff --git a/README.org b/README.org
@@ -0,0 +1 @@
+#+TITLE: My personal website
diff --git a/index.html b/index.html
@@ -0,0 +1,92 @@
+
+<!doctype html>
+<html lang="en-us">
+  <head>
+    <meta charset="utf-8">
+    <title>klovanych.org &mdash; Home</title>
+    <meta name="description" content="">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" type="text/css" href="/static/css/main.css">
+    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
+    <link rel="icon" type="image/png" href="/media/img/8bitme.png">
+    <link rel="alternate" type="application/rss+xml" href="rss.xml">
+  </head>
+  <body>
+
+      <div class="social">
+        <div class="container">
+          <ul class="badges">
+            <li>
+              <a href="mailto:[email protected]" alt="Email">
+                <span class="fa fa-envelope-o"></span>Email
+              </a>
+            </li>
+            <li>
+              <a href="https://github.com/nazar65" target="_blank" alt="Github">
+                <span class="fa fa-github-alt"></span>Github
+              </a>
+            </li>
+            <li>
+              <a href="rss.xml" alt="RSS">
+                <span class="fa fa-rss"></span>RSS
+              </a>
+            </li>
+          </ul>
+
+          <a href="/">
+              <img class="avatar" type="image/svg+xml" src="static/img/the-goat.png" alt="Me in 8bit" />
+          </a>
+        </div>
+      </div>
+
+
+    <div class="post">
+      <div class="container">
+
+  <h1>Hi! I&#39;m Nazar</h1>
+
+  <p>
+I'm a human being that deeply enjoys the art of computer
+programming. I'm very curious and interested in various programming
+languages and technologies ranging from web development to systems
+programming.
+</p>
+
+<p>
+I'm most happy when I can use my knowledge to promote social justice
+and advance how human societies interact and communicate. When I'm not
+on the computer, I'm usually hanging out with friends, and/or enjoying
+another random art form, like drawing, longboarding, photography, or
+just looking at the sky.
+</p>
+
+<hr />
+
+<div id="outline-container-links" class="outline-2">
+<h2 id="links">Links</h2>
+<div class="outline-text-2">
+<ul class="org-ul">
+<li><a href="">Blog</a></li>
+<li><a href="https://github.com/nazar65">GitHub</a></li>
+<li><a href="mailto:[email protected]">Email</a></li>
+</ul>
+</div>
+</div>
+
+
+      </div>
+    </div>
+
+    <div class="footer">
+
+        <div class="bg">
+            <div class="container">
+            &#169; <a href="https://klovanych.org/about.html">Nazar Klovanych</a> &mdash; All written content on this
+            website reflects my personal opinion and it's available
+            under <a href="https://creativecommons.org/licenses/by/4.0/" target="_blank">CC BY 4.0</a>
+          </div>
+        </div>
+
+    </div>
+  </body>
+</html>
diff --git a/README.md → index.org b/README.md → index.org
diff --git a/posts/starting-a-blog.org b/posts/starting-a-blog.org
@@ -0,0 +1,55 @@
+#+TITLE: Starting a blog
+#+DATE: <2024-11-25 Mon>
+#+OPTIONS: toc:nil num:nil
+#+FILETAGS: :blogging:
+
+I've tried blogging before. All the attempts ended up following a very
+similar pattern: Took me a veeeery long time to write a single post
+and after that I never looked back at it again.
+
+This time I'm trying things differently. I'm not going to start from
+the perfect blog post.
+
+* The home page
+
+  My website is as simple as it can get.
+
+  The index file is just HTML and CSS, nothing else. Even the list of
+  recent posts is done manually.
+
+* The Posts
+
+  This very post is written as an Org-Mode file. For those who haven't
+  heard of Org-Mode before, checkout [[https://orgmode.org/][their website]].  Long story short,
+  Org-Mode is a text-based document format.  From that perspective, it
+  could be compared with ~Markdown~. The difference is the ginormous
+  feature set that Org-Mode supports compared.  Including, but not
+  limited to, many output formats and an incredible interactive
+  experience. 
+
+  HTML is one of the output formats that Org-Mode supports. Each post
+  written in an ~.org~ file will be translated into an HTML page.
+  This feature is built into Org-Mode. It just takes a bit of
+  configuration.
+
+* Org-Mode Publishing
+
+  Being completely honest, the HTML publishing feature doesn't seem
+  exactly designed for the blogging use case. It took quite a bit of
+  tweaking of the configuration to get it to do all the things that I
+  wanted.
+
+  Although a single document can be exported to HTML, in order to
+  apply the same configuration to various files, I was required to
+  create a project with a source directory and an output directory.
+
+  The cool thing about this project thing was that I could have
+  different groups of settings and aggregate them all under a single
+  project.
+
+* Operating the blog
+
+  From now one, I just have to execute the command ~C-c C-e P p~ to
+  ask Org Publishing to generate the HTML file of all the org files that
+  have been updated since I last executed it. It feels quite
+  convenient, I have to say.
diff --git a/publish.el b/publish.el
@@ -0,0 +1,97 @@
+;;; publish.el --- Generate Static HTML -*- lexical-binding: t -*-
+;;
+;; Author: Lincoln Clarete <[email protected]>
+;;
+;; Copyright (C) 2020  Lincoln Clarete
+;;
+;; This program is free software: you can redistribute it and/or modify
+;; it under the terms of the GNU General Public License as published by
+;; the Free Software Foundation, either version 3 of the License, or
+;; (at your option) any later version.
+;;
+;; This program is distributed in the hope that it will be useful,
+;; but WITHOUT ANY WARRANTY; without even the implied warranty of
+;; MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+;; GNU General Public License for more details.
+;;
+;; You should have received a copy of the GNU General Public License
+;; along with this program.  If not, see <http://www.gnu.org/licenses/>.
+;;
+;;; Commentary:
+;;
+;; How my blog is generated
+;;
+;;; Code:
+
+;; Initialize packaging system
+(require 'package)
+(package-initialize)
+(add-to-list
+ 'package-archives
+ '("melpa" . "http://melpa.org/packages/"))
+(unless (package-installed-p 'use-package)
+  (package-refresh-contents)
+  (package-install 'use-package))
+
+;; Install dependencies
+(use-package htmlize :config :ensure t)
+(use-package rainbow-delimiters :config :ensure t)
+
+;; Configure dependencies
+(require 'ox-html)
+(require 'weblorg)
+
+
+(delete-directory "blog/" t)
+(make-directory "blog/")
+(copy-directory "static-files/" "blog/static")
+
+;; Output HTML with syntax highlight with css classes instead of
+;; directly formatting the output.
+(setq org-html-htmlize-output-type 'css)
+
+;; Static site generation
+(setq weblorg-default-url "https://klovanych.org")
+
+(weblorg-route
+ :name "index"
+ :input-pattern "index.org"
+ :template "index.html"
+ :output "blog/index.html"
+ :url "/")
+
+(weblorg-route
+ :name "posts"
+ :input-pattern "posts/*.org"
+ :template "post.html"
+ :output "blog/posts/{{ slug }}.html"
+ :url "/posts/{{ slug }}.html")
+
+(weblorg-route
+ :name "about"
+ :input-pattern "website-pages/about.org"
+ :template "index.html"
+ :output "blog/about.html"
+ :url "/about.html")
+
+(weblorg-route
+ :name "rss"
+ :input-pattern "posts/*.org"
+ :input-aggregate #'weblorg-input-aggregate-all-desc
+ :template "rss.xml"
+ :output "blog/rss.xml"
+ :url "/rss.xml")
+
+(weblorg-route
+ :name "blog"
+ :input-pattern "posts/*.org"
+ :input-aggregate #'weblorg-input-aggregate-all-desc
+ :template "blog.html"
+ :output "blog/index.html"
+ :url "/blog")
+
+(setq debug-on-error t)
+
+(weblorg-export)
+
+;;; publish.el ends here
diff --git a/static-files/css/colors.css b/static-files/css/colors.css
@@ -0,0 +1,31 @@
+:root {
+    --theme-gruvbox-background:    #282828;
+    --theme-gruvbox-foreground:    #ebdbb2;
+    --theme-gruvbox-dark-1:        #3c3836;
+    --theme-gruvbox-dark-2:        #504945;
+    --theme-gruvbox-dark-3:        #665c54;
+    --theme-gruvbox-dark-4:        #7c6f64;
+    --theme-gruvbox-light-1:       #fdf4c1;
+    --theme-gruvbox-light-2:       #d5c4a1;
+    --theme-gruvbox-light-3:       #bdae93;
+    --theme-gruvbox-light-4:       #a89984;
+    --theme-gruvbox-red:           #fb4934;
+    --theme-gruvbox-orange:        #fe8019;
+    --theme-gruvbox-yellow:        #fabd2f;
+    --theme-gruvbox-green:         #b8bb26;
+    --theme-gruvbox-aqua:          #8ec07c;
+    --theme-gruvbox-blue:          #83a598;
+    --theme-gruvbox-purple:        #d3869b;
+    --theme-gruvbox-builtin:       var(--theme-gruvbox-orange);
+    --theme-gruvbox-comment:       var(--theme-gruvbox-dark-4);
+    --theme-gruvbox-doc:           var(--theme-gruvbox-dark-4);
+    --theme-gruvbox-function-name: var(--theme-gruvbox-yellow);
+    --theme-gruvbox-keyword:       var(--theme-gruvbox-red);
+    --theme-gruvbox-string:        var(--theme-gruvbox-green);
+    --theme-gruvbox-type:          var(--theme-gruvbox-purple);
+    --theme-gruvbox-variable-name: var(--theme-gruvbox-blue);
+    --theme-gruvbox-rainbow1:      #458588;
+    --theme-gruvbox-rainbow2:      #b16286;
+    --theme-gruvbox-rainbow3:      #8ec07c;
+    --theme-gruvbox-rainbow4:      #d65d0e;
+}
diff --git a/static-files/css/common.css b/static-files/css/common.css
@@ -0,0 +1,78 @@
+/* Document configurations */
+body                 { padding: 0px; margin: 0px; font-family: monospace, sans-serif; font-size: 16pt;
+                       line-height: 32px; display: flex; flex-direction: column; min-height: 100vh; }
+
+/* Titles */
+h1, h2, h3, h4, h5   { padding: 0; margin-top: 60px; color: #83a598; }
+h1                   { font-size: 55px; line-height: 1.1em; }
+h2                   { font-size: 40px; line-height: 1.1em; }
+h3                   { font-size: 30px; line-height: 1.1em; }
+
+/* links */
+a                    { color: #fabd2f; text-decoration: none; }
+a:hover              { color: #fff; }
+
+/* Horizontal bar */
+hr                   { border-top: 0; border-bottom: solid 1px #3c3836; }
+
+/* Element that wraps everything */
+.container           { width: calc(55% - 100px); padding: 10px 150px; margin: 0 auto; }
+
+/* Elements that can appear anywhere */
+.note                { background-color: #504945; padding: 5px 25px; border-radius: 10px; }
+.centralized img     { margin: auto auto; display: block; }
+
+/* Top bar with the badges */
+.social              { margin: 60px 0; }
+.social .avatar      { width: 100px; height: 100px; display: block; margin: 0 auto; float: left;
+                       background-color: #fb4934; border-radius: 10px; padding: 6px 4px; }
+.social .badges      { float: right; width: 155px; font-size: 36px; list-style: none; display: block; }
+.social .badges li   { padding-left: 8px; float: left; }
+.social .badges a    { float: left; display: block; width: 36px; height: 36px; overflow: hidden; margin-left: 5px; padding: 1px;
+                       color: #7c6f64; }
+.social .badges a:hover { color: #fb4934; }
+.social .badges a span  { height: 50px; }
+
+/* Footer */
+.footer              { font-size: .8em; margin: 0; }
+.footer .email-link  { text-align: center; font-size: 30px; color: #666; padding: 40px 0; }
+.footer .bg          { background: #3c3836; padding: 40px 0; }
+.footer a            { color: #000; text-decoration: none; }
+.footer a:hover      { text-decoration: underline; background: transparent; }
+
+/* Listing */
+ul.posts            { padding-left: 20px; }
+ul.posts li         { padding-bottom: 20px; }
+ul.posts span.date  { padding-right: 5px; text-align: right; }
+ul.posts .comment   { padding-top: 10px;  color: #666; }
+
+/* For pages that list posts */
+.content.blog > ul  { list-style: none;  padding: 0; }
+.content.slides > ul > li,
+.content.blog > ul > li { margin-bottom: 10px; }
+.content.slides ul div { padding-left: 102px; font-size: 12pt; }
+
+/* Content formatting */
+#content            { width: calc(60% - 100px); padding: 10px 150px; margin: auto auto; color: #333; }
+.post               { display: block; min-height: 70vh; display: flex; flex-grow: 1; flex-direction: column; }
+.subtitle { color: #aaa; }
+
+/* Code blocks */
+code                { background: #3c3836; color: #fff; padding: 0 0.5rem; border-radius: 3px; }
+.org-src-container  { overflow-x: auto; padding: 10px 40px; border-radius: 10px; margin: 20px 0; line-height: 1.3; }
+
+/* Very small width */
+@media (max-width: 480px) {
+    h1                   { margin-top: 20px; }
+    .social              { margin: 20px 0; }
+    .social .badges      { padding: 0 20px 0 0; }
+    .container,
+    #content, .container { width: 90%; padding: 10px; }
+}
+
+/* Medium width */
+@media (min-width: 480px) and (max-width: 1000px) {
+    .social              { margin: 20px 0; }
+    #content, .container,
+    .container           { width: 80%; padding: 10px; }
+}