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

淩亂°似流年 2023-05-30 09:20 35阅读 0赞

### 前言 ###

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

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

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

--------------------

### 前提条件 ###

*  系统 Mac
 *  Npm & NodeJS v12.13.0

>  *  Tips1: NodeJs和Npm的安装 可以看下我之前的文章[Mac 安装 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][localhost_4000], 会得到如下的默认页面.  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly95YW54bWwuYmxvZy5jc2RuLm5ldA_size_16_color_FFFFFF_t_70]

使用`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.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-io].

--------------------

### Hexo相关技巧 ###

*  Tips1: 如何设置`目录`&`二级目录`&`多个目录`.

# 单目录
    categories: hello
    
    
    # 多级目录 - 写法1
    categories:
      - Java
      - Servlet
    # 多级目录 - 写法2
    categories: [Java, Servlet]
    
    # 多个目录
    categories: 
     - [Hexo主题配置]
     - [Hexo安装]
    
    # 多个多级目录
    categories: 
     - [Hexo,Hexo主题配置]
     - [Hexo,Hexo安装]

Ref. [Hexo 一篇文章多个 categories][Hexo _ categories]

*  Tips2: 如何设置`Tags`&`多个Tags`.

# 单Tag
    tags: [tags1]
    # 多Tag - 方法1
    tags: [tags1, tags2]
    # 多Tag - 方法2
    tags: 
     - [Reference]
     - [Hello]

Ref. [hexo分类与tags配置][hexo_tags]

*  Tips3: `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]

--------------------

### 部署 ###

`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 Pages] / [将hexo博客同时部署发布托管到github和coding][hexo_github_coding]

--------------------

### Reference ###

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

[Mac _ NodeJS _ NPM]: https://blog.csdn.net/u010416101/article/details/102944546
[localhost_4000]: http://localhost:4000/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly95YW54bWwuYmxvZy5jc2RuLm5ldA_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191109113827782.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly95YW54bWwuYmxvZy5jc2RuLm5ldA==,size_16,color_FFFFFF,t_70
[hexo.io -]: https://hexo.io/zh-cn/docs/commands
[hexo-io]: https://hexo.io/zh-cn/docs/configuration
[Hexo _ categories]: https://www.jianshu.com/p/bff1b1845ac9
[hexo_tags]: https://segmentfault.com/q/1010000002561642
[hexo]: https://blog.csdn.net/qq_32337109/article/details/78755662
[Hexo_Github Pages]: https://www.jianshu.com/p/be2ee23a4b48
[hexo_github_coding]: https://blog.csdn.net/qintian888/article/details/82195097#commentsedit
[hexo_github]: https://www.cnblogs.com/liuxianan/p/build-blog-website-by-hexo-github.html