前言
每当在各种大佬群里划水的时候,身为菜鸡,总是很羡慕他们拥有自己的域名和博客。但由于还是学生党,买个域名或者租个云服务器其实也并不是很急迫的事情(主要我是怕买了之后不会用,在那一边闲着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(一):前期要做哪些准备?
的全部内容了,更多内容会很快写出来,尽情期待。