[{"content":"Overview I have always been syncing my personal notes to a private GitHub remote repository. Lately, I felt like publishing/distilling some of them as public blog posts.\nI wish the architecture of the blog site to be\ngit-based markdown-based automatically deployed part of the original notes repository Corresponding technology selections are\nGit for version control Hugo for markdown to static pages GitHub Page + GitHub Actions for CI/CD Git submodules for repo linking Problems and Solutions 1. Notes Distilled to Blogs with Git submodule Without breaking the private nature of the repository while making part of the repository public, I utilized git submodule.\nobsidian-vault: A strictly private GitHub repository containing all personal notes (PARA system). blogs: A separate, public GitHub repository nested inside the vault. Nesting blogs inside notes as a submodule makes it possible to edit both parts locally without changing the project directory. However, it is not an essential requirement since no hard dependencies exist between notes and blogs.\n2. The Publishing Automation Pipeline (Hugo + GitHub Pages) Blogs are written as individual markdown files. To host structured text content on a server, they need to be converted to HTML files (possibly bundled with stylesheets). Hugo is a great tool for markdown-to-html conversion and blog hosting. Thus, Hugo is chosen as the static site generator for this blog site.\nWith the submodule isolating the public content, a CI/CD pipeline can be attached directly to the blogs repository. When a new note is pushed from the local blogs/ directory, GitHub Actions automatically executes Hugo build process and deploys it to GitHub Pages.\n3. Customize Font and Favicon (PaperMod Theme) Change Font Get import URL from Google Font\n@import url(\u0026#39;https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400..700;1,400..700\u0026amp;display=swap\u0026#39;); Place custom css file to static/fonts/\u0026lt;fontname\u0026gt;.css (Lora as an example)\n@import url(\u0026#39;https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400..700;1,400..700\u0026amp;display=swap\u0026#39;); body, html, p, li { font-family: \u0026#39;lora\u0026#39;, serif !important; } h1, h2, h3, h4, h5, h6 { font-family: \u0026#39;lora\u0026#39;, serif !important; } Extend it with layouts/partials/extend_head.html\n\u0026lt;link rel=\u0026#34;stylesheet\u0026#34; href=\u0026#34;{{ \u0026#34;fonts/lora.css\u0026#34; | absURL }}\u0026#34;\u0026gt; Change Favicons place favicons under static/icons/\nobsidian/blogs [main] \u0026gt; ls static/icons android-chrome-192x192.png apple-touch-icon.png favicon-32x32.png site.webmanifest android-chrome-512x512.png favicon-16x16.png favicon.ico adjust config.yaml according to config.yaml\nassets: favicon: \u0026#34;icons/favicon.ico\u0026#34; favicon16x16: \u0026#34;icons/favicon-16x16.png\u0026#34; favicon32x32: \u0026#34;icons/favicon-32x32.png\u0026#34; webmanifest: \u0026#34;icons/site.webmanifest\u0026#34; apple_touch_icon: \u0026#34;icons/apple-touch-icon.png\u0026#34; Architecture flowchart TB subgraph Local neovim[\u0026#34;Neovim\u0026#34;] obsidian-vault[\u0026#34;Obsidian Vault\u0026#34;] obsidian-vault --\u0026gt; neovim end subgraph Remote direction TB subgraph Obsidian[\u0026#34;https://github.com/James-Leste/obsidian-vault\u0026#34;] subgraph Notes 0-inbox[\u0026#34;0 Inbox/\u0026#34;] 1-Projects[\u0026#34;1 Projects/\u0026#34;] 2-Areas[\u0026#34;2 Areas/\u0026#34;] 3-Resources[\u0026#34;3 Resources/\u0026#34;] 4-Archive[\u0026#34;4 Archive/\u0026#34;] end subgraph sub-blogs[\u0026#34;blogs/ (submodule)\u0026#34;] hugo-project[\u0026#34;Hugo project\u0026#34;] end Notes -- \u0026#34;distill (manual)\u0026#34; --\u0026gt; sub-blogs end subgraph blogs[\u0026#34;https://github.com/James-Leste/blogs\u0026#34;] blog-content[\u0026#34;blog content\u0026#34;] github-action[\u0026#34;GitHub Action\u0026#34;] github-page[\u0026#34;GitHub Page\u0026#34;] subgraph CI-CD[\u0026#34;Automation\u0026#34;] direction RL github-action -- \u0026#34;hugo serve\u0026#34; --\u0026gt; github-page end end blog-content ---- sub-blogs blogs-public-site[\u0026#34;https://james-leste.github.io/blogs/\u0026#34;] blogs -- \u0026#34;render\u0026#34; --\u0026gt; blogs-public-site end Local -- \u0026#34;git push\u0026#34; --\u0026gt; blog-content Fig 1. The architecture of the automation of this blog site\nReference links Hugo\nHugo - Quick Start Hugo - Host on GitHub Pages What to .gitignore in a Hugo project Getting Mermaid Diagrams Working in Hugo (mikesahari) PaperMod (a Hugo template) Is it possible to use custom fonts on PaperMod? How do I set the favicon for my webpage Git submodule\nGit Submodules - Basic Explanation GitHub\nGitHug Pages - Types of GitHub Pages sites ","permalink":"https://blogs.iqiz.dev/posts/blog-automation-pipeline/","summary":"\u003ch2 id=\"overview\"\u003eOverview\u003c/h2\u003e\n\u003cp\u003eI have always been syncing my personal notes to a private GitHub remote\nrepository. Lately, I felt like publishing/distilling some of them as public\nblog posts.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eI wish the architecture of the blog site to be\u003c/strong\u003e\u003c/p\u003e\n\u003cul\u003e\n\u003cli\u003egit-based\u003c/li\u003e\n\u003cli\u003emarkdown-based\u003c/li\u003e\n\u003cli\u003eautomatically deployed\u003c/li\u003e\n\u003cli\u003epart of the original notes repository\u003c/li\u003e\n\u003c/ul\u003e\n\u003cp\u003e\u003cstrong\u003eCorresponding technology selections are\u003c/strong\u003e\u003c/p\u003e\n\u003cul\u003e\n\u003cli\u003eGit for version control\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://gohugo.io/\"\u003eHugo\u003c/a\u003e for \u003cstrong\u003emarkdown to static pages\u003c/strong\u003e\u003c/li\u003e\n\u003cli\u003eGitHub Page + GitHub Actions for CI/CD\u003c/li\u003e\n\u003cli\u003eGit submodules for repo linking\u003c/li\u003e\n\u003c/ul\u003e\n\u003chr\u003e\n\u003ch2 id=\"problems-and-solutions\"\u003eProblems and Solutions\u003c/h2\u003e\n\u003ch3 id=\"1-notes-distilled-to-blogs-with-git-submodule\"\u003e1. Notes Distilled to Blogs with \u003ccode\u003eGit submodule\u003c/code\u003e\u003c/h3\u003e\n\u003cp\u003eWithout breaking the private nature of the repository while making part of the\nrepository public, I utilized \u003ccode\u003egit submodule\u003c/code\u003e.\u003c/p\u003e","title":"How This Blog Site is Automated?"}]