時間：2022-08-22 13:27:02 | 來源：網(wǎng)站運營
時間：2022-08-22 13:27:02 來源：網(wǎng)站運營
寫給想要擁有一個自己的網(wǎng)站但沒有資金成本的小白與曾經(jīng)的自己。
注釋處多為相關(guān)補充說明，對正常流程沒有影響，若沒有興趣，可以略過。與文章相關(guān)疑問都可在本文章的 GitHub Issues 中進行評論，其他疑問可到對應(yīng)項目或文章下評論。
什么是 Node.js ？下載｜ Node.js
這得從什么是 JS 說起，JS 也就是 JavaScript。（為什么有種從盤古開天辟地開始的感覺）沒錯，JavaScript 就是網(wǎng)頁的盤古。JavaScript 是一種編程語言，我們所見到的網(wǎng)頁中的交互和邏輯處理幾乎都是由 JavaScript 完成。
JavaScript 語法簡單，易學易用。（當然也請不要小瞧它，雖然它入門門檻低，但上限同樣也很高。包括但不限于實現(xiàn)網(wǎng)站前后端，手機桌面應(yīng)用程序，機器學習，計算機圖形學等。） 在 Node.js 誕生前，JavaScript 都運行于瀏覽器端。也就是說，它是魚，瀏覽器是裝滿了水的水缸。 2008 年，Chrome V8 誕生。2009 年，Node.js 誕生。并成為 GitHub 早期最著名的開源項目。GitHub 可能大家已有所了解，后續(xù)再說。
Node.js 便是一個基于 Chrome V8 引擎的 JavaScript 運行環(huán)境。（當年第一次看到這句話時，我也一臉懵逼。）按照我的理解，JavaScript 是魚，Chrome V8 就是抽水機，Node.js 則把這臺抽水機也裝在你電腦上。于是你的電腦也有了 Node.js 這個和瀏覽器相似的水缸，也可以在里面運行 JavaScript 了！
當然 Node.js 和瀏覽器端還是因為自身定位和一些歷史原因而有些許區(qū)別的，不再展開。
Node.js | 百度百科
JavaScript | MDN
在線咨詢
node --version，如果得到的版本號與你方才安裝的一致，那么 Node.js 就已經(jīng)成功安裝。Visual Studio Code，簡稱 VS Code。 目前最為強大的編輯器，輕量且快速。（~~宇宙第一編輯器~~） 注意：它并不是我們常常聽到的 VS，VS 常常指的是 Visual Studio，是一個功能強大的 IDE（集成開發(fā)環(huán)境），體積也相比 VS Code 都要大上一個量級。在此之前，我建議你先安裝 VS Code。因為安裝 Git Bash 時，可以設(shè)置 VS Code 作為默認編輯器。
Git 是一個開源的分布式版本控制系統(tǒng)，由 Linus Torvalds（同時也是 Linux 的作者）為了管理 Linux 開發(fā)而開發(fā)。 簡而言之，是一個版本管理工具。譬如設(shè)計師設(shè)計好了第三版的海報，客戶卻說還是要第一版吧，這時便可以通過 Git 快速回退到最初的版本。 你只需要把每次更改的狀態(tài)（Git 會自動進行檢測，你只要掌握基礎(chǔ)的幾條命令就可以了）告訴 Git，而不需要每個版本都保存一份壓縮包，既方便也能大大節(jié)約空間。 （當然這主要只對代碼文本起作用，因為 Git 的本質(zhì)是記錄各行代碼的增減，倘若是像視頻、海報這類二進制文件來說便體現(xiàn)不出絲毫優(yōu)勢了。當然想要應(yīng)對這種場景還有 Git LFS。）下載 Git 并安裝（如果國內(nèi)速度太慢，可以試試這里）
類似的工具還有：SVN。但始終更推薦 Git，因為它功能更為強大且它的背后還有更強大的生態(tài)：GitHub。
GitHub 一聽便與 Git 有所淵源。注冊 GitHub 賬號。（雖然都是英文，但不必畏懼，也并不會造成使用障礙，只要記得最常用的選項含義即可，以及善用手頭的翻譯軟件。）Git在英文中是懶人、飯桶之意。Hub則是中心、集線器的意思。譬如 USB 集線器就是 USB Hub。所以 GitHub 就是飯桶中心（~~大霧~~）。
GitHub 是全世界最大的開源項目與代碼托管平臺，也是眾多開發(fā)者的交流場所。~~還是全球最大的同性交友網(wǎng)站~~。 而代碼托管本身用到的正是上文提到的 Git 技術(shù)。
注意：注冊時的英文用戶名將成為你可以使用的免費域名前綴。登錄 GitHub。
為什么要用 GitHub？ 對于平民玩家來說，在初次嘗試建立自己的網(wǎng)站時，也許并不會有閑錢或者說決心來購買自己的服務(wù)器與域名。 而 GitHub 則提供了 GitHub Pages 這一服務(wù)。 用戶們可以利用這一服務(wù)，部署自己的靜態(tài)站點。點擊右上角的
+ -> New repository 新建倉庫。我這里因為已經(jīng)有同名倉庫，所以提示了重復。倉庫名稱務(wù)必為
你的用戶名.github.io，用戶名是英文，大小寫無所謂，但建議統(tǒng)一小寫。（因為你會發(fā)現(xiàn)時常切換大小寫很麻煩）為什么必須這個作為倉庫名？ GitHub Pages 服務(wù)的命名規(guī)范，同時它也將成為你的專屬域名。當然，你也可以購置自己的專屬域名并用它來提供內(nèi)容。點擊
Create repository。為嘛使用 Hexo ？ Hexo 是一個快速、簡潔而強大的博客框架，基于 Node.js，同樣托管于 GitHub 之上。生態(tài)中擁有眾多插件主題。你可以基于它快速生成一些靜態(tài)頁面。 你可以使用別人的各種主題與插件，也可以自己定制開發(fā)想要的功能。 為什么不是...? 其他常用的博客框架還有 WordPress，Typecho等，但這些往往都需要購置自己的服務(wù)器，而無法靜態(tài)化地部署到 GitHub Pages 上。（當然，相應(yīng)的功能和靈活性也大大提升。） 靜態(tài)網(wǎng)站生成器還有 Vuepress，Gatsby等。但這些多是為了寫文檔而量身定制的，你也可以使用它們，但是相較 Hexo 的博客定位，它們關(guān)于博客的插件和主題以及解決辦法會少得多。 Hugo 提供的功能與 Hexo 幾乎相同，不過它是基于 GO 語言。日后你想對自己的網(wǎng)站進行自定義，即便是 Hugo，你編寫前端的交互仍舊需要使用 JavaScrip，所以選擇基于 JavaScript 的 Hexo 可以降低學習成本。（你若對 GO 有興趣，仍然可以嘗試使用 Hugo，但本教程將不會針對 Hugo 進行展開。） 所以對于新手來說，使用 Hexo 作為起始點，不失為一個好選擇。（當然如果你有錢租服務(wù)器，就可以考慮考慮 WordPress）在終端中輸入以下命令：
npm install hexo-cli -g# 如果安裝失敗，可能是沒有權(quán)限，可以嘗試頭部加上 sudo 重新執(zhí)行# sudo npm install hexo-cli -g此時，請先通過npm是隨 Node.js 一起被安裝的包管理工具，你可以理解成 Node.js 自帶的應(yīng)用商店。install自然是安裝。hexo-cli則是hexo的終端工具，可以幫助你生成一些模版文件，之后再用到。-g代表的是全局安裝。也就是在任何地方都可以使用，否則會只能在安裝的目錄下使用。
cd 進入你本地電腦打算存儲網(wǎng)站代碼的文件夾目錄。（或者右鍵文件夾 Git Bash Here）cd | DOS 命令譬如：
cd （LINUXSHELL 命令）
注意：這里是你自定義的目錄，請不要復制粘貼
# '#' 字符后的文字代表注釋，不需要輸入# Windowscd C:/Users/YunYou/Documents/GitHub/# macOS# cd /Users/yunyou/github/接下來輸入：hexo init 你的名字.github.iohexo正是因為我們之前安裝了hexo-cli這一個包，所以我們可以在終端中使用hexo這一命令。init初始化博客的模版文件。后面跟的是你要新建的文件夾，最好和你此前新建的倉庫名一致。
# 進入你的博客文件夾cd 你的名字.github.io# 默認安裝所有 `package.json` 文件中提到的包npm install# 你也可以縮寫成 hexo shexo serverserver 代表開啟本地的 Hexo 服務(wù)器，這時你就可以打開瀏覽器，在地址欄中輸入 localhost:4000 就可以看到本地的網(wǎng)頁了。Ctrl + C 終端服務(wù)器的運行。Hexo 目錄），輸入以下命令。實際上你也可以直接在 VS Code 中使用終端。
git clone https://github.com/YunYouJun/hexo-theme-yun themes/yun這里便使用到了我們此前安裝的 Git，git clone即代表克?。ㄒ簿褪菑椭频淖饔茫┪业闹黝}（托管于 GitHub，鏈接便是主題所在的地址），themes/yun則代表放在你 Hexo 文件夾下的themes/yun文件夾里（沒有該文件夾會自動新建）。
右鍵文件夾使用 VS Code 打開，或者進入 VS Code 打開你存儲網(wǎng)站的文件夾。此后操作都將默認你已處于該工作目錄下。在你此前通過 Hexo 初始化生成的文件目錄下，會存在一個
_config.yml 文件。它是 Hexo 的配置文件，關(guān)于各配置選項的意義你可以查看 配置 | Hexo。yml是 YAML 文件的后綴名，YAML 是 "YAML Ain't a Markup Language"（YAML 不是一種標記語言） 的縮寫，但它實際上還是一種標記語言。你可以將其理解為存儲數(shù)據(jù)的一種文本格式，這也是其誕生的目的。 如果你聽說過 JSON，那你就更能明白它是干什么的了。
_config.yml 中找到 theme 這個字段，將其后的 landscape 修改為 yun。theme: yunpug 是一種模板引擎，可以渲染為 HTML 字符串。類似的還有 ejs，swig 等，語法和設(shè)計理念有所不同。 stylus 是一種 CSS 預處理器，可以渲染為 CSS。類似的還有 scss，less，同樣只是語法和設(shè)計理念有所差異。由于我的主題使用了 pug 和 stylus，而 Hexo 自帶的一般是 ejs 與 stylus，所以你可能還需要輸入以下命令安裝渲染器。
npm install hexo-render-pug hexo-renderer-stylus這時再像此前那般使用 hexo server 重新啟動服務(wù)器，你就可以看到一個不一樣的主題風格的頁面了。themes/yun/_config.yml 文件中。 且慢，你最好不要直接修改主題的默認配置。倘若日后主題升級更新了怎么辦嗎，難道還要重新配置一遍嗎？source/_data/yun.yml。（若 source/_data 目錄不存在，請新建）yun.yml 文件中自定義你需要的配置即可，其余仍將自動采用默認配置。yun.yml 中填寫。你可以在source文件夾下新建images文件夾，用來存儲你的圖片。 也可以使用 SM.MS 上傳你的圖片文件，獲取在線鏈接。
avatar: url: /images/avatar.jpg # 你的頭像圖片地址 rounded: true opacity: 1更換主題色彩，比如換成黑色，黑色的十六進制顏色代碼是 #000000。colors: primary: "#000000"這時你的主題色調(diào)就會變?yōu)楹谏?br>theme/yun/_config.yml 中查看，并根據(jù)自己的需要進行配置。# 如果進行多次生成，為了避免受錯誤緩存影響，最好使用 hexo clean 先清除一遍。hexo generate# 縮寫為 hexo g此時你的文件夾目錄下會出現(xiàn) public 這個文件夾，里面存放的就是你站點的靜態(tài)文件。git init # 初始化 Git 倉庫，只需要執(zhí)行一次即可在將其部署到 GitHub Pages 上之前，我們最好先建立一個分支。什么是分支？ Git 提供了版本管理功能，其中還有一個分支功能，你現(xiàn)在可以簡單地將其理解為平行世界。
你的名字.github.io 部署后，GitHub Pages 將默認使用你的 master 分支作為靜態(tài)文件部署。 所以我們最好新建一個 hexo 分支（命名無所謂）用來存儲 Hexo 地源代碼，master 分支則用來存儲部署后的靜態(tài)文件。git checkout -b hexo這時便成功建立了一個 hexo 分支。（此后的工作都將在 hexo 分支下進行）git branch -v 來查看當前有哪些分支，使用 git branch 分支名 來切換到對應(yīng)的分支。Git 學習筆記
hexo-deployer-git 插件。npm install hexo-deployer-git在 _config.yml 中配置。deploy: type: git repo: 你此前新建的倉庫的鏈接 # 比如：https://github.com/YunYouJun/yunyoujun.github.io branch: master # 默認使用 master 分支 message: Update Hexo Static Content # 你可以自定義此次部署更新的說明保存，部署！第一次可能需要你輸入用戶名與密碼。 密碼輸入的時候不會出現(xiàn) ***，不要害怕，已經(jīng)輸入進去了。
hexo deploy等待完成后，打開網(wǎng)址 https://你的名字.github.io 就能看到你的線上網(wǎng)站了。使用 https，http 可能無法正常打開。HTTPS 是多了安全加密的 HTTP，Chrome 瀏覽器已經(jīng)默認會顯示http鏈接為不安全。 為了安全，建議開啟強制 https 跳轉(zhuǎn)。項目地址頁面 -> Settings -> Options -> GitHub Pages -> Enforce HTTPS。（翻到下面） 此時，http 網(wǎng)址會自動重定向到 https
# 與遠程 Git 倉庫建立連接，只此一次即可git remote add origin https://github.com/你的用戶名/你的名字.github.io接下來準備提交，這幾句命令將是你以后每次備份所需要輸入。# 添加到緩存區(qū)git add -A#git commit -m "這次做了什么更改，簡單描述下即可"# 推送至遠程倉庫git push# 第一次提交，你可能需設(shè)置一下默認提交分支# git push --set-upstream origin hexo每次推送都要輸入這三條命令，你可能覺得有些麻煩。 那么你可以編寫 bash 腳本。update.sh。# 如果沒有消息后綴，默認提交信息為 `:pencil: update content`info=$1if ["$info" = ""];then info=":pencil: update content"figit add -Agit commit -m "$info"git push origin hexo此后更新的話，只需要在終端執(zhí)行 sh update.sh 即可。什么是持續(xù)集成？ 持續(xù)集成是一種軟件開發(fā)實踐。對軟件進行自動化構(gòu)建，以此來發(fā)現(xiàn)錯誤。 Travis CI 就是一個線上持續(xù)集成服務(wù)的提供商。它可以拉取你每次推送到 GitHub 上的代碼，然后根據(jù)你的要求對其進行構(gòu)建。 我們可以趁機讓它自動生成網(wǎng)站靜態(tài)文件，然后自動幫我們部署。至于如何使用持續(xù)集成來部署 Hexo，官方文檔已經(jīng)介紹的很詳細，所以我就不再畫蛇添足了。
將 Hexo 部署到 GitHub Pages至此，你的站點便基本搭建完成，此后繼續(xù)對主題進行自定義吧。
Yun 主題文檔
xxx.md 文件。hexo new post xxx譬如本文就是通過 Markdown 編寫。md是Markdown的后綴名，是一種簡潔方便的文本標記語言。你只需要記住簡單的幾種語法，就可以快速進行編寫。 為什么使用 Markdown？ 首先 Hexo 本身就是將 Markdown 轉(zhuǎn)化為靜態(tài)的 Html 文件，來方便用戶編寫文章。 Markdown 就好似介于 Word 與 TXT 文本之間。Word 體積大、大部分功能實際上根本用不到，且最后的文檔常常帶有許多冗余信息。 而 TXT 卻無法實現(xiàn)加粗、標題、下劃線、水平分割線等常用的功能。 （這里所說的 TXT 只是一種純文本格式的代稱，實際上 Markdown 也是純文本文件，不過通過語法和 Markdown 編譯器，我們就可以看到一些簡單的樣式。）
# 一級標題## 二級標題**加粗文字**更多語法（雖然說是更多，但是其實也沒多少）：Markdown 基本語法這是我寫的一個 Markdown 樣式：star-markdown-css
source 文件夾下直接新建 HTML 進行編寫。hexo new page xxx說到這里，就不得不提一提本主題的特色功能了。避免廣告嫌疑，你可以自行前往相關(guān)域名提供商購買。并使用 CNAME 解析到
你的名字.github.io。（當然 A 記錄直接解析到 GitHub Pages IP 地址也可以。）Managing a custom domain for your GitHub Pages site在
Hexo 工作目錄下 source 文件夾下新建 CNAME 文件（沒有后綴名）。source 目錄下的文件除了特殊的 markdown 會被解析為 html，其余都會原樣復制到生成的靜態(tài)文件夾中。內(nèi)容填寫你的域名即可。
About custom domains and GitHub Pages
臣聞善作者，不必善成；善始者，不必善終?！甘酚洝芬懔袀鳌?br>希望大家能有毅力堅持下去，不忘初心。
永遠相信美好的事情即將發(fā)生如果還有其他小問題，可以到 QQ 群（389401003）里反饋。
如果是更通用的問題，最好在評論中進行反饋，這樣別的同學也能看到，不需要重復提問。
微信公眾號
版權(quán)所有? 億企邦 1997-2022 保留一切法律許可權(quán)利。
