萱仔个人博客系列——hexo+github部署

devtools/2024/10/20 11:41:57/

        由于本人前段时间和同专业得到好offer的同学之间的交流,发现博客其实对于找工作来说可以作为个人项目个人经历的展示,我创办cdsn博客的原因主要是为了自己学习使用,但是逐渐到现在也有了一些可爱的粉丝,非常感谢大家对我的点赞收藏和关注,我将继续精进自己的学习,学习理论和技术,刷力扣题,争取获得更好的offer。

        csdn博客本身就是非常好的一个平台,但是我还是决定自己创建一个自己的博客,两边同时更新,在自己的博客那边可能会更加记录一下自己的学习过程,csdn这边尽量按照专栏进行更新,非常感谢各位大佬的支持和点赞!萱仔会加油的!

我的博客如下所示:

萱仔的学习小屋

---------------------------------------------------------------------------------------------------------------------

        我本人选择了简单的hexo+github部署,以下是创建的具体步骤,相当细节,但是由于当时我创建的时候忘记了截图,我会更加细致的介绍,然后会补充一些后面的图:

        Hexo 是一个快速、简洁且高效的静态博客框架,适合用来搭建个人博客。下面是一个完整详细的 Hexo 搭建过程,涵盖从环境搭建到发布的所有步骤。

1. 安装环境准备

1.1. 安装 Node.js

Hexo 依赖于 Node.js,首先需要确保电脑上已经安装了 Node.js。通过以下步骤安装:

  1. 下载 Node.js: 前往 Node.js 官网,选择适合操作系统的版本进行下载。推荐安装长期支持(LTS)版本。

  2. 验证安装: 安装完成后,打开命令行工具(Windows 用户打开 PowerShell 或命令提示符,macOS/Linux 用户打开终端),输入以下命令查看 Node.js 和 npm(Node.js 包管理器)的版本:

    node -v npm -v 
1.2. 安装 Git

Hexo 使用 Git 进行版本控制与博客的部署。需要安装 Git:

  1. 下载 Git: 前往 Git 官网 下载适合系统的版本。

  2. 验证安装: 安装完成后,在命令行中输入以下命令,查看 Git 是否成功安装:

    git --version 
1.3. 安装 Hexo

有了 Node.js 和 Git 后,就可以安装 Hexo 了。打开命令行工具,执行以下命令安装 Hexo:

npm install -g hexo-cli 

 

安装完成后,输入以下命令查看版本确认安装成功:

hexo -v  

 

2. 初始化 Hexo 博客

2.1. 创建博客目录

选择一个文件夹作为你的博客存放目录,然后在命令行中进入该目录:

mkdir myblog cd myblog 

 

2.2. 初始化 Hexo 项目

在该目录中初始化一个新的 Hexo 博客项目,执行以下命令:

hexo init npm install 

 

Hexo 会自动在该目录中生成必要的文件和文件夹结构。

2.3. 启动本地服务器查看效果

Hexo 提供了本地服务器,方便实时查看博客的效果。启动本地服务器:

hexo serve 
hexo s 也可以

 

然后在浏览器中访问 http://localhost:4000,你就能看到默认的 Hexo 博客页面了。

3. 配置 Hexo 博客

3.1. 修改 _config.yml 文件

Hexo的个人博客的配置信息都保存在那个项目根目录的 _config.yml 文件中。我这里是用了文本文件打开它,修改以下常见配置:

  • title: 博客标题
  • subtitle: 博客副标题
  • description: 博客描述
  • author: 博客作者名称
  • language: 博客语言,设置为 zh-CN 代表中文
  • url: 博客的网址(在发布时需要设置)
3.2. 安装主题

Hexo 默认主题是 landscape,但你可以选择更加个性化的主题。常见的主题包括 nextbutterflyfluid 等。

  1. 安装主题: 比如安装 next 主题,进入博客目录执行以下命令:

    git clone https://github.com/next-theme/hexo-theme-next themes/next 
  2. 修改配置: 打开 _config.yml 文件,将 theme 改为 next

    theme: next 
  3. 安装依赖: 主题可能有额外的依赖,进入 themes/next 目录后,运行:

    npm install 
3.3. 配置菜单、链接、社交媒体

主题通常会提供配置菜单、友情链接、社交媒体图标等功能。你可以在主题的 _config.yml 文件中找到相应的配置。

例如,Next 主题下的 _config.yml 可以找到 menusocial 相关配置,修改这些参数可以自定义菜单和社交媒体链接。

4. 编写博客文章

4.1. 创建新文章

Hexo 通过 Markdown 格式编写文章。你可以使用以下命令创建新文章:

hexo new post "文章一" 

 

文章会生成在 source/_posts 目录下,文件名为 我的第一篇文章.md

4.2. 编辑文章

使用你喜欢的文本编辑器打开该 Markdown 文件,进行编辑。文章的头部会有如下信息:


title: 我的第一篇文章 
date: 2024-09-02 10:00:00 
tags: --- 

 

可以根据需要修改标题、日期、添加标签等。

4.3. 生成静态页面

完成文章编辑后,你可以生成静态页面,执行以下命令:

hexo generate 
hexo g 也可以

 

4.4. 启动本地服务器查看效果

再次启动本地服务器查看新文章效果:

hexo serve 
(hexo s也可以)

 

5. 部署博客

5.1. 部署到 GitHub Pages

然后就是将博客部署到 GitHub Pages 上,需要先创建一个 GitHub 仓库,并将其命名为 自己的名字.github.io

然后修改 _config.yml 文件中的 deploy 部分,配置如下:

deploy: 
type: git 
repo: https://github.com/自己的名字/自己的名字.github.io.git branch: main 

 

安装 hexo-deployer-git 插件:

npm install hexo-deployer-git --save 

 

执行以下命令部署博客到 GitHub Pages:

hexo clean 
hexo generate 
hexo deploy 

 

5.2. 部署到其他平台

除了 GitHub Pages,你也可以将博客部署到其他平台,比如 Coding Pages 或者自建服务器。只需要根据平台的部署方式修改 _config.yml 配置即可。

6. 备份博客

建议你将博客的源代码和配置文件备份到 GitHub 或者其他版本控制工具中,防止数据丢失。你可以将整个项目目录提交到一个独立的仓库进行管理。

7. 常用 Hexo 命令总结

  • hexo init: 初始化一个 Hexo 项目
  • hexo new "文章标题": 创建新文章
  • hexo generate: 生成静态文件
  • hexo serve: 本地启动服务器
  • hexo clean: 清理缓存文件
  • hexo deploy: 部署到远程服务器
hexo init: 初始化一个 Hexo 项目
hexo new "文章标题": 创建新文章
hexo generate: 生成静态文件
hexo serve: 本地启动服务器
hexo clean: 清理缓存文件
hexo deploy: 部署到远程服务器最简单的就是
hexo g
hexo d这样就部署上去啦

通过以上步骤,我成功搭建一个 Hexo 博客,并通过 GitHub Pages 等平台发布你的博客内容。如果你有更多自定义需求,还可以进一步探索 Hexo 的插件和配置文件。


http://www.ppmy.cn/devtools/111315.html

相关文章

google vr 入门之制作简易的VR播放器(二)

另外对播放Activity的生命周期方法也做了对应的播放状态处理: Override protected void onPause() { super.onPause(); // Prevent the view from rendering continuously when in the background. mVideoView.pauseRendering(); // If the video is playing …

什么是数据库管理工程师?

数据库管理工程师,通常也被称为数据库管理员(DBA),是专门负责管理和保养数据库管理系统(DBMS)的专业人士。 他们的工作对于保障数据库的稳定运行和数据的安全性及完整性起着关键的作用。 想要成为一名合格…

mysql的zip解压缩版安装

文章目录 一、MySQL下载二、mysql解压缩版安装1、解压缩2、设置环境变量3、mysql初始化4、安装mysql服务5、启动mysql服务6、连接mysql7、修改初始密码8、安装完成 一、MySQL下载 下载网址:MySQL下载 本文以mysql8.4.2版本为例下载解压缩版。 二、mysql解压缩版安…

petalinux工程内核开启usb转串口模块

打开petalinux-config -c kernel Device Drivers —> USB support —> USB Serial converter support —> * USB Winchiphead CH341 Single Port Serial Driver 这样开启zynq7000的usb就可以挂载usb转串口的设备

mysql DBA常用的sql

是否一般查询日志,默认关闭 show variables like ‘general_log’; 是否开启慢日志查询 默认关闭 show global variables like ‘slow_query_log’; 开启慢日志查询 SET GLOBAL slow_query_log ‘ON’; 默认是10 单位s SELECT long_query_time; 设置超过1s就算…

借助大模型将文档转换为视频

利用传统手段将文档内容转换为视频,比如根据文档内容录制一个视频,不仅需要投入大量的时间和精力,而且往往需要具备专业的视频编辑技能。使用大模型技术可以更加有效且智能化地解决上述问题。本实践方案旨在依托大语言模型(Large …

C++虚拟继承解决数据冗余和二义性的原理

关于什么是继承、什么是菱形继承以及菱形虚拟继承的问题大家可以参考我的上一篇博文C入门11——详解C继承(菱形继承及菱形虚拟继承),此篇文章我们重点探究虚拟继承解决数据冗余和二义性的原理。 首先我们先来看正常的菱形继承: c…

Vue使用query传参Boolean类型,刷新之后转换为String问题

做项目时发现第一次进入页面时传参是正常的Boolean类型,刷新之后变成了String,这是浏览器进行的一次强制转换; vue-router 传参,不管是 params 形式还是query形式传参,在页面刷新后,params 和 query 对象中…