win10使用Hexo+GitHub搭建我的博客

1、前言

使用github pages服務搭建博客有如下幾點好處

• 全是靜態文件，訪問速度快
• 免費方便，不須要有本身的服務器
• 能夠隨意綁定本身的域名
• 數據絕對安全，基於GitHub版本管理，想恢復到哪一個版本都行
• 博客內容能夠輕易打包、轉移，發佈到其餘平臺

準備工做

• 有一個GitHub帳號，沒有的話去註冊一個https://github.com/
• 安裝git for Windows（或者其餘的客戶端）
• 安裝node.js、npm

安裝node.js和npm

官網下載相應的安裝版本，我下的是win64的msi文件
下載後直接安裝，在選擇安裝路徑步驟能夠自定義安裝路徑，其他所有按照默認配置，一路next（注意：msi文件按以上步驟安裝後會自動配置環境變量，會若是以前下載的是zip文件，則須要手動配置環境變量）
驗證安裝是否成功，在cmd或Git Bush中輸入
node -v
若是出現相應版本號，則安裝成功！！！因爲新版的nodejs已經集成了npm，因此npm在以前也一併安裝了，命令行鍵入
npm -v
若是出現相應版本號，則安裝成功！！！
修改npm的默認安裝位置
若是不修改npm下載模塊的默認位置，默認的安裝路徑是：C:\Users\Administrator\AppData\Roaming下的npm和npm-cache,全部的模塊都安裝在這裏（固然你也能夠不修改）。
修改方式：找到node安裝路徑，依次進入node_modules->npm，找到npmrc文件修改prefix，不知道是因爲版本問題仍是什麼，網上不少教程裏的npmrc文件裏都有prefix和cache兩個，而我npmrc文件卻只有一個prefix。
prefix=D:\NodeJS\node_global

2、建立GitHub博客倉庫

建立倉庫
新建一個名爲 「你的用戶名.github.io」 的倉庫，若是你的 github 用戶名是 test，那麼你就新建 test.github.io 的倉庫（必須是你的用戶名，其它名稱無效），未來你的網站訪問地址就是 http://test.github.io 了。（注意：建立的倉庫可能不會當即生效，大概須要10~20分鐘）

配置SSH key
第一步：建立SSH key。在用戶主目錄下，看看有沒有.ssh目錄，若是有，再看看這個目錄下有沒有id_rsa和id_rsa.pub這兩個文件，若是已經有了，可直接跳到下一步。若是沒有，打開Shell（Windows下打開Git Bash），建立SSH Key：
ssh-keygen -t rsa -C "youremail@example.com"
你須要把郵件地址換成你本身的郵件地址，而後一路回車，使用默認值便可。若是一切順利的話，能夠在用戶主目錄裏找到.ssh目錄，裏面有id_rsa和id_rsa.pub兩個文件，這兩個就是SSH Key的祕鑰對，id_rsa是私鑰，不能泄露出去，id_rsa.pub是公鑰，能夠放心地告訴任何人。
第二步：登錄GitHub，打開你的github主頁，進入我的設置 -> SSH and GPG keys -> New SSH key，title隨意填，將第一步生成的id_rsa.pub中的內容複製到key中，最後點擊Add SSH key。
能夠參照：配置SSH key

3、使用hexo寫博客

hexo簡介
Hexo是一個簡單、快速、強大的基於 Github Pages 的博客發佈工具，支持Markdown格式，有衆多優秀插件和主題。因爲github pages存放的都是靜態文件，博客存放的不僅是文章內容，還有文章列表、分類、標籤、翻頁等動態內容，假如每次寫完一篇文章都要手動更新博文目錄和相關連接信息，相信誰都會瘋掉，因此hexo所作的就是將這些md文件都放在本地，每次寫完文章後調用寫好的命令來批量完成相關頁面的生成，而後再將有改動的頁面提交到github。

安裝hexo
npm install -g hexo
由於下載源在國外，因此可能出現安裝不成功或網速較慢的狀況，這時就能夠將npm的註冊表源設置爲國內的鏡像。

#得到原來的鏡像地址
npm get registry
#設置爲淘寶鏡像
npm config set registry http://registry.npm.taobao.org/
#換成原來的
npm config set registry https://registry.npmjs.org/

初始化
在電腦的某個地方新建一個名爲hexo的文件夾（名字能夠隨便取），好比個人是D:\Git\myHexo，因爲這個文件夾未來就做爲你存放代碼的地方，因此最好不要隨便放。

cd D:/Git/myHexo
hexo init
hexo g    #生成
hexo s    #啓動

執行以上命令以後，hexo就會在public文件夾生成相關html文件，這些文件未來都是要提交到github去的。hexo s是開啓本地預覽服務，打開瀏覽器訪問 http://localhost:4000 便可看到內容，不少人會碰到瀏覽器一直在轉圈可是就是加載不出來的問題，通常狀況下是由於端口占用的緣故，由於4000這個端口太常見了，解決端口衝突問題請參考這篇文章,第一次初始化的時候hexo已經幫咱們寫了一篇名爲 Hello World 的文章，默認的主題比較醜，打開時就是這個樣子：

修改主題
若是不喜歡默認的主題，能夠在官網下載換個好看點的。
例如換上hexo-theme-yilia，首先下載主題

cd D:/Git/myHexo
git clone https://github.com/litten/hexo-theme-yilia.git themes/yilia

下載的主題都會放在···/myHexo/themes中，修改myHexo中_config.yml中的theme: landscape改成theme: yilia，而後從新執行hexo g來從新生成。
若是出現一些莫名其妙的問題，能夠先執行hexo clean來清理一下public的內容，而後再來從新生成和發佈。

上傳到GitHub
第一步：配置_config.yml中有關deploy的部分

deploy:
  type: git
  repository: git@github.com:liuxianan/liuxianan.github.io.git
  branch: master

第二步：安裝插件
npm install hexo-deployer-git
其它命令不肯定，部署這個命令必定要用git bash，不然會提示Permission denied (publickey)。
第三步：打開你的git bash，輸入hexo d就會將本次有改動的代碼所有提交。

寫博客
在source/_posts目錄下使用hexo new命令，或者手動新建.md文件，寫好後使用hexo d -g生成並上傳，這樣就能夠經過yourname.github.io訪問博客了！！！

經常使用命令

hexo new "postName" #新建文章
hexo new page "pageName" #新建頁面
hexo generate #生成靜態頁面至public目錄
hexo server #開啓預覽訪問端口（默認端口4000，'ctrl + c'關閉server）
hexo deploy #部署到GitHub
hexo help  # 查看幫助
hexo version  #查看Hexo的版本

#縮寫
hexo n == hexo new
hexo g == hexo generate
hexo s == hexo server
hexo d == hexo deploy

#組合命令
hexo s -g #生成並本地預覽
hexo d -g #生成並上傳

4、相關配置

圖片的使用
hello-world.md 文件在生成靜態頁面後放在public的子目錄中，例如個人是/public/2019/03/12/hello-world/index.html，因此圖片的連接能夠寫爲 (../../../../img/img.png)，即連接到 public/img 文件下的圖片。

修改網站icon

• 修改步驟：
  • 找一張本身喜歡的icon，命名爲favicon.png
  • 將圖片放在myHexo/themes/yilia/source/img/中（myHexo是個人hexo空間，yilia是個人主題）
  • 找到myHexo/themes/yilia/layout/_partial/head.ejs，找到如下內容並修改成：

  <% if (theme.favicon){ %>
    <link rel="icon" href="/img/favicon.png">
  <% } %>

如何讓博文列表不顯示所有內容
默認狀況下，生成的博文目錄會顯示所有的文章內容，若是想要讓博文不顯示所有內容，在博文合適的位置加上 標籤便可。（注意：改標籤先後最好都加上一行空行）

hexo系列問題之部署到github時會刪掉README文件

• 緣由
  • 咱們執行命令hexo g以後，會把source文件裏的.md格式的文件渲染爲html文件並放到public下面
  • 繼續執行命令hexo d以後，會把public下面的全部文件提交到對應的XXX.github.io這個倉庫
  • 因爲本地public文件夾裏沒有README.md這個文件，因此在提交public文件時，github會認爲你把README.md文件刪掉了，同時github也會刪掉倉庫裏的README.md文件，這就是具體的緣由
• 解決辦法
  • 咱們在本地的source文件裏新建一個README.md文件
  • 修改Hexo根目錄下的_config.yml文件，將skip_render參數的值設置爲README.md

skip_render: README.md

//  爲何須要設置這一步呢？
//  由於你執行hexo g命令時，hexo會默認將source文件裏的全部md文件渲染爲html文件放到public中，
//  同時README.md會被渲染爲README.html文件放到public文件裏
//  加上這段設置，就是告訴hexo的解析器，你在渲染source文件裏的md文件時，跳過README.md文件

參考這裏

5、後記

好久以前就搭建一次，可是由於弄得很亂，因此一直沒用（主要是由於不怎麼會用，也不怎麼寫博客）。但如今正在找實習當中，常常看一些別人的面經，也試着去回答那些問題，但發現不少知識點本身都會，可是不能清晰、精準的表達出來，因此準備從新搭建起這個博客，但願能把本身天天的積累到的一些重要知識用文字的形式表達出來，以此來鍛鍊一下本身的表達能力，同時也是對知識的一個消化、總結。
上次搭建博客花了不少時間，因爲對node.js、npm、hexo不瞭解，因此總感受哪裏不對頭，就算按照別人的教程來，也會出現各類各樣的錯誤（感受本身有強迫症！！！）。今天搭這個東西也花了一兩個小時，最後總算搞出來了！！！

博客參考：https://www.cnblogs.com/liuxianan/p/build-blog-website-by-hexo-github.html#%E4%B8%8A%E4%BC%A0%E5%88%B0github
Git教程：https://www.liaoxuefeng.com/wiki/0013739516305929606dd18361248578c67b8067c8c017b000