小白也能用hugo架設屬於自己的網站-8 最後的修改和確認,產生網站資料夾上傳到遠端的server
終於到了要驗收成果的時候了,
這篇將帶你真正的建立好自己的網站,讓所有知道網址的人,都能一睹你網站的豐富內容啦!
OK! 讓我們馬上開始!
把專案資料夾轉為網站資料夾
要知道的是,專案資料夾並不能放到server裡來建立網站,
而是要將專案資料夾轉換成網站資料夾,才能放到server,讓別人用瀏覽器瀏覽,
轉換之後,你一樣能繼續修改你專案資料夾內的內容,
修改完後,經過轉換再上傳到server,這樣就能達到更新網站的目的,
下面來看看如何轉換,方法非常的簡單→
- 找到你的專案資料夾,在可以看到
config.toml
的這層目錄中,按
alt+d
在網址列,跳到行首,然後輸入
cmd空一格
按enter打開cmd - 直接輸入
hugo
就會開始轉換了,如果轉換的內容要包括草稿的文章,就輸入
hugo -D
p.s 注意D有大寫 - 總之,無論是hugo或hugo -D,都能達到轉換的目的,
轉換完成後,NVDA按7、9可以看到耗時多少毫秒完成,你就能關閉cmd視窗了 - 回到專案資料夾的視窗,你會在專案資料夾內發現多了一個名為
public
的資料夾,這個就是我一直提到的網站資料夾了,
之後你只要將這個資料夾內的所有資料傳送到server上,就能建立好網站囉!
三種server方案選擇
在平時,會因為用途的不同而有server和Client的分別,
其實本質上都是電腦,只不過Client用來稱呼個人用戶的電腦,而server用來稱呼專門服務很多人的電腦,
只要是為了服務很多人的電腦,都能稱為server,無論電腦上裝的是什麼作業系統。
關於server的選擇,我使用過的有三種,下面分析一下優缺點給你參考看看→
- 把家裡的電腦當server用
如果你想這麼做的話,你需要有固定的ip,一台電腦(實體機或虛擬機皆可)、以及能夠24小時不關機,並且了解server系統相關的操作
這個選擇比較適合進階用戶,一些相關需求和細節就不在此贅述了 - 租用其他公司提供的server
你需要付費租用server,並且大多server都推薦用linux系統,你還需要學習基本的linux操作和知識,
這個選擇比起用自家的電腦當server方便很多,花費也不見得會比用自己的電腦當server高,
並且你可以在linux上建立除了架網站外更多的服務,例如用來提供檔案下載的 server、作為個人的雲端硬碟、架設用來聊天的teamtalk server、又或是架自己的NVDA remote等等都不是問題,
關於租用server的教學,我已經開展了這方面的系列文章,你可以到這裡閱讀→
點我看linux不專業心得分享 - 利用github上的github page功能建立網站
github是微軟旗下的一個網站,是一個很多創作者、開發者會用來多人協作的平台
我們現在用的hugo meme主題模板,就是放在github上多人協作開發後的產物,
而github也提供一個功能,讓所有擁有github帳號的人都可以透過github上的repo(倉庫)來託管自己的靜態網站,
這個選擇適合那些不想花任何錢,又想架設網站的人,
不過這種方法有個缺點,你上傳到github上的網站資料,所有看到你repo(倉庫)的人都能任意的把你的整個網站下載回自己的電腦上,
如果你不想自己辛苦弄的網站被任意下載、修改後換個名字當成別人自己的網站,那就不建議用這個方法,
雖然現在一般的網站,你也能隨意的ctrl+c來複製,但能複製的僅是文字內容,如果文章中有連結、有用MarkDown來排版,那別人要盜用還需要花更多時間來重新編輯,
但如果你的網站沒有這些考量,或本來就想多人協作,那就可以使用這個方法來建立網站,
本篇也會介紹使用github page來建立網站的方法。
p.s github在你付費之後,可以升級成github pro帳號,就可以用私人的repo(倉庫)來建立網站,但每個月收費4美金,
如果你純粹只是為了建立網站,也不會使用github的其他付費功能,我認為這種選擇性價比非常低,
因為租用server最便宜也只需一個月5美金,而且除了架站之外,還能安裝不同的軟體,提供各種服務
利用github pages建立網站
要完成接下來的步驟,你的電腦上需要安裝git這個工具,
如果之前你的hugo meme主題模板是按照我的教學來下載的,那你已經有git工具了,不需再安裝,
另外,因為github是全英文的介面,如果你英文不好的話,可以安裝這個nvda插件喔→
點我從gaga下載谷歌翻翻看
註冊github帳號
- 到下面的連結裡註冊github的帳號,註冊過程中可能有驗證碼的步驟→
點我打開github註冊頁面
如果你無法搞定註冊中的驗證碼,可以參考這篇介紹的瀏覽器插件來解決→
點我看浏览器遇到验证码的解决方案,Anti Captcha - 註冊過程中輸入的user name會成為你的github ID,這個在後面會用到,
註冊完成後你應該會回到你的帳戶頁面,這個頁面先不要關
新增公開的repo(倉庫)
- 在你的github頁面上按tab找
Create new…功能表按鈕折疊子功能表
按enter,往下找
功能表項目New repository
按enter - 之後會跳轉到Create a New Repository 頁面,
按tab找
Repository name*編輯區必要的無效的輸入空行
在這裡輸入
github ID.github.io
github ID就是你註冊時填寫的user name,例如我的github ID是→
c469591
那麼就要輸入→
c469591.github.io
p.s 上面填寫的.github.io是github pages功能需要的倉庫名稱 - 之後tab找
Create repository按鈕
按enter,網頁會跳轉到
github ID.github.io
的倉庫頁面,建議你把此頁加入瀏覽器書籤,方便之後查看,
到此就建立好新的倉庫囉! - 接著按tab找項這樣的文字
Clone URL編輯區唯讀已選取 https://github.com/c469591/2121212111.git
再tab一下看到
Copy to clipboard按鈕
按enter將網址複製到剪貼版,你需要用這個網址來將倉庫下載到自己的電腦上
把倉庫下載回本地的電腦
- 如果你前面不小心關了倉庫頁面,你可以重新打開倉庫頁面,tab找
Code按鈕折疊
按enter,再按tab,也能找到
Copy to clipboard按鈕
按enter就會把克隆的網址複製到剪貼版中 - 在檔案總管瀏覽到你要放倉庫資料夾的地方,然後按
alt+d
跳到行首並輸入
cmd空一格
按enter後輸入
git clone 克隆的網址
按enter,之後就會開始下載 - 完成後NVDA按7、9可以看到該資料夾可能為空的英文訊息,
如果之後有上傳資料到倉庫,你再使用克隆指令的話,就能看到100%的字樣,代表下載完成,
並且你剛剛所在的資料夾中也會多出一個名為
你的github ID.github.io
的資料夾,這個就是剛下載回的倉庫了
把網站資料夾放到倉庫資料夾
- 找到專案資料夾中的
public
enter進入後,按ctrl+a再按ctrl+c將所有檔案複製 - 找到剛剛我們下載回的倉庫資料夾,enter打開後按ctrl+v貼上
- 以後專案資料夾內有修改或新增文章時,都需要用hugo指令將專案資料夾轉為網站資料夾,
再來按照上面的指令將網站資料夾的所有檔案覆蓋到倉庫資料夾內,這樣才能在之後用指令把新的內容上傳到github,
如果覺得每次都要複製、貼上很麻煩,可以自己研究有關的資料同步軟體,或將複製、貼上的指令寫到cmd檔案中執行,讓整個過程更簡單
把本地電腦的倉庫上傳回github倉庫
- 找到倉庫資料夾,按照前面說過的方法,在倉庫資料夾內打開cmd視窗
- 按照順序輸入下面的指令→
- 將目前所在的資料夾加入版本控制
git add . - 提交到本地,並加入說明(將下面的NAME替換為你對這次提交的說明)
git commit -m "NAME" - 上傳到github倉庫
git push origin
p.s 上傳指令送出時可能會彈出一個對話框,讓你驗證帳戶,按tab選擇用瀏覽器驗證,
在瀏覽器輸入github信箱和密碼登入後,如果一切無誤,網頁會顯示驗證成功的訊息,你就可以關閉瀏覽器,回到cmd視窗,
檢查看看cmd裡有沒有上傳成功的訊息,沒成功就再輸入一次上傳的指令即可
- 將目前所在的資料夾加入版本控制
稍等一下,驗收成果
- 每次上傳成功後,github可能需要一段時間來架構網站
- 你可以打開瀏覽器,輸入
github ID.github.io
按enter,看看你的網站是否能正常顯示了,
你可以參考我放在github上的網站→
點我看小羔羊在github上建立的測試網站
p.s 上面只是放了一些我寫過的免費文章,要瀏覽我的網站可以到→
點我前往小羔羊分享站首頁
這個網站就是我用hugo meme主題模板建立的網站了,不過我使用的是租用的server。
自訂網站的域名
github pages還能用自己註冊的域名作為網站的網址,如果你覺得
github ID.github.io
這個網址太長太難記的話,就可以註冊一個自己的域名來用,
最簡單省力的域名註冊可以到中華電信註冊域名的網站→
點我前往HiNet 域名註冊
有了域名之後,按照下面的步驟設定自訂域名→
- 根據github官網的說明,他們建議用戶使用子域名來作為自訂的域名比較安全
- 打開放你網站的github倉庫頁面
- 按tab找
Settings 連結
按enter - 接著按tab找
Pages 連結
按enter - 再來按tab找
Custom domain編輯區空行
在裡面輸入你的域名+後綴,例如下面這個子域名的例子→
123.wawawa.tw
p.s 123是子域名的名稱,wawawa是你註冊的域名,.tw是後綴 - 之後tab一下,看到
按鈕 Save
按enter,github這裡的設定就完成了,
不過還需要設定域名指向的IP - 如果你註冊的是中華電信購買的域名,就到中華電信註冊域名的網站,登入帳號,修改DNS紀錄
新增一筆a紀錄,輸入跟在github設定中一樣的域名,以上面的例子來說,名稱的部分你只需輸入
123
後面的wawawa.tw會自動幫你補上 - ip的欄位填入下面其中一個ip即可
185.199.108.153
185.199.109.153
185.199.110.153
185.199.111.153 - 填完後點網頁上的儲存,完成設定,
一般來說,中華電信的DNS紀錄在修改後,最多需要等24小時才會刷新喔!
如果想要更快的刷新dns紀錄,你可以把域名轉到Cloudflare託管,官網在這,詳細操作步驟就要自己爬文囉→
點我前往Cloudflare
到此一切設定都完成了,恭喜你大功告成! - 另外,如果你不想指定自己的域名,想回復到預設的github網址,只要回到第五步,點編輯框旁邊的
Remove按鈕
就能還原到本來的網址了,也就是
github ID.github.io
補充
之後本系列的內容就是選用的了,你可以看情況選擇是否在網站中加入搜尋和評論功能,
OK! 我們下篇見~