使用Hexo搭建博客

我需要的快速、简洁且高效的博客框架->Hexo

Hexo 支持 GitHub Flavored Markdown 的所有功能,甚至可以整合 Octopress 的大多数插件。

安装

##全局安装hexo
npm install hexo-cli -g
#初始化hexo目录
hexo init <folder>
cd <folder>
npm install

安装后目录结构说明:

📦blog #博客·安装路径
 ┣ 📂scaffolds  #模板文件
 ┃ ┣ 📜draft.md #草稿模板
 ┃ ┣ 📜page.md  #页面模板
 ┃ ┗ 📜post.md  #文章模板
 ┣ 📂source #资源文件
 ┃ ┗ 📂_posts   #文章路径
 ┃ ┃ ┗ 📜hello-world.md #实际文章
 ┣ 📂themes #主题
 ┃ ┗ 📜.gitkeep
 ┣ 📜package.json
 ┣ 📜_config.landscape.yml  #_config.[theme].yml 用于编辑主题配置
 ┗ 📜_config.yml    #配置文件 !重要!!

启动命令

#更多详细命令查看官网:https://hexo.io/zh-cn/docs/commands.html
#启动
hexo s
#下面为指定配置文件
hexo s --config custom.yml,custom2.json,custom3.yml

打开浏览器输入http://localhost:4000/ 出现hexo界面则表示启动成功了

管理与编写博客

文档管理结构

下面是我们常见的一个文档管理方式,不论doc也好,还是md也罢,我们都喜欢通过建立文件夹的方式进行分类然后梳理,下面的我通过建立文档同名的方式(或者图床)表示文档需要的文件。

📦macdown
 ┣ 📂工具 #分类
 ┃ ┣ 📂minio #分类
 ┃ ┃ ┣ 📂minio #对应md文件的附件
 ┃ ┃ ┃ ┗ 📜simplicity.gif
 ┃ ┃ ┗ 📜minio.md #md文件
 ┃ ┣ 📂博客 #分类
 ┃ ┃ ┣ 📂使用Hexo搭建博客  #对应md文件的附件
 ┃ ┃ ┃ ┗ 📜image-20210623193347044.png
 ┃ ┃ ┣ 📜使用Hexo搭建博客.md
 ┃ ┃ ┗ 📜关于管理与写博客.md
 ┃ ┗ 📜常用工具.md #文章
 ┣ 📂开发 #分类
 ┃ ┗ 📂bat #更多分类与文章

上面这个目录结构,我相信不管是写博客还是仅仅做笔记或者整理资料的人,大部分过程应该都是这样的,我习惯将这个结构放在OneDrive中,OneDrive可以通过邀请增加容量,嫌麻烦某宝有售(1.5¥,10G(最大10G,写文章够用),5分钟到)。

推荐工具

编辑神器:Typora MacDown编辑神器 (万年bate版本,免费使用)

生产力工具:uTools ->安装自动化助手 辅助编辑更加方便(免费使用)

发布配置

插件

下面的自定义配置为使用git发布博客,首先需安装hexo-deployer-git 插件,其它插件为更方便使用

## git上传发布,一键部署时使用
npm install hexo-deployer-git --save

#hexo增强配置,可以不用手动维护 front-matter,文章标题建议使用 20210628 标题.md
npm install hexo-enhancer --save

#处理图片路径转换问题,当开启post_asset_folder时,使用文件路径转换
npm hexo-asset-image --save

自定义配置文件

自定义配置文件如下,可在hexo目录下建立custom.yml文件,自定义以下内容,不污染原始文件便于后期升级hexo

#详情看附录中配置文件详细介绍
#Site 网站设置 基础设置
#网站标题
title: mixley
#网站副标题
subtitle: '呜啦啦'
#网站描述,SEO优化时会扫描
description: ''
#网站关键字,SEO优化时会扫描,多个逗号分隔
keywords: '技术栈A,技术栈B'
#作者
author: mixley
#语言,使用主题时支持的语言列表,主题文件中languages文件夹下查看
language: zh-CN
#时区,默认为电脑时区,中国大陆:Asia/Shanghai
timezone: Asia/Shanghai

#URL 网址 基础设置,url如果发布到gitbub,请参考注册github.io建立免费页面
#生成的地址中,会携带这个地址,博客根路径(怎么访问的就怎么填写)
url: 'https://mixley.github.io'
#文章访问编号 hexo-enhancer增强配置中提供
permalink: :year/:abbrlink.html
#网站关键字,增强配置专用,其余tag会收集keywords中tags自动匹配
tags: '关键字A,关键字B'

#启动 Asset 文件夹(推荐开启,会将同名目录一起打包,否则只打包md,也可以使用第三方图床解决)
post_asset_folder: true
#把链接改为与根目录的相对位址
relative_link: false

#Home page setting 首页文章设置(可以不设置)
index_generator:
  path: ''
  #每页数量
  per_page: 10
  order_by: -date

#Category & Tag   分类 & 标签 中文标签可能存在编码问题,需转换,格式为 中文: 英文 多个记录直接换行
default_category: uncategorized
#分类对应值 后期建立文件夹,需要在这里增加英文映射
category_map:
    嘿嘿: heihei
    哈哈: haha
#标签对应值 keywords 关键字中文全部需要进行处理,tags中关键字同样需要处理
tag_map:
    技术栈A: jA
    技术栈B: jB
    
#Pagination 分页设置(可以不设置)
per_page: 10
pagination_dir: page

#使用主题,可以选择其它主题,这是默认主题
theme: landscape

#发布配置,若使用git,需要安装 npm install hexo-deployer-git --save
deploy:
 type: git
#多服务配置
 repository:
   #使用ssh的方式,配置ssh密钥可以免登录发布
   github: git@github.com:mixley/mixley.GitHub.io.git
   gitee: git@gitee.com:mixley/mixley.git
 branch: master

Hexo三连命令

#清除
hexo clean

#指定配置文件生成
hexo g --config custom.yml

#发布
hexo d --config custom.yml

#指定配置文件生成并发布,可以使用下面命令
#hexo g -d --config custom.yml

补充

三连命令操作文件

手动创建文件push.cmd(任意调整),针对文章放在OneDrive或其它同步文件夹,不习惯使用hexo目录的,可以使用此cmd进行发布。cmd设置好后,可以放开始菜单快速调用或者使用uTools等效率工具快速呼出 。

@echo off
chcp  65001 > nul 2>&1

@REM 此处设定安装的hexo文件夹路径
set dir=E:\work\js\hexo
@REM 此处设定文章目录路径
set blog=.

@REM 备份文件夹路径
set backDir=%dir%\back\%DATE%
set _postsDir=%dir%\source\_posts
set aboutDir=%dir%\source\about

echo 清理文件
IF EXIST "%backDir%" RD /Q/S "%backDir%" > nul 2>&1
IF NOT EXIST "%backDir%" md "%backDir%" > nul 2>&1
echo 备份文件夹(若发现备份异常,请将 关于我.md 中文修改为英文,如 about.md ,系统原因)
IF EXIST "%aboutDir%\index.md" move "%aboutDir%\index.md" "%_postsDir%\关于我.md"
move  "%_postsDir%" "%backDir%"
echo 备份成功,创建文件夹
IF NOT EXIST "%_postsDir%" md "%_postsDir%"
echo 复制文件夹 
Xcopy "%blog%" "%_postsDir%" /Y/E/C/I > nul 2>&1
move "%_postsDir%\关于我.md" "%aboutDir%\index.md" 

@REM 切换文件夹到hexo路径下执行命令
pushd %dir%
echo 复制成功,清理中。
call hexo clean > nul 2>&1
echo 清理完成,生成发步文章中
call hexo g -d --config custom.yml > nul 2>&1
echo 发布文件成功
@REM 切换到当前目录
popd
echo 执行结束

pause
exit

uTools自动化助手脚本

uTools,自动化助手脚本,快速生成Front Matter (PS,开启文本无匹配功能,任意位置可以使用此脚本。另,超级面板输入脚本名称,按中键可以呼出执行脚本)

//自动化助手,Fornt Matter Date Gennerate
//获取当前日期,格式YYYY-MM-DD
let getNowFormatDay = function(nowDate){
    let char = "-";
    if(nowDate == null){
        nowDate = new Date();
    }
    let day = nowDate.getDate();
    let month = nowDate.getMonth() + 1;//注意月份需要+1
    let year = nowDate.getFullYear();
    //补全0,并拼接
    return year + char + completeDate(month) + char +completeDate(day);
}

//获取当前时间,格式YYYY-MM-DD HH:mm:ss
let getNowFormatTime = function() {
    let nowDate = new Date();
    let colon = ":";
    let h = nowDate.getHours();
    let m = nowDate.getMinutes();
    let s = nowDate.getSeconds();
    //补全0,并拼接
    return getNowFormatDay(nowDate) + " " + completeDate(h) + colon + completeDate(m) + colon + completeDate(s);
}

//补全0
let completeDate =function(value) {
    return value < 10 ? "0"+value:value;
}

let date = getNowFormatTime();
//下面两行自动移动到MD头部增加日期,b
utools.simulateKeyboardTap('home', utools.isMacOs() ? 'command' : 'ctrl')
date="---\ndate: "+date+"\n---\n "

utools.copyText(date)
utools.simulateKeyboardTap('v', utools.isMacOs() ? 'command' : 'ctrl')

附录

主题推荐:next

配置文件详解

#Hexo Configuration
##Docs: https://hexo.io/docs/configuration.html
##Source: https://github.com/hexojs/hexo/
##中文文档:https://hexo.io/zh-cn/docs/configuration
#Site 网站设置 基础设置
#网站标题
title: Hexo
#网站副标题
subtitle: ''
#网站描述,SEO优化时会扫描
description: '全栈的自我修养……'
#网站关键字,SEO优化时会扫描,多个逗号分隔
keywords: 'java,C'
#作者
author: John
#语言,使用主题时支持的语言列表,主题文件中languages文件夹下查看
language: zh-CN
#时区,默认为电脑时区,中国大陆:Asia/Shanghai
timezone: Asia/Shanghai


#URL 网址 基础设置,url如果发布到gitbub,请参考注册github.io建立免费
##Set your site url here. For example, if you use GitHub Page, set url as 'https://username.github.io/project'
#生成的地址中,会携带这个地址,博客根路径(怎么访问的就怎么填写)
url: 'http://example.com'
#文章路径,title为中文在github发布无法显示
permalink: :year/:month/:day/:title/
permalink_defaults: ''                  #永久链接中各部分的默认值,如下
#------------------------
#permalink_defaults: 
#year: 2021
#------------------------
pretty_urls:
  #是否在永久链接中保留尾部的 index.html,设置为 false 时去除
  trailing_index: true
  #是否在永久链接中保留尾部的 .html, 设置为 false 时去除 (对尾部的 index.html无效)
  trailing_html: true


#Directory 目录
#资源文件夹,这个文件夹用来存放内容
source_dir: source
#公共文件夹,这个文件夹用于存放生成的站点文件
public_dir: public
#标签文件夹
tag_dir: tags
#归档文件夹
archive_dir: archives
#分类文件夹
category_dir: categories
#Include code 文件夹,source_dir 下的子目录
code_dir: downloads/code
#国际化(i18n)文件夹
i18n_dir: :lang
#跳过指定文件的渲染。匹配到的文件将会被不做改动地复制到 public 目录中。您可使用 glob 表达式来匹配路径。如下
#------------------------
##skip_render: "mypage/**/*"
#将会直接将 `source/mypage/index.html` 和 `source/mypage/code.js` 不做改动地输出到 'public' 目录
#你也可以用这种方法来跳过对指定文章文件的渲染
#skip_render: "_posts/test-post.md"
#这将会忽略对 'test-post.md' 的渲染
#------------------------
skip_render:


#Writing 文章 基本不用动,只有那个post_asset_folder用来设置图片路径
#新文章的文件名称
new_post_name: :title.md
#预设布局,默认布局是文章
default_layout: post
#把标题转换为 title case
titlecase: false
external_link:
  #在新标签中打开链接
  enable: true
  #对整个网站(site)生效或仅对文章(post)生效
  field: site
  #需要排除的域名。主域名和子域名如 www 需分别配置[]
  exclude: ''
#把文件名称转换为 (1) 小写或 (2) 大写
filename_case: 0
#显示草稿
render_drafts: false
#启动 Asset 文件夹(推荐开启)
post_asset_folder: true
#把链接改为与根目录的相对位址
relative_link: false
#显示未来的文章  ??
future: true
#代码块的设置, 请参考 Highlight.js 进行设置
highlight:
  enable: true
  line_number: true
  auto_detect: false
  tab_replace: ''
  wrap: true
  hljs: false
#代码块的设置, 请参考 PrismJS 进行设置
prismjs:
  enable: false
  preprocess: true
  line_number: true
  tab_replace: ''

#Home page setting 首页文章设置
#path: Root path for your blogs index page. (default = '')
#per_page: Posts displayed per page. (0 = disable pagination)
#order_by: Posts order. (Order by date descending by default)
index_generator:
  path: ''
  per_page: 10
  order_by: -date

#Category & Tag   分类 & 标签 !!需要映射为URLEncode
#uncategorized默认从属分类,%E6%9C%AA%E5%88%86%E7%B1%BB是未分类的URLEncode值
#default_category: uncategorized
default_category: uncategorized
#分类对应值
category_map:
#标签对应值
tag_map:

#Metadata elements
##https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta
#Meta generator 标签。 值为 false 时 Hexo 不会在头部插入该标签
meta_generator: true

#Date / Time format
##Hexo uses Moment.js to parse and display date
##You can customize the date format as defined in
##http://momentjs.com/docs/#/displaying/format/
date_format: YYYY-MM-DD
time_format: HH:mm:ss
##updated_option supports 'mtime', 'date', 'empty'
updated_option: 'mtime'

#Pagination
##Set per_page to 0 to disable pagination
per_page: 10
pagination_dir: page

#Include / Exclude file(s)
##include:/exclude: options only apply to the 'source/' folder
#Hexo 默认会忽略隐藏文件和文件夹(包括名称以下划线和 . 开头的文件和文件夹,Hexo 的 _posts 和 _data 等目录除外)。通过设置此字段将使 Hexo 处理他们并将它们复制到 source 目录下。
include:
#Hexo 会忽略这些文件和目录,项目文件忽略配置
exclude:
#Ignore files/folders,忽略包括themes/下文件与文件夹(所有上传忽略配置)
ignore:

#Extensions
##Plugins: https://hexo.io/plugins/
##Themes: https://hexo.io/themes/
#使用主题
theme: landscape

#Deployment
##Docs: https://hexo.io/docs/one-command-deployment
#发布配置,若使用git,需要安装 npm install hexo-deployer-git --save
#安装
#------------------------
#deploy:
# type: git
#单服务配置
# repo: <repository url> #https://bitbucket.org/JohnSmith/johnsmith.bitbucket.io
#多服务配置
# repository:
#   github: <github url>
#   gitee: <gitee url>
# branch: [branch]
# message: [message]
#------------------------
deploy:
  type: ''

本文由博客群发一文多发等运营工具平台 OpenWrite 发布

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 206,602评论 6 481
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 88,442评论 2 382
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 152,878评论 0 344
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 55,306评论 1 279
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 64,330评论 5 373
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,071评论 1 285
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,382评论 3 400
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,006评论 0 259
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 43,512评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,965评论 2 325
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,094评论 1 333
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,732评论 4 323
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,283评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,286评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,512评论 1 262
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,536评论 2 354
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,828评论 2 345

推荐阅读更多精彩内容