阅读 221

使用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 发布!

文章分类
代码人生
文章标签