Hexo博客搭建之基础构建(Mac)

前言

基于目前的CSDN目前有些功能用起来不是特别舒服, 决定自己搭建一个博客. Hexo能够生成一个静态的博客, 此外还有Github免费仓库阿里云OSS可选. 当然, 之前的朋友安利也安利过. 所以, 准备尝试使用Hexo搭建一个属于自己的博客.

这个系列目前准备写2-3篇, 后续会学习下前端的相关知识. 对Hexo的相关主题, 进行自己的改造.

就本篇而言, 主要介绍下Hexo的快速搭建和基础的_config.yml文件的配置.


前提条件

  • 系统 Mac
  • Npm & NodeJS v12.13.0
  • Tips1: NodeJs和Npm的安装 可以看下我之前的文章Mac 安装 NodeJS & NPM
  • Tpis2: 后续会准备一个Docker类型方便移植.

Quick Start

  • 安装
    Hexo的安装非常简单, 如果你使用了tar.gz安装的话, 执行npm install -g hexo即可. 具体操作如下:
SeandeMacBook-Pro:bin sean$ npm install -g hexo
/Users/sean/Software/NodeJS/node-v12.13.0-darwin-x64/bin/hexo -> /Users/sean/Software/NodeJS/node-v12.13.0-darwin-x64/lib/node_modules/hexo/bin/hexo

> fsevents@1.2.9 install /Users/sean/Software/NodeJS/node-v12.13.0-darwin-x64/lib/node_modules/hexo/node_modules/nunjucks/node_modules/fsevents
> node install

sh: node: command not found
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.9 (node_modules/hexo/node_modules/nunjucks/node_modules/fsevents):
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.9 install: `node install`
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: spawn ENOENT

+ hexo@4.0.0
added 288 packages from 442 contributors in 148.64s
  • 初始化 hexo init
# cd到你需要生成的Hexo地方, 随后执行`init`命令.
$ cd /Users/sean/Software/Hexo/application
$ hexo init
  • 生成相关页面: hexo g
INFO  Total precache size is about 2.6 MB for 50 resources.
SeandeMacBook-Pro:application sean$ hexo g
INFO  Start processing
INFO  Files loaded in 604 ms
INFO  Generated: search.xml
INFO  Generated: history/index.html
INFO  Generated: tags/index.html
INFO  Generated: categories/index.html
INFO  Generated: about/index.html
INFO  Generated: 2019/11/06/reference/Ref/index.html
INFO  Generated: 2019/11/06/hello-world/index.html
INFO  Generated: archives/index.html
INFO  Generated: archives/2019/index.html
INFO  Generated: archives/2019/11/index.html
INFO  Generated: index.html
INFO  Generated: categories/Hexo/Hexo安装/index.html
INFO  Generated: categories/Hexo/Hexo主题配置/index.html
INFO  Generated: categories/Hexo/index.html
INFO  Generated: tags/Reference/index.html
INFO  Generated: tags/Hello/index.html
INFO  Generated: css/fonts/fontawesome-webfont.eot
INFO  Generated: fancybox/jquery.fancybox.css
INFO  Generated: fancybox/jquery.fancybox.pack.js
INFO  Generated: fancybox/fancybox_loading.gif
INFO  Generated: css/style.css
INFO  Generated: fancybox/jquery.fancybox.js
INFO  Generated: js/script.js
INFO  Generated: fancybox/fancybox_loading@2x.gif
INFO  Generated: fancybox/fancybox_sprite.png
INFO  Generated: css/fonts/FontAwesome.otf
INFO  Generated: css/fonts/fontawesome-webfont.woff
INFO  Generated: fancybox/blank.gif
INFO  Generated: fancybox/fancybox_overlay.png
INFO  Generated: fancybox/fancybox_sprite@2x.png
INFO  Generated: css/fonts/fontawesome-webfont.ttf
INFO  Generated: fancybox/helpers/fancybox_buttons.png
INFO  Generated: css/fonts/fontawesome-webfont.svg
INFO  Generated: fancybox/helpers/jquery.fancybox-buttons.js
INFO  Generated: fancybox/helpers/jquery.fancybox-thumbs.js
INFO  Generated: fancybox/helpers/jquery.fancybox-thumbs.css
INFO  Generated: css/images/banner.jpg
INFO  Generated: fancybox/helpers/jquery.fancybox-media.js
INFO  Generated: fancybox/helpers/jquery.fancybox-buttons.css
INFO  Generated: history/homepage-v4.png
INFO  40 files generated in 695 ms
INFO  Total precache size is about 4.15 MB for 73 resources.
  • 启动Hexo: hexo s
SeandeMacBook-Pro:application sean$ hexo s
INFO  Start processing
INFO  Hexo is running at http://localhost:4000 . Press Ctrl+C to stop.
INFO  Total precache size is about 4.15 MB for 73 resources.

访问 localhost:4000, 会得到如下的默认页面.
在这里插入图片描述

使用ctrl+c可以关闭. 当然你也可以使用nohup命令让其在后台运行.


Hexo相关命令

本节主要介绍下Hexo的相关命令.

  • hexo init [folder]: 初始化.
  • hexo new [layout] <title>: 创建新的页面. 如hexo new "post title with whitespace" / hexo new page --path about/me "About me"
  • hexo generate / hexo g: 生成页面.
  • hexo server / hexo s: 启动服务器, 默认地址localhost:4000. (-p, --port 重设端口 / -s, --static 只使用静态文件/ -l, --log 启动日记记录,使用覆盖记录格式)
  • hexo deploy / hexo d: 部署.
  • hexo clean: 清除缓存文件 (db.json) 和已生成的静态文件 (public). 更换主题后, 使用这条命令.
  • hexo list <type>: 列出网站资料.
  • hexo version: hexo版本信息.
  • hexo --safe / hexo --debug / hexo --silent: 安全模式 / 调试模式 / 简洁模式.
  • 自定义配置文件的路径: $ hexo server --config custom.yml / $ hexo generate --config custom.yml,custom2.json,custom3.yml. ( custom3.yml优先级最高, 其次custom2.json)
  • $ hexo --cwd /path/to/cwd: 自定义当前工作目录(Current working directory)的路径.

更多相关命令: hexo.io - 指令


Hexo 配置文件_config.yml

配置相当的多, 这边就列举我使用的相关属性.

  • title: 标题 / Hello’s blog

  • subtitle: 副标题 / ‘HelloWorld.’

  • author: 作者 / hello

  • language: 语言 / zh-Hans

  • url: 博客地址 / https://www.hello.io/

  • theme: hexo博客主题 / landscape

  • deploy模块

deploy:
  type: git
  repo: https://github.com/hello/hello.github.io.git
  branch: master
  • search模块
# search
search:
  path: search.xml
  field: all
  #field: post
  content: true

更多相关配置查看官方hexo-io 配置.


Hexo相关技巧

  • Tips1: 如何设置目录&二级目录&多个目录.
# 单目录
categories: hello


# 多级目录 - 写法1
categories:
  - Java
  - Servlet
# 多级目录 - 写法2
categories: [Java, Servlet]

# 多个目录
categories: 
 - [Hexo主题配置]
 - [Hexo安装]

# 多个多级目录
categories: 
 - [Hexo,Hexo主题配置]
 - [Hexo,Hexo安装]

Ref. Hexo 一篇文章多个 categories

  • Tips2: 如何设置Tags&多个Tags.
# 单Tag
tags: [tags1]
# 多Tag - 方法1
tags: [tags1, tags2]
# 多Tag - 方法2
tags: 
 - [Reference]
 - [Hello]

Ref. hexo分类与tags配置

  • Tips3: more/更多如何配置.
# 文章内部, 需要截断处加上.
<!--more-->
  • Tips4: 如何关闭页面评论
comments: false
  • Tips5: 修改文章标题&修改时间.
title: categories
date: 2015-10-20 06:49:50
  • Tips6: 是否显示文章目录.
toc: true #是否显示文章目录
  • Tips7: 完整标题头.
---
title: CentOS7下Tomcat启动慢的原因及解决方案
date: 2017-12-02 21:01:24
comments: true #是否可评论
toc: true #是否显示文章目录
categories: "云服务器" #分类
tags:   #标签
	- centOS
	- tomcat
---

Ref. hexo 创建文章、标签、分类


部署

Hexo一般的部署为使用<用户名>.github.io仓库托管. 文章库更新后, 使用hexo g重新生成public目录, 随后通过hexo-deployer-git工具提交.

但是个人认为每次发布都是需要详细考虑的过程. 所以, 我每次会手动发布到dev分支, 随后发布到master上. 这种方案会较好一点.

一般部署流程:

  • 下载hexo-deployer-git: npm install hexo-deployer-git --save.
  • 配置_deploy.yml文件内的部署模块:
deploy:
  type: git
  repo: https://github.com/hello/hello.github.io.git
  branch: master

# 当然也可以写成
deploy:
  type: git
  repo:
      github: git@github.com:enfang/hello.github.io.git,master
      coding: git@git.coding.net:enfang/hello.git,master
  • 运行命令, 进行发布
# 清理历史
hexo clean
# hexo generate 生成静态网页
hexo g
# hexo develop 发布
hexo d
  • 打开 https://hello.github.io 进行验证. (hello是你的用户名)

Ref. 如何利用Hexo发布个人博客到Github Pages / 将hexo博客同时部署发布托管到github和coding


Reference

[1]. 使用hexo+github搭建免费个人博客详细教程
[2]. Offical-Hexo

©️2020 CSDN 皮肤主题: Age of Ai 设计师:meimeiellie 返回首页