【Hexo基本使用】零基础,快速搭建属于自己的个人博客!

简介: 本文包含以下内容:Hexo安装,Hexo基础指令与配置,Hexo切换主题,Hexo部署。最将自己的博客改为了Hexo静态网页。

Hexo

⭐零基础搭建Hexo个人博客!

⭐本文主题以Butterfly为例!

⭐Hexo官网:Hexo

Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown(或其他渲染引擎)解析文章,在几秒内,即可利用靓丽的主题生成静态网页。

安装

安装Node.js

  • Hexo基于Node.js运行

npm安装Hexo

  • 全局安装 hexo-cli
npm install -g hexo-cli

使用

快速使用

# 进入项目目录
cd <项目名>
# 安装项目依赖
npm install --registry=https://registry.npm.taobao.org
# 预览项目
hexo s

image-20221214230200510

  • 下面是常见的一些基础命令
  • 要速成的可直接跳过

生成项目

  • 初始化hexo项目
hexo init <项目名>
  • 安装依赖
# 进入项目目录
cd <项目名>
# 安装依赖包
npm install
# 下载速度慢可使用淘宝镜像加速
npm install --registry=https://registry.npm.taobao.org

项目目录

.
├── _config.yml
├── package.json
├── scaffolds
├── source
|   ├── _drafts
|   └── _posts
└── themes
  • _config.yml:Hexo配置文件夹
  • package.json:依赖信息
  • scaffolds:模板文件夹

    • 当您新建文章时,Hexo 会根据 scaffold 来建立文件。
    • Hexo的模板是指在新建的文章文件中默认填充的内容。例如,如果您修改scaffold/post.md中的Front-matter内容,那么每次新建一篇文章时都会包含这个修改。
  • source:资源文件夹是存放用户资源的地方。除 _posts 文件夹之外,开头命名为 _ (下划线)的文件 / 文件夹和隐藏的文件将会被忽略。Markdown 和 HTML 文件会被解析并放到 public 文件夹,而其他文件会被拷贝过去。
  • themes:主题文件夹

基本配置

  • 可配置参数很多推荐大家去官网配置页查看
  • 官网配置:配置 | Hexo
  • 下面讲解一些基础的配置
# Site
title: 雪人的小屋 # 标题
subtitle: '无 限 进 步 !' # 子标题
description: '希望我的分享能帮助到大家' # 描述
keywords:
author: LonelySnowman # 作者
language: zh-CN    # 语言配置
# 简体中文:zh-CN
timezone: 'Asia/Shanghai' # 时区配置 
# 纽约:America/New_York 日本:Japan 上海:Asia/Shanghai

常见命令

hexo init # 初始化项目
hexo g # 生成静态文件
hexo clean # 清楚静态文件
hexo d # 推送静态文件至 git远程仓库
hexo s # 本地预览项目

主题

安装主题

  • Butterfly版本:4.5.1
# -- 在Hexo项目根目录下
# -- 选择任意一种方式安装即可
# github 安装
git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly
# gitee 安装
git clone -b master https://gitee.com/immyw/hexo-theme-butterfly.git themes/butterfly
# npm 安装
npm i hexo-theme-butterfly
  • 在themes文件夹下出现butterfly文件夹
  • 其中 _config.yml 为主题配置文件夹
  • 注意:配置中的路径均以 主题问价夹中的source为根目录

修改Hexo配置

# Hexo的 _config.yml 修改主题
theme: butterfly

安装依赖

# butterfly使用需要安装 pug 以及 stylus 的渲染器
npm install hexo-renderer-pug hexo-renderer-stylus --save

简单美化

  • 以下仅讲解一些基础配置 全面的配置官方文档写的很详细明了

首页面基础配置

# Hexo根目录下的 _config.yml 配置文件
# Site
title: 雪人的小屋 # 博客标题
subtitle: '无 限 进 步 !' # 子标题 展示到title下方 打字动画显示
description: '希望我的分享能帮助到大家' # 侧边栏作者下方显示的描述
keywords:
author: LonelySnowman # 作者名
language: zh-CN    # 语言配置
timezone: 'Asia/Shanghai' # 时区配置 

展示subtitle

subtitle:
    # 开启subtitle
    enable: true
    # 打字动画展示
    effect: true 
    # Effect Speed Options (打字效果速度參數)
    startDelay: 300 # 动画开始延迟 ms
    typeSpeed: 150 # 打字速度 ms
    backSpeed: 50 # 回到初始状态的速度 ms
    loop: true # 循环打字
    source: false
    sub:

展示封面

# 配置中的路径均以 主题问价夹中的source为根目录
index_img: /img/404.jpg

顶部子页面选项

menu:
   首页: / || fas fa-home
   归档: /archives/ || fas fa-archive
   标签: /tags/ || fas fa-tags
   分类: /categories/ || fas fa-folder-open
   清单||fas fa-list:
     音乐: /music/ || fas fa-music
     电影: /movies/ || fas fa-video
   友链: /link/ || fas fa-link
   关于: /about/ || fas fa-heart
  • 更多美化配置请前往对应主题官方文档查看

预览页面

# 生成静态文件
hexo g
# 预览页面
hexo s

部署

  • 推荐大家使用 GitHub Pages部署
  • 当然也可以使用其他多种方法 Vercel,Gitee,Nginx...

安装依赖

npm install hexo-deployer-git --save

更改配置

# 更改
deploy:
  type: git
  repository: git@github.com:用户名/用户名.github.io.git
  # 注意这里的分支
  # 看看自己Github使用的分支模板 是 master 还是 main
  branch: main 

新建仓库

  • 在GitHub上新建仓库
  • 仓库名:用户名.github.io
# 上传静态文件
hexo d

访问

近日将博客从Django+Vue更改为了Hexo,自己写的主题水平还是差了很多,暂时也没有精力去维护😣。

欢迎大家一起交流:雪人的小屋 - 无 限 进 步 ! (snowhouse.space)(我的博客)

相关文章
|
消息中间件 Java 中间件
秒懂消息队列MQ,万字总结带你全面了解消息队列MQ
消息队列是大型分布式系统不可缺少的中间件,也是高并发系统的基石中间件,所以掌握好消息队列MQ就变得极其重要。接下来我就将从零开始介绍什么是消息队列?消息队列的应用场景?如何进行选型?如何在Spring Boot项目中整合集成消息队列。
23986 10
秒懂消息队列MQ,万字总结带你全面了解消息队列MQ
|
弹性计算 负载均衡 容灾
阿里云服务器地域及可用区选择攻略(考虑七大影响因素)
阿里云服务器地域怎么选择?阿里云服务器可用区怎么选择?地域是指云服务器数据中心所在位置,可用区是指同一个地域下电力和网络相互独立的区域
4168 0
阿里云服务器地域及可用区选择攻略(考虑七大影响因素)
|
域名解析 运维 JavaScript
只需5步!在轻量应用服务器部署Hexo博客
轻量应用服务器征文活动投稿教程帖,只需5步完成Hexo博客的部署实践,步骤完整,操作性强~
只需5步!在轻量应用服务器部署Hexo博客
|
12月前
|
网络协议 开发工具 git
hexo github部署,通过域名访问你的博客
本文介绍了如何使用Hexo命令部署博客到GitHub,并详细说明了如何通过自定义域名访问GitHub上部署的博客。
hexo github部署,通过域名访问你的博客
|
4月前
|
人工智能 Cloud Native Java
2025 开源之夏开启报名|AI + 云原生,10个开源项目、24个课题任您挑选
“开源之夏”是由中国科学院软件研究所发起的暑期活动,旨在鼓励高校学生参与开源软件开发与维护。活动联合各大开源社区提供项目任务,面向全球年满18周岁的高校学生开放报名。每位学生最多可申请一个项目。阿里云云原生提报了包括Apache Dubbo、RocketMQ、Seata等在内的10个开源项目共24个课题,涵盖技术优化、功能实现及AI应用等领域。活动流程包括选题、申请、开发与结项考核,具体信息可访问官网了解。
1838 32
|
12月前
|
JSON 前端开发 JavaScript
不会webpack的前端可能是捡来的,万字总结webpack的超入门核心知识
该文章提供了Webpack的基础入门指南,涵盖安装配置、基本使用、加载器(Loaders)、插件(Plugins)的应用,以及如何通过Webpack优化前端项目的打包构建流程。
不会webpack的前端可能是捡来的,万字总结webpack的超入门核心知识
|
10月前
|
运维 监控 Linux
服务器管理面板大盘点: 8款开源面板助你轻松管理Linux服务器
在数字化时代,服务器作为数据存储和计算的核心设备,其管理效率与安全性直接关系到业务的稳定性和可持续发展。随着技术的不断进步,开源社区涌现出众多服务器管理面板,这些工具以其强大的功能、灵活的配置和友好的用户界面,极大地简化了Linux服务器的管理工作。本文将详细介绍8款开源的服务器管理面板,包括Websoft9、宝塔、cPanel、1Panel等,旨在帮助运维人员更好地选择和使用这些工具,提升服务器管理效率。
|
12月前
|
JavaScript 前端开发 API
vue3 v-md-editor markdown编辑器(VMdEditor)和预览组件(VMdPreview )的使用
本文介绍了如何在Vue 3项目中使用v-md-editor组件库来创建markdown编辑器和预览组件。文章提供了安装步骤、如何在main.js中进行全局配置、以及如何在页面中使用VMdEditor和VMdPreview组件的示例代码。此外,还提供了一个完整示例的链接,包括编辑器和预览组件的使用效果和代码。
vue3 v-md-editor markdown编辑器(VMdEditor)和预览组件(VMdPreview )的使用
|
11月前
|
Kubernetes 架构师 Java
史上最全对照表:大厂P6/P7/P8 职业技能 薪资水平 成长路线
40岁老架构师尼恩,专注于帮助读者提升技术能力和职业发展。其读者群中,多位成员成功获得知名互联网企业的面试机会。尼恩不仅提供系统化的面试准备指导,还特别针对谈薪酬环节给予专业建议,助力求职者在与HR谈判时更加自信。此外,尼恩还分享了阿里巴巴的职级体系,作为行业内广泛认可的标准,帮助读者更好地理解各职级的要求和发展路径。通过尼恩的技术圣经系列PDF,如《尼恩Java面试宝典》等,读者可以进一步提升自身技术实力,应对职场挑战。关注“技术自由圈”公众号,获取更多资源。
|
Ubuntu 安全 网络协议

热门文章

最新文章