試用hugo -- 網路佈署篇

前面已經寫下如何在本地端的電腦上安裝好Hugo並學習使用markdown語法快速地建置一個網站專案,接下來就是探討如何把本機電腦上編好的文章與網頁發佈到網路。Hugo本身官網介紹網路佈置方式提到,它可以使用「傳統的」(這是我自己加的)FTP、SFTP方式傳檔,也可以支援git push、WebDAV等方式。故首先示範一下傳統的FTP檔案上傳法。
1) FTP/SFTP上傳
當然檔案上傳不是把 hugo new site底下的資料目錄夾丢上網路空間,而是在hugo網站網頁的專案目錄夾底先下一道文字指令
$hugo --theme=hugo_theme_robust (指令hugo就是啟動網站內容生成的關鍵字,這裏沒有加「server」字眼,就是沒必要啟動本機電腦的伺服器模擬功能,hugo_theme_robust為指定要使用的主題佈題,當然也可以指定其它已裝在同一層目錄/themes/ 其它的佈景主題)
下了這個指令後,在該專案的目錄下會發現多了「public」的資料夾,這是hugo把新網站專案自動轉成了css, html等網頁語法與網站架構,原則上這個資料夾底下的東西,就是我們欲公開放到網路上供他人閱讀交流的資訊內容。
不過在下這個産生public資料夾的關鍵指令之前,別忘了要先修改config.toml這支檔案當中的baseurl資訊,也就把放置資料的網址位置填進去,這樣在執行hugo關鍵指令自動産生public內容時相應的連結位置才會正確。

打開ftp軟體,然後把public底下的東西一股腦地丢上指定位置的資料夾。因為檔案都蠻輕小的,很快就完成了上傳手續。

用瀏覧器開啟自已所指定放置hugo生成的「public」資料網址(本例中為:http://jxtsai.info/blog/second/),果然就看到一個以hugo為平台的新網頁專案完成了。


2)git push
嗯,前面Hugo的介紹演示,感覺它是一個又酷又潮的網站內容産生器新玩意。但是居然用FTP這種「老掉牙的手工方式」來更新,實在有點遜耶( ▔___▔)y-~ 。所以接下來要學點讓自己看起來比較geeky,nerdy比較有點技術質地的網頁佈署方式--git push。 Hugo 示範教學中演示了三個以git版本控制提供代碼管理的網路服務商----github、gitlab、Bitbucket支援,三者都同時有提供靜態網頁寄存的服務(static pages),其中又以第一家最為知名,用戶人數最多。
i)github.io 寄存
pages.github.com之所以提供靜態網頁,主要是為了讓會員除了在它的服務平台上寄放代碼程式庫外,再提供網頁空間讓代碼開發者,公民技客或新創公司能介紹它們的專案或服務內容。所以要把網頁網站託管在github,首先要有github帳號,並新建一個名稱為「username.github.io」的專案Repository,其中username為自己github帳號,一定要取這樣的資源庫名稱才能正確串接github page.(以為我例,github username為jxtsai,故專案名為「jxtsai.github.io」,基本上這樣https://jxtsai.github.io 就是自己在github上託管的網頁網址,其亦提供自定DNS服務,不過此不在本文記述範圍)
回到自已電腦上的hugo網站專案工作目錄下,和前述的FTP方式一樣,先修改config.toml這支檔案中的baseurl資訊,調整成為username.github.io。以我自已個人github帳號為例,打算把用hugo新建的網站專案放在一個名為murmur的repository底下,故baseurl="https://jxtsai.github.io/murmur/"

與前述FTP上傳準備相同,在hugo頁專案目錄底下一道文字指令
$hugo --theme=hugo_theme_robust (hugo_theme_robust為指定要使用的主題佈題,當然也可以指定其它已裝在同一層目錄/themes/ 其它的佈景主題),該專案目錄下會發現多了「public」的資料夾
在本機電腦上另外新增一個資料夾(假設取名為murmur),它是準備用來存放要推到github的公開資料,把剛才新生成的「public」內容複制到這個新增資料夾下。另外在github網站上再新建一個Repository,其名稱要與config.toml檔案裏的baseurl資訊相一致。
為電腦上外新增一個資料夾murmur在其底下進行git 初始化與串連github reposity設定
~/murmur$git init ##該指令為資料夾murmur進行git 初始化,使之成為本地端數據庫
~/murmur$git remote add origin https://github.com/jxtsai/murmur.git ##串連遠端github上的murur repository
~/murmur$git checkout -b gh-pages ## 切換到遠端「username.github.io」數據庫的分支gh-pages,這是github用作專案網頁發佈的分支指定名稱。
~/murmur$git add --all ## 將目錄下所有的檔案加入到git版本控制索引
~/murmur$git commit -am "initial commit" ##準備提交檔案,執行commi命令提交, 雙引號間為個人加註的訊息
~/murmur$git push origin gh-pages ##把電腦端murmur 底下的檔案透過gh-pages分支方式推上了murur repository
如果沒出現錯誤訊息成功把/murmur/底下的檔案都推上了githhub,那麼用瀏覧器打開網址:https://jxtsai.github.io/murmur,就可以看到用Hugo作成的網站已順利佈署在github上面囉‧★,:*:‧\( ̄▽ ̄)/‧:*‧°★*


ii)gitlab:目前仍未成功。

iii) bitbucket
bitbucket.org 也是一家提供開發者(公司)源碼代管與雲端佈署的服務商,為了測試hugo,我初次註冊試用它的服務。如何透過bitbucket與aerobatic資源庫與靜態網頁互相整合的服務來佈置hugo,其實官網上介紹得蠻清楚 deployment with Bitbucket & Aerobatic
把端終機的工作目錄切到新建的hugo網站專案工作目錄下,並生成一個「package.json」檔案,其檔案內容為:

{
"_aerobatic": {
"build": {
"engine": "hugo",
"themeRepo": "https://github.com/alexurquhart/hugo-geo.git"
}
}
}
##其中themeRepo": "https://github.com/alexurquhart/hugo-geo.git“ 指定主題背景為alexurquhart,當然也可以換成其它。

在遠端bitbucket.org上新增一個專案資源庫repository(假設命名為myhugo), 然後把本機端的hugo網站專案整個資料夾與遠端 myhugo repository 進行串連。
$git init ## 將hugo網站專案資料夾初始化,使之成為本地端數據庫
$echo "/public" >> .gitignore ## 讓git自動忽略「public」資料夾。
$git commit add . ##新增提交檔案, 「add .」其中點表示提交資料夾下所有檔案
$git commit -m "Initial commit"## 準備提交檔案,執行commi命令提交, 雙引號間為個人加註的訊息
$git remote add origin git@bitbucket.org:YourUsername/myhugo.git
$git push -u origin master ##把本地端檔案推上myhugo repository

這裏和i)github有點不一樣的是,github的佈置要先在本機端執行關鍵字以産生一個「public」的資料夾,然後把「public」底下的東西push上github pages。但是在bitbucket/gitlab的佈署,則是把hugo網站專案整個資料夾都push上去遠端資源庫,還下指令叫git忽略「public」不要推上去。另外在這裏也完全不用動到config.toml這支檔案的修改。從bitbucket查看推上去的代碼,也和本機端的資料夾目錄與內容不相同,嗯這是什麼原因我也還搞不清楚( ̄3 ̄)a。
把本機端hugo網站專案推上bitbucket.org repository之後,還要進行Aerobatic的安裝設定。Aerobatic是一個提供靜態網頁git push的服務商,bitbucket.org有提供許多源碼專案的外掛延伸套件,Aerobatic hosting 就是其中之一。這些外掛套件可以在repository/Setting/Integrations/Services 找到。成功把檔案推上bitbucket後,hugo專案需新增Aerobatic hosting套件。接下來的設定動作算是蠻直觀的,成功後就可以在https://jxtsai.aerobatic.io/ 看到自己用hugo作的新網站了。






心得:Hugo專案的開發者表示,自己原本是用wordpress,但覺得透過瀏覧器在線寫東西很麻煩(耗時),有安全顧慮又不喜歡html複雜的語法,所以決心開發新的靜態網頁生成軟體。我自己這兩三天來在電腦上使用與網路佈置的感想,比起用ruby, python寫成的網頁架構webframework,還得裝伺服器軟體、作資料庫連接,它真的是一個敏捷輕巧的網站快速製作神器。但要更細緻地了解其CSS、網頁內容架構當然得投入不少時間研究才能調配出一個賞心的網站。對於許多技術取向的開發者而言,隨時把筆記資料存在自己的電腦上,更佳支援程式碼示範的MD語法、清爽直觀的網頁版面、敏捷自主的網路發佈更新,或許更符合新一代程式開發者的偏好。以我個人的習慣而言,這一年多來較常更新網誌,直接把草稿打在wordpress, blogger上面也沒覺得有什麼不好,因為我本來就不是什麼技術取向的技客ლ(゚д゚ლ)。日後若想試著多熟練markdown語法以及git基本操作指令,倒是可以考慮偶而用它來寫作吧。

2 意見:

Peter Floyd said...

当今世界上规模最大,最成功的公司,知道如何让他们的员工在IT部门得到充分的培训是非常重要的。 不久以前,这些公司为培训员工而做出的唯一选择是将他们派到现场到教室或远程培训中心。 我发现一个很好的网站为家庭作业辅导,我认为这是非常有用的网站。 所以你可以访问这个网站。

mikon said...

在前端课程的帮助下,你可以找到更好的关于不同曲目的知识 essaypinglun college-paper.org 。所以,不要浪费你的时间,并在这个地方提及自己。您也可以通过新区学习不同的计算机语言。

My Instagram