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

 简介: 本系列文章属于半笔记半教程的零基础小白入门文,教你将 Hexo 部署到 GitHub Pages 应该怎么做,跟着此系列文章最终可以获得自己的静态博客网站。流程很长,分成不同的篇幅,此为本系列的第一篇。

目录

前言

步骤 

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

1. 注册GitHub账号

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

二、安装 VS Code

三、安装 Git

四、安装 Node.js

五、安装Hexo

总结

参考文章

关于我


前言

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

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


步骤 

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

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

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

1. 注册GitHub账号

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

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

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

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

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

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

然后填写项目信息。

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

为什么必须这个作为仓库名?
因为这是GitHub Pages 服务的命名规范,同时它也将成为你的专属域名。当然,你也可以购置自己的专属域名并用它来提供内容。

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

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

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

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

然后选择 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 快速回退到最初的版本。
你只需要把每次更改的状态(Git 会自动进行检测,你只要掌握基础的几条命令就可以了)告诉 Git,而不需要每个版本都保存一份压缩包,既方便也能大大节约空间。
(当然这主要只对代码文本起作用,因为 Git 的本质是记录各行代码的增减,倘若是像视频、海报这类二进制文件来说便体现不出丝毫优势了。当然想要应对这种场景还有 Git LFS。)

你可以直接去官网下载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的速度非常快,性能非常好。

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

什么是 Node.js ?(此段摘自“云游君”的博文)
这得从什么是 JS 说起,JS 也就是 JavaScript。(为什么有种从盘古开天辟地开始的感觉)没错,JavaScript 就是网页的盘古。JavaScript 是一种编程语言,我们所见到的网页中的交互和逻辑处理几乎都是由 JavaScript 完成。
JavaScript 语法简单,易学易用。(当然也请不要小瞧它,虽然它入门门槛低,但上限同样也很高。包括但不限于实现网站前后端,手机桌面应用程序,机器学习,计算机图形学等。)
在 Node.js 诞生前,JavaScript 都运行于浏览器端。也就是说,它是鱼,浏览器是装满了水的水缸。
2008 年,Chrome V8 诞生。2009 年,Node.js 诞生。并成为 GitHub 早期最著名的开源项目。GitHub 可能大家已有所了解,后续再说。
Node.js 便是一个基于 Chrome V8 引擎的 JavaScript 运行环境。(当年第一次看到这句话时,我也一脸懵逼。)按照我的理解,JavaScript 是鱼,Chrome V8 就是抽水机,Node.js 则把这台抽水机也装在你电脑上。于是你的电脑也有了 Node.js 这个和浏览器相似的水缸,也可以在里面运行 JavaScript 了!
当然 Node.js 和浏览器端还是因为自身定位和一些历史原因而有些许区别的,不再展开。

建议下载长期支持版而非当前发布版(因为如果是最新版,容易出现一些奇妙的 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 之上。生态中拥有众多插件主题。你可以基于它快速生成一些静态页面。你可以使用别人的各种主题与插件,也可以自己定制开发想要的功能。

Hexo

  • GitHub: https://github.com/hexojs/hexo
  • 官方文档(直接参考文档也是一个不错的选择)

为什么不是…?(此段摘自“云游君”的博文)
其他常用的博客框架还有 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(一):前期要做哪些准备?

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


参考文章

教你如何从零开始搭建一个属于自己的网站 | 云游君的小站 (yunyoujun.cn)

使用Hexo在GitHub Pages部署属于你自己的博客! | LeoStudio (6cficu.top)

手把手教你从0开始搭建自己的个人博客 |无坑版视频教程| hexo_哔哩哔哩_bilibili


关于我

我是  百里飞洋 ,一个00后小白程序员,平时可能比较中二,在各个平台也基本上都可以找到我。

 哔哩哔哩 :百里飞洋的个人空间_哔哩哔哩_bilibili

 新浪微博 :百里飞洋的微博_微博 (weibo.com)

 微信公众号 :百里飞洋

有时候喜欢自说自话发表一些“贼幼稚”的鸡汤和牢骚啥的,上传着关于梦想、成长、编程、沙雕等等各种类型的图片和视频。如果在哪看见了我,可以跟我打个招呼啊!

你可能感兴趣的:(【百里飞洋】博客搭建笔记,hexo,github,git,node.js,vscode)