Ⅰ 組件分享之後端組件——基於Go語言的HTML和CSS網站生成器Hugo
近期正在探索前端、後端、系統端各類常用組件與工具，困改對其一些常見的組件進行再次整理一下，形成標准化組件專題，後續該專題將包含各類語言中的一些汪陸判常用組件。歡迎大家進行持續關注。
本節分享一個基於Go語言的HTML和CSS網站生成器 hugo ，它針對速度、易用性和可配置性進行了優化。Hugo 獲取一個包含內容和模板的目錄，並將它們呈現為一個完整的 HTML 網站。Hugo 依賴於 Markdown 文件和元數據的前端，你可以從任何目錄運行 Hugo。這適用於您沒有特權帳戶的共享主機和其他系統。例如我們日常編寫一些博客文章，進行快速生成一套靜態頁面進行分享時可以使用它來進行生成一套靜態頁面作為我們的博客部署基礎。
它支持大量的主題模板，我們可以通過 https://themes.gohugo.io/ 進行選擇相關的主題使用，有興悉森趣的小夥伴可以進行深入研究一下
Ⅱ CODING 靜態網站
在 cong.net 部署靜態博客，跟 github 是不一樣的，這里簡單記錄一下。以謝益輝的 hugo-xmag 博客主題為例。
在導航欄的 「 構建與部署 」 中選擇 「 靜態網站 」，點擊「 直接發布靜態網站 」。
填寫網站名稱，然滲坦後 " 保存 "。
" 保存 " 後，在部署頁面點擊 " 立即部署 "。
部署成功後，通過訪問地址可以打開靜斗悉態的叢銷桐網站。
在項目導航欄 "構建與部署" → "靜態網站" 頁面，點擊右上角的 "設置" 按鈕。
在 "設置" 頁面，填寫需要綁定的域名，並選擇強制 https 訪問。
在域名解析中添加一條 CNAME 記錄。
域名解析 CNAME 添加後，等待幾分鍾，直至證書狀態為「正常」。如果證書狀態失敗，檢查你的 CNAME 記錄，並再嘗試多重新申請幾次。
最後，通過域名訪問，一切正常。
Ⅲ 用 Git 建立和託管網站
Git 是一個少有的能將如此多的現代計算封裝到一個程序之中的應用程序，它可以用作許多其他應用程序的計算引擎。雖然它以跟蹤軟凱搜件開發中的源代碼更改而聞名，但它還有許多其他用途，可以讓你的生活更輕松、更有條理。在這個 Git 系列中，我們將分享七種鮮為人知的使沖缺用 Git 的方法。
創建一個網站曾經是極其簡單的，而同時它又是一種黑魔法。回到 Web 1.0 的舊時代（不是每個散孫辯人都會這樣稱呼它），你可以打開任何網站，查看其源代碼，並對 HTML 及其內聯樣式和基於表格的布局進行反向工程，在這樣的一兩個下午之後，你就會感覺自己像一個程序員一樣。不過要讓你創建的頁面放到互聯網上，仍然有一些問題，因為這意味著你需要處理伺服器、FTP 以及 webroot 目錄和文件許可權。雖然從那時起，現代網站變得愈加復雜，但如果你讓 Git 幫助你，自出版可以同樣容易（或更容易！）。
Hugo 是一個開源的靜態站點生成器。靜態網站是過去的 Web 的基礎（如果你回溯到很久以前，那就是 Web 的全部了）。靜態站點有幾個優點：它們相對容易編寫，因為你不必編寫代碼；它們相對安全，因為頁面上沒有執行代碼；並且它們可以非常快，因為除了在頁面上傳輸的任何內容之外沒有任何處理。
Hugo 並不是唯一一個靜態站點生成器。 Grav 、 Pico 、 Jekyll 、 Podwrite 以及許多其他的同類軟體都提供了一種創建一個功能最少的、只需要很少維護的網站的簡單方法。Hugo 恰好是內置集成了 GitLab 集成的一個靜態站點生成器，這意味著你可以使用免費的 GitLab 帳戶生成和託管你的網站。
Hugo 也有一些非常大的用戶。例如，如果你曾經去過 Let』s Encrypt 網站，那麼你已經用過了一個用 Hugo 構建的網站。
Hugo 是跨平台的，你可以在 Hugo 的入門資源 中找到適用於 MacOS、Windows、Linux、OpenBSD 和 FreeBSD 的安裝說明。
如果你使用的是 Linux 或 BSD，最簡單的方法是從軟體存儲庫或 ports 樹安裝 Hugo。確切的命令取決於你的發行版，但在 Fedora 上，你應該輸入：
通過打開終端並鍵入以下內容確認你已正確安裝：
這將列印 hugo 命令的所有可用選項。如果你沒有看到，你可能沒有正確安裝 Hugo 或需要 將該命令添加到你的路徑 。
要構建 Hugo 站點，你必須有個特定的目錄結構，通過輸入以下命令 Hugo 將為你生成它：
你現在有了一個名為 mysite 的目錄，它包含構建 Hugo 網站所需的默認目錄。
Git 是你將網站放到互聯網上的介面，因此切換到你新的 mysite 文件夾，並將其初始化為 Git 存儲庫：
Hugo 與 Git 配合的很好，所以你甚至可以使用 Git 為你的網站安裝主題。除非你計劃開發你正在安裝的主題，否則可以使用 --depth 選項克隆該主題的源的最新狀態：
現在為你的網站創建一些內容：
使用你喜歡的文本編輯器編輯 content/posts 目錄中的 hello.md 文件。Hugo 接受 Markdown 文件，並會在發布時將它們轉換為經過主題化的 HTML 文件，因此你的內容必須採用 Markdown 格式 。
如果要在帖子中包含圖像，請在 static 目錄中創建一個名為 images 的文件夾。將圖像放入此文件夾，並使用以 /images 開頭的絕對路徑在標記中引用它們。例如：
你可以在 themes.gohugo.io 找到更多主題，但最好在測試時保持一個基本主題。標準的 Hugo 測試主題是 Ananke 。某些主題具有復雜的依賴關系，而另外一些主題如果沒有復雜的配置的話，也許不會以你預期的方式呈現頁面。本例中使用的 Mero 主題捆綁了一個詳細的 config.toml 配置文件，但是（為了簡單起見）我將在這里只提供基本的配置。在文本編輯器中打開名為 config.toml 的文件，並添加三個配置參數：
在你准備發布之前不必（預先）在互聯網上放置任何內容。在你開發網站時，你可以通過啟動 Hugo 附帶的僅限本地訪問的 Web 伺服器來預覽你的站點。
打開 Web 瀏覽器並導航到 http://localhost:1313 以查看正在進行的工作。
要在 GitLab 上發布和託管你的站點，請為你的站點內容創建一個存儲庫。
要在 GitLab 中創建存儲庫，請單擊 GitLab 的 「Projects」 頁面中的 「New Project」 按鈕。創建一個名為 yourGitLabUsername.gitlab.io 的空存儲庫，用你的 GitLab 用戶名或組名替換 yourGitLabUsername。你必須使用此命名方式作為該項目的名稱。你也可以稍後為其添加自定義域。
不要在 GitLab 上包含許可證或 README 文件（因為你已經在本地啟動了一個項目，現在添加這些文件會使將你的數據推向 GitLab 時更加復雜，以後你可以隨時添加它們）。
在 GitLab 上創建空存儲庫後，將其添加為 Hugo 站點的本地副本的遠程位置，該站點已經是一個 Git 存儲庫：
創建名為 .gitlab-ci.yml 的 GitLab 站點配置文件並輸入以下選項：
image 參數定義了一個為你的站點提供服務的容器化圖像。其他參數是告訴 GitLab 伺服器在將新代碼推送到遠程存儲庫時要執行的操作的說明。有關 GitLab 的 CI/CD（持續集成和交付）選項的更多信息，請參閱 GitLab 文檔的 CI/CD 部分 。
你的 Git 存儲庫已配置好，在 GitLab 伺服器上構建站點的命令也已設置，你的站點已准備好發布了。對於你的第一個 Git 提交，你必須採取一些額外的預防措施，以便你不會對你不打算進行版本控制的文件進行版本控制。
首先，將構建你的站點時 Hugo 創建的 /public 目錄添加到 .gitignore 文件。你無需在 Git 中管理已完成發布的站點；你需要跟蹤的是你的 Hugo 源文件。
如果不創建 Git 子模塊，則無法在 Git 存儲庫中維護另一個 Git 存儲庫。為了簡單起見，請移除嵌入的存儲庫的 .git 目錄，以使主題（存儲庫）只是一個主題（目錄）。
請注意，你 必須 將你的主題文件添加到你的 Git 存儲庫，以便 GitLab 可以訪問該主題。如果不提交主題文件，你的網站將無法成功構建。
你也可以像使用 回收站 一樣使用 trash：
現在，你可以將本地項目目錄的所有內容添加到 Git 並將其推送到 GitLab：
將代碼推送到 GitLab 後，請查看你的項目頁面。有個圖標表示 GitLab 正在處理你的構建。第一次推送代碼可能需要幾分鍾，所以請耐心等待。但是，請不要 一直 等待，因為該圖標並不總是可靠地更新。
當你在等待 GitLab 組裝你的站點時，請轉到你的項目設置並找到 「Pages」 面板。你的網站准備就緒後，它的 URL 就可以用了。該 URL 是 yourGitLabUsername.gitlab.io/yourProjectName。導航到該地址以查看你的勞動成果。
如果你的站點無法正確組裝，GitLab 提供了可以深入了解 CI/CD 管道的日誌。查看錯誤消息以找出發生了什麼問題。
Hugo（或 Jekyll 等類似工具）只是利用 Git 作為 Web 發布工具的一種方式。使用伺服器端 Git 掛鉤，你可以使用最少的腳本設計你自己的 Git-to-web 工作流。使用 GitLab 的社區版，你可以自行託管你自己的 GitLab 實例；或者你可以使用 Gitolite 或 Gitea 等替代方案，並使用本文作為自定義解決方案的靈感來源。祝你玩得開心！
via: https://opensource.com/article/19/4/building-hosting-website-git
作者： Seth Kenlon 選題： lujun9972 譯者： wxy 校對： wxy
Ⅳ 靜態網站生成工具-hugo
前段時間使用docker搭建了一個wiki的網站，用於記錄日常學習中的筆記，用了一段時間，功能很強大，但是編輯器不太熟悉，網站使用java開發的，功能很全面，插件多的時候就感覺越來越臃腫。曾經有段時間就不想使用它了，最近偶然發現一個靜態網站的生成工具hugo，可以將markdown直接生成網站，部署到站點上作為自己的知識庫或者博客，hugo是使用go語言開發的，使用起來非常方便，生成的網站可直接部署在Nginx、IIS等中間件上面供其他人訪問,hugo還有很多漂亮的主題，大家可以選擇自己喜歡的進行使用，下面介紹下 我安裝使用hugo的經歷和方法。
1）使用brew install命令安裝
我的電腦是mac的，所以最方便的是直接用brew install hugo命令安裝最為方便：
執行安裝完成後執行hugo version 命令查看版本，確保安裝成功
2）官網下載二進制包：解壓後將二進制文件加入環境變數的方式安裝。大家可以根據自己的操作系統，下載適合的安裝包。
3）也可以下載源碼 編譯 運行，由於我本地的go版本是1.17的，而hugo的最新代碼的最低要求是1.18，暫時還不想升級，所以源碼編譯的方式這里就不過多介紹，感興趣讓差鉛的可以下坦好載源碼編譯試試。
進入要創建網站的目錄慶核，執行一下命令
這樣名稱為test-blog的網站就建好了 ，
下載一個主題 可以在 官網上找到各種各樣的主題
將主體添加至配置文件
打開content/posts目錄下的index.md 文件進行編輯，頁面的配置項說明參見官網
執行下面命令
成功以後就可以訪問http://localhost:1313/就可以訪問網站了。
執行命令hugo -D 即可生成一個public的文件夾，其下面的內容即為靜態網站的所有文件
這里使用nginx的docker鏡像 進行部署，執行以下命令：
執行成功後就能通過http:localhost訪問到靜態網站了。
這個工具還有很多需要研究的地方，這里只是將簡單的使用方法記錄了一下，以後怎樣使用才能使網站更加的方便，快捷、美觀，還要花時間研究。有興趣的小夥伴可以私信我一塊研究。
Ⅳ 設計靜態網站常用的軟體有哪些
1. Jekyll
Jekyll是最受歡迎的開源靜態生成工具之一，可以跨平台配置。Jekyll利用 Markdown 、 Liquid 、HTML 和 CSS 來生成靜態的網頁文件，它還支持從常見的 CMS。你能管理永久鏈接、類別、頁面、文章，自定義布局等。非常適合產品頁的博客網站。
2. Hugo
Hugo是另一個很受歡迎的用於搭建靜態網站的開源框架。它運行速度快、使用簡單、可靠性高。還可以提供更高級的主題和一些有用的快捷方式來幫助你輕松完成任務。適合展示網站和博客網站。
3. Hexo
Hexo 基於 Node.js ，除了可以用來快速搭建網站，還提供了豐富的主題和插件。且提供了強大的 API 來擴展功能，可以輕松完成遷移工作。
4. Gatsby
Gatsby 是一個越來越流行的開源網站生成框架。它使用 React.js 來生成快速、界面優美的網站。
5. VuePress
VuePress 是由 Vue.js 支持的靜態網站生成工具，如果你了解 HTML、CSS 和 JavaScript，那麼你可以無壓力地使用 VuePress。
6. Nuxt.js
Nuxt.js 使用了 Vue.js 和 Node.js，但它致力於模塊化，並且有能力依賴服務端而非客戶端。不僅如此，它的目標是為開發者提供直觀的體驗，並提供描述性錯誤，以及詳細的文檔等。使用Nuxt.js 搭建靜態網站，可以做到功能和靈活性兩全其美。
7. Docusaurus
Docusaurus 是用 React 構建的，為搭建文檔類網站量身定製。你可以使用所有的基本功能，像文檔版本管理、文檔搜索和翻譯大多是預先配置的。如果你想為你的產品或服務搭建一個文檔網站，可以試試 Docusaurus。
8. Eleventy
Eleventy 自稱是 Jekyll 的替代品，旨在以更簡單的方法來製作更快的靜態網站。它更容易上手，還提供適當的文檔來幫助你。
9. Publii
Publii 是用 Electron 和 Vue.js 構建的一個開源 CMS，它能使生成一個靜態網站變得很容易。如果有需要，你也可以把你的文章從 WorkPress 網站遷移過來。此外，它還提供了與 GitHub 頁面、Netlify 及其它類似服務的一鍵同步功能。
10. Primo
Primo 旨在使用可視化的構建器幫你構建和搭建網站，這樣你就可以輕松編輯和部署到任意主機上。但目前開發工作仍很活躍，有些功能還不完善，但它是一個獨特的項目。
希望以上工具能成功幫助到你搭建一個界面界面優美的網站。
Ⅵ Hugo 部署到自己伺服器
註：下邊所有命令，都是在你項目的根目錄執行
首先，找到一個 安裝的位置 ，然後執行：
xxxx 為你的項目名
Hugo 的主題還是比較豐富的，這里（ 皮膚列表 - Hugo中文文檔 ）可以找到一個自己喜歡的，每個主題或者叫皮膚都有詳細的安裝介紹。
在你的 config.toml 文件中，關鍵配置項：
創建第一篇博客：
配置完以上，就可以本地查看了：
打包後，會生成一個 public 文件差畢芹夾，只需要把這個文件夾，丟虛畢到你的伺服器上，使用數纖 nginx 配置下就可以正常訪問了。
舉例， 我的nginx配置如下：
更改配置後，記得重啟你的nginx
Ⅶ 利用GitHub-Actions將Hugo博客自動發布到GitHub和Gitee Pages
現在個人博客通常有比較多的選擇，如果不想要自己購買伺服器實現靜態博客的發布，可以在、CSDN等平台建立自己的賬號並發布，但是原始數據無法在本地管理；如果想要數據完全自己管理，可以使用GitHub或者Gitee Pages功能發布自己的博客，利用Hugo或Hexo等成熟的靜態博客將md文件轉換成靜態網站文件進行快速發布。本文就用來記錄如何快速將博客發布到、GitHub以及Gitee Pages三個平台。
我希望的流程當然是主要精力用在寫文章，發布的流程最好完全不需要手動處理，但實際情況下手動發布博客的流程大體是：
之前有使用過Travis CI+GitHub+Hexo自動發布到GitHub Pages，但是GitHub的訪問盯清經常不那麼靠譜，因此想著也能同步到Gitee，並且自動構建Hexo的速度受Nodejs環境部署影響，速度很慢，因此本次計劃採用Hugo來構建網站文件，整體流程設計如下：
為了滿足博客自動發布流程，首先需要在本地准備好生產環境，以滿足快速發布，以此的復雜是為了長期的簡單，因此在環境准備階段我會把所有涉及的工具都記錄下來，以方便大家使用以及後邊自己回顧，環境准備包含：
Obsidian完成知識積累後，按照ZK->Project->Archive->Blog的流程發布Blog，但是Obsidian的文件相互關聯，且附件如何快速復用，需要對Typora和Obsidian都進行簡單的配置，確保後續Blog能夠快速完成並發布，並且文件仍在Obsidian工程中正常顯示敬則枝；
Typora非常的簡潔，而且可以實時預覽，在寫博客的時候經常會插入一些圖片，截圖後可以直接粘貼進去，圖片也會自動保存在本地，這里需要注意圖片的保存路徑，在偏好設置里，設置插入圖片時復制到指定路徑（./resource/），這樣復制的圖片就會自動保存在當前文件夾下的resource文件夾里，方便後續管理與轉移。
在.ssh文件生成id_rsa和id_rsa.pub兩個文件；
Hugo 是一個基於Go語言開發的靜態博客框架，號稱世界上最快的構建網站工具；
命令為： hugo new site myblog
myblog為博客的目錄名，可以修改為你自己想取的名字，生成的目錄如下：
由於默認主題生成的文章頁面有些功能是不需要的，因此需要對themes下文件進行修改：
將config、content和themes三個目錄拷貝到新創建的站點目錄，將content下替換為文章文件即可。
utterances 是一款基於Github Issue的Github工具，優點主要是無廣告、載入快、配置簡單，輕量開源。
由於 utterances 是一款Github App，因此 安裝utterances 非常簡單，只需要授權特定repo許可權給 utterances 就可以了,注意一個點：授權的這個repo必須是public的，可以選擇多個repo，但是建議選擇一個就可以了，也比較安全。
這是當前最簡單的配置方法， 也可以在 utterances官方 查看亮敏其他配置方法，以及詳細的配置參數說明。
Obsidian的安裝和使用可參考我的另一篇文章： Obsidian作為第二大腦工具的基本使用和配置
所有環境准備好後，終於要開始啟動我們的自動化流程的實現了；
同之前步驟相同，將Gitee密碼配置到GitHub Secrets，命名為：GITEE_PASSWORD，所有配置結果如下：
synctogitee.yml
需要綁定Gitee賬號到微信公眾號，否則最後一步reload pages自動部署Gitee Pages會登錄失敗，原因是需要簡訊驗證；綁定公眾號後則不需要簡訊驗證；其他問題解決可以參考 gitee-pages-action
在Typora完成文章編寫後，一鍵上傳所有圖片到Gitee圖床，拷貝發布到，然後提交到GitHub repo master分支，即可自動部署到GitHub和Gitee Pages；
以上就是我利用GitHub-Actions將Hugo博客自動發布到GitHub和Gitee Pages，希望可以幫助大家快速構建自己的個人網站；後邊我會繼續完善我的第二大腦系統的構建思路和方法。