河北省建设安全监督站的网站,装饰网站建设公司,大学网站开发实验室建设方案,深圳网站外包#x1f31f; 前言 欢迎来到我的技术小宇宙#xff01;#x1f30c; 这里不仅是我记录技术点滴的后花园#xff0c;也是我分享学习心得和项目经验的乐园。#x1f4da; 无论你是技术小白还是资深大牛#xff0c;这里总有一些内容能触动你的好奇心。#x1f50d; #x… 前言 欢迎来到我的技术小宇宙 这里不仅是我记录技术点滴的后花园也是我分享学习心得和项目经验的乐园。 无论你是技术小白还是资深大牛这里总有一些内容能触动你的好奇心。 洛可可白个人主页 个人专栏✅前端技术 ✅后端技术 个人博客洛可可白博客 代码获取bestwishes0203 封面壁纸洛可可白wallpaper 文章目录 快速上手使用Hexo搭建并自定义个人博客摘要1. 安装 Hexo2. 启动本地服务器3. 创建你的文章4. 安装并应用新主题5. 配置主题6. 自定义主题7. 关联博客到 Gitee8. 预览和部署结论 快速上手使用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 install2. 启动本地服务器
在 Hexo 项目目录中启动本地服务器以实时预览你的博客。
# 启动本地服务器
hexo server# 或者使用简写
hexo s3. 创建你的文章
使用 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/ayer5. 配置主题
在 Hexo 的配置文件 _config.yml 中设置主题。
# 在 _config.yml 中设置主题
theme: ayer6. 自定义主题
根据你选择的主题编辑主题的配置文件来自定义你的博客。例如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?id1278069914web_id1278069914# 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?recordcode01234567890123 #公安备案链接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、Gitalk3、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_3ad_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/?ref8630075
# 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-emailexample.com# 生成 SSH 密钥
ssh-keygen -t ed25519 -C Gitee SSH Key# 添加 SSH 公钥到 Gitee 账户
cat ~/.ssh/id_ed25519.pub# 测试 SSH 连接
ssh -T gitgitee.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 中deployrepo没有修改为自己的地址。
# 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: gitrepo: gitgitee.com:bestwishes0203/blog.git最后,在Gitee仓库中开启 Gitee Pages 服务并且更新内容。 添加或修改博客内容之后重复 步骤8 即可更新到线上。
结论
通过以上步骤你已经成功地搭建了一个基于 Hexo 的个人博客选择了一个新主题并将其部署到了 Gitee。现在你可以开始编写文章分享你的知识和见解了。
感谢你的访问期待与你在技术的道路上相遇
