If you thought you could simply buy obsidian publish and replace your wordpress site, or equivalent I want to quickly disabuse you of that notion. Much like when you first setup wordpress, or any CMS you need to decide how you are going to organize your content. The common CMS solutions have this presupposition about what you are going to do, and how you are going to do it. Obsidian also has those, but it's assumptions are different. It assumes you want so create simple files, and store them on the internet for later viewing or sharing with other people. There is nothing wrong with this, and in fact many people in the Microsoft MVP community started blogging for exactly this reason. "I solved this problem, and I need to remember how I solved it in the future". However this results in a bit of an odd workflow, as gone is the simplistic blogging system, and date structure of wordpress. So how, do you get this back in Obsidian Publish?
# Building out the workflow:
When you use online applications like "wordpress" and other tools a lot of the workflow on how your are going to build a post or a blog entry is taken care of for you. In obsidian, you need to build that flow yourself. I would like to share how I have endeavored to create the workflow that works for me so your site can look like mine.
>[!Important] TLDR
>Markdown tables with the right information, and the right CSS + File properties can be used to create the look and feel of blocks a reader can click on to read through. You need to update the CSS to make the table convert to cards properly, you need to add properties to the files, so you can automate, what you want to show on the cards.
## Requirements
Before we get started, there are a few extra things you need. One of the great mantras of obsidian is "there is a plugin for that". While plugins aren't directly supported in Obsidian Publish, that doesn't mean you can't use plugins to streamline the creation, and management of your content.
- Small Update to Publish.CSS
- [Dataview Plugin]((https://github.com/blacksmithgu/obsidian-dataview)- ([Obsidian Direct URL](obsidian://show-plugin?id=dataview))
- [Templater Plugin](https://github.com/SilentVoid13/Templater) - ([Obsidian Direct URL](obsidian://show-plugin?id=templater-obsidian))
- Utilize a Theme that supports cards. [Minimal](https://github.com/kepano/obsidian-minimal-publish) is a great option and is maintained by Obsidian team members.
# Getting Started
This is broken down into five main steps.
1) [[#Configure Publish CSS]]
2) [[#Content Structure Home Page]]
4) [[#File Property Structure]]
5) [[#Template Execution]]
6) [[#Publication]]
Please note, you need to complete all five steps in the proper order to make this work.
## Configure Publish CSS
If you're new to Obsidian managing the look and feel of your website has a few components to know about.
- Publish.CSS
- Publish.js
- File Properties
To make your website look like this:
![[website_example.png]]
You will need to be willing to make changes to two of these components.
- Publish.CSS
- File Properties
>[!Important] Don't just skip over the rest of the blog
>This is part one. If you just copy the CSS and add it to your publish.css, you will not get the desired output. This just modifies the CARDS behavior when in use. You still need to set up properties on the files, and use a SPECIFIC structure to get consistent results. You also MUST use a them that supports the extra CSS such as Minimal. To learn how to implement a community theme you can read more [here:](https://help.obsidian.md/Obsidian+Publish/Customize+your+site#Use+a+community+theme)
The below code block is attributed to [Sigrunixia]([sigrunixia (Rebbecca Bishop) (github.com)](https://github.com/sigrunixia)) who was kind enough to help with this project. You will need to take this and add it to the bottom of `Publish.css`.
```CSS
/* Makes cards look like blog posts with date ranges */
.table-cards .markdown-rendered td, .markdown-rendered th {
border: none;
}
.table-cards table tbody > tr > td:not(:last-child):not(:first-child) {
border: none;
}
.table-cards table tbody > tr > td img {
object-fit: unset;
}
.table-cards .markdown-rendered thead > tr > th, .markdown-rendered tbody > tr > td {
overflow: unset;
}
.table-cards .metadata-container .internal-link, .markdown-rendered .internal-link {
font-size: 1.1em;
font-style: italic;
font-weight: bold;
text-decoration-line: none;
}
.list-cards.markdown-preview-view div > ul .image-embed img {
object-fit: cover;
max-height: fit-content !important;
}
.list-cards.markdown-preview-view div > ul > li {
padding: 0;
}
/* Fix Bug with CSS from Publish side */
.markdown-rendered tr{
height: inherit;
}
```
This CSS is what makes the cards display in the required format.
## Content Structure Home Page
Let's talk about content structure. The way I've designed my site, is that the home page is always "rebuilt" with articles in the proper order. To do this I have a file called `home.md` this file holds the markdown table that displays the cards. This file MUST have the following properties configured on it:
```md
cssclasses:
- table-cards
- table-cards-cols-1
- cards
- list-cards
```
In something like VSCode it will look like this:
![[vscode_mdExample.png]]
In Obsidian it will look like this:
![[obsidian_mdExample.png]]
The CSSClasses file property is what enables the cards to properly display in this structure. You are of course free to change the number of cards in the columns, I just found that 1 worked best for me.
## File Property Structure
File property structure is possibly the single most important thing to consider when working with Obsidian. I have found, that if you are familiar with programming it's useful at times to think of notes as "objects" and "templates" as classes.
To this end, I have a a template that is called "New Post". All posts includes the following properties.
![[media/blogPosts/Obsidian_Blog_Guide/propertiesExplained.jpg]]
### Description
This is the standard description field in obsidian. You should always fill this out. This is what is rendered when creating a social card, for things like X, Facebook, Discord and more. If nothing is filled out here, your readers won't know what this is. This is ALSO used later to fill in the section on the home page so readers know what the post is about.
### Cover
I use a default media cover so that all of my posts always have something with my personal branding on it. It's important to note, you want to keep this image small. This is also what will get used in the markdown table on the home page as readers scroll your site. This is also what is displayed on social "hero cards" on social media.
### Tags
You don't need this, I use this for my own personal organization to help classify things in my head when I'm searching on my site. It might be useful for you to organize with though.
### Publish
This is the default publish property. If this is set to "false" publish will assume you don't want to ship this to your site. If it's set to true when you click the publish button it will automatically be checked to load.
>[!Important] Important - This is an exclusion rule
I also use this as a filter to not include anything with "publish: false" in the markdown table. I you don't set the property to TRUE the template query provided later on will NOT add it to your home page.
### Exclude
There are some notes, even when I publish them I don't want them on my "home page". Example my Powershell snippets. These are one liner helpful tidbits. I don't need to add them to the home page whenever I add one. So I just exclude them from the list to avoid "noise".
>[!Warning] Warning - This is a required property
>Again this is required to be set to false if you want the Templater plugin to add things to the home page output.
## Templater Execution
With all of that out of the way comes the last piece, using Templater to build out the markdown table. The below template is something I cobbled together from several different obsidian users. It uses Dataview to find all of the notes that meet requirements, and then creates the table in a file called "Home Output". It's worth noting that it will also create a file called "untitled" with the results of success or failure. You can delete this file.
```
<%*
const dv = app.plugins.plugins["dataview"].api;
// Add as many filenames and queries as you'd like!
const fileAndQuery = new Map([
[
"Home Output",
'TABLE WITHOUT ID ("![[]](" + cover + ")") as Cover,file.link AS Post,(dateformat(date, "yyyy-MM-dd")) AS Modified, description as "Description" WHERE publish = "true" and exclude != "true" SORT date desc',
]
]);
await fileAndQuery.forEach(async (query, filename) => {
if (!tp.file.find_tfile(filename)) {
await tp.file.create_new("", filename);
new Notice(`Created ${filename}.`);
}
const tFile = tp.file.find_tfile(filename);
const queryOutput = await dv.queryMarkdown(query);
const fileContent = `\n\n${queryOutput.value}`;
try {
await app.vault.modify(tFile, fileContent);
new Notice(`Updated ${tFile.basename}.`);
} catch (error) {
new Notice("⚠️ ERROR updating! Check console. Skipped file: " + filename , 0);
}
});
%>
```
>[!Warning] Make sure you have the required plugins Installed & Configured
>You MUST have installed Templater, and Dataview plugins from the community repo. If you do not have these, go back to the [[#Requirements]] section and install them. Dataview is used to create queries, to find all the "posts" that meet the specific needs to create the markdown table. Templater outputs the markdown table.
## Publication
You're now ready to finish publication. Simply copy the markdown table from the "home output" file, paste it into your landing page, and delete the home-output file. You could of course, make Templater update the home file, however I prefer the small manual step just in case I did something wrong. Once completed click publish, and have a beautifully formatted blog post structure!
## Resources - I don't need to read, just give me your publish CSS and Template
For those of you who don't care about the context and structure and think you can figure it out on your own, here is a GitHub Repository with my Publish.CSS changes and the template.
[WebsiteHelpers/obsidian at main · JordanTheITGuy/WebsiteHelpers (github.com)](https://github.com/JordanTheITGuy/WebsiteHelpers/tree/main/obsidian)