如何在 10 分鐘內發(fā)布一個網站？不懂代碼也可以！

Michael Yuan 博士是 5 本軟件工程書籍的作者，最新著作《Building Blockchain Apps》由 Addison-Wesley 于 2019 年 12 月出版。Michael 擔任 Second State 的 CEO。Second State 是一家致力于將 WebAssembly 和 Rust 技術引入云計算，AI 與區(qū)塊鏈的公司。

點擊”閱讀原文“在 freeCodeCamp 專欄訪問文中的鏈接。

在這篇文章里，我會介紹一種創(chuàng)建網站的方法，不需要寫復雜的代碼，不需要花錢，沒有技術背景的人也能掌握。

點擊 ?GitHub 鏈接獲取代碼。

英國物理學家牛頓正是在大瘟疫（歐洲鼠疫）期間進行“社交疏遠”時發(fā)現了萬有引力定律。隔離在家，你會做什么呢？有了大量空閑時間，我們每個人都可能成為富有創(chuàng)造力的探索者！

隔離期間，人們想要實踐新的想法，會比任何時候都更需要創(chuàng)建一個網站。諸如 Wordpress，Squarespace 或 Wix 之類的傳統(tǒng) CMS 解決方案難以使用，看起來已經過時了，并且昂貴！

我們希望創(chuàng)建一個外觀精美，并且易于自定義的網站。非技術人員應該能夠在幾分鐘內編輯源文件，并能實時在網站上看到所做的更改。理想情況下，這個網站應該是免費的（永遠免費，而不僅僅是暫時免費），并且可以吸引成千上萬的訪客。

這能實現嗎？

在這篇簡短的文章中，我將向你介紹基于 Hugo 框架，GitHub Pages 和 GitHub Actions 的解決方案。跟著本文一步一步做到最后，你就可以啟動并運行你的新網站。

這非常簡單，我 9 歲的兒子就做到了?，F在，他管理著他想象中的神秘國度阿倫扎托皮亞國（Arenztopia）的名為 Arenztopia 的網站。如果你有興趣，點擊這里查看關于 Arenztopia 的故事。

TL;DR

如果你只想盡快開始使用可正常運行的網站，請首先確保你擁有一個免費的 GitHub 帳戶。

訪問 GitHub Repo，然后單擊右上角的 Fork 按鈕，將其 fork 到你自己的帳戶中。

來到你 fork 的 repo，然后單擊“Actions”選項卡，你將在下圖中看到類似的消息。單擊“I understand my workflows...”按鈕。

來到 repo 的“Setting”選項卡，然后向下滾動到 GitHub Pages。從下拉列表中重新選擇 gh-pages 以構建網站。

來到 repo 的“Code”選項卡，打開config.toml文件，然后進行編輯。將其title屬性更改為其他屬性，然后單擊底部的“Commit changes”按鈕。我們需要此步驟來觸發(fā)新 repo 中的工作流。

等待幾分鐘，轉到 GitHub Pages 上的“published at”網址，你將看到模板網站。

接下來，你可以通過編輯 ?config.toml ?文件和內容文件夾中的文件來自定義站點。轉到本文末尾的“Add your own content”部分，以了解操作方法。你可以查看有關 ?Ananke ?主題的說明。

快速入門就是這樣！在接下來的幾節(jié)中，我將更詳細地解釋概念和過程。

Hugo 基礎

像 Wordpress 這樣的舊式 CMS 解決方案很難適應新的網站設計，而像 SquareSpace 這樣的商業(yè)托管解決方案則過于昂貴且不夠靈活。像 Hugo 這樣的靜態(tài)網站生成器在功能，靈活性和易于編寫之間取得了很好的平衡。

• Hugo 網站可以通過配置文件進行自定義和修改

• 新頁面和內容部分可以用 markdown 而不是 HTML 編寫，這使內容創(chuàng)作更加容易。

• 有許多現代設計主題可供選擇。

• Hugo 的輸出是一個靜態(tài) HTML 網站，可以將其部署在任何低成本的托管服務提供商上。

• 與靜態(tài)網站托管服務（如 GitHub Pages 和 Netlify）一起，它們可以提供完全免費的解決方案。

Hugo 軟件發(fā)行版可在所有主要操作系統(tǒng)上使用。但是，由于我們將使用 GitHub Actions 自動構建 Hugo 網站，因此我們實際上不需要在此處安裝 Hugo 軟件。

創(chuàng)建模板網站

首先，選擇一個 Hugo 主題。Hugo 主題有許多種類，有些針對具有一個或多個內容網頁的網站，而另一些針對帶有時間戳記的類似博客的網站進行了優(yōu)化。

選一個你喜歡的，下載一個 zip 包或克隆一個 GitHub repo，然后將主題解壓縮到一個文件夾中。假設主題分發(fā)已解壓縮到名為my-theme的文件夾中。以下是 Linux 終端中的命令?？梢栽?Mac 上使用 Terminal 應用程序，在 Windows 上使用 PowerShell。

接下來，在電腦上創(chuàng)建網站項目目錄。

$?mkdir?-r?my-site/themes

將主題文件夾復制到項目中

$?cp?-r?my-theme?my-site/themes

將主題的exampleSite ?復制到項目的一級目錄中

$ cd my-site$?cp?-r?themes/my-theme/exampleSite/*?./

編輯項目根目錄下my-site/ ?的 ?config.toml，指向正確的主題

baseURL?=?"/"themesDir?=?"themes"theme?=?"my-theme"

接下來，創(chuàng)建一個 GitHub Repo，命名為my-site，并把my-site推到master ?分支。下面是從 GitHub 的 Web UI 上傳文件的步驟，現在準備發(fā)布主題示例站點。

為了使非開發(fā)人員（或尚未掌握命令行工具的年輕開發(fā)人員）可以使用基于 Hugo 的系統(tǒng)，我們必須自動化構建和部署靜態(tài)網站的過程。

自動化部署

在 GitHub 項目中，轉到“Setting”并啟用 GitHub Pages，選擇源作為 gh-pages 分支。

接下來，我們創(chuàng)建一個 GitHub Actions 工作流，以便在 ?master ?分支的源文件上運行 Hugo 命令，并將生成的 HTML 文件推送到 ?gh-pages ?分支進行發(fā)布。在項目的“操作”標簽中，點擊“set up a workflow yourself”按鈕。

工作流存儲在 ?master ?分支，文件名為.github/workflows/main.yml。內容如下所示：

name: github pageson:  push:    branches:      - masterjobs:  deploy:    runs-on: ubuntu-18.04    steps:      - uses: actions/checkout@v1  # v2 does not have submodules option now        # with:        #   submodules: true  - name: Setup Hugo    uses: peaceiris/actions-hugo@v2    with:      hugo-version: '0.62.2'      extended: true
  - name: Build    run: hugo
  - name: Deploy    uses: peaceiris/actions-gh-pages@v3    with:      github_token: ${{ secrets.GITHUB_TOKEN }}      publish_dir: ./public

這里是該網站的作者和編輯者將更改 ?master ?分支上的內容和文件。每當將新內容推送到 ?master ?分支時，自動化的 GitHub Actions 工作流程都將設置 Hugo 軟件，運行hugo命令并將這些文件轉換為用于靜態(tài)網站的 HTML 文件。

HTML 文件被推送到同一 repo 的gh-pages分支。它們將按配置通過 GitHub Pages 在指定的 Web 地址上發(fā)布。

注意最后一行中的cname屬性，那是我們使用 GitHub Pages 設置的自定義域名。如果你沒有自定義域名，只需刪除此行，即可在 GitHub Pages 提供的域上訪問你的網站。

現在打開網站，就可以看到主題的默認網頁。

添加自己的內容

要將默認主題網站更改為你自己的內容，只需更改 ?master ?分支上的文件。請參考所選主題的文檔。通常，Hugo 模板是這樣的：

• 網頁是以 markdown 格式編寫的，md ?文件在內容文件夾中。
• 每個 ?md ?文件都有一個包含屬性的header部分，例如頁面的菜單位置、優(yōu)先級、時間戳、摘錄等。
• 總體配置（如多個頁面使用的菜單項和屬性）存儲在data文件夾中。
• 靜態(tài)內容（如原始 HTML 文件、 JavaScript 文件和圖像文件）可以放在
  static文件夾中。

下面是如何自定義我們模板自帶的 Ananke 主題：

• config.toml 文件允許你配置網站標題，所有頁面上的社交圖標，以及主頁上的大圖片。
• 所有圖片應該上傳到 static/images 文件夾。
• content/_index.md 文件包含主頁的文本。
• 要在網站添加頁面，只需在 content 文件夾中創(chuàng)建 ?markdown 文件即可。一個例子是 contact.md 文件. 注意，在文件的頂部，有一些屬性來控制該頁面是否應該出現在網站菜單上。
• 要向站點添加文章, 只需在 content/post 文件夾中創(chuàng)建 markdown 文件。這些是類似博客的內容文章，頂部有日期和標題。最近的兩篇文章將出現在主頁上。

如果你覺得這個網站有意思，想要了解更多，看看我們是如何做的，可以查看：