无名小站
0%

利用Hexo搭建个人博客

发表于 更新于 评论数：
本文字数： 4.5k 阅读时长 ≈ 4 分钟 阅读次数：

前言

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

博客框架选择

该博客采用的是静态博客的搭建方式，区别于动态博客，静态博客没有后台管理，管理起来相对没有那么方便。好处是搭建方便，上手快，一两天就可以搭建完成。本篇文章主要介绍如何在Windows 系统下搭建。
网上有许多博客搭建框架，我这个博客采用的是hexo框架，使用人数多，各种主题，网上的教程也比较丰富，出现问题网上解决方法多。其他博客有框架：Hexo、WordPress、VuePress、Hugo、Solo、Halo 、Jekyll。

搭建前的准备

  • 安装Git

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

  • 需要一个GitHub账号或者 gitee

  • 安装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

  1. 初始化 hexo
1
2
3
4
5
6
hexo init <folder>
cd <folder>
npm install

注：<folder>表示你将要新建的博客在本地的文件夹位置，比如 D:\Blog
   该文件夹必须为空
  1. 安装完之后，文件夹一般有以下目录
1
2
3
4
5
6
7
8
.
├── _config.yml  #配置文件
├── package.json
├── scaffolds
├── source  #资源目录，你的博客就在这里，还有一些图片也可能会放在这里
|   ├── _drafts
|   └── _posts
└── themes  #主题目录，里面放你需要的主题，可以根据自己需要更换
  1. 查看静态部署

1
2
3
4
hexo g
hexo s

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

Hexo 常用命令

  1. 初始化
1
2
3
4
hexo init [folder]

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

  1. 新建文章
1
2
3
4
5
hexo new [layout] <title>

注：[layout]具体就是博客需要放在source目录下的哪个文件夹，默认_post
   新建一篇文章。如果没有设置 layout 的话，默认使用 _config.yml 中的 default_layout 参数代替。
   如果标题包含空格的话，请使用引号括起来。
  1. 新建页面
1
2
3
4
hexo new page --path about/me "About me"

注： 不指定--path,Hexo 会创建一个以标题为名字的目录，并在目录中放置一个 index.md 文件。
	除了--path，还有下面的可选参数（新建文章也适用）
参数 描述
-p, –path 自定义新文章的路径
-r, –replace 如果存在同名文章，将其替换
-s, –slug 文章的 Slug，作为新文章的文件名和发布后的 URL

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

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

  2. 静态部署

1
2
3
4
5
hexo server

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

注： 清除缓存文件 (db.json) 和已生成的静态文件 (public)
	当发现重新部署无效时，可以使用该命令。
  1. 其他命令命令在官方文档都有详细介绍，本文暂将用到的列出如上。一般命令都可以缩写前面一两个字母即可，比如 hexo cl 清除缓存。

更换主题

Hexo 提供了许多可供选择的主题，可在官方文档选择自己喜欢的主题样式。
下面介绍更换主题的步骤（以next 主题为例）：

  1. 选择自己喜欢的主题之后，将其 GitHub 仓库 clone 到本地
1
2
3
4
git clone https://github.com/theme-next/hexo-theme-next themes/next

注： 如果clone过慢可以尝试直接下载到本地，然后解压到themes目录下面，并将文件夹改名为主题名

  1. 修改博客目录下的配置文件直接查找 themes，把默认的主题替换成你主题的名字
  2. 重新部署网站

部署到 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

  1. 修改配置文件

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

  1. 安装 git 部署插件

npm install hexo-deployer-git –save
然后三部曲，重新部署。输入 https://xxx.github.io 就可以打开你的网页了：

遇到的问题

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

  • 一般在更换主题之后，都要进行自定义的配置修改，基本修改都在_config.yml 里面进行修改。注意区分：博客目录下面有一个_config.yml，你的主题下面还有一个 _config.yml。
  • 配置文件都是 yml 文件，需要按照 yaml 语法来进行编写。比如：theme: next，冒号后面有一个空格，给一个变量赋多个值的写法：如果命令行报错指向你具体的哪一行，很可能就是语法错误。
1
2
3
4
5
6
tags: [标签1,标签2,标签3]
#或者
tags:
 - 标签1
 - 标签2

  • 部署的时候如果报错有 connection ssl 这种字眼，大多情况可能是网络连接有错误，可以考虑用 tizhi
  • 由于 hexo 博客的编写采用的是 markdown 语法，编写博客可以考虑使用 markdown 编辑器来辅助编写，比如 Typora。提供一种输入 hexo n 就自动打开本地编辑器的办法：在博客目录下面新建一个 scripts 目录，里面加上一个 js 文件，文件名自取，内容如下
1
2
3
4
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 注意需要将主题配置文件中对应地方取消注释
1
2
3
4
5
6
7
8
9
10
11
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
  • 博客中图片的访问方式（针对 typora)
    1. 网络图片直接复制插入即可。
    2. 本地图片默认访问规则图片统一将它们放在博客目录下 source/images 文件夹中。然后通过 的方法访问它们。也可通过访问，这种可以改变样式。
    3. 本地图片，相对路径
      1. 开启站点配置文件
1
2
3
4
5
6
post_asset_folder: true
# 在配置文件加上以下，可以用{% asset_img %}方式
marked:
  prependRoot: true
  postAsset: true

  2. md文件创建时会自动创建同名文件夹，把图片放在该目录下面
  3. 访问的时候![](图片名.jpg)或者使用{% asset_img 图片名.png 宽 高 标题 %}，宽高标题可以不写
  • ······

换电脑博客迁移方式

直接，复制原目录的相关文件到新电脑下，来重新部署
https://blog.csdn.net/qq_36667170/article/details/118163563

参考链接

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

-------------本文结束感谢您的阅读-------------
您的支持将成为我创作的动力！