快速上手:使用Hexo搭建并自定义个人博客

🌟 前言

欢迎来到我的技术小宇宙!🌌 这里不仅是我记录技术点滴的后花园,也是我分享学习心得和项目经验的乐园。📚 无论你是技术小白还是资深大牛,这里总有一些内容能触动你的好奇心。🔍

  • 🤖 洛可可白:个人主页

  • 🔥 个人专栏:✅前端技术 ✅后端技术

  • 🏠 个人博客:洛可可白博客

  • 🐱 代码获取:bestwishes0203

  • 📷 封面壁纸:洛可可白wallpaper

在这里插入图片描述

文章目录

  • 快速上手:使用Hexo搭建并自定义个人博客
    • 摘要
    • 1. 安装 Hexo
    • 2. 启动本地服务器
    • 3. 创建你的文章
    • 4. 安装并应用新主题
    • 5. 配置主题
    • 6. 自定义主题
    • 7. 关联博客到 Gitee
    • 8. 预览和部署
    • 结论

快速上手:使用Hexo搭建并自定义个人博客

摘要

Hexo 是一个轻量级、简洁的静态博客框架,它允许你使用 Markdown 语法编写文章,并通过简单的命令生成静态网页。本文将指导你如何从零开始搭建一个基于 Hexo 的个人博客,选择并安装一个新主题,以及如何部署到 Gitee 上。

1. 安装 Hexo

首先,确保你的计算机上安装了 Node.js 和 npm。然后,通过 npm 安装 Hexo 命令行工具。

# 安装 Hexo CLI
npm install hexo-cli -g

# 初始化一个新的 Hexo 博客项目
hexo init blog

# 进入博客项目目录
cd blog

# 安装依赖
npm install

2. 启动本地服务器

在 Hexo 项目目录中,启动本地服务器以实时预览你的博客。

# 启动本地服务器
hexo server

# 或者使用简写
hexo s

3. 创建你的文章

使用 Hexo 创建新文章。

# 创建一篇新文章
hexo new "第一篇文章"

4. 安装并应用新主题

选择一个 Hexo 主题,例如 Ayer。安装并应用到你的 Hexo 博客。

# 安装 Ayer 主题
npm install hexo-theme-ayer --save

# 或者对于 Hexo 版本低于 5.0
git clone https://gitee.com/mirrors/ayer.git themes/ayer

5. 配置主题

在 Hexo 的配置文件 _config.yml 中设置主题。

# 在 _config.yml 中设置主题
theme: ayer

6. 自定义主题

根据你选择的主题,编辑主题的配置文件来自定义你的博客。例如,Ayer 主题的配置文件通常位于 themes/ayer/_config.yml

# 打开主题配置文件进行自定义
# themes/ayer/_config.yml

具体配置可以参考我的。

# 侧边栏菜单
menu:
  主页: /
  归档: /archives
  分类: /categories
  标签: /tags
  旅行: /tags/旅行/
  壁纸: https://wallpaper.seenav.cn/
  友链: /friends
  关于我: /2022/01/01/关于我/

# 站点次标题和打字动效
# https://github.com/mattboldt/typed.js
subtitle:
  enable: true # 是否开启动效
  text: 面朝大海,春暖花开 # 显示的文字
  text2: 一生努力,一生被爱 # 滚动播放,如果不需要可以留空
  text3: 想要的都拥有,得不到的都释怀 # 最多支持三段文字
  startDelay: 0 # 延迟时间
  typeSpeed: 200 # 打字速度
  loop: true # 是否循环
  backSpeed: 100 # 回退速度
  showCursor: true # 是否显示光标

# 网站图标和侧边栏logo
favicon: /blog/favicon.ico
logo: /blog/images/ayer.png

# 封面配置
# enable-是否启用封面;path-封面背景图;logo-封面logo
cover:
  enable: true
  path: /blog/images/cover1.jpg # /source/images目录下附送多张美图,可更换
  logo: false #/images/ayer.svg,如果不要直接设置成false

# 页面顶部进度条
progressBar: false

# 告示板模块
broadcast:
  enable: true # true开启,false关闭
  type: 2 # 1:自定义输入,2:一言api(https://hitokoto.cn/)
  text: 一个安静优雅的hexo主题,快速且响应式。 # type为1时有效

# 文章配置
# 文章太长,截断按钮文字(在需要截断的行增加此标记:<!--more-->)
excerpt_link: ...
# 如果你嫌每篇文章手动加more标记比较麻烦,又不想在首页全文显示,可以把excerpt_all设置成true,这样首页只会显示文章归档
excerpt_all: false

# 是否开启代码复制按钮
copy_btn: true
# 是否开启文章分享按钮
share_enable: true
# 国内的社交平台(If you are not in China, maybe you prefer to set:false)
share_china: true
# 文章分享文字
share_text: 分享

# 分页文字
nav_text:
  page_prev: 上一页
  page_next: 下一页
  post_prev: 上一篇
  post_next: 下一篇

# 文章页是否显示目录
toc: true

# 文章中的图片是否支持点击放大
image_viewer: true

# https://github.com/willin/hexo-wordcount
# 是否开启字数统计(关闭请设置enable为false)
# 也可以单独在md文件里Front-matter设置`no_word_count: true`属性,来自定义关闭字数统计
word_count:
  enable: true
  # 只在文章详情显示(不在首页显示)
  only_article_visit: true

# 打赏
# 打赏type设定:0-关闭打赏; 1-文章对应的md文件里有reward:true属性,才有打赏; 2-所有文章均有打赏
reward_type: 2
# 打赏wording
reward_wording: "请我喝杯奶茶吧~"
# 支付宝二维码图片地址,跟你设置logo的方式一样。比如:/images/alipay.jpg
alipay: /images/alipay.jpg
# 微信二维码图片地址
weixin: /images/wechat.jpg

# 版权声明
# 版权声明type设定:0-关闭版权声明; 1-文章对应的md文件里有copyright: true属性,才有版权声明; 2-所有文章均有版权声明
copyright_type: 2

# 是否启用搜索
# 需要安装hexo-generator-searchdb(https://github.com/theme-next/hexo-generator-searchdb)
search: true

# RSS订阅(先安装hexo-generator-feed插件,再去博客根目录config进行配置)
# 不想显示可以直接留空
rss: /atom.xml

# 是否启用黑夜模式开关
darkmode: true

# 动态背景效果: 0-关闭,1-动态线条(跟随鼠标)
canvas_bg: 1

# 自定义鼠标样式,直接替换/images/mouse.cur文件
mouse:
  enable: false
  path: /blog/images/mouse.cur

# 鼠标点击效果:0-关闭,1-爱心,2-爆炸烟花,3-粒子烟花
click_effect: 3

# 页面宽度自定义(不建议修改,可能造成布局混乱),article_width文章宽度,sidebar_width侧边栏宽度
layout:
  article_width: 80rem
  sidebar_width: 8rem

# GitHub Ribbons-封面右上角的forkme,换样式直接在source/images目录下替换forkme图片
github:
  # (关闭请设置为false)
  enable: true
  url: https://gitee.com/bestwishes0203

# 网易云音乐插件
music:
  enable: true
  # 播放器尺寸类型(1:小尺寸、2:大尺寸)
  type: 1
  id: 1497588709 # 网易云分享的音乐ID(更换音乐请更改此配置项)
  autoPlay: false # 是否开启自动播放

# 访问量统计(不蒜子)
busuanzi:
  enable: true

# 友盟cnzz统计(url填js代码src链接)
cnzz:
  enable: true
  url: https://s9.cnzz.com/z_stat.php?id=1278069914&web_id=1278069914

# Google Analytics
google_analytics: ""
# 百度统计
baidu_analytics: ""

# Mathjax数学公式
mathjax: false

# Katex数学公式(allpost设置为false时只有头部设置math:true的文章才开启)
# 需要更换hexo渲染器,npm un hexo-renderer-marked -S && npm i hexo-renderer-markdown-it-katex -S
katex:
  enable: false # true
  allpost: true
  copy_tex: false

# mermaid流程图 三个选项缺一不可(https://mermaid-js.github.io/mermaid/)
mermaid:
  enable: false
  cdn: https://cdn.staticfile.org/mermaid/8.14.0/mermaid.min.js
  theme: forest

# 网站成立年份(默认为 2019,若填入年份小于当前年份,则显示为 2018-2019 类似的格式)
since: 2022

# ICP备案信息尾部显示
icp:
  enable: false
  url: "https://beian.miit.gov.cn/" # 备案链接
  text: "浙ICP备88888888" # 备案信息
# 公安备案信息尾部显示
gongan:
  enable: false
  img: /images/beian.png #公安备案图片
  url: "http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=01234567890123" #公安备案链接
  text: "浙公网安备01234567890123号" #公安备案信息

# 友情链接
friends_link:
  # Ayer主题: #网站名称
  #   #网站地址
  #   url: https://github.com/Shen-Yu/hexo-theme-ayer
  #   #网站图片(可忽略不写)
  #   img: /images/ayer.png
  Hexo官网:
    url: https://hexo.io
    img: /images/hexo.png
  Hexo图表插件:
    url: https://github.com/Shen-Yu/hexo-tag-chart
    img: /images/hexo-tag-chart.png

# 评论:1、Valine(推荐);2、Gitalk;3、Twikoo;

# 1、Valine[一款快速、简洁且高效的无后端评论系统](https://github.com/xCss/Valine)
# 启用Valine必须先创建leancloud应用, 获取 id|key 填入即可
leancloud:
  enable: false
  app_id: #
  app_key: #
# Valine配置
valine:
  enable: false # 是否启用
  avatar: monsterid # 头像样式(https://valine.js.org/avatar.html)
  placeholder: 给我的文章加点评论吧~ # placeholder

# 2、Gitalk(https://github.com/gitalk/gitalk)
gitalk:
  enable: false # true
  clientID: # GitHub Application Client ID
  clientSecret: # Client Secret
  repo: # Repository name
  owner: # GitHub ID
  admin: # GitHub ID

# 3、Twikoo(https://github.com/imaegoo/twikoo)
twikoo:
  enable: true
  envId: #

# 首页广告配置
# 可以根据需要自行增加ad_3,ad_4...,留空则不显示,建议图片和url不要带ad等关键词,否则可能会被adblock等插件屏蔽
# ads:
#   ad_1:
#     title: 云服务器限时秒杀
#     img: https://pic.imgdb.cn/item/62174b452ab3f51d912a5ccc.jpg
#     url: https://curl.qcloud.com/kvO7hb43
#     width: 300
#   ad_2:
#     title: vultr优惠vps
#     img: https://pic.imgdb.cn/item/62174b452ab3f51d912a5cd7.png
#     url: https://www.vultr.com/?ref=8630075
#     width: 300

# 网站开启加密访问,密码可设置任何字符
lock:
  enable: false
  password: 123456

这里还可以替换博客themes文件夹下的静态文件来美化自己的博客。

7. 关联博客到 Gitee

_config.yml 文件中配置 Gitee 仓库信息,并部署博客。

# 配置 Git 用户名和邮箱
git config --global user.name "your-gitee-username"
git config --global user.email "your-email@example.com"

# 生成 SSH 密钥
ssh-keygen -t ed25519 -C "Gitee SSH Key"

# 添加 SSH 公钥到 Gitee 账户
cat ~/.ssh/id_ed25519.pub

# 测试 SSH 连接
ssh -T git@gitee.com

如何生成 SSH 密钥: 生成 SSH 密钥

确保将 your-gitee-usernameyour-repo 替换为你在 Gitee 上的用户名和仓库名。

8. 预览和部署

确保一切设置正确,进入本地博客文件夹>右键>在终端打开

# 启动本地服务器预览博客
hexo server

# 简写
hexo s

如果满意,部署博客到 Gitee。



# 清理缓存
hexo clean

# 生成博客内容
hexo g

# 启动本地服务器预览博客(可选)
hexo server
# 简写
hexo s

# 安装 Hexo 部署插件(安装一次即可)
npm install hexo-deployer-git --save

# 部署博客
hexo deploy

# 简写
hexo d

如果部署不上去可能是博客跟目录下的 _congif.ymldeploy>repo没有修改为自己的地址。

# Hexo Configuration
## Docs: https://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/

# Site
title: 洛可可白的个人博客
subtitle: '执着于理想,纯粹于当下'
description: '有事者,事竟成;破釜沉舟,百二秦关终归楚;苦心人,天不负;卧薪尝胆,三千越甲可吞吴。'
keywords: "生活,旅行,思考,代码"
author: 洛可可白
language: zh-CN
timezone: ''

# URL
## Set your site url here. For example, if you use GitHub Page, set url as 'https://username.github.io/project'
url: https://bestwishes0203.gitee.io/blog
# root: /
# permalink_style: pretty
permalink: :year/:month/:day/:title/
permalink_defaults:
pretty_urls:
  trailing_index: true # Set to false to remove trailing 'index.html' from permalinks
  trailing_html: true # Set to false to remove trailing '.html' from permalinks

# Directory
source_dir: source
public_dir: public
tag_dir: tags
archive_dir: archives
category_dir: categories
code_dir: downloads/code
i18n_dir: :lang
skip_render:

# Writing
new_post_name: :title.md # File name of new posts
default_layout: post
titlecase: false # Transform title into titlecase
external_link:
  enable: true # Open external links in new tab
  field: site # Apply to the whole site
  exclude: ''
filename_case: 0
render_drafts: false
post_asset_folder: false
relative_link: false
future: true
highlight:
  enable: true
  line_number: true
  auto_detect: false
  tab_replace: ''
  wrap: true
  hljs: false
prismjs:
  enable: false
  preprocess: true
  line_number: true
  tab_replace: ''

# Home page setting
# path: Root path for your blogs index page. (default = '')
# per_page: Posts displayed per page. (0 = disable pagination)
# order_by: Posts order. (Order by date descending by default)
index_generator:
  path: ''
  per_page: 10
  order_by: -date

# Category & Tag
default_category: uncategorized
category_map:
tag_map:

# Metadata elements
## https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta
meta_generator: true

# Date / Time format
## Hexo uses Moment.js to parse and display date
## You can customize the date format as defined in
## http://momentjs.com/docs/#/displaying/format/
date_format: YYYY-MM-DD
time_format: HH:mm:ss
## updated_option supports 'mtime', 'date', 'empty'
updated_option: 'mtime'

# Pagination
## Set per_page to 0 to disable pagination
per_page: 10
pagination_dir: page

# Include / Exclude file(s)
## include:/exclude: options only apply to the 'source/' folder
include:
exclude:
ignore:

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
# theme: landscape
theme: ayer

# hexo-generator-searchdb
search:
  path: search.xml
  field: post
  format: html

# Deployment
## Docs: https://hexo.io/docs/one-command-deployment
deploy:
  type: 'git'
  repo: git@gitee.com:bestwishes0203/blog.git

最后,在Gitee仓库中开启 Gitee Pages 服务并且更新内容。

在这里插入图片描述

在这里插入图片描述
添加或修改博客内容之后,重复 步骤8 即可更新到线上。

结论

通过以上步骤,你已经成功地搭建了一个基于 Hexo 的个人博客,选择了一个新主题,并将其部署到了 Gitee。现在,你可以开始编写文章,分享你的知识和见解了。

感谢你的访问,期待与你在技术的道路上相遇!👋🌟🚀

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/442082.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

UUU.咕咚视频批量混剪软件下载,批量剪辑个体无限批量生成,批量合成视频,批量混剪视频的软件是什么样的?批量剪辑软件在哪下载?批量混剪软件下载容易吗?

[md]# 前言 工具的产生源于dy出的火山引擎的云视频混剪制作是按分钟数收费的&#xff0c;这个软件既能实现正常混剪也能避免二次收费。属于FFMPEG合成的。 欢迎大家给一些好的建议和功能&#xff0c;回复可见&#xff0c;附加了一些天卡&#xff0c;周卡&#xff0c;请大家不要…

Milvus 向量数据库实践 - 1

假定你已经安装了docker、docker-compose 环境 参考的文档如下&#xff1a; Milvus技术探究 - 知乎 MilvusClient() - Pymilvus v2.3.x for Milvus 一文带你入门向量数据库milvus 一、在docker上安装单机模式milvus数据库 1、 进入milvus官网&#xff1a; Install Milvus Stand…

【linuxC语言】dup、dup2函数

文章目录 前言一、dup函数二、dup2函数三、将标准输出重定向到文件总结 前言 在Linux环境下&#xff0c;dup、dup2以及原子操作都是用于文件描述符管理和处理的重要工具。这些功能提供了对文件描述符进行复制和原子操作的能力&#xff0c;使得在多线程或多进程环境中更加安全和…

Randoop 报错 Cannot find the Java compiler 的解决方案

编写测试用例是一项困难且耗时的工作&#xff0c;但同时又是好的软件工程的重要部分。Randoop是一个随机测试的测试用例生成的工具&#xff0c;能够自动的为Java代码中的类生成单元测试。 官网链接&#xff1a; https://randoop.github.io/randoop/manual/index.html。 正确的…

新手小白剪辑视频知识点:视频分辨率和位深度,有什么区别?

新手小白需要了解的视频剪辑知识点&#xff0c;什么是视频分辨率尺寸(文件大小)和位深度&#xff1f; 分辨率尺寸/文件大小 常见的视频分辨率是高清和 4K。高清素材的屏幕像素&#xff08;宽度 x 高度&#xff09;测量值通常为 1920 x 1080&#xff0c;而 4K 素材是其四倍&am…

【Linux通识】之端口到底是个什么?

端口的本质是计算机上的一小块内存&#xff01; 端口的概念 在Linux系统&#xff08;以及其他所有支持网络通信的操作系统&#xff09;中&#xff0c;端口&#xff08;Port&#xff09;可以理解为计算机在网络上与外界沟通的虚拟通道或门牌号码。当我们谈论网络通信时&#xf…

【教程】Github环境配置新手指南(超详细)

写在前面&#xff1a; 如果文章对你有帮助&#xff0c;记得点赞关注加收藏一波&#xff0c;利于以后需要的时候复习&#xff0c;多谢支持&#xff01; 文章目录 一、Github初始设置&#xff08;一&#xff09;登入Github&#xff08;二&#xff09;新建仓库 二、本地Git配置&am…

在Leaflet中使用Turf.js生成范围多边形的两种实现方式

目录 前言 一、场景需求 1、Leaflet.js的不足 2、Turf.js 二、原始数据展示 1、点位数据展示 2、定义样式 3、定位数据初始化 三、Turfjs中bbox生成 1、官网讲解 2、轨迹bbox生成 四、Turfjs生成外包多边形 1、官网例子 2、凸多边形生成 总结 前言 在一些共享出…

机器学习--循环神经网路(RNN)2

在这篇文章中&#xff0c;我们介绍一下其他的RNN。 一.深层RNN 循环神经网络的架构是可以任意设计的&#xff0c;之前提到的 RNN 只有一个隐藏层&#xff0c;但 RNN 也可以是深层的。比如把 xt 丢进去之后&#xff0c;它可以通过一个隐藏层&#xff0c;再通过第二个隐藏层&am…

三  超级数据查看器   讲解稿    主界面和系统功能介绍

三 超级数据查看器 讲解稿 主界面和系统功能介绍 APP百度下载地址 下载地址4 ​讲解稿全文: 大家好。 今天我们讲解一下&#xff0c;超级数据查看器主界面。 首先&#xff0c;我们打开超级数据查看器。 打开之后&#xff0c;进入的第一个界面就是主界面。这个页面由三…

网络编程---网络编程入门、UDP通信程序、TCP通信程序

1.网络编程入门 1.网络编程概述 网络编程&#xff1a; 在网络通信协议下&#xff0c;实现网络互连的不同计算机上运行的程序间可以进行数据传输 计算机网络&#xff1a; 是指将地理位置不同的具有独立功能的多台计算机及其外部设备&#xff0c;通过通信线路连接起来&#…

docker安装ES、LogStash、Kibana

文章目录 一、安装Elasticsearch1. 安装Elasticsearch2. 安装IK分词器3. elasticsearch-head 监控的插件4. 配置跨域 二、安装LogStash三、安装kibana四、SpringBoot集成LogStash&#xff0c;将日志输出到ES中五、 启动项目&#xff0c;监控项目运行 提示&#xff1a;以下是本篇…

ABAP接口部分-C#调用RFC

目录 ABAP接口部分-C#调用RFC创建表结构创建RFC函数创建C#项目引用SAP .Net Connector包绘制窗口的控件最终布局代码 项目配置报错SAP.Middleware.Connector.RfcDestinationManager报错SAP.Middleware.Connector.RfcLoginexception报错SAP.Middleware.Connector.RfcInvalidStat…

Docker基础教程 - 8 镜像仓库

更好的阅读体验&#xff1a;点这里 &#xff08; www.doubibiji.com &#xff09; 8 镜像仓库 在安装 Docker 的时候&#xff0c;默认使用的是 DockerHub&#xff0c;后来为了提升速度&#xff0c;配置的镜像仓库是使用阿里云的镜像仓库&#xff0c;拉取的是别人制作的镜像&…

第五十三回 入云龙斗法破高廉 黑旋风下井救柴进-AI训练数据处理和读取

罗真人教了公孙胜五雷天罡正法&#xff0c;并让他记住“逢幽而止&#xff0c;遇汴而环”八个字。三人辞别了罗真人&#xff0c;戴宗先回去报信&#xff0c;李逵和公孙胜结伴而行。 走了三天&#xff0c;来到了武冈镇&#xff0c;李逵碰到一个铁匠&#xff0c;叫金钱豹子汤隆&a…

[Flutter get_cli] 配置 sub_folder:false报错

flutter get_cli 配置 get_cli:sub_folder:false报错如下 Because getx_cli_learn01 depends on get_cli from unknown source "sub_folder", version solving failed. 原因是在 pubspec.yaml文件中, get_cli:sub_folder:false要和 dependencies: xxx dev_depe…

【node版本问题】运行项目报错 PostCSS received undefined instead of CSS string

最近该项目没有做任何修改&#xff0c;今天运行突然跑不起来报错了 PostCSS received undefined instead of CSS string 【原因】突然想起来期间有换过 node 版本为 16.17.1 【解决】将 node 版本换回之前的 14.18.0 就可以了

突然发现一个很炸裂的平台!

平时小孟会开发很多的项目&#xff0c;很多项目不仅开发的功能比较齐全&#xff0c;而且效果比较炸裂。 今天给大家介绍一个我常用的平台&#xff0c;因含低代码平台&#xff0c;开发相当的快。 1&#xff0c;什么是低代码 低代码包括两种&#xff0c;一种低代码&#xff0c;…

正则表达式 || 遇到字符串里面有() 就在括号后面换行

<template><div class"vertical-layout"><header><h1>testPage</h1><p>(1)第一行内容xxxxxxxxx&#xff08;2&#xff09;第二行内容xxxxxxx(3)第三行内容</p></header><main><el-button click"goToO…

IPsec

在FW5和FW3之间建立一条IPSEC通道,保证10.0.2.0/24网段可以正常访问到192.168.1.0/24 最后测试&#xff1a;