使用Hexo搭建个人博客

Posted on 2018-01-27 Edited on 2022-04-24 In external

前言

接触了org-mode输出网页文件带css格式之后被 发布 洗脑,发现了个人博客这个事情
偶然间想在自己电脑上跑一个自己的博客
正好有一个近年来有名的 Hexo 框架,基于 Node.js,渲染快速,使用方便,github星星数一度超过 OpenCV

安装

安装Node.js

根据系统不同,自行安装.

安装hexo

在安装了 Node.js 后系统将支持 npm 命令,
并可用该命令安装众多软件,比如 hexo (有点类似Python的 pip install)

1	nmp install hexo-cli -g

g表示全局安装,可能会安装在系统的某个位置.
不带g表示局部安装,仅仅会在当前文件夹下的 node_modules 文件夹下保存安装的软件.

初始化项目

新建一个文件夹,进去后使用

hexo init

生成了需要的各种文件,文件结构一览

- _config.yml # 站点设置文件
- nod_modules/ # nodejs的一些插件
- package.json
- package-lock.json
- scaffolds/
- source/ # 内容文件
  - _posts/ # 网站文章部分的内容
  - _data/ # 系统保留位置
- themes/ # 主题文件路径
  - landscape/ # 默认主题是landscape
    - _config.yml # 主题设置文件
    - source/
      - ...

引入主题

默认主题是landscape,放在 themes 文件夹中,
如果想使用其他主题,比如 next,需要引入外部的文件

1	git clone https://github.com/next-theme/hexo-theme-next.git themes/next

有些主题不能正常显示是因为缺少相应插件,需要自己安装
主题一般会有自己的配置,参考主题的帮助进行设置

配置

配置网页显示

在网站项目的主目录下有 _config.yml 文件,进入之后进行一些必要的设置

编写内容

内容文件放在 source/_posts 文件夹中,写好 .md 文件放进去

本地预览

在网站项目主目录下使用以下命令运行服务

1	hexo s(server) -o

server 可简写作 s,
--open 可简写作 -o.会使浏览器自动打开预览页面.
默认的预览地址是 http://localhost:4000

进阶

1	hexo s --config source/_data/myconfig.yml --open

使用 --config 设置自己的 站点设置文件.貌似主题文件并不能被指定

部署到远程

生成渲染好的文件

1 2	hexo clean hexo g(enerate) # 生成静态网页文件,可以使用--config参数

设置提交方式

大多数人都使用github自带的博客空间
也可以放在自己的路由器上,这时使用rsync方式
- rsync是个同步软件,可以在不同路径,不同设备之间同步等

如果想用rsync的方式部署,需要

安装相关库
1
npm install hexo-deployer-rsync --save

配置项目

# Deployment
  ## Docs: https://hexo.io/docs/deployment.html
  deploy:
    type: rsync
    host: 192.168.123.1
    user: admin
    root: /media/AiDisk_a1/opt/wwwroot/public
    port: 22
    delete: true
    verbose: true
    ignore_errors: false

部署
1
hexo d(deploy)
- 注意本地电脑与远程电脑都需要安装rsync软件

个人体会

hexo框架提供了一个完整的从内容(markdown文件)到网站(设置文件,主题文件)的自动生成方案,所以称之为框架.
美观因人而异,多数人心血来潮维护一个项目,而后抛弃.因此项目中的多数依赖的项目地址和配置都需要和官网跟进.