0%

利用Hexo搭建个人博客

前言

  搭建个人博客是一直想要做的事情,刚好在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命令

    1
    npm install -g hexo-cli
  2. 初始化hexo

    1
    2
    3
    4
    5
    6
    hexo init <folder>
    cd <folder>
    npm install

    注:<folder>表示你将要新建的博客在本地的文件夹位置,比如 D:\Blog
    该文件夹必须为空
  3. 安装完之后,文件夹一般有以下目录

    1
    2
    3
    4
    5
    6
    7
    8
    .
    ├── _config.yml #配置文件
    ├── package.json
    ├── scaffolds
    ├── source #资源目录,你的博客就在这里,还有一些图片也可能会放在这里
    | ├── _drafts
    | └── _posts
    └── themes #主题目录,里面放你需要的主题,可以根据自己需要更换
  4. 查看静态部署

    1
    2
    3
    4
    hexo g
    hexo s

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

    默认主题

Hexo常用命令

  1. 初始化

    1
    2
    3
    hexo init [folder]

    注:新建一个网站。如果没有设置 folder ,Hexo 默认在目前的文件夹建立网站。
  2. 新建文章

    1
    2
    3
    4
    5
    hexo new [layout] <title>

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

    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
  4. 网站部署

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

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

  5. 静态部署

    1
    2
    3
    4
    5
    hexo server

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

    1
    2
    3
    4
    hexo clean

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

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

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

更换主题

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

下面介绍更换主题的步骤(以next主题为例):

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

    1
    2
    3
    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部署插件

    1
    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
    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语法实现缩进&emsp;&emsp;

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

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

  • 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
  • 博客中图片的访问方式

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

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

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

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

    3. 本地图片,相对路径

      1. 开启站点配置文件

        1
        2
        3
        4
        5
        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

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