Hexo建站手冊(cè)（詳細(xì)教程）

時(shí)間：2023-07-07 15:27:01 | 來(lái)源：網(wǎng)站運(yùn)營(yíng)

時(shí)間：2023-07-07 15:27:01 來(lái)源：網(wǎng)站運(yùn)營(yíng)

Hexo建站手冊(cè)（詳細(xì)教程）：

前言

Hexo 是一個(gè)快速、簡(jiǎn)潔且高效的博客框架。Hexo 使用 Markdown（或其他渲染引擎）解析文章，在幾秒內(nèi)，即可利用靚麗的主題生成靜態(tài)網(wǎng)頁(yè)。

這里我把個(gè)人博客托管在 GitHub Pages 上。GitHub Pages 是一種靜態(tài)站點(diǎn)托管服務(wù)，每個(gè) GitHub 帳戶或組織都可以有一個(gè)站點(diǎn)。

---

掃碼加微信前端二、三群（一群已滿）：BAT大廠資深大牛定期推送面經(jīng)與源碼分析，各平臺(tái)大牛優(yōu)秀文章推薦，更有內(nèi)推跳槽咨詢、視頻資源共享、學(xué)習(xí)資料文章pdf面經(jīng)網(wǎng)盤資源等等福利。加入我們一起進(jìn)步。

群內(nèi)分享每日一題：題目傳送門

前端電子書大全：電子書

---

準(zhǔn)備工作

安裝 Hexo 前要先安裝：

Node.jsGitHexo 原理簡(jiǎn)要介紹
由于 GitHub Pages 存放的都是靜態(tài)文件，博客存放的不只是文章內(nèi)容，還有文章列表、分類、標(biāo)簽、翻頁(yè)等動(dòng)態(tài)內(nèi)容，假如每次寫完一篇文章都要手動(dòng)更新博文目錄和相關(guān)鏈接信息，那就太繁瑣了，畢竟博客的關(guān)鍵是內(nèi)容，hexo 做的就是將這些 md 文件都放在本地，每次寫完文章后框架會(huì)批量生成相關(guān)頁(yè)面，然后我們只需要將生成的靜態(tài)文件提交到 GitHub 即可。

注意：建議使用 Git Bash 來(lái)執(zhí)行后續(xù)的所有命令。

GitHub Pages 上搭建博客

GitHub 創(chuàng)建倉(cāng)庫(kù)

新建一個(gè)名為 用戶名.http://github.io 的倉(cāng)庫(kù)，比如說(shuō)，如果你的 GitHub 用戶名是 mrrabbitan，那么你就新建 http://mrrabbitan.github.io 的倉(cāng)庫(kù)，將來(lái)你的網(wǎng)站訪問(wèn)地址就是 https://mrrabbitan.github.io。

由此可見(jiàn)，每一個(gè) GitHub 賬戶最多只能創(chuàng)建一個(gè)這樣可以直接使用域名訪問(wèn)的倉(cāng)庫(kù)。

注意

倉(cāng)庫(kù)名字必須是：http://username.github.io，其中 username 是你的用戶名

Hexo 安裝

npm install -g hexo

Hexo 初始化

在想要的路徑下新建一個(gè)名為 hexo 的文件夾（名字可以隨便?。?，比如我的是 D:/document/GitHub/hexo，這個(gè)文件夾內(nèi)就是你的 Hexo 博客的源文件：

cd /d/document/GitHub/hexo/hexo init輸入以上命令后，hexo 會(huì)自動(dòng)下載一些文件到這個(gè)目錄，包括 node_modules，其中比較重要的幾個(gè)文件的目錄結(jié)構(gòu)如下：

.├── _config.yml├── package.json├── scaffolds├── source| ├── _drafts| └── _posts└── themes注意：hexo 有 2 個(gè)_config.yml 文件，一個(gè)是站點(diǎn)根目錄下的_config.yml，一個(gè)是 theme（主題）下的_config.yml 文件。

博客生成、預(yù)覽

hexo g # 生成hexo s # 啟動(dòng)服務(wù)執(zhí)行以上命令之后，hexo 就會(huì)在 public 文件夾生成相關(guān) html 文件，這些就是你博客的靜態(tài)文件，后續(xù)需要把這些提交到 GitHub 上。

hexo s 是開(kāi)啟本地預(yù)覽服務(wù)，打開(kāi)瀏覽器訪問(wèn) http://localhost:4000 即可看到內(nèi)容，很多人會(huì)碰到瀏覽器一直在轉(zhuǎn)圈但是就是加載不出來(lái)的問(wèn)題，一般情況下是因?yàn)槎丝谡加玫木壒省?br>

修改主題

這里以 hexo-theme-yilia 這個(gè)主題為例做一下說(shuō)明。

首先下載 hexo-theme-yilia 這個(gè)主題：

cd /d/document/GitHub/hexo/git clone https://github.com/litten/hexo-theme-yilia.git themes/yilia下載的主題文件都在 theme 目錄下。

然后我們將 Hexo 根目錄下的_config.yml 中的 theme: landscape 改為 theme: yilia，然后重新執(zhí)行 hexo g 來(lái)重新生成。

注意：如果出現(xiàn)一些莫名其妙的問(wèn)題，可以先執(zhí)行

hexo clean來(lái)清理一下 public 的內(nèi)容，然后再重新生成。

部署到 GitHub

如果你一切都配置好了，接下來(lái)就是把博客部署到 GitHub 上：

hexo d注意：

ssh key 配置好。
配置_config.yml 中有關(guān) deploy 的部分（注意縮進(jìn)）。

deploy: type: git repository: git@github.com:dta0502/dta0502.github.io.git # 用https或者ssh均可 branch: master直接執(zhí)行 hexo d 的話一般會(huì)報(bào)如下錯(cuò)誤：

Deployer not found: git這是因?yàn)槿鄙倭艘粋€(gè)插件，我們可以通過(guò)如下命令安裝：

npm install hexo-deployer-git --save然后輸入 hexo d 就會(huì)將本次有改動(dòng)的代碼全部提交。

部署到 Coding

http://github.io 在大陸的加載速度過(guò)慢且延遲過(guò)高。將自己的站部署到 Coding 下也是個(gè)不錯(cuò)的選擇

Coding 目前改版的內(nèi)容很多，早前部署的個(gè)人 pages 已經(jīng)失效了，詳情參考Pages 遷移至新版 CODING

部署隨機(jī)域名的個(gè)人網(wǎng)頁(yè)流程

新建團(tuán)隊(duì)用戶，個(gè)人為管理。

新建 DevOps 項(xiàng)目，取名要與自己的團(tuán)隊(duì)名相同。

之后再左側(cè)邊欄中找到持續(xù)部署菜單欄，選中靜態(tài)網(wǎng)站進(jìn)行立即部署

部署成功后

然后和配置 github 服務(wù)器一樣去配置_config.xml 中相關(guān) deploy 部分

deploy: type: git repository: https://e.coding.net/andh/andh.coding.me.git # 用https或者ssh均可 branch: mastertips: 域名不如 github 一樣美觀 o(╥﹏╥)o，不在意的可以使用，在意的可以參考自定義域名部分內(nèi)容。

自定義域名

策略 1 購(gòu)買域名+虛擬主機(jī)（備案，成本低。但不穩(wěn)定）
策略 2 購(gòu)買域名+云服務(wù)器（成本高，穩(wěn)定，續(xù)費(fèi)更貴）
策略 3 購(gòu)買域名+購(gòu)買服務(wù)器內(nèi)網(wǎng)穿透（學(xué)習(xí)成本高+24 小時(shí)不斷電，搞深了可能成為資深運(yùn)維）

常用的 hexo 命令

常見(jiàn)命令：hexo new "postName" # 新建文章hexo new page "pageName" # 新建頁(yè)面hexo generate # 生成靜態(tài)頁(yè)面至public目錄hexo server # 開(kāi)啟預(yù)覽訪問(wèn)端口（默認(rèn)端口4000，'ctrl + c'關(guān)閉server）hexo deploy # 部署到GitHubhexo help # 查看幫助hexo version # 查看Hexo的版本縮寫命令：hexo n == hexo newhexo g == hexo generatehexo s == hexo serverhexo d == hexo deploy組合命令：hexo s -g # 生成并本地預(yù)覽hexo d -g # 生成并上傳

寫文章

我們可以在 hexo 根目錄下執(zhí)行命令：

hexo new 'my-first-blog'hexo 會(huì)幫我們?cè)赺posts 下生成相關(guān) md 文件，我們只需要打開(kāi)這個(gè)文件就可以開(kāi)始寫博客了，用這個(gè)命令的好處是幫我們自動(dòng)生成了文章創(chuàng)建時(shí)間。




基本的建站步驟就介紹到這里了




我的博客地址：

github page

coding page







Happy Hacking~~~