Git Product home page Git Product logo

homigin.github.io's Introduction

Logseq-Hugo-Template

GitHub Repo stars GitHub issues GitHub contributors GitHub code size in bytes

HTML Logseq

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 [email protected]:{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: '[email protected]' # 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.

  • 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

License

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

homigin.github.io's People

Contributors

homigin avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.