快速上手：使用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: truepath: /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: falsepath: /blog/images/mouse.cur# 鼠标点击效果：0-关闭，1-爱心，2-爆炸烟花，3-粒子烟花
click_effect: 3# 页面宽度自定义（不建议修改，可能造成布局混乱），article_width文章宽度，sidebar_width侧边栏宽度
layout:article_width: 80remsidebar_width: 8rem# GitHub Ribbons-封面右上角的forkme，换样式直接在source/images目录下替换forkme图片
github:# (关闭请设置为false)enable: trueurl: https://gitee.com/bestwishes0203# 网易云音乐插件
music:enable: true# 播放器尺寸类型(1：小尺寸、2：大尺寸)type: 1id: 1497588709 # 网易云分享的音乐ID(更换音乐请更改此配置项)autoPlay: false # 是否开启自动播放# 访问量统计(不蒜子)
busuanzi:enable: true# 友盟cnzz统计(url填js代码src链接)
cnzz:enable: trueurl: 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 # trueallpost: truecopy_tex: false# mermaid流程图 三个选项缺一不可(https://mermaid-js.github.io/mermaid/)
mermaid:enable: falsecdn: https://cdn.staticfile.org/mermaid/8.14.0/mermaid.min.jstheme: forest# 网站成立年份(默认为 2019，若填入年份小于当前年份，则显示为 2018-2019 类似的格式)
since: 2022# ICP备案信息尾部显示
icp:enable: falseurl: "https://beian.miit.gov.cn/" # 备案链接text: "浙ICP备88888888" # 备案信息
# 公安备案信息尾部显示
gongan:enable: falseimg: /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.pngHexo官网:url: https://hexo.ioimg: /images/hexo.pngHexo图表插件:url: https://github.com/Shen-Yu/hexo-tag-chartimg: /images/hexo-tag-chart.png# 评论：1、Valine(推荐)；2、Gitalk；3、Twikoo;# 1、Valine[一款快速、简洁且高效的无后端评论系统](https://github.com/xCss/Valine)
# 启用Valine必须先创建leancloud应用， 获取 id|key 填入即可
leancloud:enable: falseapp_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 # trueclientID: # GitHub Application Client IDclientSecret: # Client Secretrepo: # Repository nameowner: # GitHub IDadmin: # GitHub ID# 3、Twikoo(https://github.com/imaegoo/twikoo)
twikoo:enable: trueenvId: ## 首页广告配置
# 可以根据需要自行增加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: falsepassword: 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-username 和 your-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.yml 中deploy>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 permalinkstrailing_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 tabfield: site # Apply to the whole siteexclude: ''
filename_case: 0
render_drafts: false
post_asset_folder: false
relative_link: false
future: true
highlight:enable: trueline_number: trueauto_detect: falsetab_replace: ''wrap: truehljs: false
prismjs:enable: falsepreprocess: trueline_number: truetab_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: 10order_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.xmlfield: postformat: 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。现在，你可以开始编写文章，分享你的知识和见解了。

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

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

如若内容造成侵权/违法违规/事实不符，请联系编程知识网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

再探再报 除 0 这件事有不同

再探再报 除 0 这件事有不同

首先&#xff0c;在数学中&#xff0c;一个数除以0是没有意义的。 其次&#xff0c;在计算机中&#xff0c;对于除零&#xff0c;传统概念里是会上报一个异常。首先是CPU内部实现会报异常。最早学组成原理和汇编的时候&#xff0c;都是说CPU寄存器中有个表示除零异常的位。在L…
阅读更多...
上位机图像处理和嵌入式模块部署（qmacvisual二维码识别）

上位机图像处理和嵌入式模块部署（qmacvisual二维码识别）

【 声明&#xff1a;版权所有&#xff0c;欢迎转载&#xff0c;请勿用于商业用途。 联系信箱&#xff1a;feixiaoxing 163.com】 如果说条形码在商品上使用比较多的话&#xff0c;那么二维码识别是一个更加使用频繁的场合。为什么使用这样频繁&#xff0c;我想很多一部分原因来…
阅读更多...
渗透测试——信息收集

渗透测试——信息收集

信息收集 前言 信息收集是在做渗透时找尽可能的多的信息&#xff0c;为之后的渗透做铺垫。信息收集的方法有很多 比如&#xff0c;页面、真实的IP、域名/子域名、敏感目录/文件、端口探测、CMS指纹识别、操作系统识别 1. 页面信息收集 拿到域名后&#xff0c;从网站的url中…
阅读更多...
Bee Mobile组件库重磅升级

Bee Mobile组件库重磅升级

Bee Mobile组件库重磅升级&#xff01; 丰富强大的组件移动预览快速上手create-bee-mobile Bee Mobile组件库重磅升级&#xff01; Bee Mobile组件库最新 v1.0.0 版本&#xff0c;支持最新的 React v18。 主页&#xff1a;Bee Mobile 丰富强大的组件 一共拥有50多个组件&…
阅读更多...
基于javaweb+springboot开发的城市地名地址信息管理系统设计和实现

基于javaweb+springboot开发的城市地名地址信息管理系统设计和实现

基于javaweb(springboot)城市地名地址信息管理系统设计和实现 博主介绍&#xff1a;多年java开发经验&#xff0c;专注Java开发、定制、远程、文档编写指导等,csdn特邀作者、专注于Java技术领域 作者主页 央顺技术团队 Java毕设项目精品实战案例《1000套》 欢迎点赞 收藏 ⭐留言…
阅读更多...
一切都在变好

一切都在变好

&#xff08;1&#xff09;规模复杂性Hold不住了 我已经说过多次&#xff0c;有几个&#xff1a; 1、5400多只股票&#xff0c;还会再持续增加 2、2.2亿账户&#xff0c;每年还以1600万在增加 3、60-90万亿市值 4、每天6000亿-万亿交易额&#xff0c;看趋势还在增加 也就是说&a…
阅读更多...
时间序列-AR MA ARIMA

时间序列-AR MA ARIMA

一、AR模型(自回归) AR探索趋势和周期性 预测依赖于过去的观测值和模型中的参数。模型的阶数 p pp 决定了需要考虑多少个过去时间点的观测值。 求AR模型的阶数 p和参数 ϕ i \phi_i ϕi​ &#xff0c;常常会使用统计方法如最小二乘法、信息准则&#xff08;如AIC、BIC&#xf…
阅读更多...
开源的Java图片处理库介绍

开源的Java图片处理库介绍

在 Java 生态系统中&#xff0c;有几个流行的开源库可以用于图片处理。这些库提供了丰富的功能&#xff0c;如图像缩放、裁剪、颜色调整、格式转换等。以下是几个常用的 Java 图片处理库的介绍&#xff0c;包括它们的核心类、主要作用和应用场景&#xff0c;以及一些简单的例子…
阅读更多...
加密流量分类torch实践4：TrafficClassificationPandemonium项目更新

加密流量分类torch实践4：TrafficClassificationPandemonium项目更新

加密流量分类torch实践4&#xff1a;TrafficClassificationPandemonium项目更新 更新日志 3/10号更新 流量预处理更新 增加了基于splitCap.exe分流预处理&#xff0c;并且除了提取负载与包长序列后&#xff0c;支持提取统计特征&#xff08;26维度&#xff09;。 26维度统计…
阅读更多...
表单进阶（3）-上传文件和隐藏字段

表单进阶（3）-上传文件和隐藏字段

上传文件&#xff1a;<input type"file"> 隐藏字段&#xff1a;<input type"hidden" name"" id"" value"带给后端的信息"> 禁用disabled&#xff1a;<button disabled"disabled">注册</bu…
阅读更多...
UDP与TCP：了解这两种网络协议的不同之处

UDP与TCP：了解这两种网络协议的不同之处

&#x1f90d; 前端开发工程师、技术日更博主、已过CET6 &#x1f368; 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1 &#x1f560; 牛客高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》 &#x1f35a; 蓝桥云课签约作者、上架课程《Vue.js 和 E…
阅读更多...
微信小程序-侧滑删除

微信小程序-侧滑删除

简介 movable-view和movable-area是可移动的视图容器&#xff0c;在页面中可以拖拽滑动。 本篇文章将会通过该容器实现一个常用的拖拽按钮功能。 使用效果 代码实现 side-view.wtml 布局见下面代码&#xff0c;left view为内容区域&#xff0c;right view为操作按钮&a…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023