Jekyll靜態部落格無伺服器託管指南:如何免費部署到Surge.sh?

如何免費託管 傑奇 靜態部落格?無需購買伺服器,無需技術,小白也能快速上手!

Jekyll + Surge.sh,讓你輕鬆打造高效率部落格平台!

Jekyll靜態部落格無伺服器託管指南:如何免費部署到Surge.sh?

安裝Surge 項目

Surge.sh 是由Node.js 平台發佈的JavaScript 引用程式。

使用Surge之前需要先在本機上安裝Node.js

  • 然後透過npm 進行Surge 的安裝。

若你尚未安裝Surge,首要任務就是輸入以下指令進行安裝▼

npm install -g surge
  • 現在,你已經準備好快速上線Jekyll 網站所需的全部工具。

建立全新的Jekyll 站點

首先,找到你現有的Jekyll 項目,或是透過終端機創建一個新項目▼

# 在当前目录创建一个新的 Jekyll 站点
jekyll new ./

搭建Jekyll 的具體方法,請點擊下方鏈接,閱讀我們精心準備的Jekyll 下載安裝教程▼

在搭建本地電腦搭建好Jekyll後,你可以透過以下指令在瀏覽器中存取它:jekyll serve

jekyll serve
# 服务器地址: http://localhost:4000/
# 服务器运行中... 按下 ctrl-c 可停止。
  • 此時你已經成功地經營了一個基本的靜態網站。
  • 預設情況下,Jekyll 專案在本地電腦運行,幾乎可以進行部署伺服器。

編譯你的Jekyll 網站

接下來,你可以將Jekyll 網站編譯為靜態HTML、CSS 和JavaScript 檔案。

jekyll build

現在,你的原始碼已經被編譯為一個 _site/ 目錄。

每次運行 jekyll build 時,這些檔案都會被重新編譯——它們也是你希望發佈到網路上的檔案。

部署你的Jekyll 站點

你可以使用以下命令將 _site/ 目錄發佈到網路上▼

surge _site/

假如你尚未登入或註冊,系統將提示你進行登入或註冊。

接著,你將獲得一個隨機子網域。

你可以用你自己選擇的內容來替換它,例如 example-jekyll.surge.sh

surge _site/

email: [email protected]
project path: ~/Sites/jekyll-project/_site
domain: (random-suggestion.surge.sh) example-jekyll.surge.sh

按下Enter 鍵後,你應該會收到一則訊息,確認你的網站已經成功上線▼

Success! Project is published and running at example-jekyll.surge.sh
  • 幹得漂亮,你的網站現在已經成功上線!

Surge每次部署時預設會要求你輸入網域。

若要跳過這一步驟,你可以在執行命令時直接將網域傳遞給Surge的CLI。

例如,如果你的子網域是vancouver.surge.sh,你可以執行以下指令 ▼

surge _site/ --domain vancouver.surge.sh
  • 如果是在Surge新增自訂域名,可將上方指令的子域名換成你的自訂網域。

若想切換帳號登錄,需要登出Surge帳號▼

surge logout

要是出現以下錯誤提示▼

Jekyll部署到Surge.sh新增自訂網域:輕鬆搭建靜態網站第3張

Aborted - you do not have permission to publish to xxx. surge.sh
  • 解決方法是更改​​Surge預設產生的子域名,因為此子域名已被佔用。
  • 可以在自動提供的URL 前面,添加任何字母數字作為前綴即可。

注意事項

由於Surge官方提供的子域名,是強制在robots.txt檔案裡屏蔽搜尋蜘蛛抓取的(不利於SEO),我們也沒有權限修改,所以不建議使用它。

我們推薦在Surge加入自訂域名,這樣你的robots.txt檔案是允許修改的。

🚀 想要了解如何將Jekyll部署到Surge.sh並新增自訂網域嗎?

點擊下方鏈接,繼續閱讀我們的指南,輕鬆建立你的靜態網站吧▼

希望陳溈亮博客( https://www.chenweiliang.com/ ) 分享的《Jekyll靜態部落格無伺服器託管攻略:如何免費部署到Surge.sh? 》,對您有幫助。

歡迎分享本文鏈接:https://www.chenweiliang.com/cwl-31655.html

歡迎加入陳溈亮博客的Telegram 頻道,獲取最新更新!

🔔 率先在頻道置頂目錄獲取寶貴的《ChatGPT 內容行銷AI 工具使用指南》! 🌟
📚 這份指南蘊含價值巨大,🌟難逢的機遇,切勿錯失良機! ⏰⌛💨
喜歡就分享和按贊!
您的分享和按贊,是我們持續的動力!

 

發表評論

您的電子郵箱地址不會被公開。 必填項已用 * 標註

滾動到頂部