『部落格搭建』—— 個人部落格全新上線(阿里域名+GitPages+hexo+Yelee)

前言

新年新氣象，狗年也是我本命年，因此決定將部落格重新搞一波。其實之前已經搭好過部落格，因為前段時間換了mac，之前的環境和部落格的內容都沒有備份，索性就重新開始吧。那展示一下我的新的部落格地址:

http://xiaweizi.cn

在來一波動態圖演示：

電腦端：

手機端：

整個的搭建，一些的配置和部落格的遷移也是花了我一整個下午和晚上加班的時間，自我感覺看起來很舒服，那接下來我就大概講述一下這個部落格搭建的過程。

GitHub Pages + Hexo

沒錢買域名，沒時間網站備案，那就用GitHub Pages和Hexo搭建屬於自己的部落格吧。其實網上這個教程真的是一搜一大把，我之前也寫過，不過被我弄丟了，所以我就不贅述了，貼幾個連結以供參考，只要照著流程走，是肯定可以順利搭建的，這是件一勞永逸的事情。

1. 如何搭建一個獨立部落格
2. 搭建屬於自己的部落格

域名

域名，之前的雲伺服器套餐就是在阿里雲上購買，因此我就順便在阿里雲進行購買域名。

字首的選擇就沒有想那麼多，也沒有想的那麼商業化，直接就是本人姓名的中文拼音。至於字尾，一開始對這塊不熟悉，就先購買一個最便宜的嘗試一下.top，成功後，索性花點錢買了個.cn——全球唯一由中國管理的英文國際頂級域名。

首先選擇你喜歡和合適的域名，然後進行購買，購買成功並通過實名稽核後，就可以在控制檯找到您剛剛註冊的域名。

我購買了兩個，因此xiaweizi.cn和xiaweizi.top就會展示在首頁，如果想繫結到GitHub Pages上,點選所選域名對應的「解析」按鈕。

這裡我之前已經新增過兩個解析，第一次的時候需要你自行新增相應的解析。

按照上圖新增兩條解析。方式有很多種，我選擇A的記錄型別，即將域名指向一個 IPV4 地址，那記錄值對應的就是你的GitHub Pages對應的地址，那這個地址如何獲取呢？

直接通過ping + "your name".github.io的方式獲取IP地址，也就是解析的記錄值。

域名的配置已經完成了，剩下的就是GitHub Pages上的配置，有兩種方式：

第一種，登入你的GitHub，找到名為"your name".github.io的倉庫，點選settings的選項，找到GitHub Pages區域，即可看到Custom Domian的配置，這裡輸入您購買的域名即可。

第二種，在hexo的對應的目錄下建立CNAME檔案，裡面輸入您購買的域名。

不到一天的時間，即可通過稽核並解析成功，直接就可以訪問您的域名並定向到您的部落格位置。

xiaweizi

到此，部落格的大概框架和域名已經配置成功了，可以大致看到效果了。

主題選擇

至於主題的選擇完全是看個人的喜好了，有的人喜歡簡潔大方，有的喜歡色彩張揚，有的喜歡品質內涵，找到自己合適的就行，如果實在沒有滿足您的胃口的，不妨可以根據自己的想法編寫屬於您自己的主題。

截止今日hexo 主題已經有 189 個樣式供選擇，或者可以參考知乎上的一篇文章選擇：有哪些好看的 hexo 主題。

我 選擇了yelee主題 —— 簡而不減 Hexo 雙欄部落格主題，獨具匠心的設計風格，突出內容為主題，凸顯博主個性！

那接下來我就大概總結一下yelee主題的相關配置，當然官網是有詳細的配置文件的：中文使用文件，舉一反三，其他的主題配置大同小異。

使用 yelee 主題

開啟終端，cd到您hexo/blog的目錄,

git clone https://github.com/MOxFIVE/hexo-theme-yelee.git themes/yelee

下載yelee主題，那此時，分別在hexo/blog和hexo/blog/theme/yelee下有兩個_config.yml的配置檔案，前者是「站點配置檔案」，後者是「主題配置檔案」，大致所有的配置都在這裡完成。

第一步就要在站點配置檔案中，選擇你剛下載的yelee主題。

在hexo/blog目錄下輸入相應的hexo命令完成生成、測試和部署的工作。

// 1. 生成
hexo g
// 2. 測試(localhost:4000)
hexo s
// 3. 部署
hexo d

編寫文章

頭部即為每次編寫文章的配置資訊。

title: 文章的標題
date: 文章的建立時間
updated: 文章的更新時間
categories: 文章所屬的分類(一般有且只有一個)
tag: 文章所打的 tag(這個根據文章特點新增)

需要注意的是，主頁展示每個文章，並不是展示摘要而是直接全文，這樣的體驗很不好，這個時候需要新增一行摘要分割標識：``

``之前的正文部分就是展示在主頁的摘要。

第三方服務

首先在主題配置檔案中找到github_widget:並設定為true，開啟後在正文中插入如下程式碼即可

<div class="github-widget" data-repo="<GitHub 使用者名稱>/<倉庫名>.js"></div>

<!-- e.g. -->
<div class="github-widget" data-repo="xiaweizi/QNews"></div>

這個小掛件展示了對應倉庫的連結地址、star和fork的數量等等資訊。

至於其他的三方服務，只要按照官方的配置都可以完成，我就不贅述了，在配置的過程中遇到什麼問題，我們們可以共同交流！

快過年了，今天也是情人節，祝擼友們新年快樂，新年脫單！