hexo配置自己的博客站点
最近业余时间利用hexo为自己搭建一个高度自定义的个人站点,站点发布在github上,访问地址为:https://cqhaibin.github.io/。本博客简单介绍实现此站点的过程。效果图如下
构建此站点最初的目的主要方便自己使用本人开发的tomato time这个小工具。然后在实施的过程中加入的自己自己琢磨写的vueManager。
hexo的介绍和常用内容总结
hexo实现了通过markdown生成静态站点的能力,提供了高度定制化的能力。
1. hexo常用命令
命令名 | 说明 |
hexo init | 初始化一个hexo项目 |
hexo server | 启动本web服务,用于开发阶段 |
hexo g | 生成静态网页 |
hexo d | 部署网页 |
hexo clean | 清理缓存 |
hexo new "postName" | 新建文章 |
hexo new page "pageName" | 新建页面 |
2. hexo模板介绍
archive.ejs归档列表页模板,归档可以按照年份+月份实现的,list_archives显示列表
模板文件名 | 说明 |
layout.ejs | 模板的入口文件,也是整个站点的入口文件 |
index.ejs |
首页,布局文件<%- body %>默认输出嵌入的页面 |
post.ejs | 文章详细页 |
page.ejs | 页面 |
archive.ejs | 归档列表页模板,归档可以按照年份+月份实现的,list_archives显示列表 |
category.ejs | 分类显示页 |
tag.ejs | 标签页 |
hexo的模板解析,以layout.ejs为入口,所有静态页面(如:文章、页面、首页、标签、归档、分类等)都会以layout.ejs为模板。所以每个页面的公共部分应该在写layout.ejs中(如页头、页脚等)。
3. hexo-asset-image
此插件实现markdown引用的本地图片,在markdown转换为html也能被正确引用。
hexo模板开发
根据上述 “hexo模板介绍”,我们可以很较为轻松的开发出自己的模板,模板文件说明
模板文件夹、配置文件 | 说明 |
layout | 相关ejs模板信息,用于生成html时使用 |
script | 此文件夹下的.js文件,作为hexo插件 的一种扩展存在,在编译过程中起作用 |
source | 此文件下的文件或文件夹,在编译过程中会保持不变,供开发者使用 |
languages | 多语言包 |
_config.yml | 针对当前模板的配置文件,配置文件中的信息可以被ejs模板访问 |
说明:
1. 本示例模板使用的stylus作用css的预编译语言。
hexo插件开发
1. 插件需要入在node_moduels文件夹下,必须有.js和.package.json文件(也就是一个标准npm包即可).
js文件:
'use strict'
console.log('hexo-filter-list start success....');
var core = {
findglyph: function(txt, glyph){
var num = 0;
while(txt.charAt(num) == glyph){
num++;
}
return num;
}
}
hexo.extend.filter.register('before_post_render',function(data){
//正则获取标题,并赋值给data对象
var regex = new RegExp("(#{1,6})\\s*(.?)(\\S*)", "g");
var titles = [], tmp;
while((tmp = regex.exec(data.content)) != null){
var txt = tmp[0], level = core.findglyph(txt, '#');
var val = {
level: level,
title: txt.substring(level).replace(/(^\s*)/g, '')
}
console.log(val);
titles.push(val);
}
data.headers = titles;
});
package.json文件
{
"name": "hexo-filter-list",
"main": "index",
"version": "1.0.0.0"
}
注意:
1. hexo的事件监听都是有缓存的,内容不变,不会触发相应的事件。
2. 本示例的下载包中不包含node_modules,需要手动放将hexo-filter-list放在node_moduels中
3. 必须在根目录的package.json文件的依赖荐中加入hexo-filter-list包,如下
"dependencies": {
"hexo": "^3.2.0",
"hexo-filter-list": "^1.0.0.0",
}
总结
本文只是hexo使用的初级探索,其中关于hexo的说明存在问题的地方希望各位朋友指正。如果你需要使用hexo,还是建议都看他的官方文档。
hexo配置自己的博客站点的更多相关文章
- 使用hexo和coding建立静态博客站点
背景 由于工作性质的原因,做技术的总想记录和分享一下自己的学习和成长历程,向这世界证明我来过.写文章,发博客,一开始使用51cto,广告太多,看起来让人很痛苦:接着试用了博客园,广告少一些,但感觉还是 ...
- github+hexo搭建自己的博客网站(六)进阶配置(搜索引擎收录,优化你的url)
详细的可以查看hexo博客的演示:https://saucxs.github.io/ 绑定了域名: http://www.chengxinsong.cn hexo+github博客网站源码(可以clo ...
- 基于Hexo和Github搭建博客
搭建自己的个人博客. 准备工作 确保电脑需要已下载安装node和npm.查看安装是否成功,windows只需在命令行输入以下两条命令即可. 1 2 $ node -v $ npm -v 安装hexo ...
- 《Hexo+github搭建个人博客》
<Hexo+github搭建个人博客> 文/冯皓林 完稿:2016.4.22-2016.4.23 注意:本节教程只针对Windows用户.本教程由无人赞助,赞助写出. <Hexo+g ...
- 可能是最详细的 Hexo + GitHub Pages 搭建博客的教程
前言:博主目前大三,Web 前端爱好者.写博客的好处,不是为了写而写,而是一个记录思想的过程.不要考虑它能带给你什么,而是你自己从中收获了什么. 最近刚好有空,于是就参照网上的各种教程,搭建了一个博客 ...
- github+hexo搭建自己的博客网站(一)基础入门
github提供的page,hexo提供的静态博客文档,这样可以搭建一个自己的一个博客网站. 使用github pages服务搭建博客的好处有: 全是静态文件,访问速度快: 免费方便,不用花一分钱就可 ...
- github+hexo搭建自己的博客网站(七)注意事项(避免read.me,CNAME文件的覆盖,手动改github page的域名)
详细的可以查看hexo博客的演示:https://saucxs.github.io/ 绑定域名可以查看:http://www.chengxinsong.cn 可以查看在github上生成的静态文件(如 ...
- hexo建立github,gitcafe博客并实时同步的要点
把hexo博客的源码和生成的页面实时同步到github和gitcafe. 用搜索引擎搜索"github 博客"等关键字会出现大量很好的文章教小白一步步搭建.我这里列出一些关键点,希 ...
- 使用Node.js+Hexo+Github搭建个人博客
一.为什么要花时间去搭建个人博客? 首先说说为什么我想要尝试着去搭建属于自己的Blog,古人云:“好记性不如烂笔头”.一开始我把笔记做在本子上.电脑上,发现要用的时候特别地不方便,而且越记越多.越多越 ...
随机推荐
- day26.面向对象-反射封装内置方法
封装 隐藏对象的属性和实现细节,近对外提供公共访问方式 广义:代码保护,面向对象思想 狭义:将属性,方法隐藏起来 class Person: __key = 123456 # 私有的静态属性 def ...
- Sublime插件:Terminal
这几天在window环境下用gulp构建前端工程,切来切去浪费了不少时间(右键sublime菜单打开文件所在目录,然后去项目根目录,右键打开cmder).这点webstorm自带的Terminal真的 ...
- UOJ#440. 【NOIP2018】填数游戏 动态规划
原文链接www.cnblogs.com/zhouzhendong/p/UOJ440.html 前言 菜鸡选手到省选了才做联赛题. 题解 首先我们分析一下性质: 1. 假如一个格子是 0,那么它的右上角 ...
- 二、自动化测试平台搭建-搭建jango环境
上篇说的是安装虚拟环境,后面的项目全部放在虚拟环境上 1.创建一个虚拟环境py3,进入虚拟环境 2.安装django包:pip install django==1.8.2 3.在家目录下的Deskto ...
- 怎样在ASP.NET(C#) 使用Json序列化反序列化问题?
using System; using System.Collections.Generic; using System.Web; using System.Web.Script.Serializat ...
- 简繁体转化处理 opencc 安装【centos 7】
代码 #准备工作 yum install cmake yum install git #下载代码 git clone https://github.com/BYVoid/OpenCC #安装文档生成 ...
- 190327 Python登录接口
#!Author:John # _*_ coding: utf-8 _*_ #编写登录接口 #输入用户名密码 #认证成功后显示欢迎信息 #输错三次后锁定 import sys, os, getpass ...
- python 基本认证
# import requests # # response = requests.get('http://127.0.0.1:8080/manager/html', auth=('tomcat', ...
- Vue(二十九)页面加载过慢问题
1.使用按需加载 2.路由懒加载
- 日常问题181101: ueditor文本编辑器
下载地址: https://ueditor.baidu.com/website/download.html#ueditor 把下载好的文件整个复制到根目录(或是,想要存放的目录) 引入css: < ...