Computer Science, Problem Solving, Research and Development
Home | Projects | Blog | About | Connect
2024-10-25
As is mentioned many times, this website was developed with a system I developed that is an Obsidian Web Publisher. In the following article, I hope to illuminate why I made this project, how it works, and why I made the decisions I did while developing the project.
This whole project started with the feeling that I really should have a website. I am a computer science student after all, and I wanted to make a website my way. I realized that I didn't need or necessarily want a complicated website. I just wanted something that looks pleasant and can show my work. My big hang-up of just making a basic HTML + CSS website is that I did not want the website to be difficult to manage. I am constantly working on projects, and I wanted it to be as easy as possible to update the website. Additionally, I did not want to use one of the common website hosts/builders as I did not want sponsored banners and wanted to use a custom domain. I wanted complete control of my website, easily and free. This is where Obsidian and my Obsidian Web Publisher comes in.
Obsidian is a lightweight markdown file editor. Obsidian allows you to create a folder, or "vault", on your local computer that holds the notes/markdown files that you can edit. The markdown syntax and categories very closely resemble HTML, so I started wondering if there was a way I could just use Obsidian as a content manager to allow me to easily update my website without writing any HTML. Right now as I'm writing this, it feels as if I am typing into a word processor, rather than creating a web page. That's the beauty of the system. After setup, its simple and easy to maintain.
After you've created some markdown files which will be your website. The content needs to be parsed and converted to HTML. Initially, I thought that this would be a straightforward, but dealing with all the different characters and patterns markdown uses presented an unexpected challenge. The biggest issue I faced was dealing with the links on the pages. Implementing logic to treat internal and external links differently helped me solve these issues.
The parser works in two main steps. First, the parser identifies the "structural" elements of the page. There are things like heading tags, paragraph tags, images, etc. Once each line of the markdown file is wrapped in "structural" HTML tags, the contents inside those tags are parsed to add text decorations such as bold and italics and links. I refer to this second step as "inline" parsing.
After the content of the website, has been parsed into HTML, it is written to HTML files using an HTML template and header content file. The content of the website is inserted into the body of each page, while the header for each page is the same, imported from file containing the header content, allowing users to change metadata, import fonts, or change CSS easily. These newly generated HTML files are saved in a folder.
Finally, now that an entire website has been generated from the markdown files, the folder with the HTML files is initialized as a Git repository and linked with GitHub. Now by committing changes and pushing to GitHub from this folder you can update your website. Currently, this is not automated, and I am manually running the Git commands. However, complete automation of this is planned for a future update.
I wanted an easy way to mark and maintain a website for free. I created a system using Obsidian to edit markdown files which contained the content of the website. The markdown files are parsed and converted to HTML. The HTML files are committed and pushed to a GitHub repository which is a website hosted through GitHub Pages, all for free.