hexo+github搭建我的博客

搭建示例：http://www.javashuo.com/article/p-ayrsevfd-w.html 、 https://www.cnblogs.com/liuxianan/p/build-blog-website-by-hexo-github.html 、http://www.javashuo.com/article/p-hdpbvjbo-dr.html

hexo官網：https://hexo.io/

hexo中文文檔：https://hexo.io/zh-cn/docs/

1.安裝hexo

1 2019/9/20最新官網提示初始化hexo
2     $ npm install hexo-cli -g
3     先找個盤創建一個好比hexo的文件 如下步驟在文件內執行git
4     $ hexo init blog （若是你下載有主題文件的話，當git clone themes時就能夠結束git指令了，事後直接把下載好的主題文件放在themes文件下便可，固然你要是第一次安裝hexo且網速好能夠忽略這個提示）
5     $ cd blog
6     $ npm install
7     $ hexo server
8 初始化成功後就能夠打開http://localhost:4000/
9 查看版本：hexo -v

2.生成ssh添加到github上

 1 在文價下git
 2     git config --global user.name "yourname"
 3     git config --global user.email "youremail"
 4 這裏的yourname輸入你的GitHub用戶名，youremail輸入你GitHub的郵箱。這樣GitHub才能知道你是否是對應它的帳戶。
 5 如下兩條用於檢查輸入是否正確
 6     git config user.name
 7     git config user.email
 8 而後建立SSH,一直回車，直到語句結束
 9     ssh-keygen -t rsa -C "youremail"
10 通常會在C:\Users\admin\.ssh
11 ssh，簡單來說，就是一個祕鑰，其中，id_rsa是你這臺電腦的私人祕鑰，不能給別人看的，id_rsa.pub是公共祕鑰，能夠隨便給別人看。把這個公鑰放在GitHub上，這樣當你連接GitHub本身的帳戶時，它就會根據公鑰匹配你的私鑰，當可以相互匹配時，纔可以順利的經過git上傳你的文件到GitHub上。
12 然後在GitHub的setting中，找到SSH keys的設置選項，點擊New SSH key
13 把你的id_rsa.pub裏面的信息複製進去。
14 在gitbash中，查看是否成功
15     ssh -T git@github.com

 3.將hexo部署在github上

 1  打開站點配置文件 _config.yml
 2      deploy:
 3      type: git
 4      repo: https://github.com/YourgithubName/YourgithubName.github.io.git
 5     branch: master
 6     這個時候須要先安裝deploy-git ，也就是部署的命令,這樣你才能用命令部署到GitHub。
 7        npm install hexo-deployer-git --save
 8    而後
 9        hexo clean （最好不要）
10        hexo generate
11        hexo deploy
12 等代碼上傳到github上事後就能夠經過https://earwind.github.io/訪問博客了
13 過不了多久，再打開你的瀏覽器，輸入你本身的域名，就能夠看到搭建的網站啦！
14 
15 接下來你就能夠正式開始寫文章了。
16     hexo new newpapername
17 而後在source/_post中打開markdown文件，就能夠開始編輯了。當你寫完的時候，再
18     hexo clean
19     hexo g
20     hexo d
21 事後就能夠看見更新了

 4.多臺電腦更新hexo

  1 示例：https://blog.csdn.net/eternity1118_/article/details/71194395  

5.綁定域名

1 在項目的setting裏面，有一個Github page的選項卡，在Custom domain裏面填入你本身的域名（blog.resonlei.top,像這樣），而後點擊save。
2 若是不想設置，也能夠在項目的跟目錄下面建立名稱爲CNAME的文件（注意，文件名必須大寫，不須要拓展名），文件內容爲你要解析的域名，就是設置的那個，其實經過設置進行域名的設置，github會自動在根目錄建立一個CNAME的文件(推薦使用這種方法，否則每次更新都要重複第一種方法的操做)

6.更換主題（這裏我用的是next）

1 next的使用文檔http://theme-next.iissnan.com/getting-started.html#download-next-theme
2 主題優化：https://www.jianshu.com/p/1f8107a8778c 、http://www.javashuo.com/article/p-vnvdtgpz-kc.html

 7.給NexT主題內添加頁面點擊出現愛心的效果

1 建立js文件
2 在/themes/next/source/js/src下新建文件clicklove.js，接着把該連接下的代碼拷貝粘貼到clicklove.js文件中。
3 代碼以下：
4   !function(e,t,a){function n(){c(".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: fixed;}.heart:after{top: -5px;}.heart:before{left: -5px;}"),o(),r()}function r(){for(var e=0;e<d.length;e++)d[e].alpha<=0?(t.body.removeChild(d[e].el),d.splice(e,1)):(d[e].y--,d[e].scale+=.004,d[e].alpha-=.013,d[e].el.style.cssText="left:"+d[e].x+"px;top:"+d[e].y+"px;opacity:"+d[e].alpha+";transform:scale("+d[e].scale+","+d[e].scale+") rotate(45deg);background:"+d[e].color+";z-index:99999");requestAnimationFrame(r)}function o(){var t="function"==typeof e.onclick&&e.onclick;e.onclick=function(e){t&&t(),i(e)}}function i(e){var a=t.createElement("div");a.className="heart",d.push({el:a,x:e.clientX-5,y:e.clientY-5,scale:1,alpha:1,color:s()}),t.body.appendChild(a)}function c(e){var a=t.createElement("style");a.type="text/css";try{a.appendChild(t.createTextNode(e))}catch(t){a.styleSheet.cssText=e}t.getElementsByTagName("head")[0].appendChild(a)}function s(){return"rgb("+~~(255*Math.random())+","+~~(255*Math.random())+","+~~(255*Math.random())+")"}var d=[];e.requestAnimationFrame=function(){return e.requestAnimationFrame||e.webkitRequestAnimationFrame||e.mozRequestAnimationFrame||e.oRequestAnimationFrame||e.msRequestAnimationFrame||function(e){setTimeout(e,1e3/60)}}(),n()}(window,document);
5 修改_layout.swig
6 在\themes\next\layout\_layout.swig文件末尾添加：
7 <!-- 頁面點擊小紅心 -->
8 <script type="text/javascript" src="/js/src/clicklove.js"></script>

 8.文章添加分類

 1 hexo中有Front-matter這個概念，是文件最上方以 — 分隔的區域，用於指定個別文件的變量。舉個栗子，在hexo new post article時會生成article.md文件，文件生成好的文章屬性。
 2 在其中添加categories屬性，再部署以後就能夠在分類頁看到分類了
 3     ---
 4     title: hexo next 爲文章添加分類
 5     date: 2016-03-16 08:12:43
 6     tags:
 7     categories: 前端
 8     --- 
 9 添加子分類
10     ---
11     title: 搭建phalcon項目
12     date: 2016-03-16 08:12:43
13     tags:
14     categories: 
15     - php
16     - 框架
17     - phalcon
18     ---

 9.文章添加標籤

 1 打開命令行，進入博客所在文件夾。執行命令
 2     $ hexo new page tags
 3 根據上面的路徑，找到index.md這個文件，添加type: "tags"到內容中
 4     ---
 5     title: 標籤
 6     date: 2017-05-27 13:47:40
 7     type: "tags"
 8     ---
 9 給文章添加"tags"屬性
10     ---
11     title: jQuery對錶單的操做及更多應用
12     date: 2017-05-26 12:12:57
13     categories: 
14     - web前端
15     tags:
16     - jQuery
17     - 表格
18     - 表單驗證
19     ---
20 綜上能夠發現添加標籤和分類的設置是同樣的

10.添加基於gitment評論功能 

示例：https://www.jianshu.com/p/b8255a630d46

 11.hexo指令

 1 常見命令
 2 hexo new "postName" #新建文章
 3 hexo new page "pageName" #新建頁面
 4 hexo generate #生成靜態頁面至public目錄
 5 hexo server #開啓預覽訪問端口（默認端口4000，'ctrl + c'關閉server）
 6 hexo deploy #部署到GitHub
 7 hexo help  # 查看幫助
 8 hexo version  #查看Hexo的版本
 9 縮寫：
10 hexo n == hexo new
11 hexo g == hexo generate
12 hexo s == hexo server
13 hexo d == hexo deploy
14 組合命令：
15 hexo s -g #生成並本地預覽
16 hexo d -g #生成並上傳