O_Hexo自建博客

Web开发

200930

前言

　　时光荏苒，不知不觉已经过了三年多了，新版的MengZe主站也有了新的面貌，但就在一切都应该顺利起来的时候，Coding Pages服务突然出了些小问题：随着网站的不断增大，整体所占的空间也大了不少，所以Coding的百兆多一点的空间限制就横空压了过来，不得已，只能寻求其他的方式咯。

　　在选择托管方式的时候看过很多产品，在这里稍微对比一下吧：

  • Github Pages 总体是一个很不错的选择，除了国内的访问速度，而且最近好像要限制月流量1G了，不知道是真是假。

  • Coding Pages 与Github Pages类似，而且可以直接申请SSL强制https，不过只有128MB空间…

  • Gitee Pages 同样类似的服务，不过不能自定义域名…

  • 腾讯云网站托管服务，直接的一个托管产品，而且价格还算不错，域名需要备案。

  • 腾讯云COS对象存储，类似一个网盘空间，提供类似Pages的服务，域名需要备案。

  • 阿里云OSS对象存储，同COS类似，大陆区需要域名备案，香港区可以绑定无备案域名。

　　总之经过对比呢，因为备案一直没做，所以只能用OSS咯，目前用起来还可以，而且最好的一点是实时刷新，就是当内容更改后马上刷新一下网站就能看到改动，比起上面那些Pages服务来说算是一个很强的优势了。

Hexo部署到阿里云OSS

　　静态网站不需要购买云服务器、VPS或者虚拟主机，使用阿里云OSS对象存储即可搞定，稳定且访问速度快，你只需要准备好域名和静态网页代码，如果选择中国香港的区域还不需要备案。

　　使用OSS托管静态网站的方法很简单，大致的流程是在OSS上创建Bucket，Bucket读写权限设置为公共读；创建完Bucket后，在基础设置中设置一下静态页面默认首页；然后将域名通过CNAME解析到外网访问的Bucket域名上。

一：创建OSS Bucket

　　1. 打开OSS对象存储控制台；
　　2. 创建Bucket，在左侧栏“Bucket列表”中点击“创建 Bucket”。
A1

  • Bucket 名称：Bucket名称会出现在你的OSS域名中，名称不支持中文。
  • 区域：选择中国大陆地域你的网站域名需要备案，没有备案或不想备案可以选择中国（香港）节点。
  • 存储类型：默认标准存储。
  • 读写权限：这一步很重要，选择公共读。

　　其他如版本控制、服务器端加密、实时日志查询、定时备份等选项根据实际情况选择，没有特殊要求默认即可。

二：设置静态页面

　　选择刚刚创建的Bucket，点击“基础设置”->“静态页面”，如下图：
A2

  • 默认首页：index.html。
  • 默认 404 页：404.html。
  • 子目录首页：开通。

　　至此OSS对象存储Bucket的创建和设置就完成了，下一步就是上传静态网站源码。

三：上传静态网站源码到Bucket

　　在“文件管理”中上传网页、新建目录等操作，如下图：

A3

　　根据静态网站目录结构，将静态源码上传到刚刚创建的Bucket中。

四：OSS Bucket绑定域名

　　选择“传输设置”->“域名管理”->“绑定用户域名”，填写你的网站域名，如果你的域名也在阿里云账号下，可以打开“自动添加 CNAME 记录”，阿里云域名解析系统会自动添加CNAME解析记录；如果域名不在阿里云，登录到域名解析平台，手动添加CANME记录即可。

五：手动添加域名CNAME记录

　　域名解析处添加CNAME解析到Bucket外网域名，登录到你的域名管理控制台，添加CNAME解析，记录值填写Bucket“概览”中外网访问的Bucket 域名，如下图所示：

A4

　　填写CNAME记录值后，访问你的网站域名，应该可以正常访问了。

　　阿里云OSS对象存储价格很便宜，可是使用按量计费模式，后付费，费用会从阿里云账号下扣除，也可以通过购买OSS资源存储包来抵扣，赶上一些阿里云优惠活动，价格会更便宜一些，参考下方活动：阿里云OSS对象存储官方活动直达

以上内容摘自：静态网站托管使用阿里云OSS对象存储分分钟搞定 - 码笔记

六：Hexo一键部署到阿里云OSS

　　在您的hexo项目目录下执行：

1
npm install hexo-deployer-ali-oss --save

　　在Hexo项目配置文件_config.yml中添加如下部署配置：

1
2
3
4
5
6
deploy:
  type: ali-oss
  region: <您的oss 区域代码>
  accessKeyId: <您的oss  accessKeyId>
  accessKeySecret: <您的oss accessKeySecret>
  bucket: <您的bucket name>

小说明：
type：不用改
region：OSS所在区域，按实际修改成如：oss-cn-hangzhou的格式
accessKeyId 和 accessKeySecret：这个登录阿里云后，点击右边的头像下 AccessKey管理，就可以找到
bucket：Bucket 名称

　　改好之后记得保存，保存好之后再执行hexo d，一般没问题的话就可以将Hexo生成的静态文件上传到OSS中了，刷新一下你的小域名就可以看到最新动态了。

　　注：默认情况下，将文件上传到阿里云OSS bucket的根目录下，如果需要部署到其他目录，请在deploy下添加remotePath选项进行指定

1
remotePath:<您要部署的目录>

　　另外在创建阿里云OSS存储桶（Bucket）时，应将存储权限设置为公共读。如果碰到网站菜单点击没反应，比如点击归档、友链等，但在本地测试又是好的，一般都是OSS基础设置中的子目录首页功能没有开始，开启功能即可。

注：本人在用 Git Bash 直接部署时会出现错误，仍未解决，目前采用的方法是generate后使用 ossbrowser 图形化工具把public目录手动上传到 Bucket 根目录，虽然比起hexo g -d来说确实麻烦了些，不过也是一种可用的方法吧。

腾讯云主机部署hexo博客

　　参考：腾讯云主机部署hexo博客 - _杰杰_ - CSDN

Hexo常用插件

hexo-autonofollow

Github：https://github.com/liuzc/hexo-autonofollow

简介：自动为站外链接添加nofollow属性

安装：

1
$ npm install hexo-autonofollow --save

配置：

在博客配置文件_config.yml中添加

1
2
3
4
5
nofollow:
  enable: true
  exclude:
    - exclude1.com
    - exclude2.com
  • enable - 是否启用
  • exclude - 排除域名

hexo-baidu-url-submit

Github：https://github.com/huiwang/hexo-baidu-url-submit

简介：主动推送Hexo博客新链接至百度搜索引擎，解决百度爬虫被禁止访问的问题，提升网站收录质量和速度。

安装：

1
$ npm install hexo-baidu-url-submit --save

配置：

在博客配置文件_config.yml中添加

1
2
3
4
5
baidu_url_submit:
  count: 1 ## 提交最新的一个链接
  host: blog.cofess.com ## 在百度站长平台中注册的域名
  token: your_token ## 请注意这是您的秘钥， 所以请不要把博客源代码发布在公众仓库里!
  path: baidu_urls.txt ## 文本文档的地址， 新链接会保存在此文本文档里
  • token - 您得注册百度站长工具，然后在工具->网页抓取->链接提交里找到你的密匙。

其次，_config.ym文件中url的值， 必须是百度站长平台注册的域名， 比如:

1
2
3
4
# URL
url: blog.cofess.com
root: /
permalink: :year/:month/:day/:title/

最后，加入新的deployer:

1
2
deploy:
- type: baidu_url_submitter

执行hexo deploy的时候，新的链接就会被推送百度了。

hexo-generator-feed

Github：https://github.com/hexojs/hexo-generator-feed

简介：RSS的生成插件，你可以在配置显示你站点的RSS，文件路径\atom.xml。

安装：

1
$ npm install hexo-generator-feed --save

配置：

在博客配置文件_config.yml中添加

1
2
3
4
5
6
feed:
  type: atom
  path: atom.xml
  limit: 20
  hub:
  content:
  • type - Feed type. (atom/rss2)
  • path - Feed path. (Default: atom.xml/rss2.xml)
  • limit - Maximum number of posts in the feed (Use 0 or false to show all posts)
  • hub - URL of the PubSubHubbub hubs (Leave it empty if you don’t use it)
  • content - (optional) set to ‘true’ to include the contents of the entire post in the feed.

hexo-generator-sitemap

Github：https://github.com/hexojs/hexo-generator-sitemap

简介：生成博客的sitemap。

安装：

1
$ npm install hexo-generator-sitemap --save

配置：

在博客配置文件_config.yml中添加

1
2
sitemap:
    path: sitemap.xml

hexo-generator-baidu-sitemap

Github：https://github.com/coneycode/hexo-generator-baidu-sitemap

简介：生成博客的sitemap（针对百度）。

安装：

1
$ npm install hexo-generator-baidu-sitemap --save

配置：

在博客配置文件_config.yml中添加

1
2
baidusitemap:
path: baidusitemap.xml

hexo-generator-json-content

Github：https://github.com/alexbruno/hexo-generator-json-content

简介：用于生成静态站点数据，提供搜索功能的数据源。

安装：

1
$ npm install hexo-generator-json-content --save

配置：

在博客配置文件_config.yml中添加

1
2
3
4
5
6
7
jsonContent:
  ignore:
    - path/to/a/page
    - url/to/one/post
    - an-entire-category
    - specific.file
    - .ext # a file extension

hexo-neat

Github：https://github.com/rozbo/hexo-neat

简介：自动压缩html、css、js代码

安装：

1
$ npm install hexo-neat --save

配置：

在博客配置文件_config.yml中添加

1
neat_enable: true

压缩html代码

1
2
3
neat_html:
  enable: true
  exclude:

压缩CSS

1
2
3
4
neat_css:
  enable: true
  exclude:
    - '*.min.css'

压缩JS

1
2
3
4
5
6
7
neat_js:
  enable: true
  mangle: true
  output:
  compress:
  exclude:
    - '*.min.js'

hexo-translate-title

Github：https://github.com/cometlj/hexo-translate-title

简介：使用Google翻译，百度翻译和有道翻译将Hexo文章中的汉字标题转成英文标题

安装：

1
$ npm install hexo-translate-title --save

配置：

在博客配置文件_config.yml中添加

1
2
3
4
5
6
translate_title:
  translate_way: google    #google | baidu | youdao
  youdao_api_key: XXX
  youdao_keyfrom: XXX
  is_need_proxy: true     #true | false
  proxy_url: http://localhost:4000

注意：判断是否需要配置google本地代理，如果没有被墙，请将_config.yml下的is_need_proxy: true改为false。如果设置为true,请设置本地代理地址

hexo-wordcount

Github：https://github.com/willin/hexo-wordcount

简介：为文章添加文章字数统计、文章预计阅读时间

安装：

1
$ npm install hexo-wordcount --save

使用：

通过以上安装后，你可以在你的模板文件加入以下相关的标签实现本插件的功能
字数统计:WordCount
阅读时长预计:Min2Read
总字数统计: TotalCount

hexo-generator-restful

Github：https://github.com/yscoder/hexo-generator-restful

简介：RESTful JSON数据生成插件。

安装：

1
$ npm install hexo-generator-restful --save

配置：

以下为默认配置，属性值为 false 表示不生成。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
restful:
  # site 可配置为数组选择性生成某些属性
  # site: ['title', 'subtitle', 'description', 'author', 'since', email', 'favicon', 'avatar']
  site: true        # hexo.config mix theme.config
  posts_size: 10    # 文章列表分页，0 表示不分页
  posts_props:      # 文章列表项的需要生成的属性
    title: true
    slug: true
    date: true
    updated: true
    comments: true
    path: true
    excerpt: false
    cover: true      # 封面图，取文章第一张图片
    content: false
    keywords: false
    categories: true
    tags: true
  categories: true  # 分类数据
  tags: true        # 标签数据
  post: true        # 文章数据
  pages: false      # 额外的 Hexo 页面数据, 如 About

摘自：Hexo博客常用插件及用法 - Cofess

Pure主题介绍及安装

　　详见：Hexo博客主题pure使用说明

备份：

Hexo表格前出现大量空白问题

　　摘自 Hexo中插入HTML表格出现过多空白的解决办法 - dta0502 - CSDN
　　Hexo中插入HTML表格会留出大量空白。虽然markdown语法也是可以生成表格的，但是不支持合并表格等样式。

解决方法1

　　将代码改为紧凑模式，也就是说代码标签之间不要留白，全部改为紧贴着的。修改代码如下：

1
<table><tr><th>姓名</th><th>性别</th></tr><tr><td>冰羽</td><td>男</td></tr></table>

　　我们还可以利用这个 Table Generator 在线工具来编辑表格，提供了html表格和markdown表格来生成用于hexo的表格。

　　个人整理的本地 Markdown Tables generator-TablesGenerator_com

解决方法2(推荐)

　　我们可以利用raw格式来包起表格。

1
2
3
{% raw %}
html tags & content
{% endraw %}

1
2
3
4
5
6
7
8
9
10
11
12
{% raw %}  
<table>
  <tr>
    <th>姓名</th>
    <th>性别</th>
  </tr>
  <tr>
    <td>小明</td>
    <td>男</td>
  </tr>
</table>
{% endraw %}


布满灰尘的分割线…


190601

　　本段整改自 hexo史上最全搭建教程 - zjufangzh - CSDN 。

Hexo简介

　　Hexo是一款基于Node.js的静态博客框架，依赖少易于安装使用，可以方便的生成静态网页托管在GitHub和Coding上，是搭建博客的首选框架。大家可以进入Hexo官网进行详细查看，因为Hexo的创建者是台湾人，对中文的支持很友好，可以选择中文进行查看。

教程分三个部分：

  • 第一部分：Hexo的初级搭建还有部署到Github Page上，以及个人域名的绑定。
  • 第二部分：Hexo的基本配置，更换主题，实现多终端工作，以及在Coding Page部署实现国内外分流
  • 第三部分：Hexo添加各种功能，包括搜索的SEO，阅读量统计，访问量统计和评论系统等。

第一部分

　　Hexo的初级搭建还有部署到Github Page上，以及个人域名的绑定。

Hexo简介

　　Hexo是一款基于Node.js的静态博客框架，依赖少易于安装使用，可以方便的生成静态网页托管在GitHub和Coding上，是搭建博客的首选框架。大家可以进入Hexo官网进行详细查看，因为Hexo的创建者是台湾人，对中文的支持很友好，可以选择中文进行查看。

Hexo搭建步骤

  1. 安装Git
  2. 安装Node.js
  3. 安装Hexo
  4. GitHub创建个人仓库
  5. 生成SSH添加到GitHub
  6. 将Hexo部署到GitHub
  7. 设置个人域名
  8. 发布文章

1. 安装Git

　　Git是目前世界上最先进的分布式版本控制系统，可以有效、高速的处理从很小到非常大的项目版本管理。也就是用来管理你的Hexo博客文章，上传到GitHub的工具。Git非常强大，我觉得建议每个人都去了解一下。廖雪峰老师的Git教程 写的非常好，大家可以了解一下。

　　Windows：到 Git官网 上下载，下载后会有一个Git Bash的命令行工具，以后就用这个工具来使用Git。如果习惯使用Git Bash的小伙伴不要忘了在安装时勾选右键菜单添加Git Bash选项哦，Git GUI看个人喜好，用不着的不用加。

　　Linux：对Linux来说实在是太简单了，因为最早的Git就是在Linux上编写的，只需要一行代码：

1
sudo apt-get install git

　　安装好后，用git --version来查看一下版本：

1
git version 2.20.1.windows.1

2. 安装Node.js

　　Hexo是基于Node.js编写的，所以需要安装一下Node.js和里面的npm工具。

　　Windows：Node.js 选择LTS版本就行了。

　　Linux：

1
2
sudo apt-get install nodejs
sudo apt-get install npm

　　安装完后，打开命令行：

1
2
3
4
node -v
v12.18.2
npm -v
6.14.5

　　检查一下有没有安装成功。

　　顺便说一下，Windows在Git安装完后，就可以直接使用Git Bash来敲命令行了，不用自带的cmd，cmd有点难用。

3. 安装Hexo

　　前面Git和Node.js安装好后，就可以安装Hexo了，你可以先创建一个文件夹Blog，然后cd到这个文件夹下（或者在这个文件夹下直接右键Git Bash打开）。

　　输入命令（注意大小写）：

1
npm install -g hexo-cli

　　依旧用Hexo -v查看一下版本：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
hexo: 3.3.9
hexo-cli: 4.2.0
os: Windows_NT 6.1.7601 win32 x64
node: 12.18.2
v8: 7.8.279.23-node.39
uv: 1.38.0
zlib: 1.2.11
brotli: 1.0.7
ares: 1.16.0
modules: 72
nghttp2: 1.41.0
napi: 6
llhttp: 2.0.4
http_parser: 2.9.3
openssl: 1.1.1g
cldr: 37.0
icu: 67.1
tz: 2019c
unicode: 13.0

　　至此就全部安装完了。

　　接下来初始化一下Hexo：

1
Hexo init myblog

　　这个myblog可以自己取什么名字都行，然后：

1
2
cd myblog
npm install

　　新建完成后，指定文件夹目录下有：

  • node_modules：依赖包
  • public：存放生成的页面
  • scaffolds：生成文章的一些模板
  • source：用来存放你的文章
  • themes：主题
  • _config.yml：博客的配置文件
    1
    2
    Hexo g      //Hexo generate
    Hexo s      //Hexo server

　　打开Hexo的服务，在浏览器输入localhost:4000就可以看到你生成的博客了。使用ctrl+c可以把服务关掉。

4. GitHub创建个人仓库

　　首先，你先要有一个GitHub账户，去注册一个吧。

　　注册完登录后，在GitHub.com中看到一个New repository，新建仓库，创建一个和你用户名相同的仓库，后面加.github.io，只有这样，将来要部署到GitHub Page的时候，才会被识别，也就是xxxx.github.io，其中xxx就是你注册GitHub的用户名。点击Create Repository，生成仓库。

5. 生成SSH添加到GitHub

　　回到你的Git Bash中：

1
2
git config --global user.name "yourname"
git config --global user.email "youremail"

　　这里的yourname输入你的GitHub用户名，youremail输入你GitHub的邮箱。这样GitHub才能知道你是不是对应它的账户。

　　可以用以下两条，检查一下你有没有输对：

1
2
git config user.name
git config user.email

　　然后创建SSH，一路回车：

1
ssh-keygen -t rsa -C "youremail"

　　这个时候它会告诉你已经生成了.ssh的文件夹。在你的电脑中找到这个文件夹。

　　SSH，简单来讲，就是一个秘钥，其中，id_rsa是你这台电脑的私人秘钥，不能给别人看的，id_rsa.pub是公共秘钥，可以随便给别人看。把这个公钥放在GitHub上，这样当你链接GitHub自己的账户时，它就会根据公钥匹配你的私钥，当能够相互匹配时，才能够顺利的通过Git上传你的文件到GitHub上。

　　而后在GitHub的Setting中，找到SSH Keys的设置选项，点击New SSH Key把你的id_rsa.pub里面的信息复制进去。

　　在Git Bash中，查看是否成功：

1
ssh -T git@github.com

6. 将Hexo部署到GitHub

　　这一步，我们就可以将Hexo和GitHub关联起来，也就是将Hexo生成的文章部署到GitHub上，打开站点配置文件_config.yml，翻到最后，修改为YourGithubName，就是你的GitHub账户。

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

　　这个时候需要先安装deploy-git，也就是部署的命令,这样你才能用命令部署到GitHub。

1
npm install Hexo-deployer-git --save

　　然后：

1
2
3
4
Hexo clean
//Hexo g -d
Hexo generate
Hexo deploy

　　其中Hexo clean清除了你之前生成的东西，也可以不加。
　　Hexo generate顾名思义，生成静态文章，可以用Hexo g缩写
　　Hexo deploy部署文章，可以用Hexo d缩写

　　注意deploy时可能要你输入username和password。

　　部署成功后，过一会儿就可以在http://yourname.github.io这个网站看到你的博客了！！

7. 设置个人域名

　　现在你的个人网站的地址是yourname.github.io，如果觉得这个网址逼格不太够，这就需要你设置个人域名了。但是需要花钱。

　　注册一个阿里云账户，在阿里云上买一个域名，各个后缀的价格不太一样，比如最广泛的.com就比较贵，看个人喜好咯。

　　你需要先去进行实名认证,然后在域名控制台中，看到你购买的域名。点解析进去，添加解析。其中，192.30.252.153和192.30.252.154是GitHub的服务器地址。注意，解析线路选择默认，不要选境外，境外是来做国内外分流用的，在后面的博客中会讲到。

　　登录GitHub，进入之前创建的仓库，点击settings，设置Custom domain，输入你的域名，然后在你的博客文件source中创建一个名为CNAME文件，不要后缀，写上你的域名。

　　最后，在Git Bash中，输入：

1
2
3
Hexo clean
Hexo g
Hexo d

　　过不了多久，再打开你的浏览器，输入你自己的域名，就可以看到搭建的网站啦！

　　接下来你就可以正式开始写文章了。

1
Hexo new newpapername

　　然后在source/_post中打开markdown文件，就可以开始编辑了。当你写完的时候，再：

1
2
3
Hexo clean
Hexo g
Hexo d

　　就可以看到更新了。

第二部分

　　Hexo的基本配置，更换主题，实现多终端工作，以及在Coding Page部署实现国内外分流。

1. Hexo基本配置

　　在文件根目录下的_config.yml，就是整个Hexo框架的配置文件了。可以在里面修改大部分的配置。详细可参考官方的配置描述。

网站

参数 描述
title 网站标题
subtitle 网站副标题
description 网站描述
author 您的名字
language 网站使用的语言
timezone 网站时区。Hexo 默认使用您电脑的时区：时区列表。比如说：America/New_York,Japan,和UTC。

　　其中，description主要用于SEO，告诉搜索引擎一个关于您站点的简单描述，通常建议在其中包含您网站的关键词。`author参数用于主题显示文章的作者。

网址

参数 描述
url 网址
root 网站根目录
permalink 文章的 永久链接 格式
permalink_defaults 永久链接中各部分的默认值

　　在这里，你需要把url改成你的网站域名。

　　permalink，也就是你生成某个文章时的那个链接格式。

　　比如我新建一个文章叫temp.md，那么这个时候他自动生成的地址就是http://yoursite.com/2018/09/05/temp。

　　以下是官方给出的示例，关于链接的变量还有很多，需要的可以去官网上查找 永久链接 。

参数 结果
:year/:month/:day/:title/ 2013/07/14/hello-world
:year-:month-:day-:title.html 2013-07-14-hello-world.html
:category/:title foo/bar/hello-world

　　再往下翻，中间这些都默认就好了。

1
2
3
4
5
6
7
8
theme: landscape

# Deployment
## Docs: https://Hexo.io/docs/deployment.html
deploy:
  type: git
  repo: <repository url>
  branch: [branch]

　　theme就是选择什么主题，也就是在theme这个文件夹下，在官网上有很多个主题，默认给你安装的是lanscape这个主题。当你需要更换主题时，在官网上下载，把主题的文件放在theme文件夹下，再修改这个参数就可以了。

　　接下来这个deploy就是网站的部署的，repo就是仓库(Repository)的简写。branch选择仓库的哪个分支。这个在之前进行Github Page部署的时候已经修改过了，不再赘述。而这个在后面进行双平台部署的时候会再次用到。

Front-matter

　　Front-matter 是文件最上方以 — 分隔的区域，用于指定个别文件的变量，举例来说：

1
2
3
title: Hello World
date: 2013/7/13 20:46:25
---

　　下是预先定义的参数，您可在模板中使用这些参数值并加以利用。

参数 描述
layout 布局
title 标题
date 建立日期
updated 更新日期
comments 开启文章的评论功能
tags 标签（不适用于分页）
categories 分类（不适用于分页）
permalink 覆盖文章网址

　　其中，分类和标签需要区别一下，分类具有顺序性和层次性，也就是说Foo,Bar不等于Bar,Foo；而标签没有顺序和层次。

1
2
3
4
5
categories:
- Diary
tags:
- PS3
- Games

layout（布局）

　　当你每一次使用代码Hexo new paper，它其实默认使用的是post这个布局，也就是在source文件夹下的_post里面。

　　Hexo 有三种默认布局：post、page和draft，它们分别对应不同的路径，而您自定义的其他布局和post相同，都将储存到source/_posts文件夹。

布局 路径
post source/_posts
page source
draft source/_drafts

　　而new这个命令其实是：

1
Hexo new [layout] <title>

　　只不过这个layout默认是post罢了。

page

　　如果你想另起一页，那么可以使用：

1
Hexo new page board

　　系统会自动给你在source文件夹下创建一个board文件夹，以及board文件夹中的index.md，这样你访问的board对应的链接就是http://xxx.xxx/board。

draft

　　draft是草稿的意思，也就是你如果想写文章，又不希望被看到，那么可以：

1
Hexo new draft newpage

　　这样会在source/_draft中新建一个newpage.md文件，如果你的草稿文件写的过程中，想要预览一下，那么可以使用：

1
Hexo server --draft

　　在本地端口中开启服务预览。

　　如果你的草稿文件写完了，想要发表到post中：

1
Hexo publish draft newpage

　　就会自动把newpage.md发送到post中。

2. 更换主题

　　到这一步，如果你觉得默认的landscape主题不好看，那么可以在 官网的主题 中，选择你喜欢的一个主题进行修改就可以啦。这里有200多个主题可以选。不过最受欢迎的就是那么几个，比如NexT主题，非常的简洁好看，大多数人都选择这个，关于这个的教程也比较多。

　　直接在Github链接上下载下来，然后放到theme文件夹下就行了，然后再在刚才说的配置文件中把theme换成那个主题文件夹的名字，它就会自动在theme文件夹中搜索你配置的主题。

　　而后进入下载的主题文件夹，可以看到里面也有一个配置文件_config.xml，这个配置文件是修改你整个主题的配置文件。

添加RSS

1. 什么是RSS？

　　RSS也就是订阅功能，你可以理解为类似与订阅公众号的功能，来订阅各种博客，杂志等等。

2. 为什么要用RSS？

　　就如同订阅公众号一样，你对某个公众号感兴趣，你总不可能一直时不时搜索这个公众号来看它的文章吧。博客也是一样，如果你喜欢某个博主，或者某个平台的内容，你可以通过RSS订阅它们，然后在RSS阅读器上可以实时推送这些消息。现在网上的垃圾消息太多了，如果你每一天都在看这些消息中度过，漫无目的的浏览，只会让你的时间一点一点的流逝，太不值得了。如果你关注的博主每次都发的消息都是精华，而且不是每一天十几条几十条的轰炸你，那么这个博主就值得你的关注，你就可以通过RSS订阅他。

　　在我的理解中，如果你不想每天都被那些没有质量的消息轰炸，只想安安静静的关注几个博主，每天看一些有质量的内容也不用太多，那么RSS订阅值得你的拥有。

3. 添加RSS功能

　　先安装RSS插件：

1
npm i Hexo-generator-feed

　　而后在你整个项目的_config.yml中找到Extensions，添加：

1
2
3
4
5
6
7
8
9
10
# Extensions
## Plugins: https://Hexo.io/plugins/
#RSS订阅
plugin:
- Hexo-generator-feed
#Feed Atom
feed:
  type: atom
  path: atom.xml
  limit: 20

　　这个时候你的RSS链接就是 域名/atom.xml了。

　　所以，在主题配置文件中的这个social links，开启RSS的页面功能，这样你网站上就有那个像wifi一样符号的RSS logo了，注意空格。

1
rss: /atom.xml

4. 如何关注RSS？

　　首先，你需要一个RSS阅读器，在这里我推荐inoreader，宇宙第一RSS阅读器，而且中文支持的挺好。不过它没有PC端的程序，只有网页版，Chrome上有插件。在官网上用Google账号或者自己注册账号登录，就可以开始你的关注之旅了。

　　每次需要关注某个博主时，就点开他的RSS链接，把链接复制到inoreader上，就能关注了，当然，如果是比较大众化的很厉害的博主，你直接搜名字也可以的，比如每个人都非常佩服的阮一峰大师，直接在阅读器上搜索阮一峰，应该就能出来了。

　　在安卓端，inoreader也有下载，不过因为国内Google是登录不了的，你需要在inoreader官网上把你的密码修改了，然后就可以用账户名和密码登录了。

　　在IOS端，没用过，好像是reader 3可以支持inoreader账户，还有个readon也不错，可以去试试。

widgets(侧边栏)

　　侧边栏的小标签，如果你想自己增加一个，比如我增加了一个联系方式，那么我把communication写在上面，在zh-CN.yml中的sidebar，添加communication: '中文'。

然后在hueman/layout/widget中添加一个communicaiton.ejs，填入模板：

1
2
3
4
5
6
7
8
<% if (site.posts.length) { %>
    <div class="widget-wrap widget-list">
        <h3 class="widget-title"><%= __('sidebar.communiation') %></h3>
        <div class="widget">
            <!--这里添加你要写的内容-->
        </div>
    </div>
<% } %>

search(搜索框)

　　默认搜索框是不能够用的，

you need to install Hexo-generator-json-content before using Insight Search

　　它已经告诉你了，如果想要使用，就安装这个插件。

comment(评论系统)

　　这里的多数都是国外的，基本用不了。这个 valine 好像不错，还能统计文章阅读量，可以自己试一试。

miscellaneous(其他)

　　这里我就改了一个links，可以添加友链。注意空格要对！不然会报错！

总结：

　　整个主题看起来好像很复杂的样子，但是仔细捋一捋其实也比较流畅，

  • languages: 顾名思义。
  • layout：布局文件，其实后期想要修改自定义网站上的东西，添加各种各样的信息，主要是在这里修改，其中comment是评论系统，common是常规的布局，最常修改的在这里面，比如修改页面head和footer的内容。
  • scripts：js脚本，暂时没什么用。
  • source：里面放了一些css的样式，以及图片。此文件夹在generate时会直接生成到网站根目录。

3. git分支进行多终端工作

　　问题来了，如果你现在在自己的笔记本上写的博客，部署在了网站上，那么你在家里用台式机，或者实验室的台式机，发现你电脑里面没有博客的文件，或者要换电脑了，最后不知道怎么移动文件，怎么办？

　　在这里我们就可以利用git的分支系统进行多终端工作了，这样每次打开不一样的电脑，只需要进行简单的配置和在github上把文件同步下来，就可以无缝操作了。

机制

　　机制是这样的，由于Hexo d上传部署到github的其实是Hexo编译后的文件，是用来生成网页的，不包含源文件。也就是上传的是在本地目录里自动生成的.deploy_git里面。其他文件，包括我们写在source里面的，和配置文件，主题文件，都没有上传到github，所以可以利用git的分支管理，将源文件上传到github的另一个分支即可。

上传分支

　　首先，先在github上新建一个Hexo分支，然后在这个仓库的settings中，选择默认分支为Hexo分支（这样每次同步的时候就不用指定分支，比较方便）。

　　然后在本地的任意目录下，打开Git Bash，

1
git clone git@github.com:ZJUFangzh/ZJUFangzh.github.io.git

　　将其克隆到本地，因为默认分支已经设成了Hexo，所以clone时只clone了Hexo。

　　接下来在克隆到本地的ZJUFangzh.github.io中，把除了.git文件夹外的所有文件都删掉

　　把之前我们写的博客源文件全部复制过来，除了.deploy_git。这里应该说一句，复制过来的源文件应该有一个.gitignore，用来忽略一些不需要的文件，如果没有的话，自己新建一个，在里面写上如下，表示这些类型文件不需要git：

1
2
3
4
5
6
7
.DS_Store
Thumbs.db
db.json
*.log
node_modules/
public/
.deploy*/

　　注意，如果你之前克隆过theme中的主题文件，那么应该把主题文件中的.git文件夹删掉，因为git不能嵌套上传，最好是显示隐藏文件，检查一下有没有，否则上传的时候会出错，导致你的主题文件无法上传，这样你的配置在别的电脑上就用不了了。

　　而后：

1
2
3
git add .
git commit –m "add branch"
git push

　　这样就上传完了，可以去你的github上看一看Hexo分支有没有上传上去，其中node_modules、public、db.json已经被忽略掉了，没有关系，不需要上传的，因为在别的电脑上需要重新输入命令安装。这样就上传完了。

更换电脑操作

　　一样的，跟之前的环境搭建一样。

　　安装Git：

1
sudo apt-get install git

　　设置Git全局邮箱和用户名：

1
2
git config --global user.name "yourgithubname"
git config --global user.email "yourgithubemail"

　　设置SSH Key：

1
2
3
4
5
ssh-keygen -t rsa -C "youremail"
#生成后填到github和coding上（有coding平台的话）
#验证是否成功
ssh -T git@github.com
ssh -T git@git.coding.net #(有coding平台的话)

　　安装Node.js：

1
2
sudo apt-get install nodejs
sudo apt-get install npm

　　安装Hexo：

1
sudo npm install Hexo-cli -g

　　但是已经不需要初始化了，直接在任意文件夹下：

1
git clone git@………………

　　然后进入克隆到的文件夹：

1
2
3
cd xxx.github.io
npm install
npm install Hexo-deployer-git --save

　　生成，部署：

1
2
Hexo g
Hexo d

　　然后就可以开始写你的新博客了：

1
Hexo new newpage

Tips:

　　不要忘了，每次写完最好都把源文件上传一下：

1
2
3
git add .
git commit –m "xxxx"
git push

　　如果是在已经编辑过的电脑上，已经有clone文件夹了，那么，每次只要和远端同步一下就行了：

1
git pull

4. Coding Page上部署实现国内外分流

　　之前我们已经把Hexo托管在Github了，但是Github是国外的，而且百度的爬虫是不能够爬取Github的，所以如果你希望你做的博客能够在百度引擎上被收录，而且想要更快的访问，那么可以在国内的Coding Page做一个托管，这样在国内访问就是Coding Page，国外就走Github Page。

1. 申请Coding账户，新建项目

　　先申请一个账户，然后创建新的项目，这一步项目名称应该是随意的。

2. 添加SSH Key

　　这一步跟github一样。添加后，检查一下是不是添加成功：

1
ssh -T git@git.coding.net

3. 修改_config.yml

　　Hexo官方文档是这样的：

1
2
3
4
5
6
deploy:
  type: git
  message: [message]
  repo:
    github: <repository url>,[branch]
    coding: <repository url>,[branch]

　　那么，我们只需要：

1
2
3
4
5
deploy:
  type: git
  repo: 
    coding: git@git.coding.net:ZJUFangzh/ZJUFangzh.git,master
    github: git@github.com:ZJUFangzh/ZJUFangzh.github.io.git,master

4. 部署

　　保存一下，直接：

1
2
Hexo g
Hexo d

　　这样就可以在coding的项目上看到你部署的文件了。

5. 开启coding pages服务，绑定域名

6. 阿里云添加解析

　　这个时候就可以把之前github的解析改成境外，把coding的解析设为默认了。

7. 去除coding page的跳转广告

　　Coding Page的一个比较恶心人的地方就是，你只是银牌会员的话，访问会先跳转到一个广告，再到你自己的域名。那么它也给出了消除的办法。右上角切换到Coding的旧版界面，默认新版是不行的。然后再来到Pages服务这里。

　　只要你在页面上添加一行文字，写Hosted by Coding Pages，然后点下面的小勾勾，两个工作日内它就会审核通过了。

1
<p>Hosted by <a href="https://pages.coding.me" style="font-weight: bold">Coding Pages</a></p>

　　我的选择是把这一行代码放在主题文件夹/layout/common/footer.ejs里面，也就是本来在页面中看到的页脚部分。当然，为了统一，我又在后面加上了and Github哈哈，可以不加。

1
<p><span>Hosted by <a href="https://pages.coding.me" style="font-weight: bold">Coding Pages</a></span> and <span><a href="https://github.com" style="font-weight: bold">Github</a></span></p>

　　这是最终加上去的代码。

第三部分

　　Hexo添加各种功能，包括搜索的SEO，阅读量统计，访问量统计和评论系统等。

　　本文参考了：visugar.com （链接已失效）这里面说的很详细了。

1. SEO优化

　　推广是很麻烦的事情，怎么样别人才能知道我们呢，首先需要让搜索引擎收录你的这个网站，别人才能搜索的到。那么这就需要SEO优化了。

　　SEO是由英文Search Engine Optimization缩写而来， 中文意译为“搜索引擎优化”。SEO是指通过站内优化比如网站结构调整、网站内容建设、网站代码优化等以及站外优化。

百度SEO

　　刚建站的时候是没有搜索引擎收录我们的网站的。可以在搜索引擎中输入site:<域名>来查看一下。

1. 登录百度站长平台添加网站

　　登录 百度站长平台，在站点管理中添加你自己的网站。

　　验证网站有三种方式：文件验证、HTML标签验证、CNAME验证。

　　第三种方式最简单，只要将它提供给你的那个xxxxx使用CNAME解析到xxx.baidu.com就可以了。也就是登录你的阿里云，把这个解析填进去就OK了。

2. 提交链接

　　我们需要使用npm自动生成网站的sitemap，然后将生成的sitemap提交到百度和其他搜索引擎

1
2
npm install Hexo-generator-sitemap --save     
npm install Hexo-generator-baidu-sitemap --save

　　这时候你需要在你的根目录下_config.xml中看看url有没有改成你自己的，重新部署后，就可以在public文件夹下看到生成的sitemap.xml和baidusitemap.xml了。然后就可以向百度提交你的站点地图了。这里建议使用自动提交。

　　自动提交又分为三种：主动推送、自动推送、sitemap。可以三个一起提交不要紧，我选择的是后两种。

  • 自动推送：把百度生成的自动推送代码，放在主题文件/layout/common/head.ejs的适当位置，然后验证一下就可以了。
  • sitemap：把两个sitemap地址，提交上去，看到状态正常就OK了。

PS：百度收录比较慢，慢慢等个十天半个月再去site:<域名>看看有没有被收录。

Google的SEO

　　流程一样，Google更简单，而且收录更快，进入google站点地图，提交网站和sitemap.xml，就可以了。

　　如果你这个域名在Google这里出了问题，那你就提交 yourname.github.io，这个链接，效果是一样的。不出意外的话一天内Google就能收录你的网站了。

　　其他的搜索，如搜狗搜索，360搜索，流程是一样的，这里就不再赘述。

2. 评论系统

3. 添加百度统计

　　百度统计 可以在后台上看到你网站的访问数，浏览量，浏览链接分布等很重要的信息。所以添加百度统计能更有效的让你掌握你的网站情况。这里的账号和百度账号不是一起的。

　　照样把代码复制到head.ejs文件中，然后再进行一下安装检查，半小时左右就可以在百度统计里面看到自己的网站信息了。

4. 文章阅读量统计leanCloud

　　leanCloud，进去后注册一下，进入后创建一个应用：在存储中创建Class，命名为Counter,然后在设置页面看到你的应用Key，在主题的配置文件中：

1
2
3
4
leancloud_visitors:
  enable: true
  app_id: 你的id
  app_key: 你的key

　　在article.ejs中适当的位置添加如下，这要看你让文章的阅读量统计显示在哪个地方了，

1
阅读数量:<span id="<%= url_for(post.path) %>" class="leancloud_visitors" data-flag-title="<%- post.title %>"></span>次

　　然后在footer.ejs的最后，添加：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<script src="//cdn1.lncld.net/static/js/2.5.0/av-min.js"></script>
<script>
    var APP_ID = '你的app id';
    var APP_KEY = '你的app key';
    AV.init({
        appId: APP_ID,
        appKey: APP_KEY
    });
    // 显示次数
    function showTime(Counter) {
        var query = new AV.Query("Counter");
        if($(".leancloud_visitors").length > 0){
            var url = $(".leancloud_visitors").attr('id').trim();
            // where field
            query.equalTo("words", url);
            // count
            query.count().then(function (number) {
                // There are number instances of MyClass where words equals url.
                $(document.getElementById(url)).text(number?  number : '--');
            }, function (error) {
                // error is an instance of AVError.
            });
        }
    }
    // 追加pv
    function addCount(Counter) {
        var url = $(".leancloud_visitors").length > 0 ? $(".leancloud_visitors").attr('id').trim() : 'icafebolger.com';
        var Counter = AV.Object.extend("Counter");
        var query = new Counter;
        query.save({
            words: url
        }).then(function (object) {
        })
    }
    $(function () {
        var Counter = AV.Object.extend("Counter");
        addCount(Counter);
        showTime(Counter);
    });
</script>

　　重新部署后就可以了。

5. 引入不蒜子访问量和访问人次统计

　　不蒜子 的添加非常非常方便，在footer.ejs中的合适位置，看你要显示在哪个地方，添加：

1
2
3
4
<!--这一段是不蒜子的访问量统计代码-->
<script async src="//dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js"></script>
<span id="busuanzi_container_site_pv">本站总访问量<span id="busuanzi_value_site_pv"></span>次 &nbsp;   </span>
<span id="busuanzi_container_site_uv">访客数<span id="busuanzi_value_site_uv"></span>人次</span>

　　就可以了。

总结

　　到这里就基本做完了。如果你希望设置别的主题，那么仔细看一下这个主题的代码结构，也能够把上边的功能添加进去。

　　多看看别的博主的那些功能，如果有你能找到自己喜欢的功能，那么好好发动搜索技能，很快就能找到怎么做了。加油吧！


稍显局促的分割线…


180115

  1. 安装Git Bash
  2. 安装Node.js
  3. 安装Hexo
  4. 生成SSH并添加到Github
  5. 部署项目
  6. 上传到Github
  7. 绑定个人域名
  8. 修改及配置主题
  9. 添加RSS
  10. 添加评论
  11. 写文章部分

前言

　　这是在博客建立后约3个月写的，拖的有些久了。

　　本来是想自己把那一周多的折腾写一遍的，不过网上关于这方面的博客太多了，而且好的文章不在少数，自己当初也是根据他们的流程做的，所以在此就不再赘述了，大家可以自行百度。

摸索

1.Hexo常用命令

1
2
3
4
5
　　Hexo clean 清除上次生成的版本(建议每次生成之前清理一次)
　　Hexo g 相当于 Hexo generate
　　Hexo d 相当于 Hexo deploy
　　Hexo g -d(一般就用这个)相当于先generat再deploy
　　Hexo s 相当于 Hexo server 在本地 http://localhost:4000 生成预览

2.Git常用命令

1
2
3
4
5
　　git init 初始化
　　git clone git@github.com:name/aaa.git 将库复制到本地
　　git add -A 添加全部文件
　　git commit -m "add.." 设置信息
　　git push origin master 上传到主分支

　　一般这几条命令就够了，当然你如果想系统的学一下Git：
　
　　　Git教程 - 廖雪峰
　　　K_Hexo_Git常用命令 - MengZeATY 　

3.发布不更新问题

　　有时候明明改了某些地方，generate时却提示“0 files changed”，而且发布后博客无变化

　　用Hexo clean或手动删除Hexo目录下的public文件夹，以及.deploy_git文件夹，然后Hexo g -d重新生成发布一遍。

　　GH1 　

4.定制问题(yilia)

　　首先，source文件夹里面是存放的文章的md文件。

　　对于 yilia主题 来说(感觉大部分主题都差不多吧)：

　　　1) 在source文件夹下的东西基本上会原封不动的直接放到Github上，也就是说可以当作网站的根目录。

　　　GH2

　　　2) 在layout文件夹中的_partial文件夹下是各个页面的ejs文件，梦泽是直接把它们当成html改的，语法还是html的语法，只不过添加了ejs的一些解释符号，而具体的样式是在source文件夹下的main.css里面，改起来还是挺方便的。

　　　3) 在yilia文件夹中的config文件是作者给提供的一些接口，如果你不像梦泽这样有强烈的定制欲望的话，修改config文件就已经足够了。

　　　4) 若想在移动端显示目录，在yilia文件夹中的source-src中的js里的mobile.scss中修改.wrap-side-operation的display改为block，若不行则再在source文件夹中的main.507b3a.css中修改同样的地方即可。 　

5.域名绑定问题

1.申请个人域名
　　首先得先拥有一个自己的域名，我用的是阿里云里买的一个以 .tech 为后缀的域名 linshuhe.tech，一年5块钱（够用就好，假如你非要话上百块钱买个.com后缀的也是可以的）。

2.DNS修改
　　在阿里云的控制台（你购买域名的管理后台）中，打开域名控制台->基本管理->DNS修改。
　　默认的域名DNS使用的是万网DNS：dns29.hichina.com和dns30.hichina.com。

3.域名添加DNS解析
　　github官网提供的两个主机ip地址：192.30.252.153和192.30.252.153，将这两个作为主机地址，给域名的DNS解析添加两个A记录，然后再添加一个 CNAME记录主机地址填的是我们原本用来访问github博客的地址：githubname.github.io。

4.创建 CNAME 文件
　　在hexo本地目录source目录下面新建一个文件，取名为CNAME(无后缀)，内容就是上面所说到的自己的域名如下：

1
linshuhe.tech

　　运行hexo指令使配置修改起效：

1
2
hexo g  //会在public中生成一个CNAME文件
hexo d  //修改内容提交到github博客上

5.域名绑定
　　这是比较重要的一步，打开博客在Github中的地址，然后切换到 Settings页，设置Custom domain内容为我们自己的域名值（例如：我的域名是linshuhe.tech），点击Save按钮保存：

　　假如设置成功，此时在浏览器中输入我们的域名可以看到正确的结果，假如出现404错误，则表示上述的操作有不正确的地方。

　　摘自 Hexo个人免费博客(五) 使用自己的域名 - 河乐不为 - CSDN 。
　　PS：原文所有CNAME为GNAME，正确应为CNAME。

个人总结一下
　　　1) 设置DNS服务器为你所购买的服务器地址(在阿里买的话还需要实名认证，否则可能serverhold不给解析)

　　　2) 在DNS解析添加两个A记录，主机记录为@，记录值为Github主机IP:192.30.252.153和192.30.252.154

　　　3) 再添加一个CNAME记录，主机记录为www，记录值为name.github.io

　　　4) 创建一个写着你购买的域名的CNAME文件(无后缀)放到网站根目录(即放到主题文件夹中的source文件夹下并生成发布 g -d)

　　　5) 到Github中你的name.github.io里的Setting页，填写Custom domain为自己的域名，然后保存

6.将博客同步到Coding.net上以解决Github屏蔽百度爬虫的问题

　　参照 将Hexo博客同时托管到Github和Coding ，原文失效可访问本文新节 4. Coding Page上部署实现国内外分流 。

　　还有一个问题就是Coding上绑定域名后会有一个跳转页，解决方法就是把他给的推广字段放到自己网站上，然后提交审核，一般放到footer里就可以。

　　GH3

　　等它审核完后再去做sitmap或用百度/谷歌抓就不会出现重定向问题了。

7.Coding提示：Authentication failed! 认证失败，请确认您输入了正确的账号密码

　　Win10系统：打开控制面板并在搜索框中输入：凭据管理，点击进入，选择 Windows 凭据，在普通凭据里选择你想要的删除的凭据，然后再在git命令行中重新拉取即可。

8.百度爬虫抓取失败问题A

　　这是本人碰到的一个问题，就是明明已经把域名绑定到Coding了，DNS默认也给了Coding，可百度抓出来的死活就是153/154的Github的IP。

　　最后发现是在Hexo的config文件里的root url设置到了name.github.io，改成自己的域名就可以了，没有域名的话就改到Coding的pages链接。

9.ERROR Plugin load failed: hexo-deployer-git

　　解决方案：执行命令npm install hexo-deployer-git --save

10.ERROR Plugin load failed: hexo-generator-json-content

　　解决方案：把node升级到6.0版本及以上；然后执行命令npm i hexo-generator-json-content --save

11.打开新文件时为中文乱码

　　如本文开头Pure主题的介绍文件，用UTF-8-BOM编码保存后再打开就可以了，亲测有效（Chrome）。

12.添加返回顶部按钮

　　（Pure主题）在nav.js中加入以下代码：

1
<li><a href="javascript:window.scrollTo(0,0)">&nbsp;&nbsp;&nbsp;[&nbsp;返回顶部&nbsp;]</a></li>

个人感觉比较好的图床

　　微博图床：上传图片到Sina微博的相册，然后右键复制图片地址使用。