使用hexo,-github,-coding搭建免費部落格

阿新 • • 發佈：2018-12-25

Updated March 6, 2018

準備環境

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中新建倉庫，名稱設定為github使用者名稱.github.io

node.js+hexo

下載安裝node.js

，開啟git-bash，分別輸入npm -v和node -v，返回版本資訊說明安裝成功

新建資料夾D:\hexo，在資料夾hexo中使用git-bash進行操作

輸入npm install -g hexo-cli來安裝hexo

依次輸入hexo init blog, cd blog和npm install建站

輸入hexo generate生成靜態頁面

輸入hexo server啟動服務
如果提示埠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

設定語言，網站標題，修改/hexo/blog/_config.yml檔案

# Site
title: # 網站標題
subtitle:
description:
author: # 作者
language: zh-Hans # 語言
timezone:

選單中新增分類頁標籤頁：
教程：

https://github.com/iissnan/hexo-theme-next/blob/master/README.cn.md
修改/hexo/blog/themes/next/_config.yml

menu:
  home: / || home
  關於我: /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="//qzonestyle.gtimg.cn/qzone/hybrid/app/404/search_children.js" charset="utf-8" homePageUrl="http://lema1987.github.io" homePageName="回到我的主頁"></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: #文章標題
date: 2016-06-01 23:47:44 #文章生成時間
categories: "Hexo教程" #文章分類目錄 可以省略
tags: #文章標籤 可以省略
     - 標籤1
     - 標籤2
description: #你對本頁的描述 可以省略
---

部署專案

hexo clean  清除快取
hexo g  生成頁面
hexo d  一鍵部署專案到伺服器上
或者 hexo clean && hexo g && hexo d

hexo s  啟動本地伺服器

實現各種優化

為主題增加動態粒子背景

教程：https://github.com/hustcc/canvas-nest.js/blob/master/README-zh.md
把下面的js程式碼複製貼上到/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設定為true值

hexo文章新增本地圖片

方法1：此方法有時會出錯，不能成功引入圖片
將/hexo/blog/_config.yml中的post_asset_folder設定為true
在/hexo/blog/source下建立/images資料夾，本地圖片丟裡面
引入圖片時按照markdown格式引入圖片，如[圖片上傳失敗...(image-deba05-1527085003150)]

方法2：引入外鏈, 推薦使用第二種方法
註冊申請七牛雲賬號
上傳圖片到七牛雲，七牛雲作為圖片託管
取外鏈貼上在文章中
參考教程：https://www.jianshu.com/p/ec2c8acf63cd

新增字數統計，閱讀時長功能

參考連結：https://www.jianshu.com/p/baea8c95e39b

安裝外掛

npm -i --save hexo-wordcount
npm install [email protected] --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/

自定義滑鼠樣式

開啟/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中加入相關程式碼
相關程式碼的訪問連結: https://blog.github.com/2008-12-19-github-ribbons/

滑鼠點選顯示小紅心

在/hexo/blog/themes/next/source/js/src目錄下新增love.js檔案,內容為

!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檔案中新增一下程式碼(要在之前新增)

<!-- 小紅心 -->
<script type="text/javascript" src="/js/src/love.js"></script>

設定hexo首頁文章不顯示全文只顯示預覽

第一種方法:
在/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-->手動進行截斷,推薦使用第二種方法

設定hexo支援評論系統

本文選用韓國的產品來必力: https://livere.com/, 支援多個國內外賬號登入
註冊並登入來必力賬號, 選擇安裝LiveReCity免費版, 新增站點資訊

然後在/hexo/blog/themes/next/_config.yml中找到livere_uid

livere_uid: 輸入你的uid

修改超連結顯示樣式

將超連結設定為藍色, 滑鼠劃過時顯示下劃線
在/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官網 https://coding.net/ 註冊賬號並繫結騰訊雲賬號
建立一個專案

新增ssh key到coding上:
開啟git bash, 輸入

cd ~/.ssh
cat id_rsa.pub
複製一整串公鑰

在coding上配置公鑰

輸入ssh -T [email protected]看看是否配置成功

選擇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: [email protected]:lema1987/lema1987.git
  branch: master

本地專案部署到coding上

hexo clean
hexo g
hexo s