Hexo&Github-Pages搭建我的博客

some基礎知識

hexo

• hexo是一款基於Node.js的靜態博客框架

github-pages說明

• github有兩種主頁,一種是github-page(我的主頁),一種是項目主頁,本教程針對我的主頁
• github-page須要將hexo博客發佈到repository的master(主幹)便可
• github的我的主頁要求repository的名稱和username一致，加入username是tom，則repository的名稱爲tom.github.io

準備

1.註冊github帳號，如kk,新建一個倉庫kk.github.io

2.安裝git , NodeJS,配置ssh私鑰

3.安裝hexo

在準備安裝hexo的目錄啓動git Bush

• 安裝npm install hexo -g
• 查看版本hexo -v
• hexo init 初始化hexo
• 修改站點配置文件，翻到最後

deploy:
     type: git
     repo: https://github.com/kk/kk.github.io.git
     branch: master

4.選擇並更換主題

• 打開git Bash，定位到博客的位置
• 選擇主題，找到主題地址，如next主題
• 下載主題：git中繼續輸入git clone https://github.com/iissnan/hexo-theme-next themes/next
• 注意有兩個配置文件_config.yml（整個blog的和主題的，約定爲站點配置文件和主題配置文件），將站點配置文件中的theme: xx改成theme: next。一個主題還有不一樣模板，在主題配置文件中找到scheme,開啓你喜歡的一個，其餘#註釋
  注意：「:」後有空格
• 本地測試一下看主題是否完備(hexo s --debug)
• 更新操做

hexo clean  
hexo genarate
hexo deploy

• 應該能夠經過kk.github.io訪問了

5.完善

菜單設定

主題配置文件中
menu:
  #主頁: /archives/
  全部文章: /archives/
  分類&標籤: /tags
  留言板&關於我: /about/
  建站日誌: /build-log/

菜單語言設置

站點配置文件
# Site
title: kimsimple's Blog
subtitle:
description: 
author: kimsimple
language:zh-Hans #可將菜單設置爲簡體中文
timezone:

添加評論框

寫博文

1.新建博文

• 進入Hexo文件夾，啓動git Bush
• 新建文章hexo new "文章題目",在source_posts下找到文檔，在此目錄直接新建.md文件也可

2.新建頁面

• hexo new page "頁面名稱"，如新建test頁面
• 發現source\test文件夾下有index.md
• 見後文兩實例（分類標籤頁面）

分類&標籤

一、建立「分類」選項

1.1 生成「分類」頁並添加tpye屬性

打開命令行，進入博客所在文件夾。執行命令

$ hexo new page categories
成功後會提示：

INFO Created: ~/Documents/blog/source/categories/index.md
根據上面的路徑，找到index.md這個文件，打開後默認內容是這樣的：

---
title: 文章分類
date: 2017-05-27 13:47:40
---

添加type: "categories"到內容中，添加後是這樣的：

---
title: 文章分類
date: 2017-05-27 13:47:40
type: "categories"
---

保存並關閉文件。

1.2 給文章添加「categories」屬性

打開須要添加分類的文章，爲其添加categories屬性。下方的categories: web前端表示添加這篇文章到「web前端」這個分類。注意：hexo一篇文章只能屬於一個分類，也就是說若是在「- web前端」下方添加「-xxx」，hexo不會產生兩個分類，而是把分類嵌套（即該文章屬於 「- web前端」下的 「-xxx 」分類）。

---
title: jQuery對錶單的操做及更多應用
date: 2017-05-26 12:12:57
categories: 
- web前端
---

至此，成功給文章添加分類，點擊首頁的「分類」能夠看到該分類下的全部文章。固然，只有添加了categories: xxx的文章纔會被收錄到首頁的「分類」中。

二、建立「標籤」選項

2.1 生成「標籤」頁並添加tpye屬性

打開命令行，進入博客所在文件夾。執行命令

$ hexo new page tags
成功後會提示：

INFO Created: ~/Documents/blog/source/tags/index.md
根據上面的路徑，找到index.md這個文件，打開後默認內容是這樣的：

---
title: 標籤
date: 2017-05-27 14:22:08
---

添加type: "tags"到內容中，添加後是這樣的：

---
title: 文章分類
date: 2017-05-27 13:47:40
type: "tags"
---

保存並關閉文件。

2.2 給文章添加「tags」屬性

打開須要添加標籤的文章，爲其添加tags屬性。下方的tags:下方的- jQuery - 表格

• 表單驗證就是這篇文章的標籤了

---
title: jQuery對錶單的操做及更多應用
date: 2017-05-26 12:12:57
categories: 
\- web前端
tags:
\- jQuery
\- 表格
\- 表單驗證
---

至此，成功給文章添加分類，點擊首頁的「標籤」能夠看到該標籤下的全部文章。固然，只有添加了tags: xxx的文章纔會被收錄到首頁的「標籤」中。

細心的朋友可能已經發現，這兩個的設置幾乎如出一轍！是的，沒錯，思路都是同樣的。因此咱們能夠打開scaffolds/post.md文件，在tages:上面加入categories:,保存後，以後執行hexo new 文章名命令生成的文件，頁面裏就有categories:項了。

scaffolds目錄下，是新建頁面的模板，執行新建命令時，是根據這裏的模板頁來完成的，因此能夠在這裏根據你本身的需求添加一些默認值。

3.寫博文,md文件

實例：

---
title: 如何利用Github Pages和Hexo快速搭建我的博客 #標題
date: 2017-5-7 18:02:00 #建立時間
tegs: [Hexo,Github] #標籤
categories: Hexo #分類
---
正文

Markdown編輯器

本地編輯器：Haroopad，很是小衆的一款Markdown編輯器，左邊編輯右邊實時預覽效果，很是輕便；
在線編輯器：MaHua，也是比較小衆的一款Markdown編輯器，但效果確實很棒，個人這篇博文就是用MaHua寫的。

爲博文插入圖片

絕對引用

當Hexo項目中只用到少許圖片時，能夠將圖片統一放在source/images文件夾中，經過markdown語法訪問它們。

source/images/image.jpg
![](/images/image.jpg)

圖片既能夠在首頁內容中訪問到，也能夠在文章正文中訪問到。

相對引用

圖片除了能夠放在統一的images文件夾中，還能夠放在文章本身的目錄中。
文章的目錄能夠經過配置_config.yml來生成。
post_asset_folder: truepost_asset_folder設爲true後，執行命令$ hexo new post_name，
在source/_posts中會生成文章post_name.md和同名文件夾post_name。
將圖片資源放在post_name中，文章就可使用相對路徑引用圖片資源了。

_posts/post_name/image.jpg
![](image.jpg)

上述是markdown的引用方式，圖片只能在文章中顯示，但沒法在首頁中正常顯示。
若是但願圖片在文章和首頁中同時顯示，可使用標籤插件語法。

_posts/post_name/image.jpg
{% asset_img image.jpg This is an image %}

CDN引用

除了在本地存儲圖片，還能夠將圖片上傳到一些免費的CDN服務中。好比Cloudinary提供的圖片CDN服務，在Cloudinary中上傳圖片後，會生成對應的url地址，將地址直接拿來引用便可。

4.發博文

hexo clean
hexo generate
(若要本地預覽就先執行 hexo server，本地查看)
hexo deploy(發佈了)

hexo 使用

hexo clean 清除緩存, 刪除public文件夾
快捷命令
hexo g == hexo generate 生成待發布的文件,即生成靜態頁面至public目錄
hexo s == hexo server 開啓預覽訪問端口（默認端口4000，'ctrl + c'關閉server）
hexo d == hexo deploy 將.deploy目錄部署到GitHub
hexo n == hexo new
hexo help # 查看幫助
hexo v == hexo version #查看Hexo的版本
組合使用
hexo d -g

PS：熟練英語很重要！！！資源就擺在眼前就不要亂搜了！！！
注意：上傳時候有沒有 hexo clean就 hexo d -g 有時發生不一致錯誤

some problem

hexo本地預覽和發佈效果不同(圖標，頭像，動畫 ，字體)
通常緣由：

1. 你是否是網很差，沒加載完？
2. 站點下或主題下的_config.yml裏配置錯誤
   好比路徑寫錯

頭像路徑配置錯了，應該寫
avatar: "/img/headportrait.jpg"
而不是
avatar: "img/headportrait.jpg"
一個是相對根目錄，一個是相對當前路徑

1. 個人錯誤是

https不能用http的資源
要不你用下載好的js，要不把外鏈的js換成https
直接打開連接https://7.url.cn/edu/jslib/comb/require-2.1.6,jquery-1.9.1.min.js
複製新建文件require-2.1.6,jquery-1.9.1.min.js
放入public的JS文件夾，改一下index.html中此連接發現問題解決,就用這種方法解決。
將require-2.1.6,jquery-1.9.1.min.js放入主題的source/js目錄下，爲使以後生成的html頁面連接爲下載好的JS文件，需修改模板

EJS是一個簡單高效的模板語言，經過數據和模板，能夠生成HTML標記文本。能夠說EJS是一個JavaScript庫，
EJS能夠同時運行在客戶端和服務器端，客戶端安裝直接引入文件便可，服務器端用npm包安裝

找到模板left-col.ejs（不一樣主題可能不一樣）

修改完成。
PS：想了好長時間也沒解決的問題，問了一個學長，立馬看控制檯有錯沒有，有時候習慣於偷懶，但願找到現成的答案，缺忘記最直接的錯誤提示。

Reference:

[1]樣式更換
[2]博文&頁面新建
[3]主題hexo-theme-yilia
[4]主題black-blue 實例
[5]博文插入圖片

若是，您認爲閱讀這篇博客讓您有些收穫，不妨點擊一下右下角的【推薦】。

若是，您但願更容易地發現個人新博客，不妨點擊一下，【關注我】

博文是本身對學習成果的總結,學習總結知識-》分析問題-》解決問題。

文中存在的觀點/描述不正確的地方，歡迎指正。

感謝您的閱讀，若是您對個人博客所講述的內容有興趣，請繼續關注個人後續博客，我是kimsimple。