Hexo + Gitee/Github 博客搭建详细指南

本篇主要是博客的搭建

hexo安装

Hexo简介

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

Hexo安装

  1. 安装git,略,网址:https://git-scm.com/

  2. 安装node.js,略 ,网址:https://nodejs.org/

  3. 安装hexo

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

npm install -g hexo-cli

hexo -v   查看hexo版本

hexo -v

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

hexo init myblog
cd myblog
npm install

生成文件如图,_config.yml 为全局配置文件
在这里插入图片描述

 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-butterflybutterfly
在这里插入图片描述

修改myblog文件夹下全局配置文件
在这里插入图片描述

# 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页有使用帮助
在这里插入图片描述

安装部署命令

npm install hexo-deployer-git --save

配置 _confing.yml

找到deploy,配置gitee仓库

# 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添加

skip_render: README.md

hexo 推送

hexo c    -- 清除缓存json和生成的静态文件
hexo g    --生成静态文件
hexo d	  --上传到git

开启GiteePages

服务里面Gitee Pages 启动
在这里插入图片描述
在这里插入图片描述

效果

在这里插入图片描述

开启Github Pages

1.创建用户名同名的仓库xxx.github.io请添加图片描述
2.配置博客目录下_config.yml

deploy:
  type: 'git'
  repo: 'git@github.com:smallmayi/smallmayi.github.io.git'
  branch: 'main'

3.部署推送

hexo d

即可使用xxx.github.io访问


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

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值