顯示具有 asciidoc 標籤的文章。 顯示所有文章
顯示具有 asciidoc 標籤的文章。 顯示所有文章

2020年9月7日 星期一

Asciidoctor 專案使用 Travis CI 自動部屬程式範例


Asciidoctor可以轉成 HTML 格式,所以可以使用 Travis CI 自動將 progit book 專案上傳到 github pages。

一、新增 .travis.yml
先將專案編譯成 HTML 等,並將相關的檔案放到新建的目錄 /publc
script:
  - bundle exec rake book:build
  - mkdir public
  - cp progit.html public/index.html
  - cp progit.{pdf,epub} public/
  - cp -r images/ public/
接著是部屬的部分,目錄 /publc 就是我們要放在網頁上的資料,develop 則是我們目前的分支名稱:
deploy:
  provider: pages
  skip_cleanup: true
  github_token: $GITHUB_API_TOKEN
  local_dir: ./public
  on:
    branch: develop
.travis.yml 完整程式碼請參考[這裡],或到官網參考更多的設定參數。

二、設定 Github Token
請參考 [這裡] 第二步驟,按照方法在 Travis CI 新增環境變數 GITHUB_API_TOKEN

三、更新
Push 到遠端後後,等 2-3 分鐘 CI 完成,Repo會多一個分支 gh-pages ,裡面會有複製過去的首頁、圖片等資料,再到 github.io 打開頁面就能看到成果。 


Github Repo:

Github pages:


2020年6月25日 星期四

Travis CI 自動 Jekyll 專案部屬 Github Pages 完整範例


了解如何「[Github] 在github.io建立免費的網站」,搭配使用 Jekyll 可以讓部落格或靜態網站的撰寫更加便利,完成內容的更新後,可以透過指令編譯 _site 的目錄,轉成瀏覽器可讀的格式,最後將目錄上傳到web server。

這些流程可以使用 Travis CI 自動化,當 github repo 收到新的 Request時,自動編譯上傳到 github.io。 若未有 Jekyll 專案,請先參考「靜態網頁部落格工具 Ruby + Jekyll 安裝教學」,建立一個新專案。

一、新增編譯腳本
mkdir script
vim script/cibuild
script/cibuild 內容如下(參考檔案):
#!/usr/bin/env bash
set -e # halt script on error

JEKYLL_ENV=production bundle exec jekyll build
# bundle exec htmlproofer ./_site

二、新增 Travis CI 設定檔
.travis.yml 內容如下(參考檔案):
language: ruby
rvm:
- 2.6
script: ./script/cibuild
before_script:
- chmod +x ./script/cibuild
deploy:
  provider: pages
  skip_cleanup: true
  github_token: $GITHUB_TOKEN
  repo: chenuin/chenuin.github.io
  local_dir: ./_site
  target_branch: master
  on:
    branch: master
TOKEN 設定(參考)
  1. 開啟頁面 https://github.com/settings/tokens/new
  2. 填寫備註(可以自行決定),並選擇 public_repo
  3. 送出
將畫面顯示的 token 複製保存好,到 Travis CI 設定環境變數,新增一個參數 GITHUB_TOKEN,內容就是剛剛複製的這一串字串 。 

※操作畫面可參考「Travis CI 快速部屬 Jekyll + Asciidoctor」的第四步驟 - 新增 github token 。

三、上傳
git add .
git commit -m 'init commit'
git push origin master

專案連結: 


Travis CI 快速部屬 Jekyll + Asciidoctor

Github.io可以支援markdown,若要 asciidoctor 進行編輯,可以透過 Jeykll 在 github 上提供的專案,免去複雜的設定,快速完成布署。內容是參考 README,作業系統為 Ubuntu,統整成下面的步驟:

一、安裝

二、下載原始碼
請先 fork jekyll-asciidoc-quickstart ,再下載專案 jekyll-asciidoc-quickstart
git clone https://github.com/[github-account]/jekyll-asciidoc-quickstart

三、設定 Travis CI
Travic CI 先後推出 travis-ci.org、travis-ci.com,兩者的介面很相近,以下都是使用 travis-ci.com 進行操作。
請先到 github settings,將這個專案同步到 Travis CI上。 



 

四、新增 github token
  1. 開啟頁面 https://github.com/settings/tokens/new
  2. 填寫備註(可以自行決定),並選擇 public_repo
  3. 送出
請將畫面顯示的 token 複製保存好,一旦離開此頁面,就不會再看到這串 token。若遺失 token,只能再另外產生一組新的。
 


完成後,到 Travis CI 設定環境變數(Environment Variables) 
Name:  GH_TOKEN
Value: [token]  (剛剛在github複製的字串)

按下 Add 完成設定。 


 (連結參考 https://travis-ci.com/github/[github-account]/jekyll-asciidoc-quickstart/settings)
  
直接在網頁上新增更方便,原始文件提供的方法是安裝 travis 的套件,用指令加密 token 後,直接新增到 .travis.yml,也可以參考試試看。

五、編輯 .travis.yml
原始專案設定 rvm 版本已經太舊了,請把 2.2 改成 2.6,否則 CI 執行會失敗。
# .travis.yml
rvm:
  - 2.6
完整檔案請看: .travis.yml
git add .travis.yml
git commit -m 'update rvm version'

六、上傳
git push -u origin master
可以到 Travis CI 上確認執行結果,若正確設定的話,將自動把 master 的內容編譯後,自動上傳到分支 gh-pages 。 

開啟頁面 https://[github-account].github.io/jekyll-asciidoc-quickstart/ ,順利看到畫面就完成了。

完整專案範例


2020年5月26日 星期二

Asciidoctor + VS Code安裝外掛套件快速開發、預覽功能


一、安裝套件
方法一
(1) 按快捷鍵 [ctrl] + [P]
(2) 輸入下面的指令:
ext install joaompinto.asciidoctor-vscode
(3) 按 [Enter] 送出



方法二
(1) [View] → [Extensions]


(2) 搜尋「AsciiDoc joaompinto」,找到後按綠色按鈕 Install




二、使用方式
打開AsciiDoc的檔案(.adoc, .ad, .asc, .asciidoc),按下快捷鍵 [ctrl]+[shift]+[v]




三、輸出HTML
快捷鍵 [ctrl]+[alt]+[s],自動在同一個目錄下產生相同檔名的 html 檔案。

參考資料:https://github.com/asciidoctor/asciidoctor-vscode


2020年5月21日 星期四

Asciidoctor 安裝及入門範例


Asciidoctor 是使用純文字編輯的文檔格式,與 Markdown 用途相近(用法比較),利用特定的標記可以呈現為HTML、PDF等其他格式,可以根據排版的需求搭配css或模板進行輸出。上一篇「ubuntu18 + python2 文件編輯 AsciiDoc 安裝說明」提到的 AsciDoc 的進化版,AsciDoc 已經停止更新,目前 Asciidoctor 更活耀,常用在電子書或Git專案文件的撰寫。[使用手冊]

安裝
安裝 Asciidoctor(作業系統 Ubuntu 18)
sudo apt-get install -y asciidoctor

完成後可以確認安裝版本
asciidoctor --version
asciidoctor -V


簡易範例
1. 建立檔案
新增一個檔案 sample.adoc,內容:
.Sample document
====
Here's a sample AsciiDoc document:

[listing]
....
= Title of Document
Doc Writer
:toc:

This guide provides...
....

The document header is useful, but not required.
====

2. 輸出 html
asciidoctor sample.adoc
在同一個目錄下會產生同檔名的HTML檔案 sample.html

預設情況都是轉成html5,並搭配css3,如果想要轉成其他格式,可以加上 -b(--backend) 來指定:
// for *.xml
asciidoctor -b docbook sample.adoc


Custom Theme
預覽剛剛的 sample.html ,發現除了標題、內文等會自動加上顏色或背景,是預設套用的 css3成果:

可利用自訂的 css 來美化頁面,以 asciidoctor-skins 寫好的主題套用作為範例。下載:
git clone https://github.com/darshandsoni/asciidoctor-skins.git

重新輸出時,-a(--attribute) 加上 css 的路徑:
asciidoctor -a stylesheet=./asciidoctor-skins/css/notebook.css sample.adoc

// or
asciidoctor -a stylesheet=notebook.css -a stylesdir=./asciidoctor-skins/css sample.adoc

開啟畫面會套用新的 stylesheet,如下:


常用參數
除了上面提到的 -a-b ,其他常見的選項:
1. 輸出檔名 -o
// -o, --out-file
asciidoctor sample.adoc -o mypage.html

2. 輸出路徑 -D
// -D, --destination-dir
asciidoctor sample.adoc -D pages
輸出檔案會在資料夾 /pages 內。

3. 僅輸出內容 -s
// -s, --no-header-footer
asciidoctor sample.adoc -o mypage.html
只會輸出html中 <body> 標籤裡的內容,方便用於嵌入式頁面。

更多參數可參考:
https://asciidoctor.org/docs/user-manual/#document-conversion

2020年5月1日 星期五

ubuntu18 + python2 文件編輯 AsciiDoc 安裝說明


基本上 AsciiDoc 已經停止更新,2017年已經發布了最終版本,並表示不再更新,當然 asciidoc 仍可繼續使用,直到停止支援 python2。既然都明寫建議用戶轉移使用 Asciidoctor(底層是Ruby) 或支援 Python3 的 asciidoc-py3,以下安裝步驟僅作為紀錄。

安裝之前請先確保主機已經安裝了Python(版本2.4以上),因為安裝的腳本是用Python寫的,多數的linux系統都已經內建,所以可以直接開始按照指令安裝asciidoc。

以下操作環境為ubuntu 18.04(server),目前ubuntu 20.04 LTS (2020/04 - 2025/04)為最新 LTS 版,但不影響下面的操作:

方法一
Step1. 下載原始碼
透過git下載原始碼,選用的版本為8.6.9
cd /bin
git clone https://github.com/asciidoc/asciidoc asciidoc-8.6.9

cd asciidoc-8.6.9
git checkout 8.6.9

Step2. 綁定指令
哈囉
(A) 綁定指令
ln -s /bin/asciidoc-8.6.9/asciidoc.py /bin/asciidoc
ln -s /bin/asciidoc-8.6.9/a2x.py /bin/a2x
(B) 編譯
autoconf
./configure
make
sudo make install


方法二
更快速的方法,可直接透過AsciiDoc Debian package安裝,指令:
apt install asciidoc

Official Site: http://asciidoc.org/