我需要的快速、简洁且高效的博客框架->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 发布