IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> 开发工具 -> Hexo + github搭建个人博客(2022年7月) -> 正文阅读

[开发工具]Hexo + github搭建个人博客(2022年7月)

本文方案适用时间节点:2022年7月16日。

容易踩坑的地方是「部署博客到 github」。

安装相关环境

1. 安装 Node.js

由于 Hexo 需要 Node.js 支持,因此我们进入官网下载 Node.js ,选择 LTS (长期支持版)。

我这是 MacOS 系统,Windows 系统也类似。

image-20220716090853055

进行对应的下载安装即可,下载完成会有 Node.js 以及包管理工具 npm。

可进入命令行终端查看 Node.js 和 npm 版本:

image-20220716091416454

2. 接下来我们借助 cnpm 来安装 Hexo 框架。

由于国内 npm 下载包的速度较慢,我们先安装淘宝的 cnpm 包管理器,借助它来下载 Hexo 框架。

# 安装淘宝的 cnpm 管理器
npm install -g cnpm --registry=http://registry.npm.taobao.org	
# 查看 cnpm 版本
cnpm -v

终端演示图:

image-20220716092559970

安装 Hexo 框架

# 安装 Hexo 框架
cnpm install -g hexo-cli
# 查看 Hexo 版本
hexo -v

终端演示图:

image-20220716092627934

创建 Hexo 本地目录

mkdir blog # 创建 blog 目录
cd blog # 进入 blog 目录
sudo su # 使用 root 权限(之后 hexo g 等操作都需要 root 权限)
sudo hexo init # 初始化 blog 目录(类似在本地创建 git 管理的仓库时的初始化)
hexo s # 启动本地博客服务

终端演示图:

image-20220716093817292

浏览器查看博客页面(默认的主题就这样啦,有点丑的):

image-20220716094114792

目前为止,我们实现了「在本地访问自己搭建的博客」,下面实现「在任何设备上访问博客」。

将 blog 目录部署到 github

1.生成 Personal access tokens(推荐使用这种方式)

进入 Developer settings

image-20220716104806862

生成 token,自己设置「过期时间」和「访问权限」,我是设置成了「永不过期」并开启了所有「访问权限」:

image-20220716104912106

先把 token 复制一份留着(等下要用),下次你再进到这个页面 token 内容就被隐藏了。

2. 在 github 创建一个新的仓库,仓库名为 <你的账户名>.github.io(一定要是这种命名方式)。

image-20220716094850573
image-20220716094957760

3. 在 blog 目录下安装 git 部署插件

cnpm install --save hexo-deployer-git 
iShot_2022-07-16_10.10.53

4. 配置 _config.yml(在 blog 目录下)

vim _config.yml

划到最后,修改成下面这个样子:

记得冒号后面空一格!

# Deployment
## Docs: https://hexo.io/docs/one-command-deployment
deploy:
  type: git 
  repository: https://<刚才生成的TOKEN>@github.com/<USERNAME>/<REPO>.git # < > 中的内容自己进行替换,< > 记得去掉。
  branch: main # 用 main 还是 master 随你,都行。

这么写 repository 的好处在于可以实现免密登陆。

5. 部署 blog 到 github(终于来啦!)

hexo c # 清理一下缓存,防止一些修改未生效
hexo g # 生成页面的命令
hexo d # 部署到 github 远程仓库
image-20220716110834206

6. 登陆看看

在浏览器地址栏输入 <你的仓库名>.github.io。

image-20220716111127000

这样一来,我们就可以在其他设备上访问自己的博客啦!

排坑

用户密码错误

以往的很多教程在配置 _config.yml 文件时,repository 是单纯用的 https 地址,目前确实也还能用,不过每次都需要手动输一遍账户密码,很是烦人。

这种方式在你 hexo d部署博客到 github 时,需要你输入账号和密码,但「这里的密码不是你的登陆密码」,而是上文提到的「Personal access tokens」。

举个例子:

image-20220716112934940

hexo c & hexo g之后进行部署:

image-20220716113240468

看日志可知:由于 github 在 2021 年 8 月 13日将原有的用户密码验证方式替换成了「personal access token」,因此我们这里需要将用户密码替换成「personal access token」。

部署失败的其他原因

1.user.name 和 user.email 没配置好。

解决方式:

# 全局配置命令
git config --global user.name <用户名>
git config --global user.email <邮箱>

2. github 网络连接的问题,导致部署时超时。

解决方式:

  • 多试几次(简单粗暴);
  • 想办法提高 github 访问速度:百度一下。

参考

  开发工具 最新文章
Postman接口测试之Mock快速入门
ASCII码空格替换查表_最全ASCII码对照表0-2
如何使用 ssh 建立 socks 代理
Typora配合PicGo阿里云图床配置
SoapUI、Jmeter、Postman三种接口测试工具的
github用相对路径显示图片_GitHub 中 readm
Windows编译g2o及其g2o viewer
解决jupyter notebook无法连接/ jupyter连接
Git恢复到之前版本
VScode常用快捷键
上一篇文章      下一篇文章      查看所有文章
加:2022-07-20 19:07:01  更:2022-07-20 19:07:50 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年12日历 -2024/12/28 19:50:25-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码
数据统计