How I Publish Obsidian Notes to a NextJS Blog

Publishing posts becomes seamless as everything is in the same world of consuming, evolving and publishing.

Meher Howji avatar image
··· Likes

In order to publish to from Obsidian, there are few prerequisites that need to be in place.

  • Obsidian is configured to be able to push to GitHub using the Obsidian Git plugin
  • Next.js or Gatsby site has a directory from which you are reading your markdown files for rendering. I use Contentlayer to simplify this process.

With that, you can set up a GitHub Action with the following script. Although the script looks pretty long, but it’s pretty simple if you look at each step.

name: Publish Posts
      - master
    runs-on: ubuntu-latest
    - name: Check out Obisidian Vault
      uses: actions/checkout@v3
    - name: Find .md files tagged with ''
      run: |
        rm -rf publish_ready
        mkdir publish_ready
        find . -type f -name "*.md" -exec grep -l "" {} \; -exec cp {} publish_ready/ \;
    - name: Rename .md to .mdx and filename to dashed lowercase
      run: |
        find publish_ready -type f -name "*.md" -exec sh -c 'mv "$0" "${}.mdx"' {} \;
        find publish_ready -type f -exec bash -c 'dir=$(dirname "$0"); base=$(basename "$0"); newbase=${base,,}; newbase=${newbase// /-}; mv "$0" "$dir/$newbase"' {} \;
    - name: Check if files exist for publishing
      id: check-files
      run: |
        echo "files_exist=$(ls -A publish_ready | wc -l | tr -s ' ')" >> $GITHUB_OUTPUT
    - name: Status in Obsidian
      run: |
        echo "Publish Page Count: ${{ steps.check-files.outputs.files_exist }}"
        echo "Publishing following pages: "
        ls -A publish_ready | sed 's/^/   /'
    - name: Clone aerosailor-next.git
      if: steps.check-files.outputs.files_exist != 0
      run: |
        git config "Meher Howji"
        git config ""
        git clone https://meherranjan:<your-personal-github-token>
    - name: Copy files to aerosailor-next
      if: steps.check-files.outputs.files_exist != 0
      run: cp -r publish_ready/* aerosailor-next/data/articles/
    - name: Check git status
      if: steps.check-files.outputs.files_exist != 0
      id: git-status
      run: |
        cd aerosailor-next
        git config "Meher Howji"
        git config ""
        echo "files_exist=$(ls -A publish_ready | wc -l | tr -s ' ')" >> $GITHUB_OUTPUT
        git_status_output=$(git status 2>&1)
        if [[ $git_status_output == *"nothing to commit"* ]]; then
          echo "staged=false" >> $GITHUB_OUTPUT
          echo "staged=true" >> $GITHUB_OUTPUT
    - name: Publish to
      if: steps.git-status.outputs.staged == 'true'
      run: |
        cd aerosailor-next
        git config "Meher Howji"
        git config ""
        git add .
        git commit -m "Auto publish markdown files from Obsidian"
        git push

Here's a step-by-step explanation of what it does:

  1. The workflow is triggered when a push event occurs on the “master” branch.
  2. The "copy-files" job runs on the latest Ubuntu environment.
  3. Check out the Obsidian Vault using the actions/checkout@v3 action.
  4. Finds all Markdown files tagged with '' in the repository and copies them to the "publish_ready" directory.
  5. Rename the copied .md files to .mdx and converts their filenames to lowercase with dashes instead of spaces.
  6. Check if there are any files in the "publish_ready" directory, and the count is saved as an output.
  7. The "Status in Obsidian" step displays the number of pages to be published and lists their names.
  8. If there are files to publish, it clones the "aerosailor-next.git" repository.
  9. The files from "publish_ready" are copied to the "aerosailor-next/data/articles/" directory.
  10. Check the git status of the "aerosailor-next" repository and determines if there are any changes to be committed.
  11. If changes are staged, the "Publish to" step pushes the changes to the "aerosailor-next" repository with a commit message indicating automatic publication from Obsidian.

In summary, this GitHub Actions workflow automates the process of publishing Markdown files tagged with '' to the website. It checks for changes in the files, copies them to the target repository, and commits the changes if necessary, triggering the deployment to the website.

Checkout How I Built My Website post for more details on the libraries and utilities I have used.