Hexo博客搭建

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/loongago/article/details/78108326

Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown解析文章,生成的静态网页布置在GitHub上面,作为个人博客使用十分方便。本文前面部分将讲Windows10环境来搭建hexo博客,并介绍hexo博客的相关设置以及优化,后面会有linux环境下的相关配置。

一、Windows环境

部分linux命令请在git base里面执行。

1.1 环境搭建

1.1.1 安装git

git下载地址

默认安装,配置好默认的用户

$ git config --global user.name "you_name"
$ git config --global user.email you_email@example.com

1.1.2 安装node.js

node.js下载地址

默认安装即可

用zip安装时,配置两个环境变量:一个是PATH上增加node.exe的目录D:\nodejs,一个是增加环境变量NODE_PATH,值为D:\nodejs\node_modules。目录地址转换成你的。

1.1.3 安装Hexo

$ cd d:/hexo
$ npm install hexo-cli -g  #安装全局环境
$ hexo init blog #你的博客环境
$ cd blog
$ npm install    # NPM是随同NodeJS一起安装的包管理工具
$ hexo g         # 或者hexo generate
$ hexo s         # 或者hexo server,可以在http://localhost:4000 查看效果

如果由于管理员权限而失败,可以用win+x选择”命令提示符(管理员)“来操作

到这里你已经可以看到效果了http://localhost:4000

1.2 GitHub配置

(1)新建一个仓库,名字要和你用户名一样,例如:you_name.github.io ,GitHub会自动识别这次仓库为pages

(2)配置ssh秘钥,私钥自行保存,公钥放GitHub上

$ ssh-keygen -t rsa -C "your_email@youremail.com" #或者下面这个
$ ssh-keygen -t rsa -f sample                     #文件名命名为sample
-t 指定密钥类型,默认是 rsa ,可以省略。
-C 设置注释文字,比如邮箱。
-f 指定密钥文件存储文件名。

SSH 在push的时候,如果配置SSH key的时候设置了密码,则需要输入密码的,否则直接是不需要输入密码的

目录文件C:\ Users\youname\.ssh\id_rsa.pub为你的公钥,id_rsa为私钥。公钥里面的内容复制到GitHub设置里。

然后配置~/.ssh/config文件,按照实际情况删减。

host github.com
#  port 22
#  compression yes
#  hostname 192.168.0.1
  user git
  identityfile ~/.ssh/id_rsa

(3)初始化仓库,即是上传一个任意文件上去。新建完仓库后,GitHub上会有提示。

(4)部署到GitHub上

配置博客根目录的_config.yml文件,把GitHub仓库地址配置进去。

  deploy:
    type: git
    repo: git@github.com:loongX/loongX.github.io.git
    branch: master

这里要注意一下,yml文件以缩进来区分各个元素的,所以缩进要一致。

在部署到GitHub前先要安装一个hexo-deployer-git插件。
Hexo提供了hexo-deployer-git工具,可以帮助部署Hexo到很多平台

$ npm install hexo-deployer-git --save

在blog文件夹里

$ hexo g
$ hexo d  #部署到远程仓上。

这里会部署到GitHub上,打开你的pages网址可以看到内容了(类似这个loongX.github.io网址)。

这个部署上传的是public目录下的文件,public文件夹里面保存的是生成的静态文件。

1.3 Hexo 建设

hexo官方文档

1.3.1 目录结构

blog目录结构如下

.
├── _config.yml   #配置文件
├── package.json  #应用程序的信息
├── scaffolds     #模版文件夹
├── source        #资源文件夹是存放用户资源的地方
|   ├── _drafts   #草稿
|   └── _posts    #正文
└── themes        #主题文件夹

1.3.2 基础命令

$ hexo generate                # 简写:hexo g,生成静态文件,会在当前目录下生成一个public文件夹
$ hexo server                  # 简写:hexo s,启动本地服务,用于博客的预览
$ hexo deploy                  # 简写:hexo d,部署到远程(如GitHub,可以在_config.yml中配置)
$ hexo new post-name           # 简写:hexo n post-name, 新建文章 
$ hexo new page page-name      # 简写:hexo n page page-name,新建页面

$ hexo d -g                    # 生成和部署
$ hexo s -g                    # 生成和预览

$ hexo new draft <title>       # 新建草稿,存放在source/_drafts
$ hexo publish post <title>    # 发布草稿为文章,文章转移到source/_posts
$ hexo s -g --drafts           # 显示草稿

$ hexo new page tags           # 使用 Hexo 命令新建一个名为 tags 的页面
$ hexo s -p 5000               # 更改端口号为5000

1.3.3 更换主题

$ hexo clean
$ git clone https://github.com/MOxFIVE/hexo-theme-yelee.git themes/yelee

然后修改Hexo目录下的_config.yml配置文件中的theme属性,将其设置为yelee。

1.3.4 添加插件

RSS 对应插件——feed插件https://github.com/hexojs/hexo-generator-feed

Sitemap for SEO 站点地图通用插件: hexo-generator-seo-friendly-sitemap

百度专用Sitemap: hexo-generator-baidu-sitemap

添加插件添加sitemap和feed插件

$ npm install hexo-generator-feed 
$ npm install hexo-generator-sitemap 
$ npm install hexo-generator-baidu-sitemap@0.1.1 --save

修改_config.yml,增加以下内容

Plugins:
- hexo-generator-feed
- hexo-generator-sitemap
- hexo-generator-baidu-sitemap

#Feed Atom
feed:
  type: atom
  path: atom.xml
  limit: 20
  hub:
  content:
  content_limit: 140
  content_limit_delim: ' '

#通用sitemap
sitemap:
 path: sitemap.xml

 #百度爬虫
baidusitemap:
path: baidusitemap.xml

配完之后,就可以访问http://loongx.github.io/atom.xmlhttp://loongx.github.io/sitemap.xml,发现这两个文件已经成功生成了。

1.3.5 绑定独立域名

先购买域名:

阿里云域名购买

godaddy域名购买

然后在你的域名注册提供商那里配置DNS解析,你可以解析到ip也可也解析到域名

CNAME — www —默认线路—loongx.githut.io

CNAME—-@—-默认线路 —–loongx.githut.io

进入source目录下,添加CNAME文件

$ cd source/
$ touch CNAME
$ echo "okloong.com" >> CNAME # 输入你的域名

如果你按照下面步骤做了,在coding上也同样做了一个pages的话,你可以把国内的访问引向coding,国外的访问引向GitHub。

CNAME — www —默认线路—okayloong.coding.me

CNAME—-@—-默认线路 —–okayloong.coding.me

CNAME — www —海外线路—loongx.githut.io

CNAME—-@—-海外线路 —–loongx.githut.io

1.3.6 写博客

  • markdown编辑器

hexo写博客是用markdown语法来写的,用具有markdown功能的软件会比较方便些,我这里用的是Typora,简单好用。

  • 文章目录分类

在\source\_posts文件夹里面支持文件夹形式。如果你觉得你文章太多,想分类,你可以直接新建文件夹来分类各个文章,hexo会识别到文件夹里面的文件的。这样做只是为了你方便好看,但是hexo会忽略你的文件夹名字。

  • 插入本地图片

使用本地路径:在hexo/source目录下新建一个img文件夹(其他名称也行),将图片放入该文件夹下,插入图片时链接即为:‘/img/图片名称’。 如果你用了文件夹放请加上文件夹名词,hexo这次会连带文件夹生成路径。

![picture](/img/aaa/Koala.jpg)
  • 插入歌曲

这示例里面的链接是网易云音乐的分享链接


<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=86   

    src="http://music.163.com/outchain/player?type=2&id=25706282&auto=0&height=66">  

</iframe> 
  • 插入视频
<iframe
    height=498 width=510   

    src="http://player.youku.com/embed/XNjcyMDU4Njg0"   

    frameborder=0 allowfullscreen>  

</iframe>  

1.4 主题配置

1.4.1 yelee主题

yelee官方文档

大部分设置只要在主题下的_config.yml文件里配置就可以了,里面的注释说得很清楚了,官方文档也说得很详细。下面说一些特殊的。

配置文件中参数紧接的冒号后面都需要加一个空格!包括文章头的标题框里面的设置也是。

1.4.1.1 标签、分类以及我的页面设置

1.标签云设置:
使用 Hexo 命令新建一个名为 tags 的页面即可

hexo new page tags

2.关于我页面

使用 Hexo 命令新建一个名为 about 的页面即可

hexo new page about

该页面内容在文件 \hexo\source\about\index.md 中修改

然后,将上面两个在下面配置中建立链接关系。

menu:
  主页: /
  所有文章: /archives/
  标签云: /tags/
  关于我: /about/

注意:
在hexo里面已经包含了tags和cataloges相关的设置了,不需要新建catalages page,分类和标签会显示在标签云里面。如果你在使用hexo new page catalages创建一个catalages分类,会只显示一个空白网页。

博客模板修改

\freeshow.github.io\scaffolds下的post.md模板文件修改为如下:

---
title: {{ title }}
date: {{ date }}
tags:
categories:
---

当写文件时,就可以填写所属tags或categories了。
tags和categories都会显示在 标签云 中.

1.4.1.2 修改文章置顶

主要是修改文章的排列规则

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.sort(config.index_generator.order_by);
  var paginationDir = config.pagination_dir || 'page';
  var path = config.index_generator.path || '';

//****************开始添加*********
  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; // 都没定义按照文章日期降序排
    });
  //****************添加结束*********

  return pagination(path, posts, {
    perPage: config.index_generator.per_page,
    layout: ['index', 'archive'],
    format: paginationDir + '/%d/',
    data: {
      __index: true
    }
  });
};

然后在文章中,增加top值定义,值越大,文章排序越靠前。top值默认为0,若不设置top,则不参与排序。示例:

title: 为Hexo添加文章置顶功能
categories: sample
tags: simple
top: 1
date: 2016-07-20 11:44:40

如果想按更新时间排序:改一下上面的代码 中的a.date, b.date 分别改为 a.updated, b.updated

1.4.1.3 其他设置

增加文章打赏功能
修复404在非根目录下错误链接,导致style.css无法正确获取

1.4.2 Next主题

Next是hexo框架上的一个主题。由于它简洁清晰,受很多人追捧。我也没忍住将个人博客主题换成next主题来试下效果。下面将讲述hexo的next主题的相关设置。

1.4.2.1 添加标签页面

  • 新建页面

输入如下命令:

$ hexo new page tags

输入命令后,在myBlog/source下会新生成一个新的文件夹tags,在该文件夹下会有一个index.md文件。

  • 设置页面类型

在上步新生成的myBlog/source/tags/index.md中添加type: "tags"index.md文件内容如下:

---
title: 分类&标签
type: "tags"
date: 2017-09-22 00:30:37
---
  • 设置具体文章的tags

当要为某一篇文章添加标签,只需在myBlog/source/_post目录下的具体文章的tags中添加标签即可,如:

---
title: Next主题设置
date: 2017-10-31 10:10:12
tags: hexo
categories:
---

1.4.2.2 添加分类页面

步骤与添加标签页面类似,具体如下:

  • 新建页面

输入如下命令:

hexo new page categories

输入命令后,在myBlog/source下会新生成一个新的文件夹categories,在该文件夹下会有一个index.md文件。

  • 设置页面类型

在上步新生成的myBlog/source/categories/index.md中添加type: "categories"index.md文件内容如下:

---
title: categories
date: 2017-10-31 10:36:29
type: "categories"
---
  • 设置具体文章的categories

当要为某一篇文章添加分类,只需在myBlog/source/_post目录下的具体文章的categories中添加分类即可,如:

---
title: Next主题设置
date: 2017-10-31 10:10:12
tags: hexo
categories:
---

1.4.2.3 修改内容区域的宽度

我们用Next主题是发现在电脑上阅读文章时内容两边留的空白较多,这样在浏览代码块时经常要滚动滚动条才能阅读完整,体验不是很好,下面提供修改内容区域的宽度的方法。
Next 对于内容的宽度的设定如下:

  • 700px,当屏幕宽度 < 1600px
  • 900px,当屏幕宽度 >= 1600px
  • 移动设备下,宽度自适应

如果你需要修改内容的宽度,同样需要编辑样式文件。
在Mist和Muse风格可以用下面的方法:
编辑主题的 source/css/_variables/custom.styl 文件,新增变量:

// 修改成你期望的宽度
$content-desktop = 700px

// 当视窗超过 1600px 后的宽度
$content-desktop-large = 900px

当你使用Pisces风格时可以用下面的方法,在 source/css/_variables/custom.styl 中添加:

$main-desktop                   = 1200px
$content-desktop                = 900px

1.4.3.4 分享样式修改

jiathis样式可以在目录themes\next\layout_partials\share下的jiathis.swig文件里面修改。
在我的博客里,我把文字和栏目作了调整。官网上也有对应的代码参考。

<span class="jiathis_txt"></span>
<a class="jiathis_button_tsina"></a>
<a class="jiathis_button_tqq"></a>
<a class="jiathis_button_weixin"></a>
<a class="jiathis_button_cqq"></span>
<a class="jiathis_button_qzone"></a>
<a class="jiathis_button_douban"></a>
<a class="jiathis_button_fav"></a>
<a class="jiathis_button_copy"></a>
<a class="jiathis_button_email"></a>
<a class="jiathis_button_share"></a>

1.5 Coding设置

Coding像GitHub一样也提供pages功能,配置方法和GitHub配置差不多。这里用Coding是因为,GitHub在国内访问是比较慢的,Coding在国内访问就比较快一点,而且也方便百度搜索引擎抓取。在设置dns时候,把国内访问的流量引向Coding上,国外线访问就引向GitHub上,这样就比较合理一点。

1.5.1 配置ssh秘钥

按照上面的给GitHub配置ssh秘钥的步骤同样给coding平台布置即可。

1.5.2 建立coding-pages

下面是创建一个「项目 Pages」的操作示例:

这里另外找一个test文件夹来测试就好了。

1.登录 Coding.net,创建一个项目,项目名称为:user_name.coding.me

2.在本地创建一个项目文件夹,添加一个测试用的 index.html 文件。

<html>
   <head>
     <title>My Coding Pages</title>
   </head>

   <body>
      <h1>Hello Coding!</h1>
   </body>
</html>

3.将项目文件夹初始化为 Git 版本库,提交 index.html 到版本库,并为项目添加远程仓库地址。

git init
git add index.html
git commit -m 'init'
git remote add origin  git@git.coding.net:{user_name}/{project_name}

请别忘记将上面代码中的远程仓库地址的 {user_name} 和 {project _name} 替换成你自己的个性后缀(Global Key)和项目地址。

4.在本地创建一个 coding-pages 分支,切换到该分支。

git checkout -b coding-pages

5.将 coding-pages 分支推送到 Coding.net。

git push origin coding-pages

6.在项目的「Pages 服务」设置中,选择部署来源为 coding-pages 分支,点击「保存」按钮。 稍等片刻即可完成部署并通过 {user_name}.coding.me/{project_name} 访问你的网站.

1.5.3 部署博客

在你的博客目录

在你博客根目录下的_config.yml文件里配置

deploy:
  type: git
  repo: 
     github: git@github.com:loongX/loongX.github.io.git,master
     coding: git@git.coding.net:OkayLoong/Okayloong.coding.me.git,coding-pages

部署到平台上:

hexo d -g

1.5.4 自定义域名

coding的普通用户不能自定域名,也就是说你刚刚注册到的账户是没有这个功能的,你需要补充完资料,升级账户才能用。升级账户后,在“pages服务”里添加进你的域名进去,并配置好dns解析就好了。

1.6 Hexo多电脑同步的方法

一般思路是,创建两个仓库,一个用来保存hexo源码,一个是用来保存生成的博客文件。为了源码的安全建议是把源码保存在一个私有仓内。这里我采用coding建立私有库。码云也提供私有库功能,方法类似。

说下这个两个仓库的结构:

Hexo-blog分支 – 用来保存所有Hexo的源文件

master分支 – 用来保存Hexo生成的博客文件

1.6.1 创建私有仓库

在coding平台上创建一个私有项目,名称为Hexo-blog,并初始化仓库(按照上面的要求上传一个任意文件上去,否则后面的操作会报错)。

上传时候需要把主题里面的.git文件夹删掉,要不然上传到私有库时候会漏掉主题部分的代码的。

但这个有个问题,你删后,原来主题的有更新就得不到及时更新了。

rm -fr ./themes/yelee/.git/   #删除主题里面的git
git init                     #建立本地的git仓库
git remote add origin git@git.coding.net:OkayLoong/hexo-blog.git  #添加远程仓,注意要添加ssh秘钥
git add .
git commit -m "my first private hexo"
git push -u origin master

但是如果你的主题改动比较大,更新反而很多冲突,那自己维护也行。不过这里有个取巧的办法。

主题刚下载还没同步到私有仓时候,把主题里面的.git文件夹删除掉,同步一下私有仓,然后撤销删除,把主题里面的.git文件夹还原回来。这时候,你两边的仓库都能更新了。

上传私有仓

git status                     #这个只是查看状态,可以不写
git add .                      #把整个文件夹添加进去
git commit -m "update"         #git规定一定要写,要不然上传不了
git push origin master         #简写 git push 

可以将上面的代码保存为deploy.sh,这样就不用每次都敲了。但注意不要用中文名。

拉取私有仓回本地

一般git pull就够了,但是如果有冲突可以按照下面的方式来解决,以远程仓库为标准代码覆盖原来的。

git fetch --all                  #将git上所有文件拉取到本地
git reset --hard origin/master   #强制将本地内容指向刚刚同步git云端内容

1.7 优化

1.7.1 图片优化

图片存放有两种方式,图片可放到CDN上缓存,或者放到本地保存,然后调用时候写上图片的链接或路径即可。我选择了放到本地。但是这么做会有两个问题,如果文章目录比较深,而图片放到/source/images目录下面的话,编写文章时候写的路径不会有预览,要替换图片时候,不好找图片,也不方便管理。针对这问题,我是把图片放到和文章同一级目录下的images文件夹,这样管理和预览这两个问题就很好解决了。生成博客时候需要把图片提取到/source/images目录下。

为了方便管理我做了一个下面这么一个脚本。

  • update-picture.sh
#!/bin/sh
#文章图片放到文章当前的images文件夹下面,这主要是为了写文章方便看图
#生成博客时候把图片同步到./source/images目录下
echo "######  rmove"    
rm -rfv ./source/images/*   
echo "######  copy"
find ./source/_posts  -name 'images' -type d | xargs -i cp -avx {} ./source/
find ./source/system  -name 'images' -type d | xargs -i cp -avx {} ./source/

git上传源码时候如果连同/source/images目录下的图片一并上传的话,那么会有两份相同图片,一份是文章目录下的图片,另外一份是这个/source/images目录下的,鉴此,我就忽略上传/source/images文件夹了。在ignore文件里面添加source/images/。如果之前有同步过这个文件夹下的图片,那么则需要删掉缓存和git后台的对应文件。

还有一点就是,如果这么做,图片要起一个全局唯一的名称,或者在image里面设置多重文件夹里面来区分识别。

二、Linux环境

大部分会和Windows差不多,重复的就不多说了。我用的是Ubuntu系统。

2.1 环境搭建

安装node.js, npm ,hexo

  • 安装node.js,npm

    官网下载源码,然后解压,进入起文件夹进行编译.如果你下的是二进制文件就复制到对应文件夹下面,并添加环境变量.

    ./configure --prefix=/usr/local/node/node-v8.9.1 #配置参数,指定了安装目录
    make
    sudo make install
    sudo gedit /etc/profile
    
    #添加路径进去
    
    
    #后来用sudo执行时候没有这个环境变量,我也在/root/.bashrc下添加了路径
    
    
    #set for nodejs
    
    export NODE_HOME=/usr/local/node/node-v8.9.1
    export PATH=$NODE_HOME/bin:$PATH
    
    #一般是重启会设置路径,如果想立刻看到效果,执行下面的命令
    
    source /etc/profile
    node -v
    npm -v

    除了源码编译外,你也可以下载编译好的包,解压到对应文件夹

    下面这个是直接安装方式,但是版本会比较旧

    sudo apt install nodejs
    sudo apt isntall npm

    其他命令

    npm install npm -g  #升级npm
    npm install module_name #安装模块
    npm ls -g   #查看所有全局安装的npm模块
    npm uninstall module_name #卸载模块
    npm update module_name #升级模块
  • 安装hexo

    npm install -g hexo-cli

    执行这个时候可能会有权限问题,因为你用的是sudo的权限make进去的,用户拥有者为root,同一个用户组没有写权限。你可以用下面的命令修改。

    sudo chmod -R 775 /usr/local/node #更改权限
    
    #或者下面这条命令
    
    sudo chown -R ubuntu:root /usr/local/node #更改拥有者

    -R参数是递归 处理目录下的所有文件以及子文件

    775是权限设置

    ubuntu:root表示用户和用户组,用户组非必须。

  • blog源码移植

    你之前的blog是在windows系统上写的,现在移植到Ubuntu系统上,那么只要下载blog代码到本地,添加node的相关插件,基本可以了。

    如果你是有写脚步来辅助的,可能会并没有相关的执行权限。可以用下面的方式来添加执行权限。

    find *.sh | xargs -i chmod +x {}

    出现“pull.sh: 5: pull.sh: Syntax error: “(” unexpected”错误,那是因为Ubuntu系统默认的sh为Dash,语法有点不同。脚步里面可以改为#!/bin/bash#!/usr/bin/env bash。但是为了windows端和linux端同步,我决定改该shell为bash shell。

    sudo dpkg-reconfigure dash #选择”否“
    ls -l /bin/sh #查看效果
阅读更多
想对作者说点什么?

博主推荐

换一批

没有更多推荐了,返回首页