使用Hexo主题搭建个人博客(markdown)

依赖环境

  • 安装node.js:node.js下载可以从其官方界面开始https://nodejs.org/zh-cn/
  • 安装git:git下载则可以从其官方界面开始https://git-scm.com/

Hexo安装

新一个blog文件夹,单机右键启动Git Bash Here,输入如下命令:

npm install -g hexo-cli

初始化Hexo相关目录:

hexo init

Hexo常用三个命令:

hexo clean # 清空已有hexo网站文件
hexo generate(or g) # 依据网页文本与新的CSS样式生成新网站文件
hexo server(or s) # 启动本地服务器,可以在localhost:4000查看网站修改效果

在浏览器打开localhost:4000端口可以查看本地环境网页效果。

主题安装与下载

Hexo官网上提供了丰富的主题可选,你只需要打开对应的界面(https://hexo.io/themes/)选择喜欢的,然后点击名称跳转到GitHub仓库选择下载或者克隆对应的zip文件到本地,并且解压到网站目录下的themes目录即可。

我喜欢的一个主题:https://hub.fastgit.org/bulandent/hexo-theme-bubuzou

把克隆下来的活zip下载的包解压放到根工程中的themes文件夹下面。

其中修改根下面的_config.yml文件,修改theme:XXX(当前下载的主题名称,根据下载的主题要求进行配置)。

替换主题后经常会报错,常见错误如下:

extends includes/layout.pug block content include includes/recent-posts.pug include includes/partial

解决办法,执行如下指令即可:

npm install --save hexo-renderer-jade hexo-generator-feed hexo-generator-sitemap hexo-browsersync hexo-generator-archive

然后清理缓存:hexo clean

生成静态文件即可:hexo g

Hexo常见操作

1、使用命令添加页面,例如:使用:hexo new page "about" 新建一个 关于我 页面

2、添加含有标签、分类的文章:

---
title: 标签标题
tags:
  - tag1                       (这个就是文章的标签)
  - tag2                       (这个就是文章的标签)
categories: Javscript (这个就是文章的分类)
---

3.添加自定义页面

menu:
  home: /      //主页
  categories: /categories //分类        
  archives: /archives   //归档   
  tags: /tags   //标签                  
  about: /about   //关于
  guestbook: /guestbook    //自定义             (添加此行即可)

参考地址

posted @ 2021-09-11 21:59  风雨后见彩虹  阅读(401)  评论(0编辑  收藏  举报