Hexo + Gitee 博客搭建详细指南

2022-05-12 11:26:59 浏览数 (1)

本篇主要是博客的搭建

Hexo Gitee 博客搭建详细指南

  • hexo安装
    • Hexo简介
    • Hexo安装
  • hexo主题修改
  • Gitee配置
    • 创建gitee公开仓库
    • 安装部署命令
    • 配置 _confing.yml
    • hexo 推送
    • 开启GiteePages
    • 效果

hexo安装

Hexo简介

Hexo是一款基于Node.js的静态博客框架，依赖少易于安装使用，可以方便的生成静态网页托管在GitHub和Coding上。

Hexo安装

  1. 安装git，略
  2. 安装node.js，略
  3. 安装hexo

cmd或右键git bash都行，安装hexo

代码语言：javascript复制
npm install -g hexo-cli

hexo -v   查看hexo版本

代码语言：javascript复制
在这里插入代码片

找个blog路径，初始化hexo，自动创建了myblog文件夹

代码语言：javascript复制
hexo init myblog
代码语言：javascript复制
cd myblog
npm install

生成文件如图，_config.yml 为全局配置文件

代码语言：javascript复制
 hexo g  --生成网站静态文件到默认设置的 public 文件夹
 hexo s	 --启动本地服务器，默认地址：http://localhost:4000/

补充：hexo clean 清除缓存文件 db.json 和已生成的静态文件 public。 网站显示异常时可以执行这条命令试试。

有时候端口会被其他占用，添加 参数 -p 5000(端口号)，修改即可

已经成功启动本地hexo，效果如下

hexo主题修改

https://hexo.io/themes/ 可以到这里选个喜欢的主题模版

我选择的是Butterfly主题

git拉取到themes文件夹下，方便之后更新。 修改文件名 hexo-theme-butterfly为butterfly

修改myblog文件夹下全局配置文件

代码语言：javascript复制
# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: butterfly

hexo s 部署下，可以看到效果

其他： 主题也可以通过npm方式安装，这种方式就不在themes目录下，而在node_modules目录，详情可以看各主题的文档说明

Gitee配置

创建gitee公开仓库

仓库名必须是用户名 各种博客里面仓库都是 用户名.gitee.io或者gitee.io,导致访问路径不对，样式也没有。

giteepages页有使用帮助

安装部署命令

代码语言：javascript复制
npm install hexo-deployer-git --save

配置 _confing.yml

找到deploy,配置gitee仓库

代码语言：javascript复制
# Deployment
## Docs: https://hexo.io/docs/one-command-deployment
deploy:
  type: git
  repository: https://gitee.com/rainscloud/rainscloud.git
  branch: master

其他 创建仓库时的README.md描述文件会被hexo 提交覆盖掉。 在source目录下创建README.md 在_confing.yml配置中找到skip_render添加

代码语言：javascript复制
skip_render: README.md

hexo 推送

代码语言：javascript复制
hexo c    -- 清除缓存json和生成的静态文件
hexo g    --生成静态文件
hexo d	  --上传到git

开启GiteePages

服务里面Gitee Pages 启动

效果

本篇主要完成博客的搭建，后续继续对其中各功能进行丰富。

hexo git node.js javascript

0 人点赞