利用Hexo搭建个人博客

前言

  搭建个人博客是一直想要做的事情，刚好在B站上面看到了相关视频，趁此机会好好搭建自己的博客，同时记录一下自己的学习经历。

博客框架选择

  该博客采用的是静态博客的搭建方式，区别于动态博客，静态博客没有后台管理，管理起来相对没有那么方便。好处是搭建方便，上手快，一两天就可以搭建完成。本篇文章主要介绍如何在Windows系统下搭建。

  网上有许多博客搭建框架，我这个博客采用的是hexo框架，使用人数多，各种主题，网上的教程也比较丰富，出现问题网上解决方法多。其他博客有框架：Hexo、WordPress、VuePress、Hugo、Solo、Halo 、Jekyll。

搭建前的准备

• 安装Git

  • 安装成功，鼠标右键可以看到相关git bash

• 需要一个GitHub账号或者gitee

  • 将本机的git与github绑定
  • 参考：https://zhuanlan.zhihu.com/p/103391101

• 安装Node.js (Node.js 版本需不低于 10.13，建议使用 Node.js 12.0 及以上版本)

  • hexo基于node.js

  • Hexo 版本	最低兼容 Node.js 版本
    5.0+	10.13.0
    4.1 - 4.2	8.10
    4.0	8.6
    3.3 - 3.9	6.9
    3.2 - 3.3	0.12
    3.0 - 3.1	0.10 or iojs
    0.0.1 - 2.8	0.10

  • windows用户使用 Node.js 官方安装程序时，请确保勾选 Add to PATH 选项（默认已勾选）

  • 安装完成之后，win+r，输入命令查看安装版本，判断是否安装成功

    

安装Hexo

  在完成了上面的准备工作之后，就可以开始正式安装hexo框架了。下面的命令本人都是在win+R命令行下输入操作的，当然也可以在git bash下完成，看个人习惯即可。

hexo的安装及后续插件的安装，都是使用npm来进行安装

1. 输入安装hexo命令

   npm install -g hexo-cli

2. 初始化hexo

   hexo init <folder>
   cd <folder>
   npm install
   
   注：<folder>表示你将要新建的博客在本地的文件夹位置，比如 D:\Blog
      该文件夹必须为空

3. 安装完之后，文件夹一般有以下目录

   .
   ├── _config.yml  #配置文件
   ├── package.json
   ├── scaffolds
   ├── source  #资源目录，你的博客就在这里，还有一些图片也可能会放在这里
   |   ├── _drafts
   |   └── _posts
   └── themes  #主题目录，里面放你需要的主题，可以根据自己需要更换

4. 查看静态部署

   hexo g
   hexo s
   
   注：输入这两条命令之后，打开浏览器输入localhost:4000即可看到静态部署的页面

   

Hexo常用命令

1. 初始化

   hexo init [folder]
   
   注：新建一个网站。如果没有设置 folder ，Hexo 默认在目前的文件夹建立网站。

2. 新建文章

   hexo new [layout] <title>
   
   注：[layout]具体就是博客需要放在source目录下的哪个文件夹，默认_post
      新建一篇文章。如果没有设置 layout 的话，默认使用 _config.yml 中的 default_layout 参数代替。
      如果标题包含空格的话，请使用引号括起来。

3. 新建页面

   hexo new page --path about/me "About me"
   
   注： 不指定--path,Hexo 会创建一个以标题为名字的目录，并在目录中放置一个 index.md 文件。
   	除了--path，还有下面的可选参数（新建文章也适用）

   参数	描述
   -p, --path	自定义新文章的路径
   -r, --replace	如果存在同名文章，将其替换
   -s, --slug	文章的 Slug，作为新文章的文件名和发布后的 URL

4. 网站部署

   选项	描述
   -d, --deploy	文件生成后立即部署网站
   -w, --watch	监视文件变动
   -b, --bail	生成过程中如果发生任何未处理的异常则抛出异常
   -f, --force	强制重新生成文件 Hexo 引入了差分机制，如果 public 目录存在，那么 hexo g 只会重新生成改动的文件。 使用该参数的效果接近 hexo clean && hexo generate
   -c, --concurrency	最大同时生成文件的数量，默认无限制
   -g,--generate	生成静态文件

   一般修改完网站的配置等信息之后，使用hexo g和hexo d即可更新网站。不行的话，最前面再加上hexo cl

5. 静态部署

   hexo server
   
   注： 启动本地服务器，访问网址为： http://localhost:4000/
   	简写为`hexo s`
   	一般可以在线看修改的效果，不用重新启动，样式变化也会随之变化

6. 清除缓存

   hexo clean
   
   注： 清除缓存文件 (db.json) 和已生成的静态文件 (public)
   	当发现重新部署无效时，可以使用该命令。

7. 其他命令

   命令在官方文档都有详细介绍，本文暂将用到的列出如上。

   一般命令都可以缩写前面一两个字母即可，比如hexo cl清除缓存。

更换主题

Hexo提供了许多可供选择的主题，可在官方文档选择自己喜欢的主题样式。

下面介绍更换主题的步骤（以next主题为例）：

1. 选择自己喜欢的主题之后，将其GitHub仓库clone到本地

   git clone https://github.com/theme-next/hexo-theme-next themes/next
   
   注： 如果clone过慢可以尝试直接下载到本地，然后解压到themes目录下面，并将文件夹改名为主题名

2. 修改博客目录下的配置文件

   直接查找themes，把默认的主题替换成你主题的名字

3. 重新部署网站

部署到GitHub

  在完成上面的步骤之后，你的博客还是只能在自己电脑上通过http://localhost:4000/访问。想分享给别人看就需要通过部署域名来实现，或者也可以通过GitHub（gitee)来实现。这里介绍怎么部署到GitHub上面。

1. 首先，你需要新建一个仓库

   

   仓库名你自己的GitHub名字.github.io即可，比如我的仓库名a-cipher.github.io

   仓库地址就是你这个仓库的网址，比如我的https://github.com/a-cipher/a-cipher.github.io.git

2. 修改配置文件

   划到最下面，或者直接搜索repository,在后面加上你的仓库地址即可

   

3. 安装git部署插件

   npm install hexo-deployer-git --save

   然后三部曲，重新部署。输入 https://xxx.github.io 就可以打开你的网页了：

遇到的问题

整个博客的搭建花了一两天的时间，记录自己遇到的问题

• 一般在更换主题之后，都要进行自定义的配置修改，基本修改都在_config.yml里面进行修改。

  注意区分：博客目录下面有一个_config.yml，你的主题下面还有一个 _config.yml。

• 配置文件都是yml文件，需要按照yaml语法来进行编写。比如：theme: next，冒号后面有一个空格，给一个变量赋多个值的写法：

  tags: [标签1,标签2,标签3]
  #或者
  tags:
   - 标签1
   - 标签2

  如果命令行报错指向你具体的哪一行，很可能就是语法错误。

• 部署的时候如果报错有connection ssl这种字眼，大多情况可能是网络连接有错误，可以考虑用tizhi

• 由于hexo博客的编写采用的是markdown语法，编写博客可以考虑使用markdown编辑器来辅助编写，比如Typora。

  提供一种输入hexo n就自动打开本地编辑器的办法：

  在博客目录下面新建一个scripts目录，里面加上一个js文件，文件名自取，内容如下

  var spawn = require('child_process').exec;
  hexo.on('new', function(data){
    spawn('start  "D:\Program Files\Typora\Typora.exe" ' + data.path);
  });

• markdown语法实现缩进  

• 在搭建博客如果出现问题，大不了把文件全删了重头再来，多试几次就好了。

• 无论是博客的搭建还是修改主题的样式，官方文档都是好帮手，如果还是解决不了百度即可。

• next主题更新之后，原来的custom.styl已经取消，样式修改可以在source目录新建一个Blog\source\_data\styles.styl

  注意需要将主题配置文件中对应地方取消注释

  custom_file_path:
    #head: source/_data/head.swig
    #header: source/_data/header.swig
    #sidebar: source/_data/sidebar.swig
    #postMeta: source/_data/post-meta.swig
    #postBodyEnd: source/_data/post-body-end.swig
    #footer: source/_data/footer.swig
    #bodyEnd: source/_data/body-end.swig
    #variable: source/_data/variables.styl
    #mixin: source/_data/mixins.styl
    style: source/_data/styles.styl

• 博客中图片的访问方式

  1. 网络图片直接复制插入即可。

  2. 本地图片默认访问规则

     图片统一将它们放在博客目录下 source/images 文件夹中。然后通过 ![](/images/image.jpg) 的方法访问它们。

     也可通过<img src="/images/image.jpg">访问，这种可以改变样式。

  3. 本地图片，相对路径

     1. 开启站点配置文件

        post_asset_folder: true
        # 在配置文件加上以下，可以用{% asset_img %}方式
        marked:
          prependRoot: true
          postAsset: true

     2. md文件创建时会自动创建同名文件夹，把图片放在该目录下面

     3. 访问的时候![图片标题](图片名.jpg)

        或者使用{% asset_img 图片名.png 宽 高 标题 %}，宽高标题可以不写

• ······

参考链接

https://hexo.io/zh-cn/docs/

https://www.bilibili.com/video/BV1Yb411a7ty

https://zhuanlan.zhihu.com/p/102592286

https://blog.csdn.net/nightmare_dimple/article/details/86661502