利用 Hexo 和 Github 免费搭建个人网站

2019-06-2614:12:26 9 361 人看过

Github是世界知名的代码托管平台,Hexo则是一款简洁高效的静态博客框架。两者的结合可以搭建出非常漂亮的静态博客网站。原理简单来说就是使用 Hexo 搭建一个静态网站托管到 Github 平台,并实现实时访问。这和我们搭建一个网站托管到自己的服务器上没有本质上的不同,区别是 Github 只能实现静态网站的搭建和访问,而服务器则是没有这样的限制。

使用 GitHub 和 Hexo 搭建网站最大的优点就是零成本,不需要服务器也不需要后台。其次是网站全是静态页面,访问速度快。缺点是,相对于 WordPress Typecho 等博客程序,学习成本更高,需要非常强的动手能力和一定的markdown 语法 基础。

 

一、创建 Github 账号

1、前往 Github 官方网站,注册一个 Github 账号。

(由于网站是全英文,方便大家阅读,这里使用了谷歌翻译将其翻译成了中文。)

利用 Hexo 和 Github 免费搭建个人网站

 

2、新建一个仓库

登录 Gifhub。登录成功后,点击【启动项目】新建一个代码存储库。

利用 Hexo 和 Github 免费搭建个人网站

 

存储库的命名必须是 Github 的用户名(username)加上.github.io 的格式,才可以作为网站的托管库,否则会导致网站无法访问。比如我在 Github 上注册的用户名为 uxcoffee,仓库就需要命名为 uxcoffee.github.io。

利用 Hexo 和 Github 免费搭建个人网站

 

3、获取 SSH 密钥

选择刚才创建的存储库,将 SHH key 复制到本地。这个 SSH key 我们后面会用到。

利用 Hexo 和 Github 免费搭建个人网站

 

二、下载安装 Hexo

1、安装 Node.js 和 npm

简单的说 Node.js 就是运行在服务端的 JavaScript。NPM 是随同 NodeJS 一起安装的包管理工具,能解决的 NodeJS 代码部署上的很多问题,这里我们主要是通过 NPM 服务器下载别人编写的第三方包到本地使用。比如 Hexo 程序包和相关插件。

由于新版的 Node.js 已经集成了 NPM,所以我么这里直接下载安装 Node.jS 即可。 安装包及源码下载地址为:https://nodejs.org/en/download/。根据你的系统,选择自己的版本。安装过程保持默认设置即可。

利用 Hexo 和 Github 免费搭建个人网站

 

2、安装 Gif

Git是目前世界上最先进的分布式版本控制系统。我们不需要知道什么是版本控制管理系统。在这里我们可以简单将其理解为辅助我们调试网站的命令行窗口。

Gif 的下载地址为:https://git-scm.com/download。安装过程保持默认即可。

利用 Hexo 和 Github 免费搭建个人网站

 

3、安装 Hexo

在你的电脑上创建一个Hexo 文件,文件位置建议放在 C 盘以外的其他盘。因为这个盘是用来存放我们的网站的文件的。

1、快捷键 Win+R 调出运行窗口,输入 cmd

2、下载 hexo。命令行窗口中输入 npm install hexo-cli -g 开始下载 Hexo 。前面命令安装完成,再次输入 npm install hexo --save ,等待下载完成。

利用 Hexo 和 Github 免费搭建个人网站

 

3、初始化 hexo。

安装完 hexo 之后,在你想存放网站文件的地方新建一个名为 hexo 的文件夹。依次执行下列命令,Hexo 将会在指定文件夹中新建所需要的文件。

hexo init <folder>
cd <folder>
npm install

其中以上代码<folder>是指你的电脑盘符,需要执行时需要改为你自己的盘符。比如你想把网站初始话到 D 盘的 hexo 文件夹,那么命令为:

hexo init D:\hexo
cd D:\hexo
npm install

利用 Hexo 和 Github 免费搭建个人网站

执行完上面的代码后,你就可以在 D 盘中找到一个名为 hexo 的文件夹,这个就是你的网站文件。文件夹目录如下所示:

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

 

4、检测软件是否安装成功。

我们可以通过命令行检测一下以上软件有没有安装成功。使用 windows 自带的命令行工具。依次输入执行 git version ,node -v , npm -v , hexo version 命令行,检测 Git、node.、npm 以及 hexo 的安装情况。如果正常返回版本号,则安装成功。

利用 Hexo 和 Github 免费搭建个人网站

 

5、生成网站静态页面。

输入执行 hexo g 命令可以生成网站静态页面。

 

6、启动本地服务器。

输入执行 hexo s 命令启动本地服务器,这时候,你就可以通过浏览器访问
http://localhost:4000 查看你的网站了,如下图所示。(快捷键 Ctrl+C 关闭服务器,退出预览。)

利用 Hexo 和 Github 免费搭建个人网站

 

三、将本地 hexo 网站推送到 Gifhub

这里可以通过简单的配置,将 hexo 的网站文件推送到 Gifhub 的存储库中。

1、更改 _config.yml 配置文件

在 hexo 目录中打开(前面新建的 hexo 文件夹) _config.yml 文件。
将 type 的值改成 gifrepo的值改成我们前面获取的SHH 密钥branch的值改为master。如下图所示:

利用 Hexo 和 Github 免费搭建个人网站

 

2、安装上传插件

Ctrl+C 退出网站预览,然后输入 Y 确认终止操作。然后输入执行 npm install hexo-deployer-git --save 命令,安装网站上传插件。

 

3、配置 SSH key

这时候,本地向 Gifhub 存储库上传文件的通道已经打通了。但是这时候还没有上传文件的权限,我们需要获取到本地网站的 ssh key ,然后配置到 Gifhub 验证成功后,才可以正常上传。

hexo 文件夹里右键,菜单选择搜索 Git Bash ,设置 user.nameuser.email 配置信息:

git config --global user.name "你的 GitHub 用户名"
git config --global user.email "你的 GitHub 注册邮箱"

 

生成 ssh 密钥文件:

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

 

然后三次回车,按照 Git Bash 窗口中提示生成路径,找到 id——rsa.pub 密钥。

利用 Hexo 和 Github 免费搭建个人网站

利用 Hexo 和 Github 免费搭建个人网站

用文本编辑器打开,复制 ssh key 。然后打开 Gifhub 官网,依次打开“设置——>SSH keys / Add new”。如下图所示。其中 title 选项可以随便填。key 选项粘贴刚才复制到的 ssh 可以。然后保存即可。

利用 Hexo 和 Github 免费搭建个人网站

4、接下来这一步非常关键。

首先在 Git Bash 窗口中输入hexo clean命令清理缓存,然后输入hexo g命令重新生成网站静态页面,最后输入hexo d上传到 Gifhub 库。

最后,使用“Gifhub 用户名+github.io”就可以访问网站了。比如我的用户名为 uxcoffee ,所以我的域名为 uxcoffee.gifhub.io

 

四、解析绑定域名

1、添加一条 CNAME 解析记录

如果你不喜欢“username.gifhub.io"这样的域名,还可以绑定自己的域名。只需要两部,第一步到你域名服务商的后台,选择你想绑定的域名。添加一条解析记录。记录类型选择 CNAME,主机记录填写你绑定的域名。我这里绑定的是二级域名。如果你想绑定一级域名,这里可以填"@"。记录值就填写 github 提供的域名。

利用 Hexo 和 Github 免费搭建个人网站

2、绑定域名

登录 Gifhub 官网,选择你的网站存储库,进入设置页面。下拉到 GitHub Pager 页面,填写你要绑定的域名即可。这时候,就可以使用你绑定的域名访问网站了。

利用 Hexo 和 Github 免费搭建个人网站

3、最后,在 hexo 项目下,source 文件夹下面创建 CNAME 文件(没有后缀名的),在里面写上绑定的域名。(建议创建一个记事本,写上域名后,对文本进行重命名时,不要后缀名 txt 即可)。

全文完!

weinxin
博客小程序【一起行动派】
欢迎访问行动派博客小程序,小程序和博客同步更新,查看内容更加方便!
Action

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

目前评论:9   其中:访客  7   博主  2

    • avatar 张波博客 4

      免费的东西都不太敢动,太贵了!

        • avatar Action Admin

          @张波博客 不用担心,github现在是微软旗下的了,稳得一批。

        • avatar boke112导航 4

          感觉好复杂,我还是比较喜欢使用主机或服务器搭建WordPress站点

            • avatar Action Admin

              @boke112导航 我也觉得WordPress才是主流,Hexo比较小众一些。

            • avatar 杂烩网 2

              免费的不太好

              • avatar 征稿网 1

                太折腾了,想免费不如注册个博客玩

                • avatar nice 2

                  懵逼进懵逼出…

                  • avatar 开红大大 2

                    不错不错,学习了

                    • avatar wordpress建站吧 4

                      没接触过 不会用