How to publish from Obsidian notes

I want to publish posts in my website directly from my Obsidian notes:

• to reduce the work necessary to publish and focus only on writing.
• possibly for free

After some research I have found that it is possible for free using various apps.

Note 1: The website that will be created is a static website.

Note 2: I actually pay a little fee per year because I decided to have a custom domain, so I pay for the registration of the domain. If you don’t want a custom domain or have a free domain, it is completely free.

These apps are:

I won’t go into details of every step of the procedure because the link below are almost self-explaining. If you have problems, feel free to contact me. If I can help, I will certainly do.

Prerequisites

• An Obsidian vault where you write your notes
• A Gitlab account

Main steps to do only one time

1. Install the various apps
2. Set up a git repository
3. Set up a theme for your website
4. Set up Gitlab Pages config file
5. Fix the render-link and render-image files
6. If you want, set up your custom domain

Install the various apps

1. Install Git https://git-scm.com/downloads
2. Install obsidian-export https://github.com/zoni/obsidian-export
   1. Install Rust https://www.rust-lang.org/tools/install
      1. Install Visual Studio installer. This is required during the Rust installation.
3. Install Hugo (the extended version) https://gohugo.io/installation/windows/
   1. Install Go https://go.dev/doc/install

Set up a git repository

Fork, clone or create a git repository. This will be the repository that contains the files necessary to setup the static website with your Obsidian notes. (see https://gitlab.com/pages/hugo)

Set up a theme for your website

1. Install Loveit theme https://hugoloveit.com/theme-documentation-basics/
2. Modify config.toml file to configure your website template

Set up Gitlab Pages config file

Modify .gitlab-ci.yml file to configure the Gitlab Pages. My file looks like this:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

image: registry.gitlab.com/pages/hugo/hugo_extended:latest

# Set this if you intend to use Git submodules
variables:
  GIT_SUBMODULE_STRATEGY: recursive
  HUGO_ENV: production

default:
  before_script:
    - apk add --update --no-cache git go
    - git submodule update --init --recursive
    - hugo mod init gitlab.com/pages/hugo
    - hugo mod get -u github.com/dillonzq/LoveIt

test:
  script:
    - hugo
  rules:
    - if: $CI_COMMIT_REF_NAME != $CI_DEFAULT_BRANCH

pages:
  script:
    - hugo
  artifacts:
    paths:
      - public
  rules:
    - if: $CI_COMMIT_REF_NAME == $CI_DEFAULT_BRANCH

Fix the render-link and render-image files

1. To publish correctly Obsidian link like [[MyLink]], modify the render-link file contained in the directory ...\hugo\themes\LoveIt\layouts\_default\_markup in the following way:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18

{{- $url := urls.Parse .Destination -}}
{{- $scheme := $url.Scheme -}}

<a href="
  {{- if eq $scheme "" -}}
    {{- if strings.HasSuffix $url.Path ".md" -}}
      {{- relref .Page .Destination | safeURL -}}
    {{- else -}}
      {{- .Destination | safeURL -}}
    {{- end -}}
  {{- else -}}
    {{- .Destination | safeURL -}}
  {{- end -}}"
  {{- with .Title }} title="{{ . | safeHTML }}"{{- end -}}>
  {{- .Text | safeHTML -}}
</a>

{{- /* whitespace stripped here to avoid trailing newline in rendered result caused by file EOL */ -}}

2. To publish correctly images, modify the render-image file contained in the directory ...\hugo\themes\LoveIt\layouts\_default\_markup in the following way:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19

{{- $url := urls.Parse .Destination -}}
{{- $scheme := $url.Scheme -}}

<img src="
{{- $scheme}}
  {{- if eq $scheme "" -}}
    {{- if strings.HasSuffix $url.Path ".md" -}}
      {{- relref .Page .Destination | safeURL -}}
   {{- else -}}
      {{- printf "/%s%s" "posts/attachments/" .Destination | safeURL -}}
    {{- end -}}
  {{- else -}}
    {{- .Destination | safeURL -}}
  {{- end -}}"
  {{- with .Title }} title="{{ . | safeHTML }}"{{- end -}}
  {{- with .Text }} alt="{{ . | safeHTML }}"
  {{- end -}}
/>
{{- /* whitespace stripped here to avoid trailing newline in rendered result caused by file EOL */ -}}

Note: If the directory where the images of your Obsidian vault will be exported is different from posts/attachments/, you need to change the line {{- printf "/%s%s" "posts/attachments/" .Destination | safeURL -}} accordingly.

Set up your custom domain

If you want to set up your own domain, then follow the following instructions https://docs.gitlab.com/ee/user/project/pages/custom_domains_ssl_tls_certification/

Note: The instructions in the above link did not work for me. I needed to set up the DNS records as follows:

Record A

I do not set a Record CNAME.

Record TXT

Main steps to do every time you write contents

1. Create some contents
2. Check contents before publishing
3. Publish your contents

Create some contents

1. Create some content files in the content directory like the About page
2. Write the content you want to publish in obsidian. I created the following structure:
   • I have a Published directory in my obsidian vault.
   • Under the Published directory, I have:
     • an attachments directory where I save all the images linked in the posts.
     • All the notes that I want to publish.

Check contents before publishing

1. When ready to publish, run the obsidian-export command.
   • The first directory of the command is the source where the obsidian notes are contained. In my case is C:\...\My_obsidian_vault\Published
   • The second directory of the command is the destination where the obsidian notes will be copied. In my case is C:\...\content\posts
2. Run hugo server command and then open the //localhost:1313/ in your browser to see a preview of the website.

Publish your contents

1. When ready to publish
   1. Run hugo command.
   2. Commit and push. Gitlab automatically run the ci pipeline and build your website. Note: if you want to push without running the ci pipeline, then push with the following option git push -o ci.skip
2. Go to namespace.gitlab.io or to your own domain to see your website.