使用hexo, github, coding搭建免费博客

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：

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中的之前：

{% if theme.canvas_nest %}

{% 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 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

    {{ wordcount(post.content) }} 字


    {{ min2read(post.content) }} 分钟

添加友链

编辑/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

在/hexo/blog/themes/next/layout/_layout.swing文件中添加一下代码(要在之前添加)

设置hexo首页文章不显示全文只显示预览

第一种方法:
在/hexo/blog/themes/next/_config.yml中将下面代码中的enable值改为true

# Automatically Excerpt. Not recommend.
# Please use  in the post to control excerpt accurately.
auto_excerpt:
  enable: true
  length: 150

第二种方法:

在每一篇文章中添加手动进行截断,推荐使用第二种方法

设置hexo支持评论系统

本文选用韩国的产品来必力: https://livere.com/, 支持多个国内外账号登录
注册并登录来必力账号, 选择安装LiveReCity免费版, 添加站点信息

image

image

然后在/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/ 注册账号并绑定腾讯云账号
创建一个项目

image

添加ssh key到coding上:
打开git bash, 输入

cd ~/.ssh
cat id_rsa.pub
复制一整串公钥

在coding上配置公钥

image

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

选择master分支, 开启https

image

打开 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