blogging

By Sigmund Tzeng

1 trouble shooting

1.1 為何沒有生成最舊一篇貼文對應的連結?

1.2.1 如何解决无法解析链接而无法导出的问题 | Ian’s Site

應該是來自於這篇 ox-hugo yields “Unable to resolve link; aborting: ID_LINK” with ID outside of subtree, and broken-links:mark or :t · Issue #447 · kaushalmodi/ox-hugo

說明文件中有這行 Throw an error if no match is found.

實際拋出錯誤的地方則在 (signal ‘org-link-broken (list id))

上一層呼叫函數為 org-export-resolve-link

1.2.3 解決方案

1.2.3.1 刪除造成問題的文字/連結

執行 M-x toggle-debug-on-error 後發現，錯誤發生在 /post/<id：int>這行，把冒號改成全形暫時解決這個問題，具體原因未知

照說要當成連結的話，必需要是兩個方括號帶頭。

1.2.3.2 關閉搜尋連結的功能
1.2.3.2.1 ‘org-id-track-globally’ 關不掉

無解，此路不通

1.3 org-find-olp: Heading not found on level

主標題不能在後面有 [/] 之類的計數器，本身不能是連結。因此目前 export 成 md 的時候，heading 被轉成純文字了

1.4 LoveIt 主題

hugo 版本必需在 0.74 以下 [BUG] Doesn’t work with Hugo >= v0.75.0 · Issue #518 · dillonzq/LoveIt

經choco 安裝 hugo 後，要改版本的方式參 Install specific package version like package@1.2.3 · Issue #1909 · chocolatey/choco

2 在 jawatech.github.io 搭建由 org mode 匯出 blog 之參考解決方案

2.1 org2blog/org2blog: Blog from Org mode to WordPress.

wordpress 專武

2.2 novoid/lazyblorg: Blogging with Org-mode for very lazy people

不太確定…好處是會收集 org 檔中指定的 title

2.3 bastibe/org-static-blog: A static site generator using org-mode

Blog posts contain individual entries. Every org file in org-static-blog-posts-directory is one blog post. Each blog post is rendered as its own HTML page.

2.3.1 AlBasmala: Blogging with Emacs & Org-mode (•̀ᴗ•́)و

2.4 Build Your Website with Org Mode - System Crafters

2.5 Blog 的搭建及其特性

2.6 使用 Emacs org-mode + GitHub Pages 来写博客 - Jiayuan’s Blog - 开发者头条

2.7 Blogging with org-mode and ox-hugo

Blogging with org-mode and ox-hugo // Shane Sveller

2.8 Hugo

Hugo Hugo fast static blog engine supports Org files natively. ox-hugo

An Org exporter backend that exports to Hugo/Blackfriday-friendly Markdown, along with Hugo front-matter in TOML or YAML. This package was developed after being aware of the fact that Hugo natively supports parsing Org (but that support is only partial).. read more on Why ox-hugo?

ox-hugo enables writing posts for Hugo in native Org mode. It allows converting your existing Org files to blog posts with almost no modification. Two common Org blogging flows are supported:

  • Exporting multiple Org sub-trees from a single file to multiple Hugo posts. With this feature, one can produce a whole web site from a single Org file (the ox-hugo documentation site is one such example, which is

generated from this one Org file). It also leverages Org tag and property inheritance, and much more!

  • Exporting a single Org file to a single Hugo post.

See the package’s website for complete documentation, and the test site [source] for hundreds of test cases and feature demonstrations.

2.9 org-mode + Gatsby

https://github.com/orgapp/gatsby-orga

https://github.com/orgapp/orgajs

https://www.gatsbyjs.org/

2.10 用Org Mode + Hugo写博客，并通过Github Action自动部署到Github Pages - superbear’s blog

提及 submodule 在 theme 的使用 未使用 easy-hugo 進行預覽

2.11 My blogging setup with Emacs and Org Mode · Andrey Listopadov

提及 submodule 在 theme 的使用 文長、較近期

2.12 Create Websites with Emacs: Blogging with Org mode and Hugo

未直接提及 submodule 在 theme 的使用，但提到 theme 的設置時，所指向的連結 Quick Start | Hugo 仍然是使用 submodule 提到內部連結解法 ，但也提到匯出圖片的問題，以及 drawer 等 property 會被匯出的問題

3 準參考方案 如何利用 org mode 写博客 - 知乎

使用 easy-hugo 進行預覽，但未直接提及 submodule 在 theme 的使用

3.1 單文檔寫法參 博客写作流程之工具篇： emacs, orgmode, hugo & ox-hugo - 贤民的博客

3.2 博客写作流程之工具篇： emacs, orgmode, hugo & ox-hugo

https://www.xianmin.org/post/ox-hugo/

3.3 hugo參 使用 Hugo 搭建个人网站（博客、个人主页）并发布到 Github 上 - kinredon’s blog

終於提及 submodulev 在 theme 的使用

4 最終參考方案 “博客由 Hexo 迁移至 Hugo”

博客由 Hexo 迁移至 Hugo

4.1 install choco

https://guangchuangyu.github.io/cn/2018/06/chocolatey/ 以管理員身份打開 powershell Set-ExecutionPolicy Bypass -Scope Process -Force; iex ((New-Object System.Net.WebClient).DownloadString(‘https://chocolatey.org/install.ps1')) The packages themselves go to ‘C:’ (i.e. C:). A shim file for the command line goes to ‘C:’ and points to an executable in ‘C:’.

4.2 install Hugo

https://blog.yowko.com/windows-10-hugo/

choco install hugo-extended –force -y

The install of hugo-extended was successful. Software installed to ‘C:-extended’

Chocolatey installed 1/1 packages. See the log for details (C:.log).

4.3 Quick Start | Hugo

Quick Start | Hugo 中包含快速建站的指令

4.3.1 theme 架站時執行一次即可

4.3.1.1 theme “academic”(此方案未採用，因與最新版 hugo 衝突)

https://themes.gohugo.io/academic/ https://zlearning.netlify.com/linux/emacs/emacs-hugo-academic.html cd %USERPROFILE%/Dropbox/jawatech git clone https://github.com/jawatech/academic-kickstart.git My_Website cd My_Website git submodule update –init –recursive hugo server

4.3.1.1.1 update

git submodule update –remote –merge cd themes/academic git checkout <VERSION> where <VERSION> is the version in the form vX.X.X that you wish to update to. Otherwise, to update to the latest development version, substitute <VERSION> with master.

4.3.1.2 theme “ananke”
4.3.1.2.1 [Day09] 選擇困難再度發作之主題挑選 - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

我的看法與作者一致， LoveIt 是首選，但因與最新版 hugo 衝突，我也決定與此文作者一樣慢慢修改 ananke 主題

4.3.1.2.2 [Day11] Let’s Post! - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

可惜作者停筆於此篇，不知道實際上 (側欄) toc 的加入方法…

4.3.2 run

使用一般使用者身分，打開 cmd cd %USERPROFILE%_Website #此處 My_Website 是站名 hugo server http://localhost:1313/ https://sourcethemes.com/academic/docs/get-started/

4.4 org 檔頭指定 org-hugo-default-section-directory

除了少數初期的 theme，與預設的 posts 是相同的，其它大部分都得要重設，例如改為單數形的 post

4.5 匯出 org 中選定子樹：C-c C-e H H

4.6 站點測試 用github來展示自己寫好的前端網頁

看官網 https://pages.github.com/

  1. 建立新的 repo, 假設為 twmle，帳號名為 jawatech
  2. 建立&進入本地端的對應目錄 twmle | git clone
  3. 執行以下指令

echo “# twmle” >> README.md git init git add README.md git commit -m “first commit” git remote add origin https://github.com/jawatech/twmle.git git push -u origin master

  1. 打開 https://github.com/jawatech/twmle/settings ， GitHub Pages 下的 Source 選取 master branch 並按下 Save
  2. 打開 https://jawatech.github.io/twmle/

4.6.1 如何在GitHub建立靜態網站

http://ithelp.ithome.com.tw/articles/10171911

4.6.2 發布一個自己的網頁吧：github建立靜態網頁教學

http://boompie0715.blogspot.tw/2015/09/github.html

4.7 手動發布

以下假設本地及遠端 branch 名稱都是 main，本地可以如下進行分支 git checkout -b main

第一次部署，要將 content 子目錄加到 .gitignore 中，再將 public 子目錄對應到 github 上公開的目錄

cd public git init git remote add upstream https://github.com/jawatech/jawatech.github.io.git

以下則為實際的發布指令，我是建議利用 git-gui cd %USERPROFILE%/Dropbox/jawatech/quickstart hugo cd public git-gui “stage changed” “sign off” “commit” “push” 不使用 git-gui 的文字命令如下 git add . git commit -m “switch to hugo” git push upstream main

第一次 push 之前可能要先 pull 一次，參 解决git 错误error: failed to push some refs to……_51CTO博客_git403错误

git pull –rebase upstream main

4.8 自動化發布，使用 github action

Host on GitHub | Hugo

5 Host on AWS Amplify | Hugo

6 SEO

以 jawatech github 為關鍵字查詢 google 的返回結果，思考其中的關聯並優化

7 tikz

7.1 babel

7.1.1 tikz 設定，記得 exports both才能圖碼俱現

參 Exporting Code Blocks (The Org Manual) ，其它選項有 code, results, none 

\begin{tikzpicture}[domain=-2:2,samples=100,scale=1.0,>=latex]
\tikzset{bgrid/.style={help lines,color=blue!10,very thin}}
\draw[bgrid] (-1.5,-3.5) grid (7.5,3.5);
\draw[<->, color=black] (-1.5,0) -- (7.5,0) node[right] {$x$};
\draw[<->, color=black] (0,-3.5) -- (0,3.5) node[above] {$y$};
\foreach \x/\xtext in {-1,1,2,3,4,5,6,7}
\draw (\x cm,1pt) -- (\x cm,-1pt) node[anchor=north] {$\xtext$};
\foreach \y/\ytext in {-3,-2,-1,1,2,3}
\draw (1pt,\y cm) -- (-1pt,\y cm) node[anchor=east] {$\ytext$};
\draw[thick,color=black,domain=0:7.5,smooth]plot (\x,{sqrt(\x)}) node[anchor=south] {$y = \sqrt{x}$};
\draw[dashed,color=black,domain=0:7.5,smooth]plot (\x,{(-1)*(sqrt(\x))}) node[anchor=north] {$y = -\sqrt{x}$};
%\draw[thick,color=black,domain=-1.5:5.5,samples=3]plot (\****)-2}) node[anchor=south] {$y = {x} - 2$};
\filldraw[black] (4,2) circle(2pt) node[anchor=south east] {$(4, 2)$};
\filldraw[red] (1,-1) circle(2pt);
\draw[red] (1.5,-1) node[anchor=west] {$(1, -1)$};
\end{tikzpicture}

7.1.2 tikz0 可預覽，亦可匯出為 pdf 或 html

Set up the TikZ in Emacs Org | MSC

7.1.3 tikz2

7.1.4 Graph Drawing - PGF/TikZ Manual

7.1.5 FSM

Automata Drawing Library - PGF/TikZ Manual

7.2 preview / export

7.2.1 tikz3

7.2.1.1 not ok

7.2.2 tikz4

目前預覽或匯出為pdf是ok的，指令/組合鍵為：C-c C-e C-s l o。匯出 html 則只有單行的 latex 能成功

7.2.3 tikz5

For MiKTEX, use the update wizard to install the (latest versions of the) packages called pgf, xcolor, and xkeyval. 但是預設已經都安裝了

(org-babel-do-load-languages ‘org-babel-load-languages ‘((latex . t))) ;手動加在設定檔中，這使得 babel 可以執行，但仍無正確出圖

(add-to-list ‘org-latex-packages-alist ‘("" “tikz” t)) ;這個部分檔頭已經有宣告，沒有必要了 org-latex-default-packages-alist org-format-latex-header

(setq org-latex-create-formula-image-program ‘imagemagick) ;dvipng? 目前未安裝 imagemagick

tikz pgf - Why are my characters overlapping? - TeX - LaTeX Stack Exchange dvipng 輸出的圖會纏在一起

Using the tex:dvipng option - exporter does not find tikz package : orgmode

(setq org-latex-create-formula-image-program ‘dvisvgm) (setq org-preview-latex-default-process ‘dvisvgm) ;dvipng

但是檔名必需設為 png ??? 設為 svg 完全無法產生圖檔，是為何??? 可能的說明在以下連結

latex block tikz to svg 原作者應為 Edouard Debry，簡單來說就是要改 ob-latex.el

subject:“Re\: latex block tikz to svg”

Pdftex: Inkscape svg to pdflatex code example 這篇寫得亂七八糟，感覺是 ai 寫的

7.2.3.1 改 ob-latex.el 把 png 改成 svg
     ((and (string-suffix-p ".png" out-file) (not imagemagick)) <br/>

改成 ((and (string-suffix-p “.svg” out-file) (not imagemagick))

7.2.3.2 set git bash as shell in emacs 似乎沒有影響

(setq binary-process-input t) ;??? (setq w32-quote-process-args ?\") ;??? (setenv “SHELL” shell-file-name) ;這好像要設? (setq explicit-shell-file-name “C:/Program Files/Git/git-bash.exe”) ;原值為nil (setq explicit-sh-args ‘("-login" “-i”)) ;???

7.2.4 tikz6 預覽時 chemfig 不行，但匯出可

7.3 Plots of Functions - PGF/TikZ Manual

TikZ and pgf Manual for version 1.18