大家好安皱，我是 Day调鬓。這幾天折騰博客也是夠嗆，不過當(dāng)明白了做的每一步是什么酌伊、為什么腾窝、以及怎么實現(xiàn)的之后，自己還是受益匪淺的居砖。這篇文章主要整理一下自己搜集到的方法虹脯，方便以后瀏覽查閱。
本文實現(xiàn)的目標(biāo)是在 Hexo 的博客搭建之后悯蝉，對于優(yōu)化部署归形，源代碼托管，域名綁定鼻由，搜索引擎優(yōu)化，個性化配置及主題美化的一些操作厚棵。
【優(yōu)化部署】
注冊 GitHub 和 Coding 并分別創(chuàng)建 Pages。
那為什么要注冊兩個網(wǎng)站呢？因為 Github 是國外的服務(wù)器拨拓，訪問速度比較慢苏遥，而 Coding 是國內(nèi)的，速度相對來說比較快彬犯，在后面 DNS解析 的時候可以把國內(nèi)的解析到 Coding向楼，國外的解析到 Github，完美谐区。
具體請查看 Coding Page 湖蜕、 Github Page
- 注冊 GitHub 注冊好之后，可以使用 GitHub 的賬號登陸 Coding宋列。
- 在 GitHub 創(chuàng)建 Repository昭抒，名字的格式為 {your_name}.github.io，這是 GitHub Pages 的特殊命名規(guī)范，在項目的 Setting 中確認(rèn) GitHub Pages 正常啟用灭返，顯示綠框 Your site is published at ...
- 在 Coding 中創(chuàng)建項目盗迟，項目名為 {your_name}.coding.me，這是 Coding Pages 的特殊命名規(guī)范熙含。點擊項目 -> 代碼 -> Pages 服務(wù)罚缕，若沒有開啟則點開啟。
配置 SSH 與 Git：綁定個人電腦
ssh-keygen -t rsa -C your_email@youremail.com # 生成 SSH Key
找到 .ssh/id_rsa.pub 文件怎静，復(fù)制密鑰邮弹，粘貼到 GitHub 和 Coding 中。
GitHub：右上角 頭像 -> Settings -> SSH nd GPG keys -> New SSH key 消约。把公鑰粘貼到 key 中肠鲫，填好 title 并點擊 Add SSH key。
Coding：點擊 賬戶 -> SSH公鑰 -> 輸入key再點擊 添加
驗證是否配對以及配置賬戶
ssh -T git@github.com # 驗證 GitHub
ssh -T git@git.coding.net # 驗證 Coding
git config --global user.name your name # 綁定用戶名
git config --global user.email your_email@youremail.com # 綁定郵箱
部署到 Github Pages 與 Coding Pages
安裝 Git 部署插件：
npm install hexo-deployer-git --save
打開【站點配置文件】hexo_blog\_config.yml或粮，在底部修改部署配置：
# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
type: git
repo:
github: git@github.com:{your_name}/{your_name}.github.io.git,master
coding: git@git.coding.net:{your_name}/{your_name}.git,master
【源代碼托管】
源代碼用于生成靜態(tài)頁面导饲，一直放在本地的話，用其他電腦就不方便修改了氯材。所以可以源代碼托管到 GitHub 上渣锦。網(wǎng)上將源代碼托管到博客的 Repository 的新建分支中會出現(xiàn)主題文件夾無法同步的問題。這里采用新建 Repository 的方法實現(xiàn)源代碼托管氢哮。
上傳源代碼到 GitHub
確認(rèn)源代碼下 .gitignore 內(nèi)容：
.DS_Store
Thumbs.db
db.json
*.log
node_modules/
public/
.deploy*/
重要: 刪除 themes/next 下的隱藏文件夾 .git袋毙，否則會出現(xiàn)無法上傳 next 主題的問題！
p.s. 為了保持與主題作者更新的同步冗尤，有人建議使用 submodule 或 subtree 的方法听盖，但我覺得，主題一般配好就很少改動了裂七，直接把現(xiàn)在穩(wěn)定的版本上傳就好皆看，將來主題作者有重大更新，我們重新下載下來背零，把我們改動過的文件替換過去就好了腰吟。一般改動的文件有：layout，scripts徙瓶，source毛雇，_config.yml。
GitHub 上新建 hexo_blog 倉庫侦镇，復(fù)制 Clone or download 下的在線地址灵疮。
git init
git remote add origin <server> # hexo_blog 倉庫的在線地址
git add . #添加 blog 目錄下所有文件，注意有個'.' ( .gitignore 里面聲明的文件不在此內(nèi))
git commit -m "hexo source first add" # 添加更新說明
git push -u origin master # 推送更新到 git 上
下載源代碼到另一臺電腦
配置好 Git虽缕，SSH始藕，初始化 Hexo 環(huán)境后蒲稳，新建博客的本地文件夾：
git init # 將目錄添加到版本控制系統(tǒng)中
git remote add origin <server> # 同上
git fetch --all # 將 git 上所有文件拉取到本地
git reset --hard origin/master # 強(qiáng)制將本地內(nèi)容指向剛剛同步 git 云端內(nèi)容
reset 對所拉取的文件不做任何處理，此處不用 pull 是因為本地尚有許多文件伍派，使用 pull 會有一些版本沖突江耀，解決起來也麻煩，而本地的文件都是初始化生成的文件诉植，較拉取的庫里面的文件而言基本無用祥国，所以直接丟棄。
上傳更新源碼
當(dāng)在本地更新文章或設(shè)置后晾腔，需要 hexo g -d 更新靜態(tài)網(wǎng)頁舌稀，然后上傳更新的源碼：
git add .
git commit -m 'update'
git push
從 GitHub 倉庫中更新源代碼
git pull # 更新源代碼
【域名綁定】
購買域名
萬網(wǎng)或其他平臺。
域名解析
進(jìn)入工作臺灼擂，點擊域名壁查，然后解析。
第一次可能需要填寫個人信息剔应，填完了睡腿，點擊上面的域名解析 -> 解析設(shè)置 -> 添加解析，記錄類型選 A 峻贮，A 記錄的記錄值就是 ip 地址席怪， GitHub 提供了兩個 IP 地址， 192.30.252.153 和 192.30.252.154纤控，隨便填一個就行挂捻，解析記錄設(shè)置為www和@，線路就默認(rèn)就行了
在
hexo_blog/source文件夾里新建 CNAME 文件船万，里面填寫注冊的域名刻撒。
【搜索引擎優(yōu)化】
網(wǎng)站驗證
添加并提交 sitemap
安裝 Hexo 的 sitemap 網(wǎng)站地圖生成插件:
npm install hexo-generator-sitemap --save
npm install hexo-generator-baidu-sitemap --save
在【站點配置文件】hexo_blog\_config.yml 中添加如下代碼。
# hexo sitemap
sitemap:
path: sitemap.xml
baidusitemap:
path: baidusitemap.xml
配置成功后耿导，會生成 sitemap.xml 和 baidusitemap.xml疫赎，前者適合提交給谷歌搜素引擎，后者適合提交百度搜索引擎碎节。
主動推送
安裝主動推送插件：
npm install hexo-baidu-url-submit --save
在根目錄下，把以下內(nèi)容配置到站點配置文件中：
baidu_url_submit:
count: 3 ## 比如3抵卫，代表提交最新的三個鏈接
host: www.henvyluk.com ## 在百度站長平臺中注冊的域名
token: your_token ## 請注意這是您的秘鑰狮荔，請不要發(fā)布在公眾倉庫里!
path: baidu_urls.txt ## 文本文檔的地址，新鏈接會保存在此文本文檔里
your_token 可在百度站長的接口調(diào)用地址找到介粘。
查看【站點配置文件】中 url 的值殖氏， 必須包含是百度站長平臺注冊的域名（一般有 www）， 比如：
url: http://www.ookamiantd.top
root: /
permalink: :year/:month/:day/:title/
接下來添加一個新的 deploy 的類型：
# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
- type: baidu_url_submitter
- type: git
repo:
github: git@github.com:masteranthoneyd/masteranthoneyd.github.io.git,master
coding: git@git.coding.net:ookamiantd/ookamiantd.git,master
執(zhí)行hexo deploy的時候姻采，新的連接就會被推送了雅采。這里講一下原理：
- 新鏈接的產(chǎn)生，hexo generate 會產(chǎn)生一個文本文件，里面包含最新的鏈接
- 新鏈接的提交婚瓜，hexo deploy 會從上述文件中讀取鏈接宝鼓，提交至百度搜索引擎
自動推送
把 next 主題配置文件中的 baidu_push 設(shè)置為 true，就可以了巴刻。
【個性化配置】
參考 Hexo 官網(wǎng)配置說明文檔：Hexo 文檔：主要是【站點配置文件】
hexo_blog\_config.yml的參數(shù)設(shè)置愚铡。參考 NexT 官網(wǎng)配置說明文檔：NexT 主題配置：主要是【主題配置文件】
hexo_blog\themes\next\_config.yml的參數(shù)設(shè)置。
【主題美化】
把側(cè)邊欄頭像變成圓形胡陪，并且鼠標(biāo)停留在上面發(fā)生旋轉(zhuǎn)效果
修改 themes\next\source\css\_common\components\sidebar\sidebar-author.styl：
.site-author-image {
display: block;
margin: 0 auto;
padding: $site-author-image-padding;
max-width: $site-author-image-width;
height: $site-author-image-height;
border: site-author-image-border-color;
/* start*/
border-radius: 50%
webkit-transition: 1.4s all;
moz-transition: 1.4s all;
ms-transition: 1.4s all;
transition: 1.4s all;
/* end */
}
/* start */
.site-author-image:hover {
background-color: #55DAE1;
webkit-transform: rotate(360deg) scale(1.1);
moz-transform: rotate(360deg) scale(1.1);
ms-transform: rotate(360deg) scale(1.1);
transform: rotate(360deg) scale(1.1);
}
/* end */
為 NexT 主題的主頁文章添加陰影效果
打開 themes/next/source/css/_custom/custom.styl 文件添加：
.post {
margin-top: 60px;
margin-bottom: 60px;
padding: 25px;
-webkit-box-shadow: 0 0 5px rgba(202, 203, 203, .5);
-moz-box-shadow: 0 0 5px rgba(202, 203, 204, .5);
}
為 NexT 主題添加 canvas_nest 背景特效
打開 /next/_config.yml沥寥，修改 canvas_nest 參數(shù)：
# Canvas-nest
canvas_nest: true
# three_waves
three_waves: false
# canvas_lines
canvas_lines: false
# canvas_sphere
canvas_sphere: false
# Only fit scheme Pisces
# Canvas-ribbon
canvas_ribbon: false
設(shè)置網(wǎng)站的圖標(biāo)Favicon
在 EasyIcon 中找一張（32*32）的 ico 圖標(biāo),或者去別的網(wǎng)站下載或者制作，并將圖標(biāo)名稱改為 favicon.ico柠座，然后把圖標(biāo)放在 /themes/next/source/images 里邑雅，并且修改【主題配置文件】hexo_blog\themes\next\_config.yml：
# Put your favicon.ico into `hexo-site/source/` directory.
favicon: /favicon.ico
修改字體大小
打開 \themes\next\source\css\ _variables\base.styl 文件，將 $font-size-base 改成 16px妈经，如下所示：
$font-size-base =16px
為NexT主題添加文章閱讀量統(tǒng)計功能
倒持下來倒是不難淮野，但是需要細(xì)心一點，關(guān)于評論功能大家可以試試 gitment 項目狂塘，想法很好录煤，效果也很棒，期待 NexT 主題作者將其收入庫中荞胡。
