如何使用Hexo搭建个人博客

文章目录

  • 如何使用Hexo搭建个人博客
    • 环境搭建
    • 连接 Github
    • 创建 Github Pages 仓库
    • 本地安装 Hexo 博客程序
      • 安装 Hexo
      • Hexo 初始化和本地预览
    • 部署 Hexo 到 GitHub Pages
    • 开始使用
      • 发布文章
      • 网站设置
      • 更换主题
      • 常用命令
    • 插件安装
    • 解决成功上传github但是web不更新
    • 不想上传文章处理方式
    • 链接

如何使用Hexo搭建个人博客

环境搭建

Hexo 基于 Node.js,搭建过程中还需要使用 npm(Node.js 已带) 和 git,因此先搭建本地操作环境,安装 Node.js 和 Git。

  • Node.js:https://nodejs.org/zh-cn
  • Git:https://git-scm.com/downloads

下载 Node.js 和 Git 程序并安装,一路点 “下一步” 按默认配置完成安装。

安装完成后,Win+R 输入 cmd 并打开,依次输入 node -vnpm -vgit --version 并回车,如下图出现程序版本号即可。

在这里插入图片描述

连接 Github

使用邮箱注册 GitHub 账户,选择免费账户(Free),并完成邮件验证。

右键 -> Git Bash Here,设置用户名和邮箱

git config --global user.name "GitHub 用户名"
git config --global user.email "GitHub 邮箱"

创建 SSH 密匙

输入 ssh-keygen -t rsa -C "GitHub 邮箱",然后一路回车。

添加密匙:

进入 [C:\Users\用户名.ssh] 目录(要勾选显示“隐藏的项目”),用记事本打开公钥 id_rsa.pub 文件并复制里面的内容。

登陆 GitHub ,进入 Settings 页面,选择左边栏的 SSH and GPG keys,点击 New SSH key。

Title 随便取个名字,粘贴复制的 id_rsa.pub 内容到 Key 中,点击 Add SSH key 完成添加。

在这里插入图片描述

验证连接:

打开 Git Bash,输入 ssh -T git@github.com 出现 “Are you sure……”,输入 yes 回车确认。

在这里插入图片描述

显示 “Hi xxx! You’ve successfully……” 即连接成功。

创建 Github Pages 仓库

GitHub 主页右上角加号 -> New repository:

  • Repository name 中输入 用户名.github.io
  • 勾选 “Initialize this repository with a README”
  • Description 选填
    在这里插入图片描述

创建后默认自动启用 HTTPS,博客地址为:https://用户名.github.io

本地安装 Hexo 博客程序

  • 新建一个文件夹用来存放 Hexo 的程序文件,如 Hexo-Blog。打开该文件夹
  • 右键 -> Git Bash Here。

安装 Hexo

使用 npm 一键安装 Hexo 博客程序:

npm install hexo-cli -g

Mac 用户需要管理员权限(sudo),运行这条命令:

sudo npm install hexo-cli -g

安装时间有点久(真的很慢!),界面也没任何反应,耐心等待,安装完成后如下图。

在这里插入图片描述

Hexo 初始化和本地预览

初始化并安装所需组件:

hexo init blog     # 初始化
cd blog
npm install    # 安装组件

完成后依次输入下面命令,启动本地服务器进行预览

hexo g   # 生成页面
hexo s   # 启动预览

访问 http://localhost:4000,出现 Hexo 默认页面,本地博客安装成功!

**Tips:**如果出现页面加载不出来,可能是端口被占用了。Ctrl+C 关闭服务器,运行 hexo server -p 5000 更改端口号后重试。

Hexo 博客文件夹目录结构如下:

在这里插入图片描述

部署 Hexo 到 GitHub Pages

本地博客测试成功后,就是上传到 GitHub 进行部署,使其能够在网络上访问。

首先安装 hexo-deployer-git

npm install hexo-deployer-git --save

然后修改 _config.yml 文件末尾的 Deployment 部分,修改成如下:

deploy:type: gitrepository: git@github.com:用户名/用户名.github.io.gitbranch: master

完成后运行 hexo d 将网站上传部署到 GitHub Pages。

完成!这时访问我们的 GitHub 域名 https://用户名.github.io 就可以看到 Hexo 网站了。

开始使用

发布文章

进入博客所在目录,右键打开 Git Bash Here,创建博文:

hexo new "My New Post"

然后 source 文件夹中会出现一个 My New Post.md 文件,就可以使用 Markdown 编辑器在该文件中撰写文章了。

写完后运行下面代码将文章渲染并部署到 GitHub Pages 上完成发布。以后每次发布文章都是这两条命令。

hexo g   # 生成页面
hexo d   # 部署发布

也可以不使用命令自己创建 .md 文件,只需在文件开头手动加入如下格式 Front-matter 即可,写完后运行 hexo ghexo d 发布。

---
title: Hello World # 标题
date: 2019/3/26 hh:mm:ss # 时间
categories: # 分类
- Diary
tags: # 标签
- PS3
- Games
---摘要
<!--more-->
正文

网站设置

包括网站名称、描述、作者、链接样式等,全部在网站目录下的 _config.yml 文件中,参考官方文档按需要编辑。

注意:冒号后要加一个空格!

更换主题

在Themes | Hexo选择一个喜欢的主题,比如 Ayer中文说明 | 岛 (gitee.io),进入网站目录打开 Git Bash Here 下载主题:

git clone https://github.com/Shen-Yu/hexo-theme-ayer.git themes/ayergit clone https://github.com/next-theme/hexo-theme-next themes/next

然后修改 _config.yml 中的 theme 为新主题名称 next,发布。(有的主题需要将 _config.yml 替换为主题自带的,参考主题说明。)

修改blog下的_config.ymltheme: landscape -> theme: ayer

常用命令

hexo new "name"       # 新建文章
hexo new page "name"  # 新建页面
hexo g                # 生成页面
hexo d                # 部署
hexo g -d             # 生成页面并部署
hexo s                # 本地预览
hexo clean            # 清除缓存和已生成的静态文件
hexo help             # 帮助

插件安装

  • 搜索插件
    npm install hexo-generator-searchdb --save

解决成功上传github但是web不更新

修改 github 设置

在这里插入图片描述

不想上传文章处理方式

直接在文件命名前面加一个 “_” 下划线即可

链接

  • Hexo 官网链接:文档 | Hexo

  • 热门主题:Ayer中文说明 | 岛 (gitee.io)

  • Web开发技术 > CSS:层叠样式表

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

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

相关文章

Yolov8模型用torch_pruning剪枝

目录 &#x1f680;&#x1f680;&#x1f680;订阅专栏&#xff0c;更新及时查看不迷路&#x1f680;&#x1f680;&#x1f680; 原理 遍历所有分组 高级剪枝器 &#x1f680;&#x1f680;&#x1f680;订阅专栏&#xff0c;更新及时查看不迷路&#x1f680;&#x1f680…

JVM基本概念、命令、参数、GC日志总结

原文: 赵侠客 一、前言 NPE&#xff08;NullPointerException&#xff09;和OOM&#xff08;OutofMemoryError&#xff09;在JAVA程序员中扮演着重要的角色&#xff0c;它也是很多人始终摆脱不掉的梦魇&#xff0c;与NPE不同的是OOM一旦在生产环境中出现就意味着只靠代码已经无…

java集合题库详解

1. Arraylist与LinkedList区别 可以从它们的底层数据结构、效率、开销进行阐述哈 ArrayList是数组的数据结构&#xff0c;LinkedList是链表的数据结构。 随机访问的时候&#xff0c;ArrayList的效率比较高&#xff0c;因为LinkedList要移动指针&#xff0c;而ArrayList是基于索…

Java 客户端向服务端上传文件(TCP通信)

一、实验内容 编写一个客户端向服务端上传文件的程序&#xff0c;要求使用TCP通信的的知识&#xff0c;完成将本地机器输入的路径下的文件上传到D盘中名称为upload的文件夹中。并把客户端的IP地址加上count标识作为上传后文件的文件名&#xff0c;即IP&#xff08;count&#…

OpenSearch 与 Elasticsearch:哪个开源搜索引擎适合您?

当谈论到搜索引擎产品时&#xff0c;Elasticsearch 和 OpenSearch 是两个备受关注的选择。它们都以其出色的功能和灵活性而闻名&#xff0c;但在一些方面存在一些差异。在本文中&#xff0c;我们将从功能和延展性、工具与资源、价格和许可这三个角度对这两个产品进行论述。通过…

qt+opencv人脸人眼检测识别

项目运行涉及到opencv库&#xff0c;以及haarcascade_frontalface_default.xml和haarcascade_eye_tree_eyeglasses.xml。qt配置opencv可见先前文章&#xff0c;另外这两份OpenCV 中用于眼睛检测的级联分类器xml文件&#xff0c;是我在网上下载的。 把要使用到的文件都放到当前…

鸿蒙培训开发:就业市场的新热点~

金三银四在即&#xff0c;随着春节假期结束&#xff0c;各行各业纷纷复工复产&#xff0c;2024年的春季招聘市场也迎来了火爆的局面。最近发布的《2024年春招市场行情周报&#xff08;第一期&#xff09;》显示&#xff0c;尽管整体就业市场仍处于人才饱和状态&#xff0c;但华…

spring-cloud-openfeign 3.0.0(对应spring boot 2.4.x之前版本)之前版本feign整合ribbon请求流程

在之前写的文章配置基础上 https://blog.csdn.net/zlpzlpzyd/article/details/136060312 下图为自己整理的

Excel 快速填充/输入内容

目录 一. Ctrl D/R 向下/右填充二. 批量输入内容 一. Ctrl D/R 向下/右填充 ⏹如下图所示&#xff0c;通过快捷键向下和向右填充数据 &#x1f914;当选中第一个单元格之后&#xff0c;可以按住Shift后&#xff0c;再选中最后一个单元格&#xff0c;可以选中第一个单元格和最…

自动驾驶技术解析与关键步骤

目录 前言1 自动驾驶主要技术流程1.1 车辆周围环境感知1.2 车辆和行人检测分析1.3 运动轨迹规划 2 关键技术概述2.1 车辆探测与图片输入2.2 行人检测2.3 运动规划2.4 电子地图2.5 轨迹预测2.6 交通灯分析2.7 故障检测 结语 前言 自动驾驶汽车作为未来交通领域的重要发展方向&a…

【Python】-入门:安装配置和IDLE的使用

Python的安装和配置 一、下载Python安装包 首先&#xff0c;你需要从Python的官方网站&#xff08;https://www.python.org/downloads/&#xff09;下载适合你操作系统的Python安装包。请注意&#xff0c;Python 2.x版本即将停止维护&#xff0c;因此推荐下载Python 3.x版本。…

【LGR-176-Div.2】[yLCPC2024] 洛谷 3 月月赛 I(A~C and G<oeis>)

[yLCPC2024] A. dx 分计算 前缀和提前处理一下区间和&#xff0c;做到O&#xff08;1&#xff09;访问就可以过。 #include <bits/stdc.h> //#define int long long #define per(i,j,k) for(int (i)(j);(i)<(k);(i)) #define rep(i,j,k) for(int (i)(j);(i)>(k);…

Redis作为缓存的数据一致性问题

背景 使用Reids作为缓存的原因&#xff1a; 在高并发场景下&#xff0c;传统关系型数据库的并发能力相对比较薄弱&#xff08;QPS不能太大&#xff09;&#xff1b; 使用Redis做一个缓存。让用户请求先打到Redis上而不是直接打到数据库上。 但是如果出现数据更新操作&#xff…

Windows下同一电脑配置多个Git公钥访问不同的账号

前言 产生这个问题的原因是我在Gitee码云上有两个账号,为了方便每次不用使用http模式推拉代码,于是我就使用了ssh的模式,起初呢我用两台电脑分别连接两个账号,用起来也相安无事,近段时时间台式机在家里,我在外地出差了,就想着把ssh公钥同时添加到不同的账号里,结果却发现不能用…

超网、IP 聚合、IP 汇总分别是什么?三者有啥区别和联系?

一、超网 超网&#xff08;Supernet&#xff09;是一种网络地址聚合技术&#xff0c;它可以将多个连续的网络地址合并成一个更大的网络地址&#xff0c;从而减少路由表的数量和大小。超网技术可以将多个相邻的网络地址归并成一个更大的网络地址&#xff0c;这个更大的网络地址…

Git使用教程:入门到精通

Git使用教程&#xff1a;入门到精通 一、Git安装根据需求选择电脑位数安装&#xff1b;20231023210945建议这里先新建一个文件夹如&#xff1a;D:/Git&#xff1b;专门来存放Git安装包和后续Git代码&#xff0c;方便管理&#xff1b; 二、Git使用前的配置需要先创建自己的Gitee…

贪心算法(蓝桥杯 C++ 题目 代表 注解)

介绍&#xff1a; 贪心算法&#xff08;Greedy Algorithm&#xff09;是一种在每一步选择中都采取当前状态下最好或最优&#xff08;即最有利&#xff09;的选择&#xff0c;从而希望最终能够得到全局最好或最优的结果的算法。它通常用来解决一些最优化问题&#xff0c;如最小生…

❤ Vue3项目搭建系统篇(二)

❤ Vue3项目搭建系统篇&#xff08;二&#xff09; 1、安装和配置 Element Plus&#xff08;完整导入&#xff09; yarn add element-plus --savemain.ts中引入&#xff1a; // 引入组件 import ElementPlus from element-plus import element-plus/dist/index.css const ap…

剑指offer经典题目整理(二)

一、斐波那契数列&#xff08;fib&#xff09; 1.链接 斐波那契数列_牛客题霸_牛客网 (nowcoder.com) 2.描述 斐波那契数列就是数列中任意一项数字&#xff0c;都会等于前两项之和&#xff0c;满足f(n) f(n-1) f(n-2) 的一个数列&#xff0c;例如&#xff1a;1 1 2 3 5 8…

VMware虚拟机安装Ubuntu kylin22.04系统教程(附截图详细步骤)

一、版本信息 虚拟机产品&#xff1a;VMware Workstation 17 Pro 虚拟机版本&#xff1a;17.0.0 build-20800274 ISO映像文件&#xff1a;ubuntukylin-22.04-pro-amd64.iso 二、安装步骤 打开虚拟机&#xff0c;点击创建新的虚拟机&#xff1a; 选择自定义&#xff1a; 硬…