--- title: github pages+hexo搭建部落格 date: 2017-09-20 10:39:20 tags: ["技術","學習",'部落格'] --- Web 前端愛好者。寫部落格的好處，不是為了寫而寫，而是一個記錄思想的過程。不要考慮它能帶給你什麼，而是你自己從中收穫了什麼。 最近剛好有空，於是就參照網上的各種教程，搭建了一個部落格。現在把 Hexo + GitHub Pages 搭建部落格的完整過程記錄下來： <p><strong>大概流程</strong>：<br> 1. 搭建 Node.js 環境<br> 2. 搭建 Git 環境<br> 3. GitHub 註冊和配置<br> 4. 安裝配置 Hexo<br> 5. 關聯 Hexo 與 GitHub Pages<br> 6. GitHub Pages 地址解析到個人域名<br> 7. Hexo 的常用操作<br> 8. 結束語</p> <h2 id="nodejs"><a class="headeranchor-link" name="user-content-nodejs" href="#nodejs"></a>搭建 Node.js 環境</h2> <blockquote> <p>為什麼要搭建 Node.js 環境？ - 因為 Hexo 部落格系統是基於 Node.js 編寫的</p>
</blockquote> <p>Node.js 是一個基於 Chrome V8 引擎的 JavaScript 執行環境，可以在非瀏覽器環境下，解釋執行 JS 程式碼。</p> <p>在 Node.js 官網：<a href="https://nodejs.org/en/">https://nodejs.org/en/</a> 下載安裝包 <code>v8.9.4 LTS</code></p> <p>保持預設設定即可，一路Next，安裝很快就結束了。</p> * 然後開啟命令提示符，輸入 <code>node -v</code>、<code>npm -v</code>，出現版本號則說明 Node.js 環境配置成功，第一步完成！！！</p> * npm 是node.js的工具包，裡面包含了很多優秀程式設計師開發的工具和庫。 <p><img src="http://oph264zoo.bkt.clouddn.com/17-5-28/25738843.jpg" alt=""></p> <h2 id="git"><a class="headeranchor-link" name="user-content-git" href="#git"></a>搭建 Git 環境</h2> <blockquote> <p>為什麼要搭建 Git 環境？ - 因為需要把本地的網頁和文章等提交到 GitHub 上。</p>
</blockquote> <p>Git 是一款免費、開源的分散式版本控制系統，用於敏捷高效地處理任何或小或大的專案。</p> <p>在 Git 官網：<a href="https://git-scm.com/">https://git-scm.com/</a> 下載安裝包 <code>Git-2.13.0-64-bit.exe</code></p> <p><img src="http://oph264zoo.bkt.clouddn.com/17-5-28/62582265.jpg" alt=""></p> <p>桌面右鍵，開啟 <code>Git Bush Here</code>，輸入 <code>git --version</code>，出現版本號則說明 Git 環境配置成功，第二步完成！！！</p> <p><img src="http://oph264zoo.bkt.clouddn.com/17-5-28/13485948.jpg" alt=""></p> <h2 id="github"><a class="headeranchor-link" name="user-content-github" href="#github"></a>GitHub 註冊和配置</h2> <p>GitHub 是一個程式碼託管平臺，因為只支援 Git 作為唯一的版本庫格式進行託管，故名 GitHub。</p> <p>Github註冊：<a href="https://github.com/">https://github.com/</a></p> <p><iframe id="iframe_0.5607328742099007" src="data:text/html;charset=utf8,%3Cstyle%3Ebody%7Bmargin:0;padding:0%7D%3C/style%3E%3Cimg%20id=%22img%22%20src=%22http://img.mukewang.com/57eea87a0001c62213450582.png?_=6927340%22%20style=%22border:none;max-width:701px%22%3E%3Cscript%3Ewindow.onload%20=%20function%20()%20%7Bvar%20img%20=%20document.getElementById('img');%20window.parent.postMessage(%7BiframeId:'iframe_0.5607328742099007',width:img.width,height:img.height%7D,%20'http://www.cnblogs.com');%7D%3C/script%3E" style="border: none; width: 701px; height: 303px;" frameborder="0" scrolling="no"></iframe></p> <p>建立倉庫：Repository name 使用自己的使用者名稱，倉庫名規則：</p> <p><strong>注意</strong>：<code>yourname</code> 必須是你自己的使用者名稱。</p> <pre><code>yourname/yourname.github.io </code></pre> <p><img src="http://oph264zoo.bkt.clouddn.com/17-5-28/42622869.jpg" alt=""></p> <p>訪問 yourname.github.io，如果可以正常訪問，那麼 Github 的配置已經結束了。</p> <p>到此搭建 Hexo 部落格的相關環境配置已經完成，下面開始講解 Hexo 的相關操作</p> <h2 id="hexo"><a class="headeranchor-link" name="user-content-hexo" href="#hexo"></a>安裝配置 Hexo</h2> <p>Hexo 是一個快速、簡潔且高效的部落格框架，使用 Markdown（或其他渲染引擎）解析文章，在幾秒內，即可利用靚麗的主題生成靜態網頁。</p> <p>強烈建議你花20分鐘區讀一讀 Hexo 的官方文件：<a href="https://hexo.io/zh-cn/">https://hexo.io/zh-cn/</a></p> <p><img src="http://oph264zoo.bkt.clouddn.com/17-5-28/49821520.jpg" alt=""></p> <p><strong>使用 npm 安裝 Hexo</strong>：在命令列中輸入</p> <pre><code>npm install hexo-cli -g </code></pre> <p>然後你將會看到下圖，可能你會看到一個<code>WARN</code>，但是不用擔心，這不會影響你的正常使用。</p> <p><img src="http://oph264zoo.bkt.clouddn.com/17-5-28/41219383.jpg" alt=""></p> <p>檢視Hexo的版本</p> <pre><code>hexo version </code></pre> <p><img src="http://oph264zoo.bkt.clouddn.com/17-5-29/81453389.jpg" alt=""></p> <p>安裝 Hexo 完成後，請執行下列命令來初始化 Hexo，使用者名稱改成你的，Hexo 將會在指定資料夾中新建所需要的檔案。</p> <pre><code>hexo init bestGao.github.io
cd bestGao.github.io
npm install </code></pre> <p>新建完成後，指定資料夾的目錄如下：</p> <pre><code>. ├── .deploy #需要部署的檔案 ├── node_modules #Hexo外掛 ├── public #生成的靜態網頁檔案 ├── scaffolds #模板 ├── source #部落格正文和其他原始檔，404、favicon、CNAME 都應該放在這裡 | ├── _drafts #草稿 | └── _posts #文章 ├── themes #主題 ├── _config.yml #全域性配置檔案 └── package.json #npm 依賴等 </code></pre> <p><strong>執行本地 Hexo 服務</strong></p> <pre><code>hexo server 或者 hexo s </code></pre> <p>您的網站會在 <a href="http://localhost:4000/">http://localhost:4000</a> 下啟動。如果 <a href="http://localhost:4000/">http://localhost:4000</a> 能夠正常訪問，則說明 Hexo 本地部落格已經搭建起來了，只是本地哦，別人看不到的。下面，我們要部署到Github。</p> <p><img src="http://oph264zoo.bkt.clouddn.com/17-5-28/34921926.jpg" alt=""></p> <p><strong>注意1</strong>：執行hexo server提示找不到該指令</p> <p>解決辦法：在Hexo 3.0 後server被單獨出來了，需要安裝server，安裝的命令如下：</p> <pre><code>sudo npm install hexo-server 或者 npm install hexo -server --save </code></pre> <h2 id="hexo-github-pages"><a class="headeranchor-link" name="user-content-hexo-github-pages" href="#hexo-github-pages"></a>關聯 Hexo 與 GitHub Pages</h2> <p>我們如何讓本地git專案與遠端的github建立聯絡呢？用 SSH keys</p> <p><strong>生成SSH keys</strong></p> <p>輸入你自己的郵箱地址</p> <pre><code>ssh-keygen -t rsa -C "[email protected]" </code></pre> <p>在回車中會提示你輸入一個密碼，這個密碼會在你提交專案時使用，如果為空的話提交專案時則不用輸入，我們按回車不設定密碼。</p> <p><strong>新增 SSH Key 到 GitHub</strong></p> <p>開啟 <code>C:\Users\bxm09\.ssh\id_rsa.pub</code>，此檔案裡面內容為剛才生成的金鑰，準確的複製這個檔案的內容，貼上到 <a href="https://github.com/settings/ssh">https://github.com/settings/ssh</a> 的 <code>new SSH key</code> 中</p> <p><strong>測試</strong></p> <p>可以輸入下面的命令，看看設定是否成功，[email protected]的部分不要修改：</p> <pre><code>ssh -T [email protected] </code></pre> <p>如果是下面的反饋：</p> <blockquote> <p>The authenticity of host ‘github.com (207.97.227.239)’ can’t be established.<br> RSA key fingerprint is 16:27:ac:a5:76:28:2d:36:63:1b:56:4d:eb:df:a6:48.<br> Are you sure you want to continue connecting (yes/no)?</p>
</blockquote> <p>不要緊張，輸入yes就好，然後會看到：</p> <pre><code>Hi aierui! You've successfully authenticated, but GitHub does not provide shell access. </code></pre> <p><strong>配置Git個人資訊</strong></p> <p>現在你已經可以通過 SSH 連結到 GitHub 了，還有一些個人資訊需要完善的。<br> Git 會根據使用者的名字和郵箱來記錄提交。GitHub 也是用這些資訊來做許可權的處理，輸入下面的程式碼進行個人資訊的設定，把名稱和郵箱替換成你自己的。</p> <pre><code>git config --global user.name "bestGao" git config --global user.email "[email protected]" </code></pre> <p><strong>配置 Deployment</strong></p> <p>在<code>_config.yml</code>檔案中，找到<code>Deployment</code>，然後按照如下修改，使用者名稱改成你的：</p> <p>需要注意的是：冒號後面記得空一格！</p> <pre><code># Deployment ## Docs: https://hexo.io/docs/deployment.html deploy: type: git repo: [email protected]:bestGao/bestGao.github.io.git branch: master </code></pre> <p><strong>本地檔案提交到 GitHub Pages</strong></p> <pre><code>// 刪除舊的 public 檔案 hexo clean
// 生成新的 public 檔案 hexo generate 或者 hexo g
// 開始部署 hexo deploye 或者 hexo d </code></pre> <p>在瀏覽器中輸入 <a href="https://bestGao.github.io/">https://bestGao.github.io</a> （使用者名稱改成你的）看到了 Hexo 與 GitHub Pages 已經成功關聯了，哇哇哇哇哇哇，開心死你了，不要忘了回來給我點贊喲 ~</p> <p><strong>注意1</strong>：若上面操作失敗，則需要提前安裝一個擴充套件：</p> <pre><code>npm install hexo-deployer-git --save </code></pre> <p><strong>注意2</strong>：如果在執行 <code>hexo d</code> 後,出現 <code>error deployer not found:github</code> 的錯誤（如下），則是因為沒有設定好 public key 所致，重新詳細設定即可。</p> <blockquote> <p>Permission denied (publickey).<br> fatal: Could not read from remote repository.<br> Please make sure you have the correct access rights<br> and the repository exists.</p>
</blockquote> <p><strong>注意3</strong>：怎麼避免 .md 檔案被解析？</p> <p>Hexo原理就是hexo在執行hexo generate時會在本地先把部落格生成的一套靜態站點放到public資料夾中，在執行hexo deploy時將其複製到.deploy資料夾中。Github的版本庫通常建議同時附上README.md說明檔案，但是hexo預設情況下會把所有md檔案解析成html檔案，所以即使你線上生成了 README. md，它也會在你下一次部署時被刪去。怎麼解決呢？</p> <p>在執行hexo deploy前把在本地寫好的README.md檔案複製到.deploy資料夾中，再去執行hexo deploy。</p> <h2 id="github-pages"><a class="headeranchor-link" name="user-content-github-pages" href="#github-pages"></a>GitHub Pages 地址解析到個人域名</h2> <blockquote> <p>Github Pages 是面向使用者、組織和專案開放的公共靜態頁面搭建託管服 務，站點可以被免費託管在 Github 上，你可以選擇使用 Github Pages 默 認提供的域名 github.io 或者自定義域名來發布站點。</p>
</blockquote> <p>看著部落格的域名是二級域名，總有一種寄人籬下的感覺，為了讓這個小窩看起來更加正式，我在阿里雲上買了一個域名，打算將部落格繫結自己的域名。</p> <p>進行該繫結過程，其實就是一個重定向的過程。</p> <p>在 GitHub 倉庫的根目錄下建立一個 <code>CNAME</code> 的文字檔案(注意：沒有副檔名)，檔案裡面只能輸入一個你的域名，不能加<code>http://</code></p> <pre><code>www.lovebxm.com </code></pre> <p>注意：CNAME 一定是在你 Github 專案的 master 根目錄下</p> <p>進入<a href="https://dc.aliyun.com/tcparse/dns.htm">阿里雲域名解析地</a>址，新增解析：</p> <ol> <li>記錄型別選擇<code>CNAME</code></li> <li>主機記錄填<code>www</code></li> <li>解析線路選擇<code>預設</code></li> <li>記錄值填<code>yourname.github.io</code></li> <li>TTL值為<code>10</code>分鐘</li> <li>再新增一個解析，記錄型別<code>A</code></li> <li>主機記錄填<code>www</code></li> <li>解析線路選擇<code>預設</code></li> <li>記錄值填你GitHub 的ip地址（在cmd中ping：）</li> </ol> <pre><code>ping bestGao.github.com </code></pre> <p><img src="http://oph264zoo.bkt.clouddn.com/17-5-29/79989003.jpg" alt=""></p> <p>點選儲存，等 1 分鐘，訪問下你自己的域名，一切就ok了。</p> <p>域名繫結成功，域名解析成功，因此你在瀏覽中輸入 <a href="http://www.lovebxm.com/">www.lovebxm.com</a>，或 lovebxm.com 就可以訪問到部落格了，輸入 bestGao.github.io 會重定向到 <a href="http://www.lovebxm.com/">www.lovebxm.com</a>。過程：www 的方式，會先解析成 <a href="http://xxxx.github.io/">http://xxxx.github.io</a>，然後根據 CNAME 再變成 www</p> <p><strong>注意</strong>：CNAME檔案在下次 <code>hexo deploy</code>的時候就消失了，需要重新建立，這樣就很繁瑣</p> <p>方法一：每次 <code>hexo d</code> 之後，就去 GitHub 倉庫根目錄新建 CNAME檔案</p> <p>方法二：在 <code>hexo g</code> 之後， <code>hexo d</code> 之前，把CNAME檔案複製到 “\public" 目錄下面，裡面寫入你要繫結的域名。</p> <p>方法三（推薦）：將需要上傳至github的內容放在source資料夾，例如CNAME、favicon.ico、images等，這樣在 hexo d 之後就不會被刪除了。</p> <p>方法四：通過安裝外掛實現永久保留</p> <pre><code>$ npm install hexo-generator-cname --save </code></pre> <p>之後在_config.yml中新增一條</p> <pre><code>plugins: - hexo-generator-cname </code></pre> <p>需要注意的是：如果是在github上建立的CNAME檔案，需要先clone到本地，然後安裝外掛，在deploy上去即可。CNAME只允許一個域名地址。</p> <p><strong>注意1</strong>：每次生成的 CNAME 都是 yoursite.com 怎麼解決？</p> <p>修改 _config.yml</p> <pre><code>url: http://www.lovebxm.com root: / permal