从零开始的 Hexo 博客搭建

什么是Hexo

Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown(或其他渲染引擎)解析文章,在几秒内,即可利用靓丽的主题生成静态网页。

前置条件

安装 node.js

去 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 [email protected]: 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查看更多信息。

详细信息为:

[email protected]
+-- [email protected]
| +-- type: opencollective
| +-- url: https://opencollective.com/hexo
| +-- [email protected]
| | `-- url: https://github.com/sponsors/ljharb
| +-- [email protected]
| | `-- url: https://github.com/chalk/ansi-styles?sponsor=1
| `-- [email protected]
|   `-- url: https://github.com/sponsors/jonschlinkert
`-- [email protected]
  `-- 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: [email protected]: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文章

Hexo 常用操作

初始化博客,会在当前目录下生成blog文件夹

hexo init blog

生成静态页面

# 正常
hexo generate
# 缩写
hexo g

清理静态页面

hexo clean

开启博客服务,这样就可以通过本地4000端口查看hexo博客

# 正常
hexo server
# 缩写
hexo s

部署hexo,可以过部署发到github page上

# 正常
hexo deploy
# 缩写
hexo d

参考

发布了4 篇原创文章 · 获赞 2 · 访问量 1340

猜你喜欢

转载自blog.csdn.net/JeremyTsai/article/details/105333706