Obsidian's smoothest free release

Currently, my website publishing process uses this article's technique. If you use Notion to write articles, you can take a look at this article "Vercel + Notion Building a Personal Blog".

Process overview:

Choose your own static website generator, I choose Hugo;
Use Hugo to initialize the structure and upload it to the Github repository;
Write articles in Obsidian, and then use the plugin to upload the specified articles (in md format) to the repository in step 2. The plugin's function is to adapt the markdown content in Obsidian to the content required by Hugo;
Deploy the repository and configure the domain.

Obsidian + Github Publisher plugin, required
Hugo + Paper Mod theme, optional
Github, required
Vercel, optional

Continue reading for specific steps.

Hugo + PaperMod#

Initialize a website using Hugo, configure your favorite theme, and publish it on Github. I won't go into details on how to do this.

You can refer to:

Official theme documentation: PaperMod
My repository: miaogaolin/workspace-obsidian-publisher with some modifications to the official theme

Github Publisher#

Install the Github Publisher plugin for Obsidian. The purpose of this plugin is to upload articles and local attachments from Obsidian to the Github repository. You can specify file directories and customize content replacements before uploading.

Github config#

Note:

Do not place the generated token in a public Github repository, as it will become invalid if detected.
When generating a token through here, the link will automatically include the necessary permissions. You only need to set the name and expiration time.

Default configuration#

Based on my usage, I have saved a configuration that you can directly use. If you want to understand why, you can take a look at: Configuration of Github Publisher Plugin for Hugo.

Go to miaogaolin/obsidian-github-publisher-hugo, copy the settings.json, and then paste it to import the plugin:

Obsidian Article Template#

I will explain in detail the configuration in my Obsidian template, which is used for unified settings when publishing articles.
My configuration is closely related to Hugo. If you are using other tools, adjust it according to your own situation.

---
date: "{{date}}" # Creation time, the format I use is YYYY-MM-DDTHH:mm:ssZ
tags: 
	- Tag1
	- Tag2
title: "{{title}}"
slug: "{{time}}" # Custom URL name of the article, filled with timestamps by default in the template format X
share: false  # Used with the Github Publisher plugin, true means the Obsidian article can be published
canonicalURL: "" # The address where the article was previously published elsewhere, to avoid duplication in search engines. Setting this property will prioritize the execution of the canonicalURL article.
keywords:   # Used for SEO optimization, you can also not configure this content, the default will use the content of tags
	- Keyword1
	- Keyword2
description: "" # Description of the article for SEO optimization. When empty, the content at the beginning of the article will be used by default.
series: "Series" # Series of articles
lastmod:  # Last updated time of the article
lang: "cn" # Default is not required to be written, the configuration file will set the default to cn for Chinese, en for English, etc.
cover.image: "" # Article cover image address
author: # Author name
dir: # Used with the Github Publisher plugin to set the directory where the article is uploaded
---

dir attribute: If not set, it will default to uploading to the content/posts directory. If set, it will use content as the root directory. For example, the two articles "About Me" and "Sponsor" on my website are set to dir: ./
cover.image: Set the cover image. After using Github Publisher, it will be converted to a secondary key.

Publishing#

Obsidian commands#

Of course, the plugin's configuration also supports menu mode. Go to Plugin settings -> Menu to configure.

First, publish using the command line. Enter "active" and then select Github Publisher. Remember to enable the "share" attribute of the article, which is set to true.

The progress of the upload will be displayed in the lower right corner. If it is completed, there will be a prompt in the upper right corner:

If you want to upload multiple articles with "share" set to true, use the following commands:

Refresh published and upload new notes: Publish all articles with "share" set to true and that have been newly updated.
Refresh all published notes: Publish all articles with "share" set to true.

Vercel deployment#

Next, visit the Vercel website and deploy the corresponding repository.

You can also choose Github Pages, Netlify, or even your own server for deployment.

1. Github#

2. Create a project#

3. Import & Deploy#

Import the forked project from Github, import, and then click deploy. It may take a while.

4. Domain#

Enter your own domain name and click ADD. Choose the recommended forwarding rules and follow the provided instructions to configure your domain.

These Obsidian plugins are not necessary for publishing a website, but they are necessary for optimizing content formatting:

Obsidian Linter plugin: I only use the setting to add spaces on both sides of English text.
Image Converter: Convert image formats. I convert them all to webp and set the resolution size.
Unique attachments: Used to unify the file names of attachments to the format of "letter + number". Remember to add the webp image format in the configuration.
Image Inserter: Used to find images. I use it to set the article cover, that is, to set the cover.image attribute.

Summary#

The key is to learn how to adapt the article format in Obsidian to the final desired content format using the Github Publisher plugin.

As for whether you choose Hugo or Hexo as your static website generator, both are fine.