Hexo+Next搭建Github我的靜態博客

通過我幾天的努力，用hexo搭建的博客終於好了。歡迎蒞臨

廢話很少說。

環境配置

• Node.js(必須) 一路默認安裝便可。
• 安裝Git(必須) 一路默認安裝便可。
• Github帳號(必須)

安裝Hexo

nodejs和git安裝完成後，打開’git bash’安裝hexo

npm install -g hexo-cli

Start

新建一個文件夾(如E:\Hexo)，在此文件夾中執行命令

1 hexo init
2 npm install

本地查看

1 hexo server //hexo s

後在瀏覽器中輸入 http://localhost:4000/

此時，會有一篇文章hello world,對應的文件爲 E:\Hexo\source_posts\hello-world.md
文章用markdown語法寫.

新建文章

1 hexo new "New article"

會新建一個名爲’New article’的文章，執行如下命令以後查看。

hexo generate   //生成靜態網頁以及css js文件 存放於public文件夾中
hexo server

至此，本地博客搭建完畢。下一步移植到Github

Github

新建repository,項目名必須是:name.github.io(name是你的帳號名)。
個人帳號名是cnfanhua,新建的項目名也就是cnfanhua.github.io

部署

在你的hexo文件夾中有個重要的文件_config.yml,打開編輯,把’cnfanhua’換成你的帳號名

1 deploy:
2   type: git
3   repository: https://github.com/cnfanhua/cnfanhua.github.io.git
4   branch: master

執行下列命令後部署(部署前，須要配置SSh，不然失敗)。

1 hexo generate
2 hexo deploy　　//上傳至github 代替 git push...

至此，我的博客搭建完成。
注意:每次修改後 須要 hexo g 命令保存 而後hexo d 命令上傳

外配置SSh

打開git bash

• 設置username和email

   

• 1 git config --global user.name "test"
  2 git config --global user.email "test@gmail.com"

• 生成祕鑰

• ssh-keygen -t rsa -C "test@gmail.com"

• 最後獲得id_rsa和id_rsa.pub兩個文件，把id_rsa.pub的內容粘貼到github中便可

NexT主題

下載

gitHub,clone到你的博客目錄\themes目錄下(E:\Hexo\themes下)

git clone git@github.com:iissnan/hexo-theme-next.git

使用

打開站點總配置_config.yml(即E:\Hexo下的_config.yml),找到theme換成next便可(theme: next),記得每個冒號後面要有一個空格

NexT-配置

插件安裝

npm install <插件名>

卸載插件

npm uninstall <插件名>

多說評論

使用多說前須要先在 多說 建立一個站點。具體步驟以下：

• 登陸後在首頁選擇 「我要安裝」。
• 建立站點，填寫表單。多說域名 這一欄填寫的便是你的 duoshuo_shortname
  主題配置文件 中設置：

　　　　　　# 多說熱評文章 true 或者 false
　　　　　　duoshuo_shortname: '多說域名'

Google 分析

登錄google分析網站獲取ID
編輯 站點配置文件，新增字段 google_analytics，值設置成你的 Google 跟蹤 ID。

google_analytics: UA-XXX...

社交連接，將在側欄中顯示

將如下代碼放到站點配置文件

 

1 social:
2   GitHub: your-github-url
3   Twitter: your-twitter-url
4   Weibo: your-weibo-url
5   DouBan: your-douban-url
6   ZhiHu: your-zhihu-url
7   # 等等

 

文章目錄

主題配置文件 中設置：

1 sidebar: post   #自動展現有目錄的文章的目錄
2 #sidebar: always    #老是展現
3 #sidebar: hide      #隱藏

添加雲標籤

hexo new page "tags"        //新增tags頁面

　　編輯剛纔的頁面(path\source\tags\index.md)

1 ---
2 title: TagCloud
3 date: 2016-01-21 16:12:58
4 type: "tags"
5 comments: false     //關閉評論
6 ---

　　編輯主題配置文件,添加 tags 到 menu 中

1 menu:
2   home: /
3   archives: /archives
4   tags: /tags

添加high一下

在 Hexo\themes\next\layout_partials\header.swig 中的 ul 標籤加入以下 li 代碼：

  1 <li> <a title="把這個連接拖到你的Chrome收藏夾工具欄中" href='javascript:(function() {
  2     function c() {
  3         var e = document.createElement("link");
  4         e.setAttribute("type", "text/css");
  5         e.setAttribute("rel", "stylesheet");
  6         e.setAttribute("href", f);
  7         e.setAttribute("class", l);
  8         document.body.appendChild(e)
  9     }
 10  
 11     function h() {
 12         var e = document.getElementsByClassName(l);
 13         for (var t = 0; t < e.length; t++) {
 14             document.body.removeChild(e[t])
 15         }
 16     }
 17  
 18     function p() {
 19         var e = document.createElement("div");
 20         e.setAttribute("class", a);
 21         document.body.appendChild(e);
 22         setTimeout(function() {
 23             document.body.removeChild(e)
 24         }, 100)
 25     }
 26  
 27     function d(e) {
 28         return {
 29             height : e.offsetHeight,
 30             width : e.offsetWidth
 31         }
 32     }
 33  
 34     function v(i) {
 35         var s = d(i);
 36         return s.height > e && s.height < n && s.width > t && s.width < r
 37     }
 38  
 39     function m(e) {
 40         var t = e;
 41         var n = 0;
 42         while (!!t) {
 43             n += t.offsetTop;
 44             t = t.offsetParent
 45         }
 46         return n
 47     }
 48  
 49     function g() {
 50         var e = document.documentElement;
 51         if (!!window.innerWidth) {
 52             return window.innerHeight
 53         } else if (e && !isNaN(e.clientHeight)) {
 54             return e.clientHeight
 55         }
 56         return 0
 57     }
 58  
 59     function y() {
 60         if (window.pageYOffset) {
 61             return window.pageYOffset
 62         }
 63         return Math.max(document.documentElement.scrollTop, document.body.scrollTop)
 64     }
 65  
 66     function E(e) {
 67         var t = m(e);
 68         return t >= w && t <= b + w
 69     }
 70  
 71     function S() {
 72         var e = document.createElement("audio");
 73         e.setAttribute("class", l);
 74         e.src = i;
 75         e.loop = false;
 76         e.addEventListener("canplay", function() {
 77             setTimeout(function() {
 78                 x(k)
 79             }, 500);
 80             setTimeout(function() {
 81                 N();
 82                 p();
 83                 for (var e = 0; e < O.length; e++) {
 84                     T(O[e])
 85                 }
 86             }, 15500)
 87         }, true);
 88         e.addEventListener("ended", function() {
 89             N();
 90             h()
 91         }, true);
 92         e.innerHTML = " <p>If you are reading this, it is because your browser does not support the audio element. We recommend that you get a new browser.</p> <p>";
 93         document.body.appendChild(e);
 94         e.play()
 95     }
 96  
 97     function x(e) {
 98         e.className += " " + s + " " + o
 99     }
100  
101     function T(e) {
102         e.className += " " + s + " " + u[Math.floor(Math.random() * u.length)]
103     }
104  
105     function N() {
106         var e = document.getElementsByClassName(s);
107         var t = new RegExp("\\b" + s + "\\b");
108         for (var n = 0; n < e.length; ) {
109             e[n].className = e[n].className.replace(t, "")
110         }
111     }
112  
113     var e = 30;
114     var t = 30;
115     var n = 350;
116     var r = 350;
117     var i = "//s3.amazonaws.com/moovweb-marketing/playground/harlem-shake.mp3";
118     var s = "mw-harlem_shake_me";
119     var o = "im_first";
120     var u = ["im_drunk", "im_baked", "im_trippin", "im_blown"];
121     var a = "mw-strobe_light";
122     var f = "//s3.amazonaws.com/moovweb-marketing/playground/harlem-shake-style.css";
123     var l = "mw_added_css";
124     var b = g();
125     var w = y();
126     var C = document.getElementsByTagName("*");
127     var k = null;
128     for (var L = 0; L < C.length; L++) {
129         var A = C[L];
130         if (v(A)) {
131             if (E(A)) {
132                 k = A;
133                 break
134             }
135         }
136     }
137     if (A === null) {
138         console.warn("Could not find a node of the right size. Please try a different page.");
139         return
140     }
141     c();
142     S();
143     var O = [];
144     for (var L = 0; L < C.length; L++) {
145         var A = C[L];
146         if (v(A)) {
147             O.push(A)
148         }
149     }
150 })()    '>High一下</a> </li>

View Code

開啓RSS功能

安裝插件

npm install hexo-generator-feed --save

後編輯主題配置文件_config.yml,添加以下代碼

rss: /atom.xml #rss地址  默認便可

報錯

找不到git部署 ERROR Deployer not found: git

解決辦法

npm install hexo-deployer-git --save

部署類型設置git

hexo 3.0 部署類型再也不是github,而是git,修改主題配置文件_config.yml中deploy中的type爲git

1 deploy:
2   type: git
3   repository: git@cnfanhua.github.com:cnfanhua/cnfanhua.github.io.git
4   branch: master

參考

1.hexo
2.建立GitHub技術博客全攻略
3.搭建一個免費的，無限流量的Blog—-github Pages和Jekyll入門
4.HEXO+Github,搭建屬於本身的博客
5.Hexo搭建Github靜態博客
6.hexo系列教程：（三）hexo博客的配置、使用
7.hexo系列教程：（二）搭建hexo博客
8.NexT
9.廖雪峯Git教程