从零开始的 Hexo 博客搭建
什么是Hexo
Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown(或其他渲染引擎)解析文章,在几秒内,即可利用靓丽的主题生成静态网页。
前置条件
安装 node.js
去 node.js官网下载安装即可。
安装过程中,可以选择自动安装必要的工具减少不必要的麻烦。
勾选这一选项,一共会安装以下工具
Upgraded:
- visualstudio2017buildtools v15.9.21.0
- kb2919355 v1.0.20160915
- kb3033929 v1.0.5
- python2 v2.7.17
- kb2999226 v1.0.20181019
- chocolatey-core.extension v1.3.5.1
- dotnetfx v4.8.0.20190930
- chocolatey-visualstudio.extension v1.8.1
- visualstudio2017-workload-vctools v1.3.2
- kb2919442 v1.0.20160915
- visualstudio-installer v2.0.1
- vcredist140 v14.24.28127.4
- chocolatey-dotnetfx.extension v1.0.1
- kb3035131 v1.0.3
- chocolatey-windowsupdate.extension v1.0.4
安装 hexo
npm install -g hexo-cli
提示以下警告
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@~2.1.2 (node_modules\hexo-cli\node_modules\chokidar\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.1.2: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
可以忽略。
fsevent的作用是能够检测文件目录的修改,可以记录恶意软件的非法操作,获取恶意软件的完整路径,删除和修改日期。是MacOSX
的,不支持当前的Windows
创建博客
hexo创建博客的方式很简单,一行命令即可
hexo init blog
若提示以下信息,根据提示做也可不做。
5 packages are looking for funding
run `npm fund` for details
found 1 low severity vulnerability
run `npm audit fix` to fix them, or `npm audit` for details
简单翻译就是:
5 个 包正在寻找募款,执行npm fund
查看详情(募捐链接);
发现一个发现 1 个低严重性漏洞,执行npm audit fix
进行修复, 或 npm audit
查看更多信息。
详细信息为:
hexo-site@0.0.0
+-- hexo@4.2.0
| +-- type: opencollective
| +-- url: https://opencollective.com/hexo
| +-- resolve@1.15.1
| | `-- url: https://github.com/sponsors/ljharb
| +-- ansi-styles@4.2.1
| | `-- url: https://github.com/chalk/ansi-styles?sponsor=1
| `-- picomatch@2.2.2
| `-- url: https://github.com/sponsors/jonschlinkert
`-- glob@7.1.6
`-- url: https://github.com/sponsors/isaacs
=== npm audit security report ===
Manual Review
Some vulnerabilities require your attention to resolve
Visit https://go.npm.me/audit-guide for additional guidance
Low Prototype Pollution
Package minimist
Patched in >=0.2.1 <1.0.0 || >=1.2.3
Dependency of hexo
Path hexo > swig-templates > optimist > minimist
More info https://npmjs.com/advisories/1179
found 1 low severity vulnerability in 470 scanned packages
1 vulnerability requires manual review. See the full report for details.
配置hexo成为你的博客
hexo的默认配置在根目录下的 _config.yml
# Hexo Configuration
## Docs: https://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/
# 网站
## 标题
title: Jeremy's Hexo Blog
## 副标题
subtitle: 'Enjoy Coding'
## 描述
description: 'Learn and share my programming experience.'
## 关键字
keywords: jeremy
## 所有者
author: Jeremy Tsai
## 语言
language: zh-CN
## 时区
timezone: 'Asia/Shanghai'
# URL
## 如果您的网站被放入子目录中,则将 URL 设置为'http://yoursite.com/child'跟目录为'/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
# 部署
## Docs: https://hexo.io/docs/deployment.html
deploy:
type: 'git'
repo: git@github.com:JeremyTsai/blog.git
branch: master
启动博客服务
hexo s
这样,你就可以通过localhost:4000
访问你的博客了。
创建你的第一篇文章
通过 hexo new "tittle"
创建文章
hexo new "我的第一篇Hexo文章"
INFO Created: E:\Jeremy\hexo\source\_posts\我的第一篇Hexo文章.md
然后即可通过markdown语法进行文章创作
保存之后重新执行hexo s
就可以浏览你的文章了。
Hexo 常用操作
初始化博客,会在当前目录下生成blog
文件夹
hexo init blog
生成静态页面
# 正常
hexo generate
# 缩写
hexo g
清理静态页面
hexo clean
开启博客服务,这样就可以通过本地4000端口查看hexo博客
# 正常
hexo server
# 缩写
hexo s
部署hexo,可以过部署发到github page上
# 正常
hexo deploy
# 缩写
hexo d