这可能是迄今为止最全的hexo博客搭建教程

转自:程序员小明

背景

喜欢写 Blog 的人,会经历三个阶段。 第一阶段,刚接触 Blog,觉得很新鲜,试着选择一个免费空间来写。 第二阶段,发现免费空间限制太多,就自己购买域名和空间,搭建独立博客。 第三阶段,觉得独立博客的管理太麻烦,最好在保留控制权的前提下,让别人来管,自己只负责写文章。

这是阮一峰在博客中写到的关于 Blog 的想法,而这里的第三阶段的实现就是利用 GitHub Pages 搭建博客。

使用 GitHub Pages 功能搭建博客的好处有:

  • 免费,GitHub 提供无限流量。
  • 都是静态文件,世界各地都有理想的访问速度。(访问速度可以进一步优化)
  • 拥有绝对的管理权,又享受 Git 的版本管理功能,不用担心文章遗失。

Hexo 是基于 Node.js 的一款静态博客框架,如果想要搭建博客,不想自己写页面的话可以考虑用 Hexo,其中有很多的简洁主题可供选择,同时 Hexo 支持 Markdown 语法,编辑文章更加方便,快捷。

注:此篇分享还以 Mac 为例哈

环境配置

Hexo 文档有对 Hexo 安装及使用的详细介绍,推荐阅读。这里我主要写自己安装的步骤、踩过的坑以及一些优化的方法。

在正式安装 Hexo 之前,我们需要确认电脑中是否已安装下列应用程序:

  • Node.js
  • Git

当然,我们还需要 GitHub 账号,如果没有请注册。 注册之后记得一定要前往邮箱确认注册,否则无法使用 GitHub Pages。

安装 Hexo

所有必备的应用程序安装完成后,即可使用 npm 安装 Hexo。终端输入如下命令:

sudo npm install -g hexo-cli

输入管理员密码( Mac 登录密码)即开始安装。

这里有个小坑:Hexo 官网上的安装命令是npm install -g hexo-cli,安装时不要忘记前面加上sudo,否则会因为权限问题报错。

初始化

使用终端cd到一个您指定的目录,执行以下命令(命令中的blog是您将要建立的文件夹的名称):

hexo init blog

使用终端cdblog文件夹下,执行以下命令,安装npm:

npm install

好了,现在可以试试看是否已经初始化成功,执行如下命令,开启本地 Hexo 服务器:

hexo s

此时,浏览器中打开网址(默认是4000端口) http://localhost:4000 ,能看到如下页面:

Hexo 本地

这里我踩了个不算坑的坑,终端输入hexo s后没有成功,我也在网上搜到了很多解决办法,但是都没有奏效,后来我尝试改了下端口就成功了,也就是说默认的4000端口无法连接。如果您的情况跟我一样,尝试了网上的很多解决办法之后依然无效,那您也许可以尝试输入命令hexo s -p 5000改一下端口试试看。

关联 GitHub

创建仓库

  1. 登录您的 GitHub 账号,新建名称为您的用户名.github.io的仓库。假设我的 GitHub 账号的用户名是 luxun,那么我就应该新建名称为luxun.github.io的仓库。
  2. Description可写可不写,随意。
  3. 勾上Initialize this repository with a README
  4. 点击Create Repository完成创建。

开启 GitHub Pages

点击Settings,你将会打开这个库的 Settings 页面,向下拖动,直到看见 GitHub Pages,如图:

gh-p

修改全局配置文件

Hexo 官方文档中有对全局配置的详细说明,推荐阅读。

小坑提醒,修改本地所有的配置文件时,注意所有的冒号:后边都要加一个空格,否则执行 Hexo 命令时会报错,一定注意。

找到本地blog文件夹下_config.yml,打开后滑到最后,修改成下边的样子:

deploy:
  type: git
  repository: https://github.com/xxx/xxx.github.io.git
  branch: master

您需要将repository后的所有xxx换成你自己的用户名,或者也可以在下图位置获取:

https 地址

然后,您需要为自己配置身份信息,终端输入yournameyouremail换成您自己的 GitHub 用户名和邮箱):

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

终端cdblog文件夹下执行生成静态页面命令:

hexo g

此时若出现如下报错:

ERROR Local hexo not found in ~/blog
ERROR Try runing: 'npm install hexo --save'

尝试执行命令:

npm install hexo --save

若无报错,自行忽略此步骤。

然后在当前目录下,终端输入:

hexo d

这里踩了个坑,如果您执行命令hexo d仍然报错:无法连接 git 或找不到 git,则执行如下命令来安装hexo-deployer-git

npm install hexo-deployer-git --save

完成安装之后,再次执行hexo ghexo d命令。

随后按照提示,分别输入自己的 GitHub 用户名和密码,开始上传。

完成上传之后,通过http://xxx.github.io/ (xxx换成您自己的仓库名,也就是用户名)来访问自己刚刚上传的网站。

  • 为避免每次输入 GitHub 用户名和密码的麻烦,可参照后文 优化(个性化设置) 添加ssh key 到 GitHub进行优化

常用指令和发布文章

  • 常用指令
hexo new "postName"        //新建文章
hexo new page "pageName"        //新建页面
hexo g          //生成静态页面至public目录
hexo server         //开启预览访问端口(默认端口4000,'ctrl + c'关闭server)
hexo deploy         //将.deploy目录部署到GitHub
  • 常用组合
hexo clean
hexo g
hexo d
hexo d -g #生成部署
hexo s -g #生成预览
  • 发布文章

终端cdblog文件夹下,执行如下命令新建文章:

hexo new "xxx"

名为xxx.md的文件会建在目录.../blog/source/_posts下。

所有的文章都会以md形式保存在_post文件夹中,只要在_post文件夹中新建md类型的文档,就能在执行hexo g的时候被渲染。新建的文章头需要添加一些信息,如下所示:

---
title: xxx    //在此处添加你的标题。
date: 2016-10-07 13:38:49   //在此处输入编辑这篇文章的时间。
tags: xxx    //在此处输入这篇文章的标签。
categories: xxx    //在此处输入这篇文章的分类。
---

文章编辑完成后,终端cdblog文件夹下,依次执行如下命令来发布:

hexo g
hexo d

至此,Mac 上搭建基于 GitHub Pages + Hexo 的博客就完成了。

下面的内容是介绍安装 Themes 、个性化设置以及优化。

设置 Themes

如果您喜欢 Hexo 默认的主题的话,可以跳过这部分。如果您想换一个主题的话,可以到Hexo 主题挑选自己中意的主题。

这里以nexT 主题为例。

终端cdblog目录下执行如下命令(这是目前的稳定版本,不是最新版。最新版有一些新特性,但是可能会不稳定,所以这里推荐选择安装稳定版):

git clone --branch v5.1.2 https://github.com/iissnan/hexo-theme-next themes/next

如果想尝试最新版,请执行如下命令:

git clone https://github.com/iissnan/hexo-theme-next themes/next

打开blog目录下的_config.yml,找到theme: landscape修改为theme: next

终端cdblog目录下,依次执行如下命令(每次部署文章的步骤):

hexo clean

hexo g

hexo d

至于更改博客的名称、描述、头像等,只需要修改blog/_config.yml文件和blog/themes/next/_config.yml文件中对应的属性名称即可(不要忘记冒号:后加空格)。

  • 更多设置NexT 使用文档里有极详细的介绍,推荐阅读。

个性化设置

  • 首先参照NexT 官方文档进行个性化设置,之后再看下文。

为博客加上 GitHub 丝带

这里以 Next 主题为例(其他主题也差不多),添加 GitHub 丝带:在blog\themes\next\layout\_layout.swig中加入相关代码,记得修改自己的链接。

添加 README.md

每个项目仓库下一般都有一个 README.md 文件,但是使用 hexo 部署到仓库后,项目仓库中是没有 README.md 文件的。

blog 目录下的 source 目录下添加一个 README.md 文件,修改站点配置文件 _config.yml,将 skip_render 参数的值设置为 README.md

skip_render: README.md

保存退出即可。

为博客添加 LICENSE

在主题配置文件中添加下面这段代码(添加之前先看看您的主题配置文件是否已经包含这段代码,已经包含就不用添加了,因为重复会报错),LICENSE 会显示在侧边栏。

# Creative Commons 4.0 International License.
# http://creativecommons.org/
# Available: by | by-nc | by-nc-nd | by-nc-sa | by-nd | by-sa | zero
creative_commons: by-nc-sa
#creative_commons:

修改文章底部的带 `#` 号的标签

如果您觉得#不好看,想改成图标,那么请按照下面修改。 打开/themes/next/layout/_macro/post.swig,搜索(组合键command+f)rel="tag">#,将#换成<i class="fa fa-tag"></i>

将阅读量改为热度

很多人将文章标题下的 阅读次数 改为了 热度,如果您喜欢的话可以这样修改。

打开blog/themes/next/languages/zh-Hans文件,查找阅读次数这几个字,可以看到,在post中的visitors被定义为阅读次数,把这里的阅读次数改为热度

visitors: 热度

那么怎么在页面中显示呢?打开Next主题文件夹中blog/themes/next/layout/_macro/post.swig,在这个文件里加上摄氏度的标志,在<span class="leancloud-visitors-count"></span>下面增加一行<span>℃</span>即可:

<span class="leancloud-visitors-count"></span>
<span>℃</span>

博文置顶

  • 修改 hexo-generator-index 插件

替换文件blog/node_modules/hexo-generator-index/lib/generator.js 内的代码为:

'use strict';
var pagination = require('hexo-pagination');
module.exports = function(locals){
  var config = this.config;
  var posts = locals.posts;
    posts.data = posts.data.sort(function(a, b) {
        if(a.top && b.top) { // 两篇文章top都有定义
            if(a.top == b.top) return b.date - a.date; // 若top值一样则按照文章日期降序排
            else return b.top - a.top; // 否则按照top值降序排
        }
        else if(a.top && !b.top) { // 以下是只有一篇文章top有定义,那么将有top的排在前面(这里用异或操作居然不行233)
            return -1;
        }
        else if(!a.top && b.top) {
            return 1;
        }
        else return b.date - a.date; // 都没定义按照文章日期降序排
    });
  var paginationDir = config.pagination_dir || 'page';
  return pagination('', posts, {
    perPage: config.index_generator.per_page,
    layout: ['index', 'archive'],
    format: paginationDir + '/%d/',
    data: {
      __index: true
    }
  });
};
  • 设置文章置顶

在文章 Front-matter 中添加 top 值,数值越大文章越靠前,如:

---
title: xxx
date: 2015-04-02 14:36:04
categories: xxx
tags: xxx
top: 10
---

NexT 首页文章 加载更多 设置

这里只说一个方法:编辑文章时,在您希望显示 加载更多 按钮的地方,加上<!--more-->

more

首页分割线

  在 \themes\next\source\css\_custom\custom.styl 文件中添加以下代码,可以修改博客首页中每篇文章的分割线样式,width是长度,height是宽度。

//index页面中每篇文章相隔的那条线
.posts-expand {
  .post-eof {
    display: block;
    margin: $post-eof-margin-top auto $post-eof-margin-bottom;
    width: 100%;
    height: 3px;
    background: $grey-light;
    text-align: center;
  }
}

小图标设置

博客中一切小图标都可以在fontawesome 图标库自行搜索(qq、微博、微信等图标是有的,但知乎、豆瓣等图标目前还没有)。

  • 修改网页底部的桃心图标 打开blog/themes/next/layout/_partials/footer.swig,找到这段代码进行修改(还是在fontawesome 图标库找自己喜欢的图标):
<span class="with-love">
  <i class="fa fa-share-alt"></i>
</span>

设置网站的图标Favicon

准备一张 icon 图标文件,放在 source 目录下就可以了,在主题配置文件中找到 favicon 的设置:

# Put your favicon.ico into `hexo-site/source/` directory.
favicon: /favicon.ico

主页文章添加阴影效果

具体实现方法

打开blog\themes\next\source\css\_custom\custom.styl文件,添加以下代码:

//主页文章添加阴影效果
 .post {
   margin-top: 60px;
   margin-bottom: 60px;
   padding: 25px;
   -webkit-box-shadow: 0 0 5px rgba(202, 203, 203, .5);
   -moz-box-shadow: 0 0 5px rgba(202, 203, 204, .5);
  }

隐藏网页底部 powered By Hexo / 强力驱动

打开blog/themes/next/layout/_partials/footer.swig,使用<!-- -->隐藏符号之间的代码即可,或者直接将这段代码删除。位置如图:

隐藏底部 Hexo

添加 SSH key 到 GitHub

  • 检查 SSH keys 是否已经存在

终端执行如下命令,检查SSH keys是否存在。

ls ~/.ssh

如果显示如下信息(下面是我个人的显示,也许您跟我显示的不一样,但重点是只要有id_rsaid_rsa.pub),就说明 SSH keys 已经存在了:

id_rsa       id_rsa.pub     known_hosts

如果存在,则直接跳过下一个步骤进入将 SSH key 添加到 GitHub 中,否则请继续下一步骤 生成新的 SSH key

  • 生成新的 SSH key

终端执行如下命令生成新的 SSH key,注意将your_email@example.com换成你自己注册 GitHub 的邮箱地址。

ssh-keygen -t rsa -C "your_email@example.com"

默认会在相应路径~/.ssh下生成id_rsaid_rsa.pub两个文件。

1.3.将 SSH key 添加到 GitHub 中

终端依次输入:

cd ~/.ssh
cat id_rsa.pub

复制所有显示的内容

进入GitHub –> Settings –> SSH and GPG keys –> NEW SSH key,如下图所示:

settings

ssh_key

Title 里任意添一个标题,将复制的内容粘贴到 Key 里,点击下方 Add SSH key 绿色按钮即可,如下图所示:

add_ssh_key

绑定独立域名

  • 首先,需要注册一个域名。可以选择GoDaddy或万网中的任意一家。
  • 然后,我们需要配置一下域名解析。推荐使用DNSPod的服务,免费稳定,解析速度也比较快。在域名注册商处(Godaddy 或万网)修改 NS 服务器地址为:
f1g1ns1.dnspod.net
f1g1ns2.dnspod.net

域名解析详细的步骤这里我就不写了,给个图:

dnspod

图中设置国内国外的原因是想让博客加载速度更快,方法请阅读后文 将个人博客同时部署到 GitHub 和 Coding

  • 如果将域名指向另一个域名,实现与被指向域名相同的访问效果,需要增加 CNAME 记录。

进入 blog/source 目录下,添加并打开 CNAME 文件,输入您的域名,重新上传您的博客。

在 GitHub 中打开您自己的博客仓库,进入库的 Settings 界面,如果看到了如下提示,说明配置成功了。

CNAME

在这一系列的操作中,修改 NS 服务器、设置解析等等,都需要一定的时间。短则10分钟,长则24小时,最长不会超过72小时。如果超过72小时,请检查自己的配置过程,或者修改自己本地的 DNS 服务器。

优化

将个人博客同时部署到 GitHub 和 Coding

Coding 可以理解为国内的 GitHub。通过将博客同时部署到 GitHub 和 Coding,可以提升博客的加载速度。

这里有个提醒,Coding 会强制用户在网站上挂推广图标,通过 Coding 加载博客还会有5s广告,如果觉得这样不好,可以选择放弃部署在 Coding 上。还有一个选择,就是花钱成为 Coding 的会员,这样上述的问题就都没有了。

  • 首先到Coding注册。创建仓库跟 GitHub 上创建仓库的要求一样。
  • 打开本地 blog 目录下的 _config.yml 文件,滑到最下面,修改如下(xxx换成自己的用户名):
deploy:
  type: git
  repository:
    github: https://github.com/xxx/xxx.github.io.git
    coding: https://git.coding.net/xxx/xxx.git
  branch: master
  • 然后执行命令hexo clean hexo g hexo d
  • 个人域名添加两条 CNAME 解析。将 GitHub 的地址 解析为 国外 ,将 Coding 的地址 解析为 国内

dnspod

  • 如果您有个人域名的话,到 Coding 博客仓库的 Pages 服务 界面,添加域名绑定,输入个人域名就 OK 了,可能需要耐心等待几分钟。

这样就可以实现从国内访问就通过 Coding 加载博客项目,从国外访问就通过 GitHub 加载博客项目,从而提升加载博客的速度。

压缩代码

压缩代码也是一个优化加载速度的方法。

目前知道的有两个插件可以压缩博文,hexo-all-minifier 插件和 gulp 插件。hexo-all-minifier 使用比较简单,也可以压缩图片,不过对文章缩进不支持。如果您对文章缩进有要求,可以暂时使用 gulp 压缩手段。

  • hexo-all-minifier 使用方法

安装 hexo-all-minifier,在站点的根目录下执行以下命令:

npm install hexo-all-minifier --save

hexo g编译的时候就会自动压缩 HTML、JS、图片。详情参考插件介绍 hexo-all-minifier。

  • glup 使用方法

Hexo 依赖 gulp 插件安装,在站点的根目录下执行以下命令:

npm install gulp -g
npm install gulp-minify-css gulp-uglify gulp-htmlmin gulp-htmlclean gulp --save

blog目录下,新建 gulpfile.js 并填入以下内容:

var gulp = require('gulp');
var minifycss = require('gulp-minify-css');
var uglify = require('gulp-uglify');
var htmlmin = require('gulp-htmlmin');
var htmlclean = require('gulp-htmlclean');
// 压缩 public 目录 css
gulp.task('minify-css', function() {
    return gulp.src('./public/**/*.css')
        .pipe(minifycss())
        .pipe(gulp.dest('./public'));
});
// 压缩 public 目录 html
gulp.task('minify-html', function() {
  return gulp.src('./public/**/*.html')
    .pipe(htmlclean())
    .pipe(htmlmin({
         removeComments: true,
         minifyJS: true,
         minifyCSS: true,
         minifyURLs: true,
    }))
    .pipe(gulp.dest('./public'))
});
// 压缩 public/js 目录 js
gulp.task('minify-js', function() {
    return gulp.src('./public/**/*.js')
        .pipe(uglify())
        .pipe(gulp.dest('./public'));
});
// 执行 gulp 命令时执行的任务
gulp.task('default', [
    'minify-html','minify-css','minify-js'
]);

生成博文时执行 hexo g && gulp 就会根据 gulpfile.js 中的配置,对 public 目录中的静态资源文件进行压缩。

SEO(搜索引擎优化)

网站验证

  • Google 提交入口
  • 百度提交入口

验证方式有几种,推荐最简单的两种:文件验证和 CNAME 验证。

  • 文件验证
  1. 登录百度站长选择添加网站,使用方式为文件验证
  2. 将下载的文件放到source文件下
  3. 由于 hexo 自动会对 html 文件进行渲染,所以在站点配置文件中找到skip_render:
  4. 在后面添加文件名字,若有多个用这样的形式[xxx.html, xxx.html],比如:skip_render: [googleff0226f76d5f451b.html, baidu_verify_vHC5EAW09E.html]
  5. 重新渲染文件:hexo clean hexo d -g
  6. 点击站长的验证按钮,完成验证。
  • CNAME 验证
  1. 去站长添加网站选择 CNAME 验证
  2. 把地址解析到zz.baidu.com
  3. 完成验证

添加并提交sitemap

安装 Hexo 的 sitemap 网站地图生成插件,终端cdblog

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

站点配置文件中任意位置添加如下代码,但要看清您的 Hexo 版本。

如果您的 Hexo 版本是 2.x.x

sitemap:
    path: sitemap.xml
baidusitemap:
    path: baidusitemap.xml

如果您的 Hexo 版本是 3.x.x

sitemap:
path: sitemap.xml
baidusitemap:
path: baidusitemap.xml

配置成功后,会生成sitemap.xmlbaidusitemap.xml,前者适合提交给谷歌搜素引擎,后者适合提交百度搜索引擎。

百度 sitemap 提交如图,Google 也是一样的:

sitemap_yz

验证成功之后就可以开始推送了。Google 的收录比较快,通常第二天就能搜得到,百度就比较慢了。

主动推送

安装主动推送插件,终端cdblog

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

在根目录下,把以下内容配置到站点配置文件中:

baidu_url_submit:
  count: 3     ## 比如3,代表提交最新的三个链接
  host: xxx     ## 在百度站长平台中注册的域名
  token: xxx       ## 请注意这是您的秘钥,请不要发布在公众仓库里!
  path: baidu_urls.txt       ## 文本文档的地址,新链接会保存在此文本文档里

至于上面提到的token可在百度站长如下位置找到:

token

其次,记得查看站点配置文件中的url,必须包含站长平台注册的域名,比如:

url: http://harleywang93.com
root: /
permalink: :year/:month/:day/:title/

接下来添加一个新的 deploy 类型:

deploy:
- type: baidu_url_submitter
- type: git
  repository:
    github: https://github.com/xxx/xxx.github.io.git
    coding: https://git.coding.net/xxx/xxx.git
  branch: master

执行hexo d的时候,新的链接就会被推送了。原理:

  • 新链接的产生,hexo g会产生一个文本文件,里面包含最新的链接。
  • 新链接的提交,hexo d会从上述文件中读取链接,提交至百度搜索引擎。

自动推送

把 NexT 主题配置文件中的baidu_push:设置为true,就可以了。

添加蜘蛛协议

blog/source/目录下新建一个robots.txt文件,添加下面的一段代码(可根据自己的需要修改):

#hexo robots.txt
User-agent: *

Allow: /
Allow: /archives/

Disallow: /vendors/
Disallow: /js/
Disallow: /css/
Disallow: /fonts/
Disallow: /vendors/
Disallow: /fancybox/

Sitemap: http://xxx/sitemap.xml
Sitemap: http://xxx/baidusitemap.xml

然后到站长(这里以百度为例,Google 一样)更新一下,就像这样:

robots

感谢

自己搭建博客时,很是折腾了一番,也学习到了很多知识,阅读了很多相关的博文,在此向相关博文的作者表示感谢,谢谢你们的文章让我进步。同时,我看到有很多人想拥有自己的博客或者优化自己的博客,期间可能会遇到很多问题,我也是这么一个坑一个坑踩过来的,所以我就写了这么一篇自己折腾博客的分享,希望可以在帮助自己的同时帮助到别人。(如果踩了新坑的话,一定会更新的。)

  • 目前已经弃掉了此方法写博客,因为想回到回归初心,写博客最初的目的 - 总结梳理知识以及分享一些感受,不在乎形式。( 其实是因为懒得折腾了,Hexo 有一些不稳定性,所以目前弃掉了,喜欢折腾的可以继续尝试 lol )

希望大家也能有此感受。

如果喜欢本篇文章,欢迎转发、点赞。关注订阅号「Python数据科学」

本文分享自微信公众号 - Python数据科学(PyDataScience)

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-10-13

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

扫码关注云+社区

领取腾讯云代金券