hexo部署成功但是没效果_使用 Hexo+GitHub 搭建个人免费博客教程（小白向）
前言
近些年來很多用戶都喜歡使用 GitHub Pages 來搭建 Hexo 靜態(tài)博客網(wǎng)站，其最吸引人的莫過于完全免費使用，并且非常穩(wěn)定。
雖然搭建時比較麻煩，有點折騰，但是配置完成后，基本不需要操心維護的事，甚至放了幾年都忘記了，打開來看文章依然還在。
本文就詳細介紹下如何使用 Hexo + GitHub 搭建免費個人博客網(wǎng)站的教程。
為了照顧小白用戶（第一次使用 GitHub 和 Hexo），盡可能詳細，包括常見的坑和問題都有提示說明。下面目錄中第 3~5 步為最重要的步驟，其他內(nèi)容如果已經(jīng)會的可以選擇性跳過。
看起來有點繁雜，捋順了倒也簡單，認真跟教程走，完整操作一遍大概需要 30 分鐘。
o(￣▽￣)ｄ
內(nèi)容目錄：
- 簡介：GitHub Pages 和 Hexo & 原理
1.1. 注意事項
1.2. 環(huán)境搭建
4.1. 安裝 Hexo
4.2. Hexo 初始化和本地預覽
7.1. 發(fā)布文章
7.2. 網(wǎng)站設(shè)置
7.3. 更換主題
7.4. 常用代碼
簡介
# GitHub Pages 是什么？
- What is GitHub Pages? - GitHub Help
GitHub Pages 是由 GitHub 官方提供的一種免費的靜態(tài)站點托管服務(wù)，讓我們可以在 GitHub 倉庫里托管和發(fā)布自己的靜態(tài)網(wǎng)站頁面。
# Hexo 是什么？
- 官網(wǎng)：hexo.io
Hexo 是一個快速、簡潔且高效的靜態(tài)博客框架，它基于 Node.js 運行，可以將我們撰寫的 Markdown 文檔解析渲染成靜態(tài)的 HTML 網(wǎng)頁。
# Hexo + GitHub 文章發(fā)布原理
在本地撰寫 Markdown 格式文章后，通過 Hexo 解析文檔，渲染生成具有主題樣式的 HTML 靜態(tài)網(wǎng)頁，再推送到 GitHub 上完成博文的發(fā)布。
# 優(yōu)點和不足
優(yōu)點：完全免費；靜態(tài)站點，輕量快速；可按需求自由定制改造；托管在 GitHub，安全省心；遷移方便……
不足：發(fā)文不便，依賴于本地環(huán)境；更適合個人博客使用；GitHub 在國內(nèi)訪問速度有點不快。
1. 準備
# 注意事項
- 輸入代碼時，核對準確，最好切換成英文輸入法；
- 將文中的 “用戶名” 和 “郵箱” 替換為自己的 GitHub 賬戶名和綁定的郵箱；
- 統(tǒng)一使用 Git Bash 進行操作（支持 Win、Mac）；
- 小白請嚴格按步驟進行，不要跳！
# 環(huán)境搭建
Hexo 基于 Node.js，搭建過程中還需要使用 npm（Node.js 已帶） 和 git，因此先搭建本地操作環(huán)境，安裝 Node.js 和 Git。
- Node.js：https://nodejs.org/zh-cn
- Git：https://git-scm.com/downloads
下載 Node.js 和 Git 程序并安裝，一路點 “下一步” 按默認配置完成安裝。
安裝完成后，Win+R 輸入 cmd 并打開，依次輸入 node -v、npm -v 和 git --version 并回車，如下圖出現(xiàn)程序版本號即可。
2. 連接 Github
使用郵箱注冊 GitHub 賬戶，選擇免費賬戶（Free），并完成郵件驗證。
右鍵 -> Git Bash Here，設(shè)置用戶名和郵箱：
git config --global user.name "GitHub 用戶名" git config --global user.email "GitHub 郵箱"創(chuàng)建 SSH 密匙：
輸入 ssh-keygen -t rsa -C "GitHub 郵箱"，然后一路回車。
添加密匙：
進入 [C:Users用戶名.ssh] 目錄（要勾選顯示“隱藏的項目”），用記事本打開公鑰 id_rsa.pub 文件并復制里面的內(nèi)容。
登陸 GitHub ，進入 Settings 頁面，選擇左邊欄的 SSH and GPG keys，點擊 New SSH key。
Title 隨便取個名字，粘貼復制的 id_rsa.pub 內(nèi)容到 Key 中，點擊 Add SSH key 完成添加。
驗證連接：
打開 Git Bash，輸入 ssh -T git@github.com 出現(xiàn) “Are you sure……”，輸入 yes 回車確認。
顯示 “Hi xxx! You've successfully……” 即連接成功。
3. 創(chuàng)建 Github Pages 倉庫
GitHub 主頁右上角加號 -> New repository：
- Repository name 中輸入 用戶名.github.io
- 勾選 “Initialize this repository with a README”
- Description 選填
填好后點擊 Create repository 創(chuàng)建。
創(chuàng)建后默認自動啟用 HTTPS，博客地址為：https://用戶名.github.io
4. 本地安裝 Hexo 博客程序
新建一個文件夾用來存放 Hexo 的程序文件，如 Hexo-Blog。打開該文件夾，右鍵 -> Git Bash Here。
# 4.1 安裝 Hexo
使用 npm 一鍵安裝 Hexo 博客程序：
npm install -g hexo-cliMac 用戶需要管理員權(quán)限（sudo），運行這條命令：
sudo npm install -g hexo-cli安裝時間有點久（真的很慢！），界面也沒任何反應(yīng)，耐心等待，安裝完成后如下圖。
# 4.2 Hexo 初始化和本地預覽
初始化并安裝所需組件：
hexo init # 初始化 npm install # 安裝組件完成后依次輸入下面命令，啟動本地服務(wù)器進行預覽：
hexo g # 生成頁面 hexo s # 啟動預覽訪問 http://localhost:4000，出現(xiàn) Hexo 默認頁面，本地博客安裝成功！
Tips：如果出現(xiàn)頁面加載不出來，可能是端口被占用了。Ctrl+C 關(guān)閉服務(wù)器，運行 hexo server -p 5000 更改端口號后重試。
Hexo 博客文件夾目錄結(jié)構(gòu)如下：
5. 部署 Hexo 到 GitHub Pages
本地博客測試成功后，就是上傳到 GitHub 進行部署，使其能夠在網(wǎng)絡(luò)上訪問。
首先安裝 hexo-deployer-git：
npm install hexo-deployer-git --save然后修改 _config.yml 文件末尾的 Deployment 部分，修改成如下：
deploy:type: gitrepository: git@github.com:用戶名/用戶名.github.io.gitbranch: master完成后運行 hexo d 將網(wǎng)站上傳部署到 GitHub Pages。
完成！這時訪問我們的 GitHub 域名 https://用戶名.github.io 就可以看到 Hexo 網(wǎng)站了。
6. 綁定域名（可選）
博客搭建完成使用的是 GitHub 的子域名（用戶名.http://github.io），我們可以為 Hexo 博客綁定自己的域名替換 GitHub 域名，更加個性化和專業(yè)，也利于 SEO。
我們使用 Namesilo 進行注冊，便宜好用沒啥套路，使用優(yōu)惠碼 okoff 優(yōu)惠一美元，com 域名大概 50 塊一年。
# 6.1 域名注冊和解析
- 域名注冊和解析教程：Namesilo 域名購買及使用教程
按上面教程注冊并解析域名，在 DNS 設(shè)置部分，刪除自帶的記錄，然后添加 CNAME 記錄將 www 域名解析指向 用戶名.github.io。
# 6.2 綁定域名到 Hexo 博客
進入本地博客文件夾的 source 目錄，打開記事本，里面輸入自己的域名，如 http://www.example.com，保存名稱為 “CNAME”，格式為 “所有文件”（無 .txt 后綴）。
清除緩存等文件并重新發(fā)布網(wǎng)站：
hexo clean # 清除緩存文件等 hexo g # 生成頁面 hexo s # 啟動預覽現(xiàn)在就可以使用自己的域名訪問 Hexo 博客了。
# 6.3 開啟 HTTPS
配置自己的域名后，需要我們手動開啟 HTTPS。打開博客所在 GitHub 倉庫，Settings -> 下拉找到 GitHub Pages -> 勾選 Enforce HTTPS。
HTTPS 證書部署成功需要一定時間，等大概幾分鐘再訪問域名，就可以看到域名前面的小綠鎖了，HTTPS 配置完成！
7. 開始使用
# 7.1 發(fā)布文章
進入博客所在目錄，右鍵打開 Git Bash Here，創(chuàng)建博文：
hexo new "My New Post"然后 source 文件夾中會出現(xiàn)一個 My New Post.md 文件，就可以使用 Markdown 編輯器在該文件中撰寫文章了。
寫完后運行下面代碼將文章渲染并部署到 GitHub Pages 上完成發(fā)布。以后每次發(fā)布文章都是這兩條命令。
hexo g # 生成頁面 hexo d # 部署發(fā)布也可以不使用命令自己創(chuàng)建 .md 文件，只需在文件開頭手動加入如下格式 Front-matter 即可，寫完后運行 hexo g 和 hexo d 發(fā)布。
--- title: Hello World # 標題 date: 2019/3/26 hh:mm:ss # 時間 categories: # 分類 - Diary tags: # 標簽 - PS3 - Games ---摘要 <!--more--> 正文# 7.2 網(wǎng)站設(shè)置
包括網(wǎng)站名稱、描述、作者、鏈接樣式等，全部在網(wǎng)站目錄下的 _config.yml 文件中，參考官方文檔按需要編輯。
注意：冒號后要加一個空格！
# 7.3 更換主題
在 Themes | Hexo 選擇一個喜歡的主題，比如 NexT，進入網(wǎng)站目錄打開 Git Bash Here 下載主題：
git clone https://github.com/iissnan/hexo-theme-next themes/next然后修改 _config.yml 中的 theme 為新主題名稱 next，發(fā)布。（有的主題需要將 _config.yml 替換為主題自帶的，參考主題說明。）
# 7.4 常用命令
hexo new "name" # 新建文章 hexo new page "name" # 新建頁面 hexo g # 生成頁面 hexo d # 部署 hexo g -d # 生成頁面并部署 hexo s # 本地預覽 hexo clean # 清除緩存和已生成的靜態(tài)文件 hexo help # 幫助8 常見問題
1、Hexo 設(shè)置顯示文章摘要，首頁不顯示全文
Hexo 主頁文章列表默認會顯示文章全文，瀏覽時很不方便，可以在文章中插入 <!--more--> 進行分段。
該代碼前面的內(nèi)容會作為摘要顯示，而后面的內(nèi)容會替換為 “Read More” 隱藏起來。
2、設(shè)置網(wǎng)站圖標
進入 themes/主題 文件夾，打開 _config.yml 配置文件，找到 favicon 修改，一般格式為：favicon: 圖標地址。（不同主題可能略有差別）
3、修改并部署后沒有效果
使用 hexo clean 清理后重新部署。
4、開啟 HTTPS 后訪問網(wǎng)站顯示連接不安全？
證書還未部署生效，等待一會兒，清除瀏覽器緩存再試。
5、Mac 安裝 Hexo 報錯無法安裝
Mac 用戶需要管理員權(quán)限運行，使用 sudo npm install -g hexo-cli 命令安裝。
6、npm 下載速度慢，甚至完全沒反應(yīng)
使用 npm 安裝程序等待很久也沒反應(yīng)，或者下載速度很慢，可以更換 npm 源為國內(nèi) npm 鏡像。
臨時更換方法：在 npm 安裝命令后面加上：
--registry https://registry.npm.taobao.org結(jié)語
Hexo 是一種純靜態(tài)的博客，我們必須要在本地完成文章的編輯再部署到 GitHub 上，依賴于本地環(huán)境。不能像 WordPress 或 Typecho 那樣的動態(tài)博客一樣能直接在瀏覽器中完成撰文和發(fā)布。
可以說是一種比較極客的寫博客方式，但是優(yōu)勢也是明顯的——免費穩(wěn)定省心，比較適合愛折騰研究的用戶，或者沒有在線發(fā)文需求的朋友。
覺得有幫助的朋友，不妨點個贊再走唄 ╰(￣▽￣)╭ ~
建站教程：
- WordPress搭建教程：手把手教你搭建WordPress博客
- 最簡單的建站教程：使用虛擬主機搭建WordPress個人網(wǎng)站
- 30分鐘搭建 Typecho 個人博客教程
總結(jié)
以上是生活随笔為你收集整理的hexo部署成功但是没效果_使用 Hexo+GitHub 搭建个人免费博客教程（小白向）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： LMS学习函数MATLAB代码
- 下一篇： 图像梯度处理MATLAB代码