本篇為從零開始的基礎篇,其他SEO谍婉、評論系統(tǒng)、統(tǒng)計等請看Hexo博客添加SEO-評論系統(tǒng)-閱讀統(tǒng)計-站長統(tǒng)計,本篇所包含的內(nèi)容如下:
安裝Git Bash
安裝NodeJs
安裝hexo
生成SSH并添加到github
部署項目
上傳到github
綁定個人域名
修改及配置主題
添加RSS
添加評論
寫文章部分
耍起來
由于小花的電腦在搭建博客之前就有了各種環(huán)境柠贤,但是對于沒有任何基礎的人來講,我覺得還是從源頭開始講會好一點类缤,就像教別人做菜臼勉,總得把所有的用料及步驟說清楚對吧?(大佬們可以自動忽略啊啊啊啊~)
1.?安裝Git Bash
我一直不太喜歡在cmd中操作各種命令餐弱,所以挑了這個比較好使的Git Bash, 我的是windows環(huán)境宴霸,所以下載windows版本并安裝就可以了。
安裝步驟:雙擊下載好的exe文件膏蚓,一路next就好啦
安裝好后瓢谢,打開gitbash,查看版本:
命令:git version?(寫這篇博客的時候最新版本:2.12.2)
然后你就可以在這里發(fā)揮你的聰明才智了
2.?安裝NodeJs
Hexo是基于nodeJS環(huán)境的靜態(tài)博客驮瞧,里面的npm工具很有用啊氓扛,所以還是老老實實把這玩意兒裝了吧
下載地址(說明:LTS為長期支持版,Current為當前最新版)
安裝步驟:反正下載好msi文件后剧董,雙擊打開安裝幢尚,也是一路next,不過在Custom Setup這一步記得選?Add to PATH?,這樣你就不用自己去配置電腦上環(huán)境變量了翅楼,裝完在按?win + r?快捷鍵調(diào)出運行尉剩,然后輸入cmd確定,在cmd中輸入path可以看到你的node是否配置在里面(環(huán)境變量)毅臊,沒有的話你就自由發(fā)揮吧理茎。
查看版本:
命令:node -v
又到自由發(fā)揮的時候了
3.?安裝hexo
看到這么多安裝,千萬不要緊張,小哥哥小姐姐們一定要穩(wěn)住皂林,別怕朗鸠,因為后面的東西都是在gitbash中用npm工具安裝就好了。
先創(chuàng)建一個文件夾(用來存放所有blog的東西)础倍,然后cd到該文件夾下烛占。
安裝hexo命令:npm i -g hexo
安裝完成后,查看版本:
初始化命令:hexo init?沟启,初始化完成之后打開所在的文件夾可以看到以下文件:
解釋一下:
node_modules:是依賴包
public:存放的是生成的頁面
scaffolds:命令生成文章等的模板
source:用命令創(chuàng)建的各種文章
themes:主題
_config.yml:整個博客的配置
db.json:source解析所得到的
package.json:項目所需模塊項目的配置信息
做好這些前置工作之后接下來的就是各種配配配置了忆家。
4.?搭橋到github
沒賬號的創(chuàng)建賬號,有賬號的看下面德迹。
創(chuàng)建一個repo芽卿,名稱為yourname.github.io, 其中yourname是你的github名稱,按照這個規(guī)則創(chuàng)建才有用哦胳搞,如下:
回到gitbash中卸例,配置github賬戶信息(YourName和YourEail都替換成你自己的):
創(chuàng)建SSH
在gitbash中輸入:ssh-keygen -t rsa -C "youremail@example.com,生成ssh肌毅。然后按下圖的方式找到id_rsa.pub文件的內(nèi)容筷转。
將上面獲取的ssh放到github中:
添加一個?New SSH key?,title隨便取芽腾,key就填剛剛那一段旦装。
在gitbash中驗證是否添加成功:ssh -T git@github.com
完成下一步你就成功啦!
5.?一步之遙
用編輯器打開你的blog項目摊滔,修改_config.yml文件的一些配置(冒號之后都是有一個半角空格的):
deploy:? type:git? repo:https://github.com/YourgithubName/YourgithubName.github.io.git? branch:master
回到gitbash中阴绢,進入你的blog目錄,分別執(zhí)行以下命令:
hexocleanhexo generatehexo server
注:hexo 3.0把服務器獨立成個別模塊艰躺,需要單獨安裝:npm i hexo-server呻袭。
打開瀏覽器輸入:http://localhost:4000
接著你就可以遇見天使的微笑了~
6.?上傳到github
先安裝一波:npm install hexo-deployer-git --save(這樣才能將你寫好的文章部署到github服務器上并讓別人瀏覽到)
執(zhí)行命令(建議每次都按照如下步驟部署):
hexocleanhexo generatehexo deploy
注意deploy的過程中要輸入你的username及passward。如下:
在瀏覽器中輸入http://yourgithubname.github.io就可以看到你的個人博客啦腺兴,是不是很興奮左电!
感覺gitbash中東西太多的時候輸入clear命令清空。
7.?綁定個人域名
不想綁定的自行忽略
第一步購買域名:隨便在哪個網(wǎng)站買一個就好了页响,小花是在阿里云購買的visugar.com, DNS也是順道在那買的篓足。
第二步添加CNAME:在項目的source文件夾下新建一個名為CNAME的文件,在里面添加你購買的域名闰蚕,比如我添加的是visugar.com栈拖,只能添加一個哦。
到DNS中添加一條記錄:
其中ip地址為你的github的地址没陡,可在cmd中ping一下就能看到(ping yourname.github.io):
接著再次部署一下涩哟,用你購買的域名打開索赏,就可以看到你的博客啦~
8.?修改及配置主題
hexo初始化之后默認的主題是landscape?, 然后你可以去這個地址里面找到你想要的主題。在github中搜索你要的主題名稱贴彼,里面都會有該主題的如何使用的介紹潜腻,按著來就好了,反正就是改改改器仗!我選的是hueman,看起來挺不錯融涣,至少是我喜歡的類型。
跟該主題相關(guān)的配置在themes/hueman/_config.yml里面,然后根據(jù)你的需要在這配配配就行了精钮。
有的東西我也不知道是啥玩意兒暴心,你要多試多倒騰幾次,就能意會啦
下面是針對我所選的主題的兩小點(別的主題我沒看杂拨,可能也是類似):
在導航欄添加點東西
例如我添加了一個更新日志的模塊。
在主題的配置文件中悯衬,menu添加一欄:Board: /board弹沽。
然后在source中添加一個board,即對應上面的名字筋粗。然后再創(chuàng)建一個index.md策橘,里面可以寫你想寫的內(nèi)容。
在主題的hueman/langulages/zh-CN.yml中的index適當?shù)奈恢眉樱篵oard: '更新日志'娜亿,位置和名字是你自己設定丽已。
重新部署,然后就OK了
在側(cè)邊欄添加點東西
回到你的主題的配置文件中买决,找到widgets一欄沛婴,在你要添加的位置處添加一條你自定義的名稱。例如我的叫communiation且放在了第二行督赤。
在上面所提到的zh-CN.yml文件中找到sidebar一欄嘁灯,添加communiation: '你要設的名稱'。
在hueman/layout/widget中添加一個communiation.ejs,填入模板
<%if(site.posts.length) { %><%=__('sidebar.communiation') %><%} %>
9.?添加RSS
先安裝rss相關(guān)插件:npm i hexo-generator-feed
在你的項目的_config.yml配置文件下找到Extensions添加如下內(nèi)容:
# Extensions? #插件和主題## Plugins: https://hexo.io/plugins/## Themes: https://hexo.io/themes/#RSS訂閱plugin:- hexo-generator-feed#Feed Atomfeed:? type:atom? path:atom.xml? limit:20
進入到你的主題的配置文件下躲舌,找到你的放rss的位置丑婿,添加/atom.xml即可。
重新部署再打開就能看到效果啦~
10.?添加評論
20170812更新:
云更貼已在2017年8月1日停止服務没卸,具體評論系統(tǒng)文章統(tǒng)計站長統(tǒng)計及百度SEO谷歌SEO什么的可參考Hexo博客添加SEO-評論系統(tǒng)-閱讀統(tǒng)計-站長統(tǒng)計
-----
此段已失效羹奉。
先選一個你要使用的第三方評論系統(tǒng),最好找個靠譜點的(我使用的是網(wǎng)易云跟帖)约计。
在主題的配置文件下找到comment诀拭,添加一行,例如我添加的是yungentie: 此處自由發(fā)揮
注冊完評論系統(tǒng)后獲取相應的代碼病蛉,然后在主題的layout下找到comment新建一個ejs模板文件炫加,名稱自定義瑰煎。
找到你的article.ejs模板文件,加上<%- partial('comment/你剛剛?cè)〉妹?) %>保存俗孝。
重新部署酒甸,OK啦
11.?寫文章部分
新建文章:hexo new '文章名',然后你就可以在source/_posts路徑下看到你創(chuàng)建的文章啦赋铝,編輯完成之后按照前面說的方式部署插勤,在瀏覽器刷新就能看到你的文章了。
關(guān)于具體的文章編輯你可以看下官網(wǎng)的介紹
至于markdown革骨,可以自行發(fā)揮啦~