Windows下,Hexo+GitHub搭建博客

2023-11-09

一、注册GitHub账号

二、创建GitHub仓库

创建git仓库时候,仓库的名称有格式要求,例如我的GitHub仓库用户名是thinkerwalker,那么我创建的仓库名称就是thinkerwalker.github.io,此处的警告是因为我已经有这个库了。

然后点击此页面下面的“Create repository”按钮即可创建。

三、下载node.js

下载node.js的网址https://nodejs.org/en/download/。Node.js主要用于安装hexo,npm开头的命令都依赖于Node.js
如果出现以下提示,则代表你的Node.js没有安装或者还未生效,如果已经安装了则重启电脑.
bash: nmp: command not found

四、安装git

Windows版本的git下载地址为https://git-for-windows.github.io/
一步一步默认安装好了

五、安装hexo

官方中文文档https://hexo.io/zh-cn/docs/index.html

让我们先了解了解 的命令解释
$ hexo g #完整命令为hexo generate,用于生成静态文件
$ hexo s#完整命令为hexo server,用于启动服务器,主要用来本地预览
$ hexo d #完整命令为hexo deploy,用于将本地文件发布到github上
$ hexo n #完整命令为hexo new,用于新建一篇文章

(1)鼠标右键任意地方,选择Git Bash,使用以下命令安装hexo

npm  install  hexo-cli -g
npm  install  hexo-deployer-git  --save

提示:如果后面出现“ERROR Deployer not found: git“这样的提示错误,则执行此步骤第二个命令
(2)创建放置博客文件的文件夹:hexo文件夹,我放置在E盘,E:\hexo,最好不要在中文路径下面,会出现莫名其妙的错误,我们都懂的。
注意:以后进行hexo操作都要进入到此文件夹中
(3)进入E:\hexo文件夹,鼠标右键选择“Git Bash”,执行以下命令,初始化hexo,这时候会在该文件夹中创建网站所需要的文件

hexo init

(4)安装依赖包

npm install

会在D:\Hexo目录中安装 node_modules
(5)生成静态文件

hexo g

(6)此时最基本的网站已经搭建好了,只不过是在本地放着,我们可以先预览一下
在git中执行

hexo s

这时候,会在本地开启一个http服务,监听4000端口,我们在浏览器访问http://127.0.0.1:4000

六、部署本地文件到github

本地文件要发布到github上面,则需要使本地git和互联网上的通信。怎么通信呢?
有两种方法,https和ssh公钥方式。使用https的话需要每次输入密码,不过配置起来简单。常用的是ssh公钥的方式。
先来在本地初始化一下git设置吧

本机git初始设置

1、设置姓名和邮箱地址

终端输入:任意目录中都可以

$ git config  --global  user.name  "your name"  
$ git config  --global  user.email  your_email@youremail.com

我用的是我的用户名和邮箱设置的,设置完成会在~/.gitconfig文件中生成如下配置

2、本地生成ssh key

ssh-keygen -t rsa -C 13253641509@qq.com

和在linux生成的ssh一样,也可以生成的秘钥时候设置私钥密码

3、把本机生成的公开的秘钥添加到github中

cat ~/.ssh/id_rsa.pub

将公钥复制下来

4、将公钥放在github上。

打开github登陆后,点击自己头像下箭头,找到settings(设置),在左边栏目里面选择SSH keys,然后点击Add SSH key,随便填一个Title,把上面把cat出来的内容全部添加到key文本框里,然后点击add key。


添加成功后,创建github时用到的邮箱会收到GitHub发的一个”A new public key was add to your account”的邮件。

5、使用私人密钥与GitHub进行认证和通信

ssh -T git@github.com

将hexo和github进行关联

1、编辑E:\hexo下的_config.yml文件,在_config.yml最下方,添加如下配置


$ cd e:/hexo
$ vi _config.yml

deploy:
  type: git
  repository: git@github.com:thinkerwalker/thinkerwalker.github.io.git
  branch: master

说明:
(1)hexo的配置文件中任何’:’后面都是带一个空格的。
(2)repository: 后面的地址其实在github上有生成。新建仓库时候,会有生成如下图

(3)这里发现还有HTTPS,其实HTTPS也可以和本地进行通信,只不过通信时候,每次要求输入GitHub账号密码。

2、将本地文件同步到GitHub

$ hexo g
$ hexo d

此时,我们的博客已经搭建起来,并发布到Github上了,这时可以登陆自己的Github查看代码是否已经推送到对应Repository,在浏览器访问http://thinkerwalker.github.io就能看到自己的博客了。第一次访问地址,可能访问不了,您可以在几分钟后进行访问,一般不超过10分钟。

七、发表一篇文章

1、在Git Bash执行命令:
$ hexo new “firstblog”
2、这时候会在E:\hexo\source_post文件夹中,生成一个firstblog.md文件,这时候,我们可以在里面编辑内容。

3、可以先在本地预览一下生成的博客
hexo g
hexo s
4、访问http://127.0.0.1:4000
5、同步到GitHub上
hexo d
6、访问自己的网址即可查看,https://thinkerwalker.github.io

注意:首页中,默认是把整篇文章显示出来,怎么在首页显示文章的缩略呢?
在想要显示缩略文章的内容中,缩略内容的后面添加如下命令
<!--more-->
这样这段代码前面部分,将以缩略形式显示到首页,后面的内容将不会显示。

八、绑定自己的域名.

1、在source文件中新建一个CNAME文件,然后里面添加自己的网站域名,如walker123.cn
可以在setting中查看是否发布成功,默认发布到http://walker123.cn上面了,可以在下面添加自定义主机名。

2、到自己的域名解析中添加CNAME值,主机记录www,解析到username.github.io.(注意最后面有点,我用的腾讯云,如果没有加点,保存时候自动加上了点),为了让只输入一个二级域名也可以访问到,加上自己的域名记录输入@或者walker123.cn.(cn后面有点),如下图

3、使用hexo g,hexo d进行部署
4、等十分钟左右,用自己域名访问下试试

九、主题安装

在 Hexo 中有两份主要的配置文件,其名称都是 _config.yml。 其中,一份位于站点根目录下,主要包含 Hexo 本身的配置,称为站点配置文件;另一份位于主题目录下,这份配置由主题作者提供,主要用于配置主题相关的选项,称为主题配置文件。

hexo3.0的默认配置主题是landscape

1、下载hexo主题

hexo的官方主题可以到这里https://hexo.io/themes/下载。

发现这里面的主题都还挺漂亮https://www.zhihu.com/question/24422335
http://www.jianshu.com/p/b6c694c2e58e

此处下载著名的NexT 版本,版本说明https://github.com/iissnan/hexo-theme-next/releases
下载地址是https://github.com/iissnan/hexo-theme-next/archive/v5.1.1.zip,这里是最新版本。

2、安装主题

1、只需要将主题文件拷贝至站点目录的 themes 目录下,这里是主题存放的文件夹。 然后修改下配置文件即可。下载完成后解压放入E:\hexo\themes文件夹中
2、修改站点配置文件
vi e:/hexo/_config.yml
搜索theme,将后面的修改为想要的theme,
此处设置为:theme: hexo-theme-next-5.1.1 注意分号后面有空格
3、hexo clean(切换主题之后、验证之前, 我们最好使用 hexo clean 来清除 Hexo 的缓存)
4、hexo s本机预览一下配置的主题,若要开启调试模式,则加上–debug
http://127.0.0.1:4000
看到类似下面的即证明安装成功,后面将要更改一些主题的设定,包括个性化以及集成第三方服务

5、将代码上传到GitHub
hexo d

十、基于next主题的配置

主题说明文档http://theme-next.iissnan.com/getting-started.html

选择 Scheme

Scheme 是 NexT 提供的一种特性,借助于 Scheme,NexT 为你提供多种不同的外观。同时,几乎所有的配置都可以 在 Scheme 之间共用。

Scheme 的切换通过更改 主题配置文件,搜索 scheme 关键字。 你会看到有三行 scheme 的配置,将你需用启用的 scheme 前面注释 # 去除即可,从这三个中选择一个去掉#注释
目前 NexT 支持三种 Scheme他们是:
(1)Muse - 默认 Scheme,这是 NexT 最初的版本,黑白主调,大量留白

(2)Mist

(3)Pisces - 双栏 Scheme

设置语言

编辑 站点配置文件, 将 language 设置成你所需要的语言。建议明确设置你所需要的语言,例如选用简体中文,配置如下:
vi e:/hexo/_config.yml
language: zh-Hans
修改了配置文件后,重新执行一次hexo s重读一下配置文件

设置头像

编辑 主题配置文件, 修改字段 avatar, 值设置成头像的链接地址。其中,头像的链接地址可以是:
(1)互联网上的地址http://example.com/touxiang.png
(2)站点内的地址,放置在 source/images/ 目录下 ,如果没有此目录则创建即可,配置为:
avatar: /images/touxiang.png
(3)将图片复制到/images/目录中,我这里是E:\hexo\source\images目录,public目录中的文件则为hexo要上传到GitHub仓库上的文件

设置 作者昵称

编辑 站点配置 文件, 设置 author 为你的昵称。
站点描述
编辑 站点配置文件, 设置 description 字段为你的站点描述。
站点描述可以是你喜欢的一句签名:)

站点分类

比如此处要在菜单上添加一个linux分组。

1、主题配置文件中添加菜单

搜索menu,在其下面添加Linux项,并指定目录,我写的是
Linux: /categories/Linux
如下图:

2、编辑language文件

主题文件中每一个menu项,都需要使用翻译文件将它翻译一下才能正常显示,否则将显示为如下图所示:

找到主题中的languages目录下的zh-Hans.yml,这里和前面设置的语言有关,我们前面设置的是zh-Hans,因此这里需要修改此文件,格式是“menu项: 翻译内容”
如下所示,

vim e:/hexo/themes/hexo-theme-next-5.1.1/languages/zh-Hans.yml

3、博客文件设置

在每篇博客的头部说明的地方
添加如下设置
categories: Linux

我们将看到如下效果:

提醒:hexo目录中的scaffolds目录中的文件是模板文件,_post文件内容就是每次hexo new “filename”生成的文件的头部

4、添加分类小图标


如上图,在菜单图标开启的情况下,如果菜单项与菜单未匹配(没有设置或者无效的 Font Awesome 图标名字) 的情况下,NexT 将会使用 ?作为图标。

设定菜单项的图标,对应的字段是 menu_icons。 此设定格式是 item name: icon name,其中 item name 与上一步所配置的菜单名字对应,icon name 是 Font Awesome 图标的 名字。而 enable 可用于控制是否显示图标,你可以设置成 false 来去掉图标。
(1)找到图标
http://www.fontawesome.com.cn/faicons/中找到图标的名字,找到linux图标的名字是“linux”
(2)编辑主题配置文件
找到munu_icons: 在下面添加item: value
如下图:


(3)重新生成文件

hexo clean
hexo g
hexo s预览
hexo d上传到GitHub

站点标签


怎么显示这些标签呢?
在每篇博客的开头出加入
(1)tags: Linux
或者:
(2)tags :
- 标签1
- 标签2
每一行一个标签,也就是说每篇博客可以有多个标签
如图:

网页title处添加小图标

1、准备小图标.ico文件

可以在线转换图像文件,为ico文件,百度在线ico文件转换。
我使用的在线转换网址是https://www.ico.la/,很方便,选择图片后,选择一下生成的ico文件尺寸,将直接下载到本地。我选择的尺寸是32x32.

2、编辑主题配置文件

favicon: 指定图标
通常所有的网站的title图标,名字都叫做favicon.ico
这里的默认主题配置文件中如下:
favicon: /favicon.ico

3、复制文件到指定目录

此处的favicon.ico文件是放在/下面,因此需要将ico文件放入到source目录,这里是E:\hexo\source中.如果将ico文件放上去,刷新没有出来,很可能是浏览器有缓存的原因,换一个浏览器即可


主题说明文档http://theme-next.iissnan.com/getting-started.html
其他更多主题配置请看next说明文档,比如添加评论,浏览量等功能。^_^

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Windows下,Hexo+GitHub搭建博客 的相关文章

随机推荐

  • 时间趋势可视化-柱形图

    第1关 大胃王 比赛数据柱形图绘制 绘制柱形图的基本步骤 本关任务 根据实训提供的 大胃王 比赛数据绘制柱形图 熟悉柱形图绘制的基本步骤 coding utf 8 import pandas as pd from matplotlib im
  • 利用CIBERSORT免疫细胞类群分析详细教程

    利用CIBERSORT免疫细胞类群分析详细教程 现在最火的组学技术是什么 无疑便是单细胞测序了 通过单细胞测序 科研人员可以获得比原来更为精细的细胞图谱 但是单细胞测序诸多限制条件 也是不能让大家很好地利用这项技术解决自己的科学问题 除了较
  • 【Qt】通过QtCreator源码学习Qt(十二):Q_D和Q_Q指针(简称“d指针”)详解

    1 Q D和Q Q指针 简称 d指针 简介 参考博客 https www devbean net 2016 11 qt creator source study 07 https blog csdn net rabinsong articl
  • SpringBoot项目中统计所有Controller中的方法

    对接口方法进行抽象 Data public class ControllerMethodItem public String controllerName public String methodName public String req
  • vscode中preLaunchTask“g++”已终止,退出代码为1的解决方案

    问题背景 楼主原来做的项目 电脑中装了MinGW64 还有MinGW的32位版在用vscode时发现出现了 preLaunchTask g 已终止 退出代码为1的问题 找了好久 解决了问题 launch json 注释的位置 这里修改GDB
  • Vue中实现放大镜效果

    先来看一下我们需要实现的效果是怎样的 这里我们没有使用原生的 js 方法去实现 而是使用的 Vue3 官方推荐的一个工具库 vueuse cor 中的 useMouseInElement 方法来实现放大镜的效果 首先来看一下 useMous
  • 如何安装和配置树莓派

    如何安装和配置树莓派 如果你有一块树莓派的板子 还有一个没安装系统的SD卡 怎么能把系统装上 配置好跑起来 这篇文章主要就讲这个事 这是一块Raspberry Pi Zero W板 以及一个空SD卡 当然 我们需要一个SD卡读卡器 还需要一
  • Flink Native Kubernetes (一)

    目录 文章目录 目录 概述 Linux 集群描述 版本 部署K8S环境 配置Yum 安装docker 安装Rancher 安装K8s 工作集群 添加KubeCtl命令上下文 运行FlinkDemo FlinkSession关于K8s的基础环
  • 三:Sensor SLPI层代码分析---

    三 Sensor SLPI层代码分析 在学习SLPI侧代码前我们先了解下SEE的registry config registry 放在 persist sensors registry registry中 它是通过config生成的 是给S
  • 循环遍历本地的图片使用BASE64编码,并在ajax也遍历图片

    前端调用ajax到后端去图片的方法 并返回 public void search HttpServletRequest request HttpServletResponse response throws Exception String
  • 【毕业设计】基于stm32的智能扫地机器人设计与实现 - 单片机 物联网

    文章目录 0 简介 1 课题背景 2 硬件系统总体框架 2 1 电机驱动 2 2 红外线传感器 2 3 超声波传感器 2 4 MPU6050 2 5 ATK ESP8266 WI FI 模块 2 6 电源管理模块 3 软件系统设计 3 1
  • 前端知识点

    写在前面 CSDN话题挑战赛第1期 活动详情地址 CSDN 参赛话题 前端面试宝典 话题描述 欢迎各位加入话题创作得小伙伴 如果我没有猜错得话 我觉得你是应该同我一样是一位前端人 如今前端在IT事业中的占比越来越重 已经成为不可缺少的部分
  • 2019年DNS服务器速度排行榜

    第一名 DNSPod 不得不说腾讯自从收购了DNSPod后 无论是服务还是速度都有显著的提升 无论是访问速度还是解析速度都在国内是处于龙头大哥的地位 昔日的老大114的地位已经不保 作为腾讯旗下的公司 在游戏解析这一块来说 技术自然是领先于
  • 排序算法详解(堆,归并,快速排序最简及理解写法)

    十大排序算法和复杂度 常见排序的详解 只讲解真实场景中常用的 简单的就不分析了大家稍微看一下就行 快速排序 快排的思想主要就是每次把一个位置放好后 可以把数组分成两半 递归处理子问题即可 空间复杂度OlogN 分析 每次都分成两半处理子问题
  • IDEA报错程序包xxx不存在,但Depandencies依赖里明明有

    IDEA报错程序包xxx不存在 但依赖里明明有 看一下这个项目的pom xml 我这边引用的是公共依赖 应该是运行的时候依赖没有引用过来 搞了半天 网上搜了很多没搜到 后来我把 settings gt Runner 设置调了一下 就没有问题
  • CUDA之Warp Shuffle详解

    之前我们有介绍shared Memory对于提高性能的好处 在CC3 0以上 支持了shuffle指令 允许thread直接读其他thread的寄存器值 只要两个thread在 同一个warp中 这种比通过shared Memory进行th
  • Zabbix 学习(六) 自动发现功能与主动监控的实现

    一 自动发现 当被监控的设备非常多的时候 手工添加将会变得非常不方便 可以使用自动发现功能 实现添加主机 添加到主机组 链接模板 自动发现流程 创建自动发现规则 创建动作 当主机被发现之后 执行什么操作 通过动作 添加主机 将模板应用到发现
  • qt 实现翻金币游戏

    游戏玩法介绍 游戏设置关卡二十关 通过选关界面可以选择进入到对应的关卡中 进入对应关卡之后 点击任意金币 可以使该硬币以及周边 上 下 左 右 金边翻转 如果硬币都翻转为金币 则游戏胜利 游戏界面设置 开始界面 开始场景中需要自定义一个按钮
  • MyBatis实现简单的增删查改操作(XML配置)

    最近在跟着B站传智的课程学习SSM 先学的是MyBatis 写一篇博客记录一下如何利用MyBatis实现简单的增删查改 主要是记录一下实现过程 实现思路 注意事项 避坑 本教程使用XML配置进行实现 一 软件环境 Java IDEA mys
  • Windows下,Hexo+GitHub搭建博客

    一 注册GitHub账号 二 创建GitHub仓库 创建git仓库时候 仓库的名称有格式要求 例如我的GitHub仓库用户名是thinkerwalker 那么我创建的仓库名称就是thinkerwalker github io 此处的警告是因