hexo部署github搭建个人博客 完整详细带图版(更新中)

news2024/11/26 8:35:45

文章目录

  • 0. 前置内容
  • 1. hexo创建个人博客
  • 2. GitHub创建仓库
  • 3. hexo部署到GitHub
  • 4. 常用命令
    • new
    • clean
    • generate
    • server
    • deploy
  • 5. 添加插件
    • 5.1 主题
    • 5.2 博客基本信息
    • 5.3 创建新的菜单
    • 5.4 添加搜索功能
    • 5.5 添加阅读时间字数提示
    • 5.6 打赏功能
    • 5.7 切换主题
    • 5.8 添加不蒜子统计
    • 5.9 添加百度统计
    • ... 待更新

0. 前置内容

  1. git 的下载: 官网下载较慢,这边推荐阿里镜像下载:

阿里镜像下载 git

往下滑选择接近当前日期的最新版本 2.39.2 windows

选择 2.39.2 -64 的exe下载,大概有 50Mb大小

下载好后,直接一直点下一步即可。如果你了解过git,则可以按照自己的习惯下载,这不重要。

  1. Nodejs下载

直接百度搜索 Nodejs,Nodejs下载

选择 18.14.2 的 LTS版本下载

1. hexo创建个人博客

hexo是什么?

  • 正如hexo的首页所显示的,它是一款非常快速,简介,高效的博客框架平台,我们可以利用hexo快速生成博客网站的模板,然后部署为我们自己的博客网站。

直接进入操作:

  1. 在任意盘符中新建 hexo 文件夹,这里我创建在了F盘

  1. 打开hexo文件夹,空白的地方右键,选择 Git Bash Here ,即我们使用 git 环境创建 hexo的blog模板(必须提前安装好 git),打开后如下图所示:/ f / hexo表示当前操作位置在 F盘的 hexo文件夹中

  1. 在 git窗口中依次输入以下命令
npm install hexo-cli -g
hexo init blog
cd blog
npm install
hexo server

全部输入完成后,hexo文件夹中便会生成一个 blog 子文件夹,并且blog文件夹里面包含有很多信息:

关于这些文件夹,做一个简单的介绍:

  • node_modules: 依赖包
  • public:存放生成的页面
  • scaffolds:生成文章的一些模板
  • source:用来存放你的文章
  • themes:主题

然后输入这两条命令:

hexo g 
hexo s 

完成后会显示如下内容,则说明配置成功!

在 git 中输入 Ctrl+C 即可关闭hexo s的内容。

打开浏览器,在浏览器输入 localhost:4000 即可进入你的初始默认博客

它长这样:

注意:这只是一个离线版本的博客 ,只能你自己看见,因此我们还需要 GitHub或者 gittee提供的 ssh功能将他变为对外开放的。

2. GitHub创建仓库

  1. 首先注册一个GitHub的仓库,然后在个人主页中选择 new 新建仓库

注意: 仓库名称的前半部分与你的用户名一致,即 lummod,后半部分 为 .git.io 固定格式(忽略红色警告,因为我已经创建过了!),可以选择一个readme为说明文件(随便),然后点击创建仓库

  1. 回到 git bash黑窗口中,输入以下两个命令(逐条):

yourname改为你的GitHub的用户名

git config --global user.name "yourname"

youremail改为你的注册GitHub时的邮箱

git config --global user.email "youremail"

一定不要输入错,这样github才能检查到这个用户属于你

  1. 创建 ssh,输入命令,然后一直回车

youremail改为你的注册GitHub时的邮箱

ssh-keygen -t rsa -C "youremail"

之后会提示你已完成 ssh的创建,在文件中找到这个路径

记住这两个文件

  1. 在 GitHub的 Setting里面,找到 SSH keys,把 id_rsa.pub 里面的内容全部复制到 key 进去,title随便写一个就行

操作完成后,就成功了。

3. hexo部署到GitHub

  1. 在 blog文件夹下面找到 _config.yml 文件,这是属于 你的博客的配置文件点进入一看就知道了,你可以在这里面直接修改 姓名,内容,等用户的信息。双击打开它(vscode或者其他文本编辑器,记事本都可以)

  1. 先找一下有没有以下这段内容(我也忘记了是我添加的还是自带的),如果自带则一定是空的,则修改为如下所示,如果没有,则直接复制下面内容到 文档的末尾:

user表示你的GitHub的用户名

# Deployment
## Docs: https://hexo.io/docs/one-command-deployment
# deploy:
#   type: ''
deploy:
  type: git
  repo: https://github.com/username/username.github.io.git
  branch: master
  # message: Site updated: {{ now('YYYY-MM-DD HH:mm:ss') }})

说明:类型是 git,远程 ssh连接是 你的 repo输入项,branch 输入gh-pages。

另外,找到 第16行(或者直接搜索 url)修改url 为

https://username.github.io

同样username是你的GitHub的用户名。

  1. 完成后,保存文件并且退出,在 git bash中输入以下命令:

表示安装 git部署命令工具

npm install hexo-deployer-git --save
  1. 最后输入以下三行命令:
hexo clean
hexo g
hexo d

其中 hexo clean清除了你之前生成的东西,也可以不加。
hexo generate 顾名思义,生成静态文章,可以用 hexo g缩写
hexo deploy 部署文章,可以用hexo d缩写

如果是在离线端即 localhost:4000端测试你的博客,则只需要 hexo g + hexo s 即可,无需 hexo d

  1. 输入完成后会出现一堆内容,不用管他**,只要最后内容如下所示,**就表示成功了!

然后你就可以在

username.github.io  # https://username.github.io

访问到你的博客了,其中username是你GitHub用户名,这个网站不是离线的,其他人都可以访问到!!!

4. 常用命令

new

在 根目录中,git bash黑窗口中输入

hexo new "博客名称"

然后打开 blog/source/_posts/ 文件夹后,你的 博客名称的md文档就创建好,直接打开编写即可,可以添加一些标签给这个文章,如 tags:编程技术

clean

$ hexo clean

清除缓存文件 (db.json) 和已生成的静态文件 (public)。

在某些情况(尤其是更换主题后),如果发现您对站点的更改无论如何也不生效,您可能需要运行该命令。

generate

$ hexo generate

生成静态文件。

选项描述
-d, --deploy文件生成后立即部署网站
-w, --watch监视文件变动
-b, --bail生成过程中如果发生任何未处理的异常则抛出异常
-f, --force强制重新生成文件 Hexo 引入了差分机制,如果 public 目录存在,那么 hexo g 只会重新生成改动的文件。 使用该参数的效果接近 hexo clean && hexo generate
-c, --concurrency最大同时生成文件的数量,默认无限制

该命令可以简写为

$ hexo g

server

$ hexo server

启动服务器。默认情况下,访问网址为: http://localhost:4000/

选项描述
-p, --port重设端口
-s, --static只使用静态文件
-l, --log启动日记记录,使用覆盖记录格式

该命令可以简写为:

$ hexo s

deploy

$ hexo deploy

部署网站,构建在GitHub的服务器中。

参数描述
-g, --generate部署之前预先生成静态文件

该命令可以简写为:

$ hexo d

命令配合使用,重新构建网站(release):

hexo clean
hexo g -d

访问离线的端口(debug):

hexo g
hexo s

5. 添加插件

5.1 主题

  1. hexo提供了非常多的主题模板,在hexo的网站里往下滑,点击探索主题即可。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-yc2srU2m-1677829487613)(null)]

  1. 选择某一个主题,然后可以点击 中间是预览的效果,点击蓝色的名字是 该主题的GitHub的下载地址

  1. 我的主题是 next,next是一款非常简洁舒服的主题,并且可支持的插件非常多,功能也很强大,可以直接搜索next,然后点击 GitHub的地址,进入下载
  2. 根据它的下载提示,直接在 git bash窗口中输入,即可下载next主题
git clone https://github.com/next-theme/hexo-theme-next themes/next
  1. 下载完成之后,在 blog文件夹(即根目录)下找到 themes文件夹,这个文件夹里面存放你下载的主题文件,可以看到next主题又再次包含一个文件夹,其中包含了next 主题的配置信息

  1. 修改blog的主题:首先返回blog根目录中,打开 _config.yml 文件(建议备份一份,直接复制即可),然后在 _config.yml 中找到 theme选项(如果你使用vscode,则直接 ctrl+h搜索即可,否则就自己往下滑),然后把 theme 上输入 next,表示使用的主题是next(使用其他主题也是如此)

  1. 之后就成功!输入 localhost:4000 或者 hexo g, hexo d,然后输入 username.github.io, 离线或者在线都可以看到设置的next的主题,具体效果自己查看吧!

5.2 博客基本信息

修改 博客的标题,副标题,描述,等等基本信息。。。

在 blog根目录下打开 _config.yml 配置文件,直接修改以下信息即可(看不懂英文的直接有道云翻译即可)

注意,语言要改成 zh-CN即中国,其他的自己随便改改

5.3 创建新的菜单

打开 themes 的 next 的 _config.yml ,我们此时打开的是主题的配置文件,不是根目录的。

找到第118行或者 搜索menu,即可看到:这里其实就是我们的博客菜单选项。在一开始我们只有home和 archives是开着的,如果你想添加一个 tags或者about菜单该如何操作呢?

  1. 首先在 blog的根目录中打开 git bash黑窗口,输入以下的命令:
hexo new page tags  # tags可以是其他的
  1. 然后在这个 _config 的menu中把 tags这一项取消注释,然后重新构建:
hexo g
hexo s
  1. 在localhost:4000中 看看效果:

添加完成之后,我们在 blog根目录中打开 source文件夹,即可看到我们的菜单文件夹, tags,打开后,它其实就是一个 md文档!你可以自己在md文档上编辑,然后重新构建看看效果!

同理我们可以自己创建 菜单,输入 hexo new page xxx,然后在 主题的config_yml 的menu中按照其他的格式添加即可 。

5.4 添加搜索功能

打开博客的搜索文章的 功能

下载搜索插件

git bash黑窗口中输入:

npm install hexo-generator-searchdb
  1. 主题 的 _config 配置文件中找到 local_search,下面的 enable输入true即可。

  1. 在根目录的 _config.yml 文件中 的末尾添加下面的内容:(选项的内容可以适当修改)
# hexo-generator-searchdb
search:
  path: search.xml
  field: post
  format: html
  limit: 10

重新构建后,即可看到效果:

5.5 添加阅读时间字数提示

效果如图:

  1. git 黑窗口中输入以下命令:
npm install hexo-symbols-count-time
  1. 在blog的根目录的 _config中 复制下面这段话到末尾
symbols_count_time:
  symbols: true
  time: true
  total_symbols: true
  total_time: true
  exclude_codeblock: false
  awl: 2	
  wpm: 275
  suffix: "mins."
  1. 主题的 config文件中找到,并且 输入 true即可,效果可以自行查看。

5.6 打赏功能

在 主题的 config中找到如下的 raward功能

  1. enable选择打开,comment输入文字
  2. 在缀主题的images文件夹中把你的付款码的图片放到 /blog /themes /next /source /images/ 中,它会按照这个路径寻找图片

可以发现 这个images文件夹里面的图片都是可以修改的,找到合适的地点,然后更改你的 图片即可换成你想要的图片了。

5.7 切换主题

在 主题的config文件夹中找到这个地方,直接注释或者取消注释即可

5.8 添加不蒜子统计

在主题的config文件中找到这个地方,直接enable输入true即可。它可以帮助我们统计网站的观看人数

5.9 添加百度统计

为hexo的next主题添加百度统计功能,

… 待更新

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

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

相关文章

小程序的拉流组件live-player的使用

前言: 我们在小程序中实现音视频-直播/录播 的播放时候,会使用到微信官方提供的两个组件,推流组件和拉流组件,这里来分享下他的拉流组件的使用和具体需要注意的点。 效果图: 1、拉流状态code日志 2、代码使用截图&am…

深度学习 Day26——利用Pytorch实现天气识别

深度学习 Day26——利用Pytorch实现天气识别 文章目录深度学习 Day26——利用Pytorch实现天气识别一、前言二、我的环境三、前期工作1、导入依赖项和设置GPU2、导入数据3、划分数据集四、构建CNN网络五、训练模型1、设置超参数2、编写训练函数3、编写测试函数4、正式训练六、结…

前端利用emailjs发送邮件

最近有一个需求,前端发送一个form表单到一个邮箱,找了一圈发现emailjs还不错就使用他了。首先emailjs官网注册一个账号注册完之后创建一个邮件服务(我这里使用的是谷歌邮箱)链接谷歌邮箱账户 然后创建服务接下来就要创建一个邮件的…

浅谈入门Servlet注解式开发

Servlet3.0版本之后,推出了Servlet基于注解式开发。 优点:开发效率高,直接在java类上使用注解进行标注,可直接省略WEB.xml文件配置import javax.servlet.annotation.WebServlet; WebServlet 使用WebServlet注解标注 WebServlet的…

五子棋的设计与实现

术:Java等摘要:五子棋是一种两人对弈的纯策略型棋类游戏,非常容易上手,老少皆宜。为了更好的推广五子棋,研究简单的人工智能方式,运用Java开发五子棋游戏。主要包含了人机对战,棋盘初始化&#…

中国跻身量子计算第一梯队,为何它是硬科技必争之地?丨两会唠科

科技云报道原创。 “两会唠科”是由腾讯科技推出的两会特别策划,重点讲述中国科技名片。本期与科技云报道联合出品,聚焦中国量子计算研究成果和相关进展。 全球越来越多的国家加入到量子科技领域的竞赛当中,争夺下一步的技术战略制高点。 今…

【论文随笔】Transfer of temporal logic formulas in reinforcement learning

Zhe Xu and Ufuk Topcu. 2019. Transfer of temporal logic formulas in reinforcement learning. In Proceedings of the 28th International Joint Conference on Artificial Intelligence (IJCAI’19). AAAI Press, 4010–4018. 这是一篇将inference和learning结合起来的文章…

Selenium如何隐藏浏览器页面?

Selenium隐藏浏览器页面 背景 在工作,学习中,我们常常会使用selenium来获取网页上的数据,编完完整程序之后,实现真正意义上的自动化获取,此时我们会发现在运行中往往会弹出浏览器页面,在调试过程中&…

Java程序的逻辑控制

一、顺序结构 顺序结构比较简单,如果我们按照代码书写的顺序一行一行执行,将会是这样的: System.out.println("aaa"); System.out.println("bbb"); System.out.println("ccc"); // 运行结果 aaa bbb ccc 如…

网络基础服务器 与SMP、NUMA、MPP 三大体系结构科普

OSI和TCP/IP是很基础但又非常重要的知识,很多知识点都是以它们为基础去串联的,作为底层,掌握得越透彻,理解上层时会越顺畅。今天这篇网络基础科普,就是根据OSI层级去逐一展开的。01计算机网络基础01 计算机网络的分类按…

JVM—类加载子系统

JVM细节版架构图 ​ 本文针对Class Loader SubSystem这一块展开讲解类加载子系统的工作流程 类加载子系统作用 1.类加载子系统负责从文件系统或者网络中加载class文件,class文件在文件开头有特定的文件标识即16进制CA FE BA BE; 2.加载后的Class类信息…

Flink SQL Checkpoint 学习总结

前言 学习总结Flink SQL Checkpoint的使用,主要目的是为了验证Flink SQL流式任务挂掉后,重启时还可以继续从上次的运行状态恢复。 验证方式 Flink SQL流式增量读取Hudi表然后sink MySQL表,任务启动后处于running状态,先查看sin…

IDEA 断点总是进入class文件没有进入源文件解决

前言 idea 断点总是进入class文件没有进入源文件解决 问题 在源文件里打了断点,断点模式启动时却进入了class文件里的断点,而没有进入到java源文件里的断点。 比如:我在 A.java 里打了断点,调试时却进入到了 jar 包里的 A.clas…

基于ensp的小型局域网网络搭建及需求分析

一 需求分析本实验的目的在于建立小型局域网。由于公司由财政部、人事部、科技部三个部门组成,分布在同一个交换机下。设计以下网络:三个个部门使用两台交换机连接,然后连接到汇聚交换机,再通过路由器与外网以及其他部门网络相连。…

java TCP Socket 数据传输,服务端与客户端

java TCP Socket 数据传输,服务端与客户端 1. socket通信基本原理 socket 通信是基于TCP/IP 网络层上的一种传送方式,我们通常把TCP和UDP称为传输层。 如上图,在七个层级关系中,我们讲的socket属于传输层,其中UDP是…

单位冲激函数与单位阶跃函数

目录 单位阶跃函数 单位冲激函数 狄拉克定义: 冲激函数的性质 对时间的积分等于单位阶跃函数 筛分性质 尺度特性 冲击偶的定义:单位冲击函数的导数 各阶导数 离散的阶跃信号与冲激信号 (1)阶跃信号,其定义为…

vi编辑器操作指令分享

vi编辑器是所有Unix及Linux系统下标准的编辑器,它的强大不逊色于任何最新的文本编辑器,这里只是简单地介绍一下它的用法和一小部分指令。由于对Unix及Linux系统的任何版本,vi编辑器是完全相同的,因此您可以在其他任何介绍vi的地方…

国内vs国外:外贸建站该如何选择?

外贸建站找国内还是国外? 答案是:国内。 随着互联网的发展,越来越多的企业开始意识到在网络上进行商业活动的重要性。 其中,建立一个专业的外贸网站是企业在国际市场上拓展业务的关键。 然而,对于选择国内还是国外…

电脑出问题了怎么重装系统修好

电脑在使用过程中经常会出现各种各样的问题,如系统崩溃、蓝屏、病毒感染等。这些问题如果不能及时得到解决,将会给用户带来很多麻烦和损失。小白一键重装系统是一个功能强大的工具,可以帮助用户快速解决电脑常见问题。下面我们就来详细介绍如…

Vulnhub靶场----8、DC-8

文章目录一、环境搭建二、渗透流程三、思路总结一、环境搭建 DC-8下载地址:https://download.vulnhub.com/dc/DC-8.zip kali:192.168.144.148 DC-8:192.168.144.156 二、渗透流程 1、信息收集nmap -T5 -A -p- -sV -sT 192.168.144.156思路&am…