Updated March 6, 2018
準(zhǔn)備環(huán)境
windows10 x64
node.js v8.9.3
git version 2.16.1.windows.4
Markdown編輯器：http://markdownpad.com/
熟練掌握git和github的基本操作
參考廖雪峰教程：
https://www.liaoxuefeng.com/wiki/0013739516305929606dd18361248578c67b8067c8c017b000
然后，
在github中新建倉(cāng)庫(kù)席舍，名稱設(shè)置為github用戶名.github.io
node.js+hexo
下載安裝node.js，打開git-bash塞赂，分別輸入npm -v和node -v春叫，返回版本信息說明安裝成功
新建文件夾D:\hexo，在文件夾hexo中使用git-bash進(jìn)行操作
輸入npm install -g hexo-cli來安裝hexo
依次輸入hexo init blog, cd blog和npm install建站
輸入hexo generate生成靜態(tài)頁(yè)面
輸入hexo server啟動(dòng)服務(wù)
如果提示端口4000被占用, 那就需要改端口hexo server -p 5000
hexo配置
hexo官方文檔：https://hexo.io/zh-cn/docs/
修改/hexo/blog/_config.yml文件
# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
type: git
repo: https://github.com/lema1987/lema1987.github.io.git
branch: master
設(shè)置語(yǔ)言，網(wǎng)站標(biāo)題放可，修改/hexo/blog/_config.yml文件
# Site
title: # 網(wǎng)站標(biāo)題
subtitle:
description:
author: # 作者
language: zh-Hans # 語(yǔ)言
timezone:
菜單中添加分類頁(yè)標(biāo)簽頁(yè)：
教程：https://github.com/iissnan/hexo-theme-next/blob/master/README.cn.md
修改/hexo/blog/themes/next/_config.yml
menu:
home: / || home
關(guān)于我: /about/ || user
tags: /tags/ || tags
categories: /categories/ || th
archives: /archives/ || archive
#schedule: /schedule/ || calendar
#sitemap: /sitemap.xml || sitemap
#commonweal: /404/ || heartbeat
騰訊404公益http://www.qq.com/404/
在/hexo/blog目錄下新建404.md：
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8;"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="robots" content="all" />
<meta name="robots" content="index,follow"/>
</head>
<body>
<script type="text/javascript" src="http://qzonestyle.gtimg.cn/qzone/hybrid/app/404/search_children.js" charset="utf-8" homePageUrl="http://lema1987.github.io" homePageName="回到我的主頁(yè)"></script>
</body>
</html>
https://github.com/hexojs/hexo-deployer-git
npm install hexo-deployer-git --save
hexo主題配置
下載next主題：https://github.com/iissnan/hexo-theme-next
把主題代碼存放在/hexo/blog/themes/next中
修改/hexo/blog/_config.yml文件：
# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: next
新建文章
在/hexo/blog/sources/_posts中新建文章.md
在開頭輸入
---
title: #文章標(biāo)題
date: 2016-06-01 23:47:44 #文章生成時(shí)間
categories: "Hexo教程" #文章分類目錄 可以省略
tags: #文章標(biāo)籤 可以省略
- 標(biāo)簽1
- 標(biāo)簽2
description: #你對(duì)本頁(yè)的描述 可以省略
---
部署項(xiàng)目
hexo clean 清除緩存
hexo g 生成頁(yè)面
hexo d 一鍵部署項(xiàng)目到服務(wù)器上
或者 hexo clean && hexo g && hexo d
hexo s 啟動(dòng)本地服務(wù)器
實(shí)現(xiàn)各種優(yōu)化
為主題增加動(dòng)態(tài)粒子背景
教程：https://github.com/hustcc/canvas-nest.js/blob/master/README-zh.md
把下面的js代碼復(fù)制粘貼到/hexo/blog/themes/next/layout/_layout.swig中的</body>之前：
{% if theme.canvas_nest %}
<script type='text/javascript' color='252,3,184' zIndex='-1' opacity='20' count='99' src='//cdn.bootcss.com/canvas-nest.js/1.0.0/canvas-nest.min.js'></script>
{% endif %}
把/hexo/blog/themes/next/_config.yml中所有的canvas_nest設(shè)置為true值
hexo文章添加本地圖片
方法1：此方法有時(shí)會(huì)出錯(cuò)，不能成功引入圖片
將/hexo/blog/_config.yml中的post_asset_folder設(shè)置為true
在/hexo/blog/source下創(chuàng)建/images文件夾朝刊，本地圖片丟里面
引入圖片時(shí)按照markdown格式引入圖片耀里，如[圖片上傳失敗...(image-deba05-1527085003150)]
方法2：引入外鏈, 推薦使用第二種方法
注冊(cè)申請(qǐng)七牛云賬號(hào)
上傳圖片到七牛云，七牛云作為圖片托管
取外鏈粘貼在文章中
參考教程：http://www.reibang.com/p/ec2c8acf63cd
添加字?jǐn)?shù)統(tǒng)計(jì)拾氓，閱讀時(shí)長(zhǎng)功能
參考鏈接：http://www.reibang.com/p/baea8c95e39b
安裝插件
npm -i --save hexo-wordcount
npm install hexo-wordcount@2 --save
修改配置文件
/hexo/blog/themes/next/_config.yml
post_wordcount:
item_text: true
wordcount: true # 改為true
min2read: true # 改為true
totalcount: false
separated_meta: true
編輯/hexo/blog/themes/next/layout/_macro/post.swig
<span title="{{ __('post.wordcount') }}">
{{ wordcount(post.content) }} 字
</span>
<span title="{{ __('post.min2read') }}">
{{ min2read(post.content) }} 分鐘
</span>
添加友鏈
編輯/hexo/blog/themes/next/_config.yml
# Blog rolls
links_icon: link
links_title: 友情鏈接
links_layout: block
#links_layout: inline
links:
#Title: http://example.com/
武沛齊: http://www.cnblogs.com/wupeiqi
離別歌: https://www.leavesongs.com/
Chybeta: https://chybeta.github.io/
Sakura: http://eternalsakura13.com/
andseclab: https://www.andseclab.cn/
自定義鼠標(biāo)樣式
打開/themes/next/source/css/_custom/custom.styl冯挎，輸入
* {
cursor: url("http://om8u46rmb.bkt.clouddn.com/sword2.ico"),auto!important
}
添加github絲帶
在/hexo/blog/themes/next/layout/_layout.swig中加入相關(guān)代碼
相關(guān)代碼的訪問鏈接: https://blog.github.com/2008-12-19-github-ribbons/
鼠標(biāo)點(diǎn)擊顯示小紅心
在/hexo/blog/themes/next/source/js/src目錄下添加love.js文件,內(nèi)容為
!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);
在/hexo/blog/themes/next/layout/_layout.swing文件中添加一下代碼(要在</body>之前添加)
<!-- 小紅心 -->
<script type="text/javascript" src="/js/src/love.js"></script>
設(shè)置hexo首頁(yè)文章不顯示全文只顯示預(yù)覽
第一種方法:
在/hexo/blog/themes/next/_config.yml中將下面代碼中的enable值改為true
# Automatically Excerpt. Not recommend.
# Please use <!-- more --> in the post to control excerpt accurately.
auto_excerpt:
enable: true
length: 150
第二種方法:
在每一篇文章中添加<!--more-->手動(dòng)進(jìn)行截?cái)?推薦使用第二種方法
設(shè)置hexo支持評(píng)論系統(tǒng)
本文選用韓國(guó)的產(chǎn)品來必力: https://livere.com/, 支持多個(gè)國(guó)內(nèi)外賬號(hào)登錄
注冊(cè)并登錄來必力賬號(hào), 選擇安裝LiveReCity免費(fèi)版, 添加站點(diǎn)信息
然后在/hexo/blog/themes/next/_config.yml中找到livere_uid
livere_uid: 輸入你的uid
修改超鏈接顯示樣式
將超鏈接設(shè)置為藍(lán)色, 鼠標(biāo)劃過時(shí)顯示下劃線
在/hexo/blog/themes/next/source/css/_custom/custom.styl中添加以下css樣式
.post-body p a {
color: #0593d3;
border-bottom: none;
&:hover {
color: #0477ab;
text-decoration: underline;
}
}
添加頭像
在/hexo/blog/themes/next/_config.yml中找到并修改以下代碼:
# Sidebar Avatar
# in theme directory(source/images): /images/avatar.gif
# in site directory(source/uploads): /uploads/avatar.gif
avatar: http://p5zqim58x.bkt.clouddn.com/touxiang.jpg
將博客托管到coding pages上
教程: https://blog.csdn.net/xiaoliuge01/article/details/50997754
在coding官網(wǎng) https://coding.net/ 注冊(cè)賬號(hào)并綁定騰訊云賬號(hào)
創(chuàng)建一個(gè)項(xiàng)目
添加ssh key到coding上:
打開git bash, 輸入
cd ~/.ssh
cat id_rsa.pub
復(fù)制一整串公鑰
在coding上配置公鑰
輸入
ssh -T git@git.coding.net看看是否配置成功
選擇master分支, 開啟https
打開
hexo/blog/_config.yml修改添加以下代碼
# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
type: git
repo:
github: https://github.com/lema1987/lema1987.github.io.git
coding: git@git.coding.net:lema1987/lema1987.git
branch: master
本地項(xiàng)目部署到coding上
hexo clean
hexo g
hexo s
