【Hexo博客搭建】将其部署到GitHub Pages(一):前期要做哪些准备?

本文涉及的产品
.cn 域名,1个 12个月
简介: 本系列文章属于半笔记半教程的零基础小白入门文,教你将 Hexo 部署到 GitHub Pages 的前期需要做哪些准备,跟着此系列文章最终可以获得自己的静态博客网站。流程很长,分成不同的篇幅,此为本系列的第一篇。

前言

每当在各种大佬群里划水的时候,身为菜鸡,总是很羡慕他们拥有自己的域名和博客。但由于还是学生党,买个域名或者租个云服务器其实也并不是很急迫的事情(主要我是怕买了之后不会用,在那一边闲着haha~),于是自己花了一天时间查找翻阅各种教程动手操作了一番,将 Hexo 部署到了 GitHub Pages,建立了自己的第一个(在某种意义上)真正属于自己的博客网站。本篇文章属于半笔记半教程的零基础小白入门文,教你将 Hexo 部署到了 GitHub Pages,从而获得自己的静态博客网站。

【注意】:本文纯属才疏尚浅的我以笔记的形式进行的记录,很多知识其实我也不是太懂,可能存在理解偏差和错误,来学习的朋友们请自己甄别,路过的大神们也别喷我哈哈哈,有什么建议和问题可以评论提出或者其它方式联系我。我会尽可能保持更新该文章所使用到的技术和做法,并随时接受勘误。

步骤

一、了解并创建GitHub账号和仓库

GitHub是一个面向开源及私有软件项目的托管平台,也是世界上最大的代码托管平台,因为只支持Git作为唯一的版本库格式进行托管,故名GitHub。GitHub中文社区,是国内领先的开源社区,是一个可以发现优质开源项目的地方。

由于程序员大多是男性,GitHub又被戏谑地调侃成全球最大同性交友网站"Gayhub",哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈......咳咳,说多了

1. 注册GitHub账号

虽然都是英文,但不必畏惧,也并不会造成使用障碍,只要记得最常用的选项含义即可,以及善用浏览器的网页翻译功能和手头的翻译软件。

注意:注册时的英文用户名将成为你可以使用的免费域名前缀。

注册流程非常简单,这里不再赘述。

2. 在 GitHub 上创建一个新的项目

单击 右上角【+】- New Repository 新建项目。(以下简称仓库)

然后填写项目信息。

仓库的名字格式应为:你的用户名.github.io

为什么必须这个作为仓库名?

因为这是GitHub Pages 服务的命名规范,同时它也将成为你的专属域名。

当然,你也可以购置自己的专属域名并用它来提供内容。

比如我的用户名是Barry-Flynn,那么我的仓库就叫:Barry-Flynn.github.io

(全部小写更好,有大写也没事,除了大小写切换有一丢丢麻烦外没有区别)

在description一栏填写简介,随便填填,比如我填的是:百里飞洋的个人空间

然后选择 Public。

最后勾选 Initialize the repository with a README。

此步的作用是用一个 README.md 对这个仓库进行初始化

完成后点击下面的 Create Repository。

二、安装 VS Code

在安装Git之前,我建议先安装 VS Code。因为安装 Git Bash 时,可以设置 VS Code 作为默认编辑器。Visual Studio Code,简称 VS Code。目前最为强大易用的编辑器,轻量且快速。(宇宙第一编辑器哈哈哈)

注意:它并不是我们常常听到的 VS,VS 常常指的是 Visual Studio,是一个功能强大的 IDE(集成开发环境),体积要比 VS Code 都要大上一个量级。

对于它的安装,直接搜官网下载就行了,免费的,不再赘述。

三、安装 Git

Git 是一个开源的分布式版本控制系统,由 Linus Torvalds(同时也是 Linux 的作者)为了管理 Linux 开发而开发。类似的工具还有:SVN。但始终更推荐 Git,因为它功能更为强大且它的背后还有更强大的生态:GitHub。

你可以直接去官网下载Git并安装,如果国内网速太慢可以“科学上网”或者从其他平台下载。MacOS 用户可以下载官网的安装包进行安装,也可以直接安装 App Store 的 Xcode(附带会安装 Git,但是比较大)。安装时一路next到底就行了,也可以在网上找教程,我不再多说。

四、安装 Node.js

何为Node.js ?Node.js 是一个基于Chrome JavaScript 运行时建立的一个平台。简单的说 Node.js 就是运行在服务端的 JavaScript。Node.js是一个事件驱动I/O服务端JavaScript环境,基于Google的V8引擎,V8引擎执行Javascript的速度非常快,性能非常好。

对的,看到这个解释我其实也一脸懵,但不妨碍我们用它,想进一步了解的朋友们可以去官网浏览官方文档。

建议下载长期支持版,而非当前发布版,因为如果是最新版,容易出现一些奇妙的 bug。全部默认下一步进行安装。然后Windows 用户打开命令提示符,即按住键盘 Win+R,输入cmd然后回车,弹出黑色代码窗口。

MacOS 用户打开终端。(这个不会就请百度吧,我没用过)

Linux 用户右上角关闭本标签页。

后续如提到输入命令,均默认指打开终端进行输入。

输入 node --version 回车,如果得到的版本号与你方才安装的一致,那么 Node.js 就已经成功安装。

Node.js 安装成功时也默认安装了 npm,在此后将会用到。npm 是随 Node.js 一起被安装的包管理工具,你可以理解成 Node.js 自带的应用商店。

对了,国内使用 npm 可能很慢,你可以“科学上网”,或者考虑切换为 taobao 镜像源,即手动输入以下内容后按回车(也可以Ctrl+C和Ctrl+V复制以下代码按回车):

npm config set registry https://registry.npm.taobao.org

五、安装Hexo

Hexo 是一个快速、简洁而强大的博客框架,基于 Node.js,同样托管于 GitHub 之上。生态中拥有众多插件主题。你可以基于它快速生成一些静态页面。你可以使用别人的各种主题与插件,也可以自己定制开发想要的功能。

为什么不是…?

其他常用的博客框架还有 WordPress,Typecho,Ghost 等,但这些往往都需要购置自己的服务器,而无法静态化地部署到 GitHub Pages 上。(当然,相应的功能和灵活性也大大提升。)静态化站点还有一个优势就是访问速度往往更快。

静态网站生成器还有 Vuepress,Gatsby 等。但这些多是为了写文档而量身定制的,你也可以使用它们,但是相较 Hexo 的博客定位,它们关于博客的插件和主题以及解决办法会少得多。

Hexo 提供的功能与 Hugo 几乎都有,(生成大量文件时,甚至比 Hexo 更快)不过它是基于 GO 语言。日后你想对自己的网站进行自定义,即便是 Hugo,你编写前端的交互仍旧需要使用 JavaScript,所以选择基于 JavaScript 的 Hexo 可以降低学习成本。(你若对 GO 有兴趣,仍然可以尝试使用 Hugo,但本教程将不会针对 Hugo 进行展开。)

所以对于新手来说,使用 Hexo 作为起始点,不失为一个好选择。(当然如果你有钱租服务器,并希望快速上手的话,就可以考虑考虑 WordPress 或者 Typecho)

如何安装Hexo呢?

在cmd终端窗口中输入以下命令后回车:

npm install hexo-cli -g

然后等待一会进度条走完,没报错就代表安装成功。

进度条卡住不动可能还是国内网络问题,“科学上网”哦,咳咳....

如果安装失败,可能是没有权限,可以尝试头部加上 sudo 重新执行,即输入:

sudo npm install hexo-cli -g 然后回车

上面命令中,

install 自然是安装。

hexo-cli 则是 hexo 的终端工具,可以帮助你生成一些模版文件,之后再用到。

-g 代表的是全局安装。也就是在任何地方都可以使用,否则会只能在安装的目录下使用。

总结

好了,这就是本篇文章:

【Hexo博客搭建】将其部署到 GitHub Pages(一):前期要做哪些准备?

的全部内容了,更多内容会很快写出来,尽情期待。



相关文章
|
10天前
|
JSON 缓存 JavaScript
使用 jsDelivr 免费加速 GitHub Pages 博客的静态资源(二)
使用 jsDelivr 加速 GitHub Pages 的图片资源和动态编译的 JSON 资源。
13 2
如何将静态网页部署到github上
如何将静态网页部署到github上
|
2月前
|
网络协议 开发工具 git
hexo github部署,通过域名访问你的博客
本文介绍了如何使用Hexo命令部署博客到GitHub,并详细说明了如何通过自定义域名访问GitHub上部署的博客。
hexo github部署,通过域名访问你的博客
|
27天前
为什么 GitHub Pages 的文章标题不能以 @ 开头?
本文记录了一个 GitHub Pages 博客网页上文章标题以 `@` 开头导致的问题,并分析了原因,提供了解决方法。
41 0
|
3月前
|
搜索推荐 前端开发
使用VitePress创建个人网站并部署到GitHub
该网站使用 VitePress 构建,记录了前端开发相关的笔记和教程,涵盖 Vue2 和 Vue3 等内容。网站支持暗黑模式和 Algolia 搜索服务,提供了详细的导航和侧边栏配置。通过自动化脚本进行部署,托管于 GitHub Pages。
使用VitePress创建个人网站并部署到GitHub
|
3月前
|
资源调度 搜索推荐 Shell
使用VitePress静态网站生成器创建组件库文档网站并部署到GitHub
本文介绍了如何使用 Vue3、TypeScript 和 Vite 开发组件库并将其发布到 npm。文章详细描述了安装依赖、配置项目、创建文档网站以及编写组件文档的步骤。通过使用 VitePress,可以轻松搭建组件库的文档站点,并实现 Algolia 搜索功能。此外,还提供了自动化脚本用于部署静态网站至 GitHub 以及发布组件库到 npm。最后,展示了完整的目录结构和网站效果。
使用VitePress静态网站生成器创建组件库文档网站并部署到GitHub
|
3月前
|
Linux C++ Docker
【Azure Developer】在Github Action中使用Azure/functions-container-action@v1配置Function App并成功部署Function Image
【Azure Developer】在Github Action中使用Azure/functions-container-action@v1配置Function App并成功部署Function Image
|
3月前
|
存储
【Azure Developer】Github Action部署资源(ARM模板)到Azure中国区时,遇见登录问题的解决办法
【Azure Developer】Github Action部署资源(ARM模板)到Azure中国区时,遇见登录问题的解决办法
|
3月前
GitHub——使用GitHub Pages生成在线文档
GitHub——使用GitHub Pages生成在线文档
23 0
|
5月前
|
jenkins Java Shell
蓝易云 - Java+Github+Jenkins部署
以上步骤完成后,每当你的Github仓库有新的提交时,Jenkins就会自动构建你的Java项目,并保存构建产物。
77 4