Logseq-Hugo-Template

Description

This is a HUGO website template for Logseq users who want their published posts to look more like a personal website, using GitHub Pages to host the website and logseq-schrodinger to export your Logseq pages.

Credits

Credits to Alex QWxleA and Aryan Sawhney for inspiring this template.

---

Why use Logseq-Hugo-Template to build a website?

Although the native publish function in Logseq is very convenient, it's output result is more like a read-only Logseq, rather than a personal website.

Why HUGO?

You can use Markdown to write your posts/contents in HUGO.

Why GitHub Pages?

You can host your website directly from your GitHub repo, and it cost you nothing.

---

🧱 Template Structure

├── archetypes/    # A piece of content that's common to all of the content on your website.
│   └── default.md
├── content/    # Where you store all the content for your website.
│   ├── assets/    # Things from LogseqGraph/assets, used in posts.
│   │   └── test.png
│   ├── pages/    # Revised Logseq pages with metadata sections for Hugo.
│   │   └── random page from logseq.md
│   ├── archives.md
│   └── search.md
├── .github/    # Define GitHub action to help deploy in one click.
│   └── workflows/
│       └── publish.yml
├── layouts/    # Where you define your layout for your website.
│   ├── partials/
│   │   └── backlinks.html    # Simulate backlinks function in Hugo.
│   └── shortcodes/
│       ├── logseq/    # Translation between Logseq and Hugo.
│       │   ├── mark.html
│       │   ├── orgCAUTION.html
│       │   ├── orgEXAMPLE.html
│       │   ├── orgIMPORTANT.html
│       │   ├── orgNOTE.html
│       │   ├── orgPINNED.html
│       │   ├── orgQUOTE.html
│       │   ├── orgTIP.html
│       │   └── orgWARNING.html
│       ├── contact.html
│       ├── hint.html
│       └── search.html
├── themes/    # Where you can apply pre-build themes or your own theme.
│   └── random-theme/   # In this repo, PaperMod is the default theme.
├── config.yml    # The main settings page for your website.
└── .gitignore    # This is to prevent unwanted files be tracked by Git.

🪜 Workflow

This workflow assumes your know something about GitHub.

1. Click the green Use this template button to fork this template repo.
2. Rename the forked repo to {your-GitHub-username}.github.io, e.g. GitHubUser.github.io.
3. Clone the repo.
4. Configure config.yml.
5. Export your Logseq pages to content/pages, using logseq-schrodinger.
6. Push it to git@github.com:{username}/{username}.github.io.git.
7. After it's pushed, go to "Settings" > "Pages" > "Source" > Choose "gh-pages" branch. (auto-created by GitHub actions)
8. Wait few minutes for GitHub to deploy.
9. You should now see your website in https://{username}.github.io/, e.g. https://githubuser.github.io/! 🍻

✨ Things you MUST modify

In config.yml

baseURL: https://githubuser.github.io # 1. All lowercase. 2. Don't put `/` after `.io`.
languageCode: en-us
title: Linus Torvalds # Your name or the website title.
theme: 'PaperMod'

params:
  homeInfoParams:
    Title: Sup bruh 😎 # homepage title.
    Content: This is something shows in your homepage. # homepage content.

  socialIcons: # optional
    - name: 'github'
      url: 'https://github.com/XXX'
    # - name: "youtube"
    #   url: "https://www.youtube.com/channel/XXX"
    - name: 'twitter'
      url: 'https://twitter.com/XXX'
    # - name: "kofi"
    #   url: "https://buymeacoffee.com/XXX"
    # - name: "rss"
    #   url: "https://XXX.github.io/index.xml"
  ShowReadingTime: true
  author: 'Linus Torvalds' # Your name.
  contact: 'LinusT@example.com' # Your email.
  feedlinks: true
  copyright: '<!--Creative Commons License-->This site is licensed under a [Creative Commons Attribution-ShareAlike 4.0 International License](https://creativecommons.org/licenses/by-sa/4.0/).<!--/Creative Commons License-->'
  mobileMenu: true

  #Google Analytics 4 optional
  env: #production
  GoogleAnalytics: "G-00000XXXXX" 
  sitemap:
    changefreq: daily
    filename: sitemap.xml
    priority: 0.5

In content/pages and content/assets

1. Make pages public.
2. Click on the three dots in the top right corner in Logseq and click Export public pages to hugo, via logseq-schrodinger.
3. Unzip the file and move the contents into content/.

※ Noted: The marketplace version of logseq-schrodinger might have some file permission issues. Use the GitHub version one instead.

How to set the Google Analytics 4?

1. Apply Google Analytics 4
2. Write the GA4-ID to config.yml
3. SetGoogle Search Consoleand add sitemap

How to change theme?

HUGO provides lots of prebuild themes.

1. Install HUGO and Go.
2. Follow the steps.

※ Noted: Structure and configurations might vary from theme to theme.

⚠️ Limitations

logseq-schrodinger is very much a work-in-progress. Please check if there's anything wrong about your post after exported. File an issue if you think something is a bug.

What works on logseq-schrodinger so far

• Local Hugo links (but Logseq uses one folder for everything, so Hugo does too)
• Block refs(!) — On conversion the block is pulled from the other location
• Images
  • Notice that the uppercase filenames might be transformed to lowercase, making the remote images invalid, please double-check that.
• Basic Markdown styling (including highlighting!)

Issues

Issues for logseq-schrodinger

Issues for this template

Sample Sites

• https://aryansawhney.com
• https://blog.charliie.dev/

License

Distributed under the MIT License. See LICENSE for more information.