Github+Hexo快速搭建个人博客

最新推荐文章于 2024-09-29 19:23:06 发布
最新推荐文章于 2024-09-29 19:23:06 发布
阅读量952 收藏 2
点赞数 1
文章标签： github git hexo
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46322986/article/details/122518063
版权

文章目录

Hexo是一个快速、简洁且高效的博客框架，默认使用MarkDown解析文章，用选定的主题渲染出静态页面。使用JavaScript进行逻辑控制，没有后端，直接通过Url访问页面即可。通过github仓库来存储Hexo需要的文件(包括资源文件和Html页面)，即可搭建公网博客。

准备工作

安装Hexo很简单，不过要先装上Node.js和Git

  • Node.js
  • Git
  • Hexo

安装Node.js

Hexo基于JavaScript，因此首先要安装Node.js，版本不能低于10.13。Hexo建议使用最新版本，Node.js建议使用v12.22版本，版本过高会导致一些插件无法适配。

Hexo 版本最低兼容 Node.js 版本
6.0+12.13.0
5.0+10.13.0
4.1 - 4.28.10
4.08.6

​ 安装好后，将Node换成国内源，非必须，不过npm下载会很慢。这里使用淘宝的镜像源：

  • 临时换源
npm --registry https://registry.npm.taobao.org install express
  • 永久换源
npm config set registry https://registry.npm.taobao.org
  • 查看源
npm config get registry

安装Git

  • Windows：下载并安装 git.
  • Mac：使用 Homebrew, MacPorts 或者下载 安装程序。
  • Linux (Ubuntu, Debian)：sudo apt-get install git-core
  • Linux (Fedora, Red Hat, CentOS)：sudo yum install git-core

Mac用户

如果在编译时可能会遇到问题，请先到 App Store 安装 Xcode，安装完成后，启动并进入 Preferences -> Download -> Command Line Tools -> Install 安装命令行工具。

Windows用户

对于中国大陆地区用户，可以前往 淘宝 Git for Windows 镜像 下载 git 安装包。

安装Hexo

安装完Node.js和Git之后，即可安装Hexo，建议全局安装

npm install -g hexo-cli

查看Hexo版本

hexo -v

本地操作

在部署前，需要在本地对Hexo进行一些操作，包括目录的初始化、静态页面的生成和预览等。

Hexo初始化

hexo init Blog

输入上述命令，会在当前目录下生成一个Blog目录(名字可以自己取)。目录中结构大致为：

.
├── _config.yml
├── package.json
├── scaffolds
├── source
|   ├── _drafts
|   └── _posts
└── themes

其中，_config.yml为博客的根配置文件，配置信息参照：https://hexo.io/zh-cn/docs/configuration source目录下存放博客的md文件以及博客需要的资源文件。theme目录下存放下载的资源文件，可在根_config.yml中指定选用的主题。

进入该文件夹，安装必备的node组件

npm install

会有WARN，不过没有影响。

静态网页生成与预览

hexo generate

上述命令将根据Blog文件夹中的资源和配置生成静态网页，命令可可简写为hexo g

INFO  Start processing
INFO  Files loaded in 356 ms
INFO  Generated: index.html
INFO  Generated: archives/index.html
INFO  Generated: fancybox/fancybox_loading@2x.gif
INFO  Generated: fancybox/jquery.fancybox.css
INFO  Generated: fancybox/fancybox_loading.gif
INFO  Generated: fancybox/blank.gif
INFO  Generated: fancybox/helpers/fancybox_buttons.png
INFO  Generated: js/script.js
INFO  Generated: fancybox/fancybox_overlay.png
INFO  Generated: fancybox/fancybox_sprite.png
INFO  Generated: fancybox/fancybox_sprite@2x.png
INFO  Generated: archives/2019/06/index.html
INFO  Generated: fancybox/helpers/jquery.fancybox-buttons.js
INFO  Generated: fancybox/jquery.fancybox.pack.js
INFO  Generated: fancybox/helpers/jquery.fancybox-buttons.css
INFO  Generated: fancybox/helpers/jquery.fancybox-thumbs.css
INFO  Generated: css/style.css
INFO  Generated: fancybox/helpers/jquery.fancybox-thumbs.js
INFO  Generated: archives/2019/index.html
INFO  Generated: fancybox/helpers/jquery.fancybox-media.js
INFO  Generated: css/fonts/fontawesome-webfont.eot
INFO  Generated: css/fonts/fontawesome-webfont.woff
INFO  Generated: css/fonts/fontawesome-webfont.svg
INFO  Generated: css/fonts/FontAwesome.otf
INFO  Generated: css/fonts/fontawesome-webfont.ttf
INFO  Generated: 2019/06/08/hello-world/index.html
INFO  Generated: fancybox/jquery.fancybox.js
INFO  Generated: css/images/banner.jpg
INFO  28 files generated in 715 ms

由于现在还没有进行Git部署，所以只能在本地预览：

hexo server

也可以简写为hexo s，该命令将开启本地服务。

INFO  Validating config
INFO  Start processing
INFO  Hexo is running at http://localhost:4000/ . Press Ctrl+C to stop.

Hexo默认4000端口，因此打开 http://localhost:4000 就可以看到博客啦。

Github部署

我们需要一个远程仓库来存储Hexo需要的文件并托管博客，Github就很适合。

创建仓库

点击New repository创建一个新的仓库，给仓库取名

  • Rep name一定要严格按照 Account Name.github.io的形式来命名，只有这样的仓库名称才能在公网上以静态页面的形式展示。
  • 访问权限设为Public

生成SSH Keys

SSH Key(Secure Shell)是一个公私钥对，这里用于Git仓库和本地机器的绑定。使用SSH Key，就可以不用每次更新都需要输入令牌，方便很多。

  • 一个 SSH key 可以访问你的所有仓库，即使你有 1000000 个仓库，都没问题
  • 如果换了电脑，就在新电脑上重新生成一个 SSH key，把这个 key 也上传到 GitHub，它可以和之前的 key 共存在 GitHub 上
  • 如果你把 key 从电脑上删除了，重新生成一个 key 即可，替换之前的 key

SSH Key是针对机器而非特定目录的，所以在任意一个目录下打开Git Bash，输入ssh检查机器是否装有SSH。

usage: ssh [-46AaCfGgKkMNnqsTtVvXxYy] [-B bind_interface]
           [-b bind_address] [-c cipher_spec] [-D [bind_address:]port]
           [-E log_file] [-e escape_char] [-F configfile] [-I pkcs11]
           [-i identity_file] [-J [user@]host[:port]] [-L address]
           [-l login_name] [-m mac_spec] [-O ctl_cmd] [-o option] [-p port]
           [-Q query_option] [-R address] [-S ctl_path] [-W host:port]
           [-w local_tun[:remote_tun]] destination [command]

接着，在本地生成SHH公私钥对，输入命令

ssh-keygen -t rsa -C "github的注册邮箱"

键入四个回车就行，用默认选项。完成后，该命令会在用户文件夹下生成一个.ssh目录，路径为：C:\Users\用户名\.ssh。目录下有两个文件，分别为：

  • id_rsa：SSH私钥
  • id_rsa.pub：SSH公钥

生成完毕后，将SSH公钥注册进Github中。在Settings->SSH and GPG keys->New SSh key中新建一个SSH公钥：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ce2r8eF1-1642260793942)(Hexo-github部署/fa156de2f4d32046.png)]

Titile可以随便取，但是Key一定要要原封不动的复制id_rsa.pub中的内容，空格和换行都不能动。注册成功后，SSH Keys中就可以看到该公钥：

最后，验证本地与仓库是否绑定成功，输入命令：

ssh -T git@github.com

会得到下面这句话：

Hi sakura-ysy! You've successfully authenticated, but GitHub does not provide shell access.

but后面的这里不用关注。

本地推送

在根_config.yml中进行部署配置，将deploy中的内容全部改为：

deploy:
  type: git
  repository: https://github.com/sakura-ysy/sakura-ysy.github.io.git
  branch: main

type是固定的，rep指仓库地址，branch可以自己选要用哪个分支部署。注意，github的主分支由原来的master变为了main。

然后，在博客根目录下打开Git Bash，安装Git部署工具:

npm install hexo-deployer-git --save

完后就可以在本地生成页面并推送。

在生成新的页面之前，先用 hexo clean 清除缓存文件与之前生成的静态文件目录public。清除完毕后，使用hexo g生成静态页面。

最后，即可开始推送并部署，使用命令hexo d ，全称为：

hexo deploy

在第一次推送时，要进行身份验证从2021.08.13开始， GitHub不再支持账号和密码的方式进行身份验证了，取而代之的是官方推出的Personal access tokens。

在Github中的 Seqttings->Developer settings->Personal access tokens->Personal access tokens 生成一个新的令牌：

权限可以全部选上，没关系。完成后，即生成了一串序列号，它就是我们用于代替密码的令牌：

在第一次hexo d需要验证身份时，输入上述令牌即可。

上面工作全部完成后，即可通过公网访问博客，网址就是仓库名：http://sakura-ysy.github.io

图片插入

MarkDown中存储的是图片本地文件路径，要想在公网展示，必须将图片存储在云端并在md中使用该路径，有两个较好用的方法：

  • 图片存在Git仓库
  • 使用图床

图片存在Git仓库

首先安装插件hexo-renderer-marked：

npm install hexo-renderer-marked

安装完成后，在根_config.yml中新增如下配置 :

post_asset_folder: true
marked:
  prependRoot: true
  postAsset: true

这样以来，当我们使用 hexo new post '文章名' 时，在source/_post目录下除了生成对应的md文件，还会生成一个同名的目录。将所有图片存在该目录下，并使用相对路径引用该目录中的图片即可。

但是，上述插件只会生成一个空目录，并不会自动将图片放进去，所有操作需要手动执行，非常麻烦，那怎么让它自动执行？这里就要用到强大的Typora了

打开Typora的偏好设置，使图片在插入时会复制到指定路径，由于目标目录名和文章名相同，因此复制到./${filename}处即可。

image.png

使用该配置后，插入到Typora中的图片，会直接复制该到文章资源文件夹，同时在md中自动更改路径。如复制网络路径的图片https://...../image.jpg粘贴到Typora中叫文章名的文章后，图片会自动变为![](文章名/image.jpg)。

但是在部署后的路径和本地路径是不一样的，它会直接在文章的资源文件夹中找，因此路径中的文章名/ 需要删掉，即更改为[]image.jpg)，这样虽然在本地md中路径错误，但是部署后即正确。

为了方便，可以在Typora编写完博客后，使用Ctrl+F全局搜索文章名/，然后将其替换成空串即可。

使用图床

将图片存在Git上有两个缺点，一是本地寻址不出来，二是图片加载很慢，为了解决这两个问题，可以使用图床来存储图片。

所谓图床，就是公网上的存储空间，将本地文件上传上去后会返回该图片在网络上的URL，使用该URL作为图片路径即可。

如果有已备案域名的话，推荐使用七牛云，因为它是国内服务商，速度快且稳定，不用担心被封，用户也有免费的10G空间可用。

如果没有的话，直接使用现成的公共图床也可，不同的图床速度和空间都不一样，根据需求选用，可以参考：https://zhuanlan.zhihu.com/p/58863378

比如使用sm.ms图床，上传后返回图片的网络地址和不同的引用格式，在md文件中引用就行。

image.png

建议使用具有CDN加速的图床，这样会很快。

不过公共图床毕竟是公共的，免不了被封的风险，且自己也没法管理上传的内容。所以如果想折腾的话，建议用自己的服务器搭图床。

绑定域名

.github.io这个域名后缀着实不好看，并且前面必须用git账户名，所以给它绑个域名最好。首先得租一个域名，可以直接去阿里万网那租。租完后，就需要将新域名和原域名进行绑定，这个操作在服务商端和Git端都要进行，可以理解为一种双向同意。

服务商端

以阿里万网为例，点击解析进入解析设置。

MAIJUE8AS_SJ2G1A_M90MZC.png

将记录类型设为CNAME，意为用该域名指向另一个域名。记录值填原域名，即sakura-ysy.github.io。其他值默认就行。

image.png

当然，记录类型也可以选择A，即直接让域名执行Git的IPv4，可以通过ping sakura-ysy.github.io 来获得该IP。

至于主机记录，其实就是域名前缀，常见用法有：

  • **www：**解析后的域名为www.aliyun.com。

  • **@：**直接解析主域名 aliyun.com。

  • ***：**泛解析，匹配其他所有域名 *.aliyun.com。

  • **mail：**将域名解析为mail.aliyun.com，通常用于解析邮箱服务器。

  • **二级域名：**如：abc.aliyun.com，填写abc。

  • **手机网站：**如：m.aliyun.com，填写m。

  • **显性URL：**不支持泛解析（泛解析：将所有子域名解析到同一地址）

Git端

只需要在Git仓库中添加一个无后缀文件CNAME，内容只有一行，为绑定的域名，即yesiyuan.cn。当然，也可以直接在Settings->Pages中的Custom domain中绑定该域名。

image.png

两端都完成配置后，就可使用新域名来访问博客啦。

使用HTTPS

这个我还没弄

未完待续…

_CLAY_
关注
hexo +GitHub个人搭建的博客
08-04
下面将详细阐述Hexo和GitHub搭建个人博客的过程及关键知识点。 1. **Hexo基本概念** - **站点结构**：Hexo站点通常包含`source`、`themes`、`public`、`config.yml`等目录，每个都有特定功能，如`source`存放内容...
Hexo-零基础搭建个人博客(详解)
热门推荐
清峰的博客
12-13 4万+
简单来说就是一个不用你写代码，就能搭建一套属于你自己的个人博客网站 应用（零基础小白也会）。
超详细Hexo博客搭建教程
qq_46922488的博客
08-03 7918
Hexo建站指南 博客是一个展示自己技能和能力的平台，有很多人想要建立自己的博客，折腾来折腾去的，最后却只能在博客园或简书上发表文章。 有很多人选择把博客建在Github上，这是一个开源代码托管网站，我也把我的博客建在了GitHub上。当初我还为了用哪个博客框架而烦恼呢，因为有很多有名的开源博客框架，比如Hexo、WordPress、VuePress、Halo 等，wordpress是动态博客框架所以不能建在GitHub上，相比较剩下三种，我选择了Hexo。 Hexo是基于NodeJs的静态博客框架，简单
利用github搭建个人博客（超级简单，一看包会）
最新发布
前端大波的博客
09-29 1186
利用github Pages搭建个人博客
如何使用Github搭建个人博客
bmseven的博客
06-14 4119
在本文中，我将介绍如何使用GitHub搭建个人博客~
hexo搭建博客（超级详细版）
thesat的博客
01-23 2561
hexo博客搭建日志 博客概述前置准备条件 node js下载安装 git下载安装 hexo安装 github仓库 关联 ssh密钥（不一定知道这个是什么，跟着操作就行） 本地博客生成内容 hexo博客搭建日志 博客概述 什么是博客（下面是百度百科的答案） 我个人理解博客就是记录生活与学习的一个平台 任何人都可以拥有一个博客，无论你是什么专业什么职业，只要你有记录生活和学习的要求，或者网络上属于自己宁静的一块地方 前置准备条件 node js下载安装 gi
在Github搭建个人博客-详细步骤整理
Interest drives progress
06-16 3361
去年就有在 Github 搭建博客的想法，但是因为工作太忙搁置了，昨天想起来这事儿，于是网上各种查阅资料，感觉虽然搭建方式比较多，但都不是很全，走了很多弯路，折腾了我一天，才终于搭建好了自己的 GIthub 博客，在此记录梳理一下，希望可以帮到大家，欢迎交流！
Hexo + github page 实现搭建博客.pdf
08-20
Hexo配合Github Page可以快速搭建一个美观、性能优越的个人博客系统。 在搭建博客的过程中，首先需要掌握git的基本操作。Git是一个开源的分布式版本控制系统，可以高效地进行代码版本管理。Git可以帮助我们记录每次...
hexo+github搭建自己的博客
05-02
"hexo+github"的组合就是一种非常流行的搭建个人博客的方式。Hexo是一个基于Node.js的静态站点生成器，它能够将文本内容转化为静态网页，而GitHub则是一个面向开源及私有软件项目的托管平台，支持Git版本控制系统。...
Hexo + github page 实现搭建博客.zip
10-25
在IT领域，个人博客已经成为许多技术爱好者和专业人士分享知识、记录成长的重要平台。"Hexo + GitHub Page 实现搭建博客"的主题旨在介绍如何利用Hexo静态站点生成器和GitHub提供的免费托管服务GitHub Page来创建一个...
个人博客系统-前后端,基于hexo搭建
10-19
本文将深入探讨如何使用Hexo框架来搭建这样一个个人博客系统，并强调其自定义模板的特点。 Hexo，一款轻量级的静态博客框架，以其简洁、高效和易于上手的特点，受到了众多用户的喜爱。它基于Node.js，能够快速生成...
用Hexo搭建个人博客共7页.pdf.zip
10-31
【标题】: "用Hexo搭建个人博客共7页.pdf" 这个标题暗示了文档内容是关于使用Hexo框架创建个人博客的详细指南。Hexo是一个快速、简洁且高效的静态站点生成器，尤其适合用来构建个人博客。它基于Node.js，通过简单的...
thanatoschen.github.io：hexo + github建造个人博客
03-02
Thanatoschen.github.io 是一个基于 Hexo 框架与 GitHub Pages 服务构建的个人博客。Hexo 是一个快速、简洁且高效的博客框架，它允许用户通过简单的 Markdown 语法撰写文章，然后自动生成静态网页。GitHub Pages 是 ...
hexo博客 nodejs +博客搭建+butteflr主题自用
07-26
Hexo是一个基于Node.js的静态站点生成器，它可以帮助我们快速、高效地创建博客，而Butterfly主题以其美观、响应式的设计，为个人博客增添了专业感。 首先，我们需要确保已安装了Node.js。Node.js是运行Hexo所必需的...
基于Hexo搭建的博客系统源码.zip
11-02
基于Hexo搭建的博客系统源码.zip文件包含了一整套用于创建个人博客的源代码，使得用户可以自定义自己的博客样式和功能。下面我们将详细探讨Hexo的搭建过程、核心组件以及与人工智能的潜在结合点。 1. **Hexo搭建...
Hexo博客搭建文件（next主题）
12-07
Hexo博客搭建是一个深受开发者喜爱的过程，它是一个基于Node.js的快速、简洁且高效的博客框架。在本案例中，我们关注的是使用Next主题来构建个人博客。Next主题以其优雅的设计和丰富的功能，成为Hexo用户中的热门...
Hexo+Github博客搭建教程
分享思想，留下痕迹。
05-08 3万+
注意，这篇文章篇幅较长，主要针对新手，每一步很详细，所以可能会显得比较啰嗦，所以建议基础比较好小伙伴根据目录选择自己感兴趣的部分跳着看，不要文章没看，上来先喷一下！谢谢*[Math Processing Error]⊙o⊙*。 教程内容随意复制使用，引用的话请加一个参考链接，谢谢！去年在博客园注册了自己的第一个博客，当时初衷就是想拿来作为自己的在线笔记本，做做学习记录，分享一些学到的东西，使用第三方提供的博客服务其实也挺方便，现在市面上提供类似服务的博客网站也很多，如CSDN，博客园，简书等平台，可以直接在
使用Hexo从0到1搭建个人博客详细教程（超详细，超简单）
唯有努力，方可自信！
08-07 1万+
20分钟快速搭建一个属于自己的博客
使用 Hexo 快速免费搭建个人网站
克隆窝
11-15 971
使用 Hexo 快速免费搭建个人网站本文档教你如何快速使用hexo + Github Pages / Gitee Pages 免费搭建一个个人网站。首先你需要准备一台 Win7 或者 Win10 系统的电脑。并成功注册 Github 或者 Gitee 的账号(任意一个就行。或者两个都用)。Github官网:Gitee官网:注册好账号后就可以进行下一步骤了。Github Pages是支持页面自动更新的，后续如果上传了新内容，页面就会自动刷新，无需再设置。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值