不懂代碼也能在10分鐘內發佈一個網站

我將介紹一種 no code，無軟件建立複雜網站的方法，沒有任何成本，而且可讓非技術人員管理這個網站

點擊這裏獲取 GitHub 代碼。

英國物理學家牛頓正是在大瘟疫(歐洲鼠疫)期間進行「社交疏遠」時發現了萬有引力定律。隔離在家，你會作什麼呢？隔離的好處是：有了大量空閒時間，咱們每一個人都成了富有創造力的探索者！

可是，因爲你們都在家上網，如今任何新的想法或項目都催生了對網站的需求和依賴。諸如 Wordpress，Squarespace 或 Wix 之類的傳統 CMS 解決方案難以使用，看起來已通過時了，而且昂貴！

咱們但願建立一個外觀精美，而且易於自定義的網站。非技術人員應該可以在幾分鐘內編輯源文件，並能實時在網站上看到所作的更改。理想狀況下，這個網站應該是免費的（永遠免費，而不只僅是暫時免費），而且能夠吸引成千上萬的訪客。

這能實現嗎？

在這篇簡短的文章中，我將向您介紹基於 Hugo 框架，GitHub Pages 和GitHub Actions 的解決方案。跟着本文一步一步作到最後，你就能夠啓動並運行你的新網站。

這很是簡單，我9歲的兒子就作到了。如今，他管理着他想象中的神祕國度阿倫扎託皮亞國（Arenztopia）的名爲Arenztopia的網站。若是你有興趣，點擊這裏查看關於 Arenztopia 的故事。

TL;DR

若是您只想儘快開始使用可正常運行的網站，請首先確保您擁有一個免費的 GitHub 賬戶。

訪問GitHub Repo，而後單擊右上角的 Fork 按鈕，將其 fork 到您本身的賬戶中。

來到您 fork 的 repo，而後單擊「Actions」選項卡。您將在下圖中看到相似的消息。單擊「I understand my workflows...」按鈕。

來到repo 的「Setting」選項卡，而後向下滾動到GitHub Pages。從下拉列表中從新選擇 gh-page s以構建網站。

來到repo 的「Code」選項卡，打開config.toml文件，而後進行編輯。將其title屬性更改成其餘屬性，而後單擊底部的「Commit changes」按鈕。咱們須要此步驟來觸發新 repo 中的工做流。

等待幾分鐘，轉到 GitHub Pages 上的「published at」網址，您將看到模板網站。

接下來，您能夠經過編輯 config.toml 文件和內容文件夾中的文件來自定義站點。轉到本文末尾的「Add your own content」部分，以瞭解操做方法。您能夠查看有關 Ananke 主題的說明。

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

Hugo 基礎

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

• Hugo 網站能夠經過配置文件進行自定義和修改

• 新頁面和內容部分能夠用 markdown 而不是 HTML 編寫。這使內容創做更加容易。

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

• Hugo的輸出是一個靜態HTML網站，能夠將其部署在任何低成本的託管服務提供商上。

• 與靜態網站託管服務（如GitHub Pages和Netlify）一塊兒，它們能夠提供徹底免費的解決方案。

Hugo 軟件發行版可在全部主要操做系統上使用。可是，因爲咱們將使用GitHub Actions自動構建咱們的Hugo網站，所以咱們實際上不須要在此處安裝Hugo軟件。

建立模板網站

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

選一個你喜歡的，下載一個 zip 包或克隆一個 GitHub repo，而後將主題解壓縮到一個文件夾中。假設主題分發已解壓縮到名爲my-theme的文件夾中。如下是 Linux 終端中的命令。能夠在 Mac 上使用 Terminal 應用程序，在 Windows 上使用 PowerShell。

接下來，在電腦上建立網站項目目錄。

$ 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"
複製代碼

接下來，建立一個 GitHub Repo，命名爲my-site，並把my-site推到master 分支。下面是從 GitHub 的 Web UI 上傳文件的步驟，如今準備發佈主題示例站點。

爲了使非開發人員（或還沒有掌握命令行工具的年輕開發人員）可使用基於Hugo的系統，咱們必須自動化構建和部署靜態網站的過程。

自動化部署

在 GitHub 項目中，轉到「Setting」並啓用GitHub Pages。選擇源做爲gh-pages分支。

接下來，咱們建立一個GitHub Actions 工做流，以便在 master 分支的源文件上運行 Hugo 命令，並將生成的 HTML 文件推送到 gh-pages 分支進行發佈。在項目的「操做」標籤中，點擊「set up a workflow yourself」按鈕。

工做流存儲在 master 分支，文件名爲.github/workflows/main.yml。內容以下所示：

name: github pages

on:
  push:
    branches:
      - master

jobs:
  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命令並將這些文件轉換爲用於靜態網站的HTML文件。

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

注意最後一行中的cname屬性。那是咱們使用GitHub Pages設置的自定義域名。若是您沒有自定義域名，只需刪除此行，便可在GitHub Pages提供的域上訪問您的網站。

如今打開網站，就能夠看到主題的默認網頁。

添加本身的內容

要將默認主題網站更改成您本身的內容，只需更改 master 分支上的文件。請參考所選主題的文檔。一般，Hugo模板是這樣的：

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

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

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

若是你以爲這個網站有意思，想要了解更多，看看咱們是如何作的，能夠查看

• 阿倫扎託皮亞國 [GitHub] [Web site]
• Second State blog [GitHub] [Web site]