最新版請移步此處，覺得有用幫忙收藏下或者點個贊嘛！01 前言本文針對不掌握網(wǎng)頁設(shè)計或相關(guān)開發(fā)能力的用戶，提供一套高性價比的建立個人博客和作品集的解決方案。具體而" />

国产成人精品无码青草_亚洲国产美女精品久久久久∴_欧美人与鲁交大毛片免费_国产果冻豆传媒麻婆精东

15158846557 或 在線咨詢 在線咨詢
15158846557 或 在線咨詢
所在位置： 首頁 > 營銷資訊 > 網(wǎng)站運營 > 小白如何低成本建立個人網(wǎng)站或作品集（詳細教程）

小白如何低成本建立個人網(wǎng)站或作品集（詳細教程）

時間：2022-08-07 09:03:02 | 來源：網(wǎng)站運營

時間：2022-08-07 09:03:02 來源：網(wǎng)站運營

技術(shù)小白如何建立個人博客/作品集

更新于2019-09-17
最新版請移步此處，覺得有用幫忙收藏下或者點個贊嘛！

01 前言

本文針對不掌握網(wǎng)頁設(shè)計或相關(guān)開發(fā)能力的用戶，提供一套高性價比的建立個人博客和作品集的解決方案。具體而言，是作者摸索了 WordPress建站，自己寫，Github Page建站，Cargo/Wix建站 等各類建站方法后，最終選擇的基于「Github Page + 建站技術(shù)框架」的建站方法。 如果你并不掌握相關(guān)技術(shù)，但需要建立一個網(wǎng)站形式的個人博客/作品集，你就是本文的目標讀者。通過閱讀本文，你能使用小于100元/年的花銷，掌握建立和維護一個高質(zhì)量個人博客/作品集所需要的相關(guān)技術(shù)和流程。

閱讀本文并結(jié)合步驟進行操作，視配置情況和網(wǎng)絡(luò)環(huán)境，最快約1小時可以完成網(wǎng)站的配置和上線。當然，由于網(wǎng)絡(luò)的不穩(wěn)定性和各種坑的出現(xiàn)，可能會需要數(shù)小時的時間才能完成。如果遇到難題，歡迎留言或者私戳求助~另外，注意本文基于MacOS系統(tǒng)進行操作，如果需要使用Windows系統(tǒng)進行配置，可以自行百度或谷歌相關(guān)步驟的鏡像做法。

作者希望通過比較淺顯的語言解釋清楚必要的概念，如果你作為技術(shù)小白無法理解相關(guān)描述，可在評論中指出。 本文所采用的基本技術(shù)內(nèi)容如下圖。如果你對打了*號以外的內(nèi)容有一定基礎(chǔ)的認知，將會有助于快速完成建站。如果你對此基本不太了解，可以繼續(xù)閱讀下文的相關(guān)知識小科普。

主要技術(shù)內(nèi)容├── 「域名」，如 liyanzhang.com├── 「Github」和「Github Page」├── 可用的建站技術(shù)框架，本文以Hugo為主│ ├── 「Jekyll」 (http://jekyllcn.com/)│ ├── 「Hexo」 (https://hexo.io)│ └── 「Hugo」 (https://gohugo.io/)├──「圖床」└── 「Markdown語法」在理解了每一步驟的目的后再進行操作，顯然比一步步照著教程走更有幫助，建議大家詳細閱讀。

網(wǎng)站相關(guān)知識小科普

一個所謂的“網(wǎng)站”（以我的個人作品集(https://liyanzhang.com或https://liyanzhang.cn)為例），可以被理解為放在互聯(lián)網(wǎng)上的一個倉庫，一個倉庫主要有門和庫存兩個部分。

1.門：域名

為了方便自己和其他用戶找到這個倉庫，它需要一個好記的名字或者地址，也就是門。個人博客的地址往往以自己的名字命名，比如我的是http://liyanzhang.com，它的學(xué)名是域名。域名分為很多種，比如.cn結(jié)尾的一般是中國的域名，較多不支持國外瀏覽；比如.com結(jié)尾的是國際上最標準的域名；.http://edu.cn結(jié)尾的則是中國的教育機構(gòu)等等。這也意味著如果你希望你的博客或作品集是全球通用且正式的，建議選購.com/.net等高級域名（相對貴一點）,而日常使用的話，.wiki/.top/.me等域名也是沒問題的。除此之外，我們在建站過程中也可能會接觸到網(wǎng)站形如“218.108.191.35”的IP地址，它們則是互聯(lián)網(wǎng)分配給每個用戶和每個網(wǎng)絡(luò)的名稱。除非情況特殊，否則我們不會遇到它。

2.https安全協(xié)議

而在_https://liyanzhang.com_中的https又是什么呢？它的學(xué)名是超文本傳輸安全協(xié)議，我們只需要知道它是一種安全的用于在網(wǎng)上傳輸數(shù)據(jù)的協(xié)議就可以了。在這里需要大家了解的一個內(nèi)容（也是不少人會建站過程中遇到的一個坑）是https與http的區(qū)別。http較https少了一個“s”，即“安全”。 下圖中分別是我的英文版作品集（https://http://liyanzhang.com)以及博客（http://http://oh-eureka.com，現(xiàn)已停用)，前者是使用本文將為大家介紹的方法構(gòu)建的，而后者則是之前使用WordPress技術(shù)框架構(gòu)建的，可以發(fā)現(xiàn)借助Github Page的一些便利，我們可以免費實現(xiàn)https級別的網(wǎng)站。而一般來說，要在阿里云等服務(wù)提供商購買一年的https服務(wù)，大概需要2000元左右。使用https的好處是更安全，更完美，更專業(yè)。當然，http在我們的日常生活中也是完全夠用的。

http協(xié)議的網(wǎng)站會被標為“不安全”

3.倉庫：服務(wù)器

在瀏覽器輸入框輸入“門牌號”域名后，我們會進入到一個個網(wǎng)站的倉庫里，我們可以簡單地把這些倉庫理解為服務(wù)器。這些倉庫存在2種狀態(tài)。狀態(tài)一是“渲染”后的狀態(tài)，也就是我們正常進入網(wǎng)頁時看到的一個個漂亮的頁面。但顯然這些網(wǎng)頁不是像一幅幅圖片一樣被擺在倉庫里的，而是以狀態(tài)二：“源代碼”形式存在的。

按理來說，一個基礎(chǔ)的網(wǎng)頁開發(fā)，我們需要學(xué)習(xí)html5，css3，javascript等語法才能夠?qū)懞茫⒃跒g覽器上渲染好。但通過使用一些別人為我們建設(shè)好的技術(shù)框架，我們只需要像寫文章一樣寫好內(nèi)容，放到對應(yīng)的文件夾里，或者是修改一個已經(jīng)非常整潔明了的配置文件，就可以在網(wǎng)絡(luò)上看到渲染后的結(jié)果。這也是這些技術(shù)框架的意義。

因此，如果不滿足于簡單地構(gòu)建和維護網(wǎng)站，可以自行百度或谷歌html5，css3的相關(guān)內(nèi)容學(xué)習(xí)，大概2天時間便可以上手。 另一方面，在根據(jù)后文完成了所有的配置工作后，我們維護網(wǎng)站的流程是：




建站相關(guān)知識小百科

通過前文的介紹，相信你對一個“網(wǎng)站”的構(gòu)成，也就是它的門和倉庫，有了一定的了解。下文將為大家簡單介紹幾種主流的建站方式和適合的用戶。

  1. 域名+WordPress/Cargo/Wix等自帶服務(wù)器建站
優(yōu)點：美觀，定制化程度高，可以使用富文本編輯器編輯，易于維護 缺點：基礎(chǔ)費用較高（￥200+～￥800+/年不等，越好看越貴），需要較快訪問速度和儲存容量時費用更高 總結(jié)：有錢就不用想了，這個走起

  1. 域名+GitHub Page建站
優(yōu)點：免費，快速 缺點：網(wǎng)站樣式和結(jié)構(gòu)較為單一（丑陋），維護不夠方便，無法監(jiān)控網(wǎng)站數(shù)據(jù) 總結(jié)：既然都用GitHub Page了，干啥不再多搞一下呢？

  1. 域名+GitHub Page+Hugo/Hexo/Jekyll等技術(shù)框架建站
優(yōu)點：免費，快速，定制化程度尚可，較為美觀，維護不困難 缺點：不夠方便，定制化程度還是不夠高 總結(jié)：相對性價比最高的選擇

再解釋一些撰寫博客需要了解的相關(guān)概念：







02 材料準備

2.1 購買域名（10分鐘）

如果你已經(jīng)擁有一個域名并已完成備案，可直接查看下一條。 我們使用阿里云購買一個你喜歡的域名。

  1. 前往https://www.aliyun.com/，點擊右上角登錄，使用支付寶掃碼直接登錄。
  2. 在頂部搜索框選擇“域名”，在輸入框輸入你想要的域名，比如_nidemingzi_，點擊搜索






  1. 查看結(jié)果，選擇你能夠接受的域名，或更換關(guān)鍵詞。一般來說，建議選用.com/.cn/.net/.io結(jié)尾的域名。如果不幸域名已被注冊，建議更換關(guān)鍵詞或尾綴，因為委托購買價格較高。






  1. 不需要添加任何其他服務(wù)，域名持有者選擇“個人”，按照要求完善信息。可以查看阿里云自行提供的“如何獲取優(yōu)惠口令”獲得一點點的優(yōu)惠。






  1. 購買后，直接進入域名控制臺，或通過頁面右上角“控制臺”-頁面左側(cè)側(cè)邊欄“域名”進入域名控制臺，如下圖。






  1. 你購買的域名應(yīng)該會出現(xiàn)在頁面中，但在部分屬性狀態(tài)上與我會不同。
  2. 如果“域名狀態(tài)”或頁面中任何區(qū)域顯示域名需要進行“備案”，則請按照阿里云的指引進行域名備案。備案是必須的，視不同情況可能會在30min內(nèi)完成，也可能確實需要3-5天。
備案完成后，域名就完成準備啦！

2.2 GitHub準備（15分鐘）

如果你已經(jīng)擁有一個GitHub賬號，并掌握了push/commit等指令或了解如何使用GitHub Desktop，可直接查看下一條。 GitHub (https://github.com)是世界范圍內(nèi)最大的~~男性交友平臺~~代碼托管平臺。由于程序員寫的代碼和項目不僅多，而且還會不斷地進行增、刪、改，必須要有一個在云端的平臺為大家管理這些代碼。通過GitHub，程序員可以在自己的電腦上寫代碼（就像我們將做到的在自己的電腦上的文件夾里編輯文件），再上傳發(fā)布到GitHub上。通過我們的標記操作（輸入一些指令），GitHub會記錄下我們更改文件的操作，以便我們后悔更改后直接服用“后悔藥”恢復(fù)文件至某一版本。當然，在我們搭建網(wǎng)站和維護的過程中，幾乎不需要用到任何復(fù)雜的操作，只需要修改文件后發(fā)布到GitHub上即可。

  1. 進入github.com, 輸入自己喜歡的用戶名，自己的Email和Password，檢測沒有重復(fù)后即點擊Sign up for GitHub完成注冊。可能會收到激活郵件。






  1. 進入GitHub后，界面如下圖所示。左側(cè)為你已經(jīng)建立的一些“項目”，中間會出現(xiàn)你關(guān)注的內(nèi)容，右側(cè)則是一些動態(tài)。






  1. 點擊https://desktop.github.com/，下載GitHub Desktop客戶端，方便我們管理本地的倉庫。
  2. 完成安裝后雙擊打開，登錄注冊好的GitHub賬號。






登錄完成后，即完成準備！

2.3 其他軟件準備（5分鐘）

  1. 下載 Visual Studio Code（https://code.visualstudio.com/），用于編寫我們的文檔。它是一款輕量強大的代碼編輯器。






  1. 在App Store下載iPic，用于上傳文章中的圖片到圖床上。下載后安裝即可，配置將在后文交代。






03 具體配置

3.1 配置GitHub Page（15分鐘）

GitHub Page是一種由GitHub中的Repository（倉庫/項目）直接創(chuàng)建的網(wǎng)頁。傳統(tǒng)的網(wǎng)頁需要擁有一個獨立的服務(wù)器，往往需要另外購買，價格雖然不貴，但管理十分困難。相比之下，GitHub Repository的管理則非常簡單，使用前文介紹的GitHub Desktop甚至不需要記憶任何指令。按照數(shù)百萬人都在用的GitHub管理模式，我們在本地編輯Repo中的內(nèi)容，上傳到GitHub上，則GitHub Page也能夠?qū)?yīng)更新。

接下來，指引大家配置并上線自己網(wǎng)站的初始界面。（也可以跟著GitHub Page自己的指引嘗試配置）

  1. 登錄GitHub，點擊頁面左側(cè)欄“New”按鈕，新建一個Repo。






  1. 在Repository name處填寫“小寫用戶名.github.io”，比如我的用戶名是“Yanzhang-LI”，則我應(yīng)該填寫“yanzhang-li.github.io”。注意一定要完全準確對應(yīng)，否則該Repo無法作為GitHub Page生效。






  1. 點擊“Set up in Desktop”。如果沒有反應(yīng)，則在系統(tǒng)上直接打開GitHub Desktop，該Repo應(yīng)該會顯示在界面上，選擇您剛建立的http://_username_.github.io并點擊藍色按鈕Clone它到本地。這意味著你會在自己的電腦上擁有一個以http://_username_.github.io為名字的文件夾。當你更改文件夾里的文件時，GitHub Desktop會檢測到你的更改，而你可以commit并push到GitHub上。












  1. 打開Visual Studio Code，使用快捷鍵Command/Ctrl+N或點擊“New file”新建一個文件。使用快捷鍵Command/Ctrl+S保存該文件，注意：將該文件命名為index.html，并保存至剛剛建立的以http://_username_.github.io為名字的文件夾中。index.html是GitHub Page解析網(wǎng)頁時，會首先解析的主頁。
  2. 將以下html5代碼復(fù)制進index.html，隨后再次使用Command/Ctrl+S保存。
<!DOCTYPE html><html><body><h1>Hello World</h1><p>I'm hosted with GitHub Pages.</p></body></html>
  1. 打開GitHub Desktop，它應(yīng)當會自動出現(xiàn)你對文件所做的更改。確認左側(cè)欄全選后，在紅色輸入框內(nèi)輸入任何你想用來標記這次更改的話，比如“第一次commit”，隨后點擊下方藍色按鈕“Commit to master”，此時已經(jīng)完成了標記工作。最后我們點擊上方欄最右的“Publish branch”將該變更發(fā)布到GitHub上，等待完成。






  1. 在瀏覽器中輸入https://你的用戶名.http://github.io，看看你最開始網(wǎng)頁的效果吧！
  2. 如果沒有任何反應(yīng)，請等待幾分鐘。如果還是沒有內(nèi)容，請在http://github.com上檢查你的http://username.github.io的Repo中是否有一個index.html文件，同時文件中的代碼是否如前文所述。
  3. 如果一切順利，此時你的github page就已經(jīng)配置完成了。如果你會撰寫一些前端代碼，你已經(jīng)可以在http://username.github.io上瀏覽你的更新。
通過上面的操作，你應(yīng)該能夠理解本地的“http://username.github.io文件夾”和“GitHub Page”間的關(guān)系。本地的文件夾中的內(nèi)容一旦發(fā)生改變，就可以通過GitHub Desktop進行commit（打點記錄改變），再push到GitHub云端。經(jīng)過這樣的操作，云端的GitHub倉庫代碼和本地的http://username.github.io文件夾的內(nèi)容就一致了。而再經(jīng)過GitHub Page的渲染，我們就可以使用域名訪問我們的個人網(wǎng)站了。

截至目前，我們其實已經(jīng)擁有了一個名為http://username.github.io的網(wǎng)站了。但顯然這樣的域名并不夠酷，所以我們將會再花幾分鐘配置好域名。配置域名的原理是通過將username.github.io“解析”到你所購買的域名，解析的具體含義我們不必了解，總之，以后你既可以通過http://username.github.io，也可以通過你所購買的域名訪問這個網(wǎng)頁。

  1. 在GitHub上進入你的http://username.github.io的Repo，進入其設(shè)置。






  1. 找到GitHub Pages設(shè)置，在“Custom domain”中輸入你所購買的域名，點擊Save。






  1. 進入阿里云-登錄-控制臺-域名，找到你購買的域名或你需要與username.github.io綁定的域名，點擊“解析”。






  1. 點擊“添加記錄”，共需要添加兩次記錄。記錄類型都選擇“CNAME”，主機記錄第一次填寫“www”，第二次填寫“@”，解析線路均選擇默認，記錄值均填寫“你的用戶名.github.io”。






解析結(jié)束后等待數(shù)分鐘，嘗試在瀏覽框中輸入你的域名，如果可以順利訪問則解析成功。

3.2 配置Hugo和Hugo主題 （40分鐘）

要使用Hugo來安排我們的網(wǎng)站，我們首先要在我們的電腦本地配置Hugo技術(shù)框架。下文以Mac系統(tǒng)為例，Windows系統(tǒng)請百度鏡像做法，如“win 安裝hugo”。

  1. 在電腦本地安裝Homebrew
  2. 點擊進入https://brew.sh/index_zh-cn






  1. command+c復(fù)制路徑，打開應(yīng)用程序里的“終端（terminal）”，將指令command+v粘貼后回車。



b. 出現(xiàn)上圖語句后回車，輸入Password（電腦密碼），注意輸入時不會有任何反應(yīng)，輸入完畢按下回車后如果進程順利則輸入正確，否則重新輸入。

c. 出現(xiàn)上圖文字表示安裝成功。

  1. 在電腦本地安裝Hugo
  2. 打開“終端”應(yīng)用程序，輸入 brew install hugo
  3. 按照指令操作，等待安裝進程結(jié)束
  4. 結(jié)束后，輸入 hugo version如果出現(xiàn)了版本號，則說明安裝成功
Hugo安裝完畢后，請在https://themes.gohugo.io / GitHub / Google上尋找適合你的個人博客/作品集的網(wǎng)站模板。選定模板后，再進行主題的配置和發(fā)布。 隨便列舉一些能看得過去的主題：

所謂的主題，就是別人給我們寫好的了一套網(wǎng)頁樣式，包括主頁、文章、圖片等各類內(nèi)容的樣式，因此我們只需要注重內(nèi)容的生產(chǎn)。一般來說，我們可以替換主題中文字和圖片的內(nèi)容，如果對css等語言有一定了解的同學(xué)，可以修改模塊的具體樣式（形狀、顏色、比例等）。在上文可以看到，Hugo等框架為我們提供了大量的主題，我們需要首先配置好Hugo和Hugo主題，再將它發(fā)布到GitHub Page上即可。接下來以我選用的hugo-forty主題為例，解釋主題的配置。 其流程大致為：本地新建Hugo Website -> git clone主題文件 -> 在本地修改你的網(wǎng)站 -> 發(fā)布到GitHub Page **

  1. 在本地任意一個你喜歡的地方，比如“文稿Documents”路徑下，新建一個文件夾，可以命名為my website。
  2. 在應(yīng)用程序（或使用快捷鍵command+空格搜索）找到“終端Terminal”并打開，輸入“cd”后再輸入空格，再用鼠標拖動my website文件夾至終端中，直到終端中的命令變?yōu)椤癱d 文件夾的路徑”，按下回車。該操作使得終端進入了my website文件夾，我們將要在該文件夾中進行一系列指令操作。



  1. 在終端中輸入指令“hugo new site my-portfolio”其中的"my-portfolio"可以替換為任何連續(xù)的文件夾名稱，如“yanzhang-portfolio”等，完成后將出現(xiàn)一個以此為名稱的新文件夾，里面已經(jīng)有好幾個文件夾和文件了。(注意下圖中的my-website應(yīng)為my-portfolio或你替換的名稱)



  1. 在終端中輸入指令"cd 你剛剛寫的文件夾名稱"，如"cd my-portfolio"，隨后再輸入"cd themes"。
  2. 成功進入后，輸入"git clone https://github.com/MarcusVirg/forty"，具體的指令因為主題的不同也會不同。等待下載完成，如果網(wǎng)絡(luò)不好可能會崩掉，重來即可，最好使用翻墻網(wǎng)絡(luò)。這幾步的含義是將存放于github上的主題文件下載到我們電腦本地上，這樣我們的hugo網(wǎng)站就擁有了主題。后面，我們將在本地對我們的Hugo網(wǎng)站進行內(nèi)容修改，最后發(fā)布到GitHub上，我們就可以通過域名訪問了。



  1. 完成下載后，進入themes文件夾，里面將出現(xiàn)forty文件夾，進入themes/forty/exampleSite，復(fù)制里面的config.toml文件到最開始的my-portfolio文件夾中，替換原來的config.toml文件。



  1. 重新打開終端，輸入"cd "（注意有空格）后拖拽my-portfolio文件夾的路徑到終端中，回車后進入到my-portfolio文件夾下，輸入"hugo server"并回車，出現(xiàn)如下圖所示則成功。最后，打開瀏覽器，在路徑框內(nèi)輸入"http://localhost:1313/"。如果出現(xiàn)了樣式正確的樣板網(wǎng)站頁面，則配置成功。在終端窗口被激活的狀態(tài)下按下control+c組合鍵，終止該預(yù)覽。



配置部分到此就結(jié)束了。接下來，將會進一步完成圖床的配置工作，并在 04 維護 部分中介紹配置網(wǎng)站的具體方法。

3.3 配置圖床 （20分鐘）

我個人使用七牛云圖床或騰訊云圖床和iPic來配置圖床，win系統(tǒng)請使用picGo等軟件。

由于七牛云規(guī)則變更，免費測試的七牛云圖床存儲空間僅在30天有效，如果需要永久有效的圖床，需要擁有一個已經(jīng)完成備案的域名（注意備案不等于實名認證），備案需要超過1周的時間，較為麻煩。我個人使用了自己備案的域名，也建議大家給自己的域名備案。

如果不想這么麻煩，可以換用騰訊云來配置，相關(guān)步驟非常類似。 具體可見https://blog.csdn.net/u012195214/article/details/79204607。

附上iPic官方的配置說明：https://toolinbox.net/iPic/。

配置完成后，如何在markdown語法中使用，請百度markdown語法進行學(xué)習(xí)。

04 維護

在這一部分，我將會介紹一個典型的Hugo網(wǎng)站文件夾中的各個文件的作用，以及我們將如何配置他們。在此處，還是以前文的Forty主題為例，對于大多主題是通用的。

剛完成配置的Hugo文件夾├── config.toml 總配置文件，可以在里面更改各類配置（上傳到Github前務(wù)必修改該文件，方法見下文）├── archetypes 不必理會│ └── default.md ├── content 存放文章內(nèi)容的文件夾，可以在里面新建不同類目的文件夾│ ├── blogs│ │ ├── blog0917.md│ │ └── ... 你的其他文章│ ├── works│ └── ... 你的其他分類├── data 不必理會├── layouts 不必理會├── resources 不必理會├── static 用于存放你在content中的文章會用到的圖片等資料├── public 完成配置后，生成出來的網(wǎng)站會被放到這里└── themes └── forty 你選擇的主題名稱 ├── archetypes 不必理會 ├── exampleSite 完成初始化配置后不必理會 ├── images 不必理會 ├── layouts 不必理會 └── static 各類配置文件 ├── css css文件，可以修改代碼以更改樣式 ├── img 用于存放主頁會用到的圖片等文件，如banner.jpg ├── js 不必理會 ├── sass 不必理會 └── fonts 不必理會在上面，我初步解釋了每個文件夾的作用。我們主要會涉及到 config.toml文件，content文件夾，static文件夾，public文件夾，themes/forty/static文件夾這幾個內(nèi)容的修改，接下來逐一詳細介紹。

config意為配置，.toml是一種數(shù)據(jù)格式。該文件根據(jù)不同的主題會有所不同但總體上類似。在這個文件里，可以定義網(wǎng)站的名稱，各個地方的文字、圖片、結(jié)構(gòu)等等。具體的描述，使用Visual Studio Code打開文件后，里面會有相應(yīng)的說明。也可以實時修改后在本地預(yù)覽網(wǎng)頁時實時查看（具體方法見后文）。 需要注意的是，其中有一條baseURL = "//...."的字段，需要將"//..."的內(nèi)容改為你的http://username.github.io，如"//http://yanzhang-li.github.io"。更改后，才可生效。

里面放有你的博客和文章/作品，以markdown文件形式存在。每個文件的頭部會有一些屬性需要配置，隨后就可以使用正常的markdown語法進行寫作。

在里面存放著文章的封面等會被用到的圖片資料，可以在content中的markdown文件中以路徑形式取用。

當在本地結(jié)束配置后，在終端中使用"hugo"指令，網(wǎng)站的內(nèi)容將被生成到public文件夾。該文件夾的內(nèi)容應(yīng)該被復(fù)制黏貼到本地的GitHub Page文件夾（http://username.github.io文件夾）并上傳到GitHub。

和static文件夾類似，只不過這里面是與主題有關(guān)的所有文件，包括css，js，圖片等。如果了解代碼原理，可以在這里進行配置修改。

維護和發(fā)布流程（重要）

  1. 在“終端”中，使用前文提到的 “cd + 空格 + 路徑”的形式進入到你的hugo網(wǎng)站文件夾（如前文的my-portfolio文件夾）。
  2. “終端”輸入“hugo server”指令，成功后在瀏覽器進入localhost:1313，本地預(yù)覽網(wǎng)站。
  3. 修改前文提到的各類文件或其他markdown文件，在瀏覽器中查看效果。
  4. 修改完畢后，回到“終端”，按快捷鍵ctrl+c停止本地預(yù)覽。輸入指令“hugo”。
  5. 前往hugo網(wǎng)站文件夾中的public文件夾，復(fù)制里面的所有文件到GitHub Page文件夾(http://username.github.io文件夾)。
  6. 打開GitHub Desktop，監(jiān)測到多個文件被改變。Commit后push到云端，稍等2分鐘，在網(wǎng)頁上輸入你的域名查看是否更新成功。
至此，你已經(jīng)了解了如何創(chuàng)建、配置并維護你的個人網(wǎng)站，恭喜！

本文更新于2019年9月，如有任何錯漏或謬見，敬請諒解與告知，感謝！

參考文獻

  1. https://www.jianshu.com/p/0997d0d15e55
  2. https://pages.github.com/
  3. https://gohugo.io/documentation/
  4. https://yunxi177.github.io/posts/hugoinstall

關(guān)鍵詞：作品,教程,詳細,建立,成本

74
73
25
news

版權(quán)所有? 億企邦 1997-2025 保留一切法律許可權(quán)利。

為了最佳展示效果，本站不支持IE9及以下版本的瀏覽器，建議您使用谷歌Chrome瀏覽器。 點擊下載Chrome瀏覽器
關(guān)閉