博客引擎 Hexo 入门介绍+安装笔记

Hexo

Hexo is a fast, simple & powerful blog framework.

一直使用的是 jekyll,文章越写越多,不太好管理。是时候换个博客尝试一下。

Prepare

blog zh_CN

本机为 MAC。不同系统会略有不同,但是大同小异。

  • Node.js

必须。

作用:用来生成静态页面的。

houbinbindeMacBook-Pro:~ houbinbin$ node -v
v6.2.2
  • Git

必须。

作用:代码仓库管理。

houbinbindeMacBook-Pro:~ houbinbin$ git --version
git version 2.8.1
  • Github

申请个账号。我相信你应该知道。

Install

  • 下载安装 hexo

找一个你想放置blog的文件夹,执行:

sudo npm install -g hexo-cli

实际操作:

houbinbindeMacBook-Pro:fork houbinbin$ pwd
/Users/houbinbin/it/fork
houbinbindeMacBook-Pro:fork houbinbin$ npm install -g hexo-cli
fetchMetadata → network  。。。。
  • 测试

等待下载完成。输入命令 hexo

houbinbindeMacBook-Pro:fork houbinbin$ hexo
Usage: hexo <command>

Commands:
  help     Get help on a command.
  init     Create a new Hexo folder.
  version  Display version information.

Global Options:
  --config  Specify config file instead of using _config.yml
  --cwd     Specify the CWD
  --debug   Display all verbose messages in the terminal
  --draft   Display draft posts
  --safe    Disable all plugins and scripts
  --silent  Hide output on console

For more help, you can use 'hexo help [command]' for the detailed information
or you can check the docs: http://hexo.io/docs/
  • 初始化博客
// 建立一个博客文件夹,并初始化博客,<folder>为文件夹的名称,可以随便起名字
$ hexo init <folder>
// 进入博客文件夹,<folder>为文件夹的名称
$ cd <folder>
// node.js的命令,根据博客既定的dependencies配置安装所有的依赖包
$ npm install

此处为了方便, 直接使用 XXX.github.io 命名。
实际操作

houbinbindeMacBook-Pro:fork houbinbin$ hexo init ryo.github.io
INFO  Cloning hexo-starter to ~/IT/fork/ryo.github.io
Cloning into '/Users/houbinbin/IT/fork/ryo.github.io'...
remote: Counting objects: 53, done.
remote: Total 53 (delta 0), reused 0 (delta 0), pack-reused 53
Unpacking objects: 100% (53/53), done.
Checking connectivity... done.
Submodule 'themes/landscape' (https://github.com/hexojs/hexo-theme-landscape.git) registered for path 'themes/landscape'
Cloning into 'themes/landscape'...
remote: Counting objects: 764, done.
remote: Total 764 (delta 0), reused 0 (delta 0), pack-reused 764
Receiving objects: 100% (764/764), 2.53 MiB | 130.00 KiB/s, done.
Resolving deltas: 100% (390/390), done.
Checking connectivity... done.
Submodule path 'themes/landscape': checked out 'decdc2d9956776cbe95420ae94bac87e22468d38'
INFO  Install dependencies
npm WARN deprecated swig@1.4.2: This package is no longer maintained
npm WARN deprecated minimatch@0.3.0: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue
npm WARN prefer global marked@0.3.6 should be installed with -g

> fsevents@1.1.1 install /Users/houbinbin/IT/fork/ryo.github.io/node_modules/fsevents
> node install

[fsevents] Success: "/Users/houbinbin/IT/fork/ryo.github.io/node_modules/fsevents/lib/binding/Release/node-v48-darwin-x64/fse.node" already installed
Pass --update-binary to reinstall or --build-from-source to recompile

> dtrace-provider@0.8.1 install /Users/houbinbin/IT/fork/ryo.github.io/node_modules/dtrace-provider
> node scripts/install.js

新开一个窗口

houbinbindeMacBook-Pro:blog houbinbin$ pwd
/Users/houbinbin/it/fork/ryo.github.io
houbinbindeMacBook-Pro:blog houbinbin$ npm install
houbinbindeMacBook-Pro:blog houbinbin$ ls
_config.yml	node_modules	package.json	scaffolds	source		themes

config blog

类似 jekyll,需要修改 _config.yml文件。

修改网站相关信息

title: echo blog
subtitle: the blog of ryo
description: One Echo, Endless Miss
author: ryo
language: zh-CN
timezone: Asia/Shanghai

配置统一资源定位符(个人域名)

url: https://ryo.github.io

对于root(根目录)、permalink(永久链接)、permalink_defaults(默认永久链接)等其他信息保持默认。

配置部署

deploy:
  type: git
  repo: https://github.com/houbb/ryo.github.io.git
  branch: master

Hello World

  • 新建一篇文章
// 新建一篇文章
hexo new "文章标题"

实际:

houbinbindeMacBook-Pro:ryo.github.io houbinbin$ hexo new "helloworld"
INFO  Created: ~/IT/fork/ryo.github.io/source/_posts/helloworld.md
  • 启动服务
hexo server

实际

houbinbindeMacBook-Pro:ryo.github.io houbinbin$ hexo server
INFO  Start processing
INFO  Hexo is running at http://localhost:4000/. Press Ctrl+C to stop.

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

博客发布

$ hexo generate
$ hexo deploy

前面的 deploy 已经指定了其对应的 github 仓库。你可以在github上创建一个 XXX.github.io 项目,或者使用其他方式。

其中 XXX 是你的github用户名。我以前使用 jekyll 已经占用一个了。此处先演示本地。

实际操作:

houbinbindeMacBook-Pro:ryo.github.io houbinbin$ hexo generate
INFO  Start processing
INFO  Files loaded in 177 ms
INFO  Generated: index.html
INFO  Generated: archives/index.html
INFO  Generated: fancybox/blank.gif
INFO  Generated: fancybox/jquery.fancybox.css
INFO  Generated: fancybox/jquery.fancybox.pack.js
INFO  Generated: fancybox/fancybox_loading.gif
INFO  Generated: fancybox/jquery.fancybox.js
INFO  Generated: fancybox/fancybox_overlay.png
INFO  Generated: fancybox/fancybox_loading@2x.gif
INFO  Generated: fancybox/fancybox_sprite.png
INFO  Generated: fancybox/fancybox_sprite@2x.png
INFO  Generated: archives/2017/03/index.html
INFO  Generated: archives/2017/index.html
INFO  Generated: css/fonts/FontAwesome.otf
INFO  Generated: js/script.js
INFO  Generated: fancybox/helpers/jquery.fancybox-buttons.js
INFO  Generated: fancybox/helpers/jquery.fancybox-buttons.css
INFO  Generated: fancybox/helpers/jquery.fancybox-thumbs.css
INFO  Generated: fancybox/helpers/jquery.fancybox-thumbs.js
INFO  Generated: css/style.css
INFO  Generated: css/fonts/fontawesome-webfont.woff
INFO  Generated: fancybox/helpers/jquery.fancybox-media.js
INFO  Generated: css/fonts/fontawesome-webfont.eot
INFO  Generated: fancybox/helpers/fancybox_buttons.png
INFO  Generated: css/images/banner.jpg
INFO  Generated: css/fonts/fontawesome-webfont.svg
INFO  Generated: css/fonts/fontawesome-webfont.ttf
INFO  Generated: 2017/03/29/hello-world/index.html
INFO  28 files generated in 656 ms

解决方式 npm install hexo-deployer-git --save

houbinbindeMacBook-Pro:ryo.github.io houbinbin$ hexo deploy
ERROR Deployer not found: github
houbinbindeMacBook-Pro:ryo.github.io houbinbin$ npm install hexo-deployer-git --save
hexo-site@0.0.0 /Users/houbinbin/IT/fork/ryo.github.io
`-- hexo-deployer-git@0.2.0

重新运行

houbinbindeMacBook-Pro:ryo.github.io houbinbin$ hexo deploy
INFO  Deploying: git
INFO  Setting up Git deployment...
Initialized empty Git repository in /Users/houbinbin/IT/fork/ryo.github.io/.deploy_git/.git/
[master (root-commit) 29675e7] First commit
 1 file changed, 0 insertions(+), 0 deletions(-)
 create mode 100644 placeholder
INFO  Clearing .deploy_git folder...
INFO  Copying files from public folder...
[master 02b7255] Site updated: 2017-03-29 23:17:16
 29 files changed, 5793 insertions(+)
 create mode 100644 2017/03/29/hello-world/index.html
 create mode 100644 archives/2017/03/index.html
 create mode 100644 archives/2017/index.html
 create mode 100644 archives/index.html
 create mode 100644 css/fonts/FontAwesome.otf
 create mode 100644 css/fonts/fontawesome-webfont.eot
 create mode 100644 css/fonts/fontawesome-webfont.svg
 create mode 100644 css/fonts/fontawesome-webfont.ttf
 create mode 100644 css/fonts/fontawesome-webfont.woff
 create mode 100644 css/images/banner.jpg
 create mode 100644 css/style.css
 create mode 100644 fancybox/blank.gif
 create mode 100644 fancybox/fancybox_loading.gif
 create mode 100644 fancybox/fancybox_loading@2x.gif
 create mode 100644 fancybox/fancybox_overlay.png
 create mode 100644 fancybox/fancybox_sprite.png
 create mode 100644 fancybox/fancybox_sprite@2x.png
 create mode 100644 fancybox/helpers/fancybox_buttons.png
 create mode 100644 fancybox/helpers/jquery.fancybox-buttons.css
 create mode 100644 fancybox/helpers/jquery.fancybox-buttons.js
 create mode 100644 fancybox/helpers/jquery.fancybox-media.js
 create mode 100644 fancybox/helpers/jquery.fancybox-thumbs.css
 create mode 100644 fancybox/helpers/jquery.fancybox-thumbs.js
 create mode 100644 fancybox/jquery.fancybox.css
 create mode 100644 fancybox/jquery.fancybox.js
 create mode 100644 fancybox/jquery.fancybox.pack.js
 create mode 100644 index.html
 create mode 100644 js/script.js
 delete mode 100644 placeholder
To https://github.com/houbb/ryo.github.io.git
 + 921a4a1...02b7255 HEAD -> master (forced update)
Branch master set up to track remote branch master from https://github.com/houbb/ryo.github.io.git.
INFO  Deploy done: git

Windows 安装记录

准备工作

  • 安装 Node(必须)

官方 https://nodejs.org/en/ 下载安装即可。

node -v
v12.16.2
  • git 安装
git --version
git version 2.24.0.rc1.windows.1
  • github 申请

正式使用

  • 安装 hexo
npm install -g hexo-cli
  • 初始化文件夹
$ hexo init itbook52.github.io
$ cd itbook52.github.io

这个目标文件夹必须为空

生成的文件信息

$ ls
_config.yml  db.json  node_modules/  package.json  package-lock.json  scaffolds/  source/  themes/

修改配置

为了更方便的使用,我们修改一下 _config.yml 配置文件。

  • 原始内容
# Hexo Configuration
## Docs: https://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/

# Site
title: Hexo
subtitle: ''
description: ''
keywords:
author: John Doe
language: en
timezone: ''

# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: http://yoursite.com
root: /
permalink: :year/:month/:day/:title/
permalink_defaults:
pretty_urls:
  trailing_index: true # Set to false to remove trailing 'index.html' from permalinks
  trailing_html: true # Set to false to remove trailing '.html' from permalinks

# Directory
source_dir: source
public_dir: public
tag_dir: tags
archive_dir: archives
category_dir: categories
code_dir: downloads/code
i18n_dir: :lang
skip_render:

# Writing
new_post_name: :title.md # File name of new posts
default_layout: post
titlecase: false # Transform title into titlecase
external_link:
  enable: true # Open external links in new tab
  field: site # Apply to the whole site
  exclude: ''
filename_case: 0
render_drafts: false
post_asset_folder: false
relative_link: false
future: true
highlight:
  enable: true
  line_number: true
  auto_detect: false
  tab_replace: ''
  wrap: true
  hljs: false

# 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
default_category: uncategorized
category_map:
tag_map:

# Metadata elements
## https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta
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
## Use post's date for updated date unless set in front-matter
use_date_for_updated: false

# 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
include:
exclude:
ignore:

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: landscape

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: ''
  • 修改后

主要修改以下三个部分的内容:

title: IT Books
subtitle: the it books
description: 收集常见的 it 书籍,供学习之用
author: ryo
language: zh-CN
timezone: Asia/Shanghai

url: https://itbook52.github.io

deploy:
  type: git
  repo: https://github.com/itbook52/itbook52.github.io.git
  branch: master

运行

  • 新建博客
hexo new "helloworld"
  • 启动
hexo server

通过 http://localhost:4000 可以访问。

生成与发布

  • 生成静态文件
$ hexo generate
  • 将本地文件与远程进行管理
git init
git add *
git commit -m "first commit"
git remote add origin https://github.com/itbook52/itbook52.github.io.git
git push -u origin master
  • 部署
$ hexo deploy

报错:

ERROR Deployer not found: git

执行

npm install --save hexo-deployer-git

重新执行即可。

主题

主题列表

主题

推荐主题

hexo-theme-next

hexo-theme-yilia

使用 next 主题

$ pwd
D:\_github\itbook52.github.io

在 blog 的 themes 目录下,下载 next 主题。

$ git clone https://github.com/theme-next/hexo-theme-next themes/next

将主题直接下载到对应的 themes\next 目录下。

配置 _config.yml

配置主题为 next

theme: next

启动

  • 清空历史数据
hexo clean
  • 启动服务
hexo server

再次访问即可 http://localhost:4000/

添加本地搜索

安装

安装 hexo-generator-searchdb,在站点的根目录下执行以下命令:

npm install hexo-generator-searchdb --save

编辑配置

编辑站点配置文件,新增以下内容到任意位置:

search:
  path: search.xml
  field: post
  format: html
  limit: 10000

编辑主题配置文件

启用本地搜索功能:

# Local search
local_search:
  enable: true

报错

INFO  Start processing
FATAL Something's wrong. Maybe you can find the solution here: https://hexo.io/docs/troubleshooting.html
Template render error: (unknown path)
  Error: expected end of comment, got end of file

原因

hexo 中 {# 属于吧保留字,会报错。

解决方案

{# 拆开写。

参考资料

hexo-theme-next

Hexo个人博客NexT主题添加Local Search本地搜索

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mfbz.cn/a/264484.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

LLM之RAG实战(八)| 使用Neo4j和LlamaIndex实现多模态RAG

人工智能和大型语言模型领域正在迅速发展。一年前&#xff0c;没有人使用LLM来提高生产力。时至今日&#xff0c;很难想象我们大多数人或多或少都在使用LLM提供服务&#xff0c;从个人助手到文生图场景。由于大量的研究和兴趣&#xff0c;LLM每天都在变得越来越好、越来越聪明。…

网站使用https认证

随着网络的普及和依赖程度的增加&#xff0c;网站安全性问题也日益凸显。为了确保用户和网站之间的数据传输安全&#xff0c;采用HTTPS认证已经变得至关重要。 1.数据安全是首要任务 在互联网上&#xff0c;信息传输是网站运作的基础。然而&#xff0c;未加密的传输容易受到中…

计算机网络——计算机网络的概述(一)

前言&#xff1a; 面对马上的期末考试&#xff0c;也为了以后找工作&#xff0c;需要掌握更多的知识&#xff0c;而且我们现实生活中也已经离不开计算机&#xff0c;更离不开计算机网络&#xff0c;今天开始我们就对计算机网络的知识进行一个简单的学习与记录。 目录 一、什么…

案例136:基于微信小程序的公交信息在线查询系统

文末获取源码 开发语言&#xff1a;Java 框架&#xff1a;SSM JDK版本&#xff1a;JDK1.8 数据库&#xff1a;mysql 5.7 开发软件&#xff1a;eclipse/myeclipse/idea Maven包&#xff1a;Maven3.5.4 小程序框架&#xff1a;uniapp 小程序开发软件&#xff1a;HBuilder X 小程序…

使用Velero备份、恢复k8s集群上的资源

一、Velero简介 Velero提供备份和恢复 Kubernetes 集群资源和持久卷的工具。 Velero功能&#xff1a; 对群集进行备份&#xff0c;并在丢失时进行还原。将集群资源迁移到其他集群。 Velero 包括&#xff1a; 在群集上运行的服务器在本地运行的命令行客户端 开源地址&…

【终极教程】Cocos2dx服务端重构(优化cocos2dx服务端)

文章目录 概述问题概述1. 代码混淆代码加密具体步骤测试和配置阶段IPA 重签名操作步骤2. 缺乏文档3. 缺乏推荐的最佳实践4. 性能问题 总结 概述 Cocos2dx是一个非常流行的跨平台游戏引擎&#xff0c;开发者可以使用这个引擎来开发iOS、Android和Web游戏。同时&#xff0c;Coco…

SSTI模板注入(Flask+Jinja2)

文章目录 一、前置知识1.1 模板引擎1.2 渲染 二、SSTI模板注入2.1 原理2.2 沙箱逃逸沙箱逃逸payload讲解其他重要payload 2.3 过滤绕过 三、PasecaCTF-2019-Web-Flask SSTI 一、前置知识 1.1 模板引擎 模板引擎&#xff08;这里特指用于Web开发的模板引擎&#xff09;是为了使…

nodejs+vue+ElementUi会员制停车场车位系统

总之&#xff0c;智能停车系统使停车场管理工作规范化&#xff0c;系统化&#xff0c;程序化&#xff0c;避免停车场管理的随意性&#xff0c;提高信息处理的速度和准确性&#xff0c;能够及时、准确、有效的查询和修改停车场情况。 三、任务&#xff1a;小组任务和个人任务 智…

Linux中vim中进行替换/批量替换

Linux中vim中进行替换/批量替换 一:在 Vim 中进行文本替换的操作是通过使用 :s&#xff08;substitute&#xff09;命令来实现的。这里是一些基本的替换命令 替换当前行的第一个匹配项: :s/old/new/这将替换当前行中第一个出现的 “old” 为 “new”。 替换当前行的所有匹配项…

工作实践篇 Flink(一:flink提交jar)

一&#xff1a;参数 flink 模式 – standalone 二&#xff1a;步骤 1. 将本地测试好的代码进行本地运行。确保没问题&#xff0c;进行打包。 2. 找到打好的jar包&#xff0c;将jar包上传到对应的服务器。 3. 执行flink命令&#xff0c;跑代码。 /opt/flink/flink-1.13.6/bi…

ASP.Net实现姓名添加查询(三层架构)

目录 演示功能&#xff1a; 点击启动生成页面 点击搜索模糊查询 点击添加跳转新界面 点击Button添加姓名 步骤&#xff1a; 1、建文件 2、添加引用关系 3、根据数据库中的列写Models下的XueshengModels类 4、DAL下的DBHelper&#xff08;对数据库进行操作&#xff09;…

轻量Http客户端工具VSCode和IDEA

文章目录 前言Visual Studio Code 的插件 REST Client编写第一个案例进阶&#xff0c;设置变量进阶&#xff0c;设置Token 前言 作为一个WEB工程师&#xff0c;在日常的使用过程中&#xff0c;HTTP请求是必不可少的。我们采用的HTTP工具有如下&#xff1a; Postman Insomnia Ap…

MyBatis见解3

8.MyBatis的关联查询 8.3.一对多查询 需求&#xff1a;查询所有用户信息及用户关联的账户信息。 分析&#xff1a;用户信息和他的账户信息为一对多关系&#xff0c;并且查询过程中如果用户没有账户信息&#xff0c;此时也要将用户信息查询出来&#xff0c;此时左外连接查询比…

Spring和Spring Boot框架中怎么理解Bean这个核心概念

在Spring和Spring Boot框架中&#xff0c;Bean是一个核心概念。要理解Spring Boot中的Bean&#xff0c;我们可以从以下几个方面进行&#xff1a; 定义&#xff1a; Bean是Spring框架中的一个对象&#xff0c;由Spring容器管理。当我们在应用程序中需要某个对象时&#xff0c;我…

Deepin更换仿Mac主题

上一篇博客说了要写一篇deepin系统的美化教程 先看效果图&#xff1a; 准备工作&#xff1a; 1.你自己 嘻嘻嘻 2.能上网的deepin15.11电脑 首先去下载主题 本次需要系统美化3部分&#xff1a;1.图标 2.光标 3.壁纸 开始之前&#xff0c;请先把你的窗口特效打开&#xff0c;…

华为设备命令行操作基础

熟悉VRP命令行并且熟练掌握VRP配置是高效管理华为网络设备的必备基础。 设备初始化启动 管理员和工程师如果要访问在通用路由平台VRP上运行的华为产品&#xff0c;首先要进入启动程序。开机界面信息提供了系统启动的运行程序和正在运行的VRP版本及其加载路径。启动完成以后&am…

spring aop实际开发中怎么用,Spring Boot整合AOP,spring boot加spring mvc一起使用aop,项目中使用aop

前言&#xff1a;本文不介绍 AOP 的基本概念、动态代理方式实现 AOP&#xff0c;以及 Spring 框架去实现 AOP。本文重点介绍 Spring Boot 项目中如何使用 AOP&#xff0c;也就是实际项目开发中如何使用 AOP 去实现相关功能。 如果有需要了解 AOP 的概念、动态代理实现 AOP 的&…

【PHP手麻系统源码】基于mysql+laravel+vue开发的医院手术麻醉系统源码,实现围术期患者数据的自动采集与共享

手麻系统作为医院信息化系统的一环&#xff0c;由监护设备数据采集系统和麻醉信息管理系统两个子部分组成。手麻信息系统覆盖了患者术前、术中、术后的手术过程&#xff0c;可以实现麻醉信息的电子化和手术麻醉全过程动态跟踪。 以服务围术期临床业务工作的开展为核心&#xf…

分布式搜索elasticsearch概念

什么是elasticsearch&#xff1f; elasticsearch是一款非常强大的开源搜索引擎&#xff0c;可以帮助我们从海量数据中快速找到需要的内容 目录 elasticsearch的场景 elasticsearch的发展 Lucene篇 Elasticsearch篇 elasticsearch的安装 elasticsearch的场景 elasticsear…

BigQuery 分区表简介和使用

大纲 什么是分区表 我们先看定义&#xff1a; 分区表是一种数据库表设计和管理技术&#xff0c;它将表中的数据划分为逻辑上的多个分区&#xff0c;每个分区包含一组特定的数据。每个分区都根据定义的分区键&#xff08;通常是一个列或字段&#xff09;的值进行分类&#xff…
最新文章