利用 GitHub 搭建獨立 Web 網站

蘆葦科技App技術團隊發表於1970-01-01
GithubWeb網站

Hugo 是一款快速搭建網站的主題框架，相對於 Hexo 來說， Hugo 的主題以及效能更加出色，並且型別上更加多元化，下面我們試著用 Hugo 來搭建網站。詳情可以去 Hugo官網 檢視.

Hugo 是一個用 Go 語言編寫的靜態網站生成器。

在 Windows 上安裝 Hugo

在 Windows 上需要先安裝包管理工具，這樣再安裝 Hugo 就會節省很多時間，這裡有兩種方式來讓你安裝包管理工具。

第一種方法:Chocolatey 包管理安裝

  • 首先利用 PowerShell 開啟，執行

Set-ExecutionPolicy Bypass -Scope Process -Force

如果有許可權提示，輸入 Y,

  • 接著輸入這一串
@"%SystemRoot%\System32\WindowsPowerShell\v1.0\powershell.exe" -NoProfile -InputFormat None -ExecutionPolicy Bypass -Command "iex ((New-Object System.Net.WebClient).DownloadString('https://chocolatey.org/install.ps1'))" &
&
 SET "PATH=%PATH%;
%ALLUSERSPROFILE%\chocolatey\bin"複製程式碼
  • 成功後輸入 choco install hugo -confirm 安裝 Hugo,即可開始安裝。另外需要主要的是，如果等待很久還沒有出現安裝成功的提示，那這個就要考慮是否已經翻牆，翻牆的更容易安裝上?

第二種方法：Scoop 包管理安裝

  • 開啟 PowerShell ，輸入

iex（new-object net.webclient）.downloadstring（' https://get.scoop.sh '）

  • 安裝成功後輸入scoop install hugo

接下來跟著下面步驟即可

在 Mac上安裝

在 Mac 上安裝也需要先安裝包管理工具，我們假設已經安裝了 brew ，接著開始安裝 Hugo

第1步：安裝 Hugo

brew install hugo

安裝完成後，我們看一下當前版本，如果出來版本，說明我們已經安裝成功了：

hugo version

第2步：建立一個新網站

選擇一個在你要存放網站的地方，建立資料夾名為 xxx 的網站，然後在當前資料夾內執行:

hugo new site xxx

建立的站點檔案目錄說明：

|- archetypes ：存放default.md，標頭檔案格式

|- content ：content目錄存放部落格文章（.markdown/.md檔案）

|- data ：存放自定義模版，匯入的toml檔案（或json，yaml）

|- layouts ：layouts目錄存放的是網站的模板檔案

|- static ：static目錄存放js/css/img等靜態資源

|- config.toml ：config.toml是網站的配置檔案

這個時候，建立出來的網站是沒有任何內容的，需要下載個主題跑起來才有內容。

第3步：新增主題

這裡有各種各樣的主題包:themes.gohugo.io，選上一種進行下一步

cd xxx

git init

git submodule add https://github.com/budparr/gohugo-theme-ananke.git themes/ananke

注意：有些主題步驟會跟上面不一致，可以直接到該主題下按照步驟操作即可

第4步：新增一些內容

下載好之後，現在還沒有文章，我們來寫一篇文章：

hugo new posts/my-first-post.md

這樣就會在posts目錄下生成一個markdown的檔案，用markdown工具開啟編輯內容即可。

現在啟動Hugo本地伺服器在xxx目錄下: hugo server -t 主題名字

出現

Web Server is available at http://localhost:1313/ (bind address 127.0.0.1) Press Ctrl+C to stop

說明已經成功。開啟瀏覽器輸入http://localhost:1313看一看預覽效果。

第五步 上傳到github

這個時候本地網址已經搭建好了，可以上傳到github上。

  • 在xxx目錄下，如果已經有public資料夾，則刪除：`rm -rf public完全刪除該public目錄

  • clone 倉庫:git submodule add -b master git@github.com:<
    USERNAME>
    /<
    USERNAME>
    .github.io.git public    出現 Not a git repository 提示的話，是因為沒有.git這樣一個目錄，建立一個即可：git init

  • 在本地測試好之後：hugo --theme=xxx --baseUrl="https://xxx.github.io/"

  • 更新git

    • cd 到 public 目錄，

    • git add * 全部更新

    • git commit -m “更新內容”

    • git push https://github.com/xxx/xxx.github.io.git master

注意的地方

  • 如果出現:
To https://github.com/aniruddhabarapatre/learn-rails.git! [rejected]        master ->
 master (fetch first)error: failed to push some refs to 'https://github.com/aniruddhabarapatre/learn-rails.git'hint: Updates were rejected because the remote contains work that you dohint: not have locally. This is usually caused by another repository pushinghint: to the same ref. You may want to first merge the remote changes (e.g.,hint: 'git pull') before pushing again.hint: See the 'Note about fast-forwards' in 'git push --help' for details.複製程式碼

用：git push -f https://github.com/xxx/xxx.github.io.git master 強制更新

來源：https://juejin.im/post/5c4bd63cf265da615064cdd8

相關文章