使用GitHub Pages部署Hexo制作网站

首先可以看一个示例网站(还是上N节我说过的GitHub Pages那个示例站点)

当然我现在的博客就是用的Hexo来搭建的,所以就参考这个吧

差不多就长这样啊 我这是没怎么整主题之类的

记得上N节我说过的GitHub Pages的用途之一,就有“使用Hexo框架搭建博客”,当时没有细讲是因为我觉得Gitbook其实就挺适合的了;不过比较一下UI什么的还是发现,Hexo还是美观得多(因为可以自选主题);话不多说,开始——

准备阶段

首先需要下载——

  • Node.js
  • Git

这里是官网——

Node.js:https://nodejs.org/zh-cn/

Git:https://git-scm.com/

这里是全套蓝奏云下载地址,整理好了——

https://wangzhuoke.lanzoui.com/ivDH5tb7waj 无密码

其中,在Node.js安装过程中,会出现下面的窗口:

要点第四个,添加到Path(环境变量);

Git的安装则是傻瓜式安装即可,虽然步骤多,但是按照默认的来就行;

好的,现在已经全部准备完毕。

建立阶段

为了验证我们的Node.js和Git是否安装完毕,可以在CMD(win+R,输入“cmd”即可打开)中输入两条命令查看:

1
2
node -v
git version

如果出现以下的反馈(版本号可能不一样),则证明安装成功;

接下来,创建一个文件夹(名字随便,位置随便,但是最好方便些,这里建议在桌面建立一个名为“hexo”的文件夹);

我们进入到这个文件夹——

接下来输入指令:

1
npm install hexo-cli -g

(这里我已经安装过了,就不重复安装了;安装过程中记得保持网络不要断了;)

然后输入:

1
hexo init

可以发现,它已经安装了一大堆东西了。

写作阶段

使用Hexo框架,可以用Markdown进行文章的写作——

输入指令:

1
hexo new “文章标题”

这样就创建了一篇新文章——

位置在source文件夹中的_posts文件夹中,名为“听话的便当”的Markdown文件;

我们使用记事本打开看看——

可以发现它已经很贴心地帮我们写好开头了(当然“data”和“tags”删除也没有关系);

接下来我们就可以用Markdown来创作了——

这篇是我使用Markdown打出的一篇文章,那么它预览起来是什么样的呢?——

输入指令:

1
hexo s

发现:生成了一个网站(http://localhost:4000),此时复制后浏览器打开即可——

(ps:如果要关闭预览,在CMD里按Ctrl+C;)

美化阶段

那么接下来,就介绍一下Hexo强大的功能之一:主题;

我们可以在GitHub上直接搜索“Hexo theme”,就能发现一大堆,具体看个人喜好;

我们随便选择一个——

打开“Releases”或者上方的“Code”,下载任意压缩格式的文件;

然后打开hexo文件夹中的themes文件夹,并解压进去:

复制刚刚解压过的文件夹的全名称,之后返回根目录(hexo文件夹);

编辑根目录中的_config.yml文件——

这里需要改动一些地方:

这里是一些基本的,比如说你的网站名(第六行);

描述(第八行);

作者(第十行);

语言(第十一行);

你的网站链接(注意:第十六行的URL一定要改成你将来要部署的网站!!!比如你要用GitHub Pages部署,就必须是那一节你部署过的网站链接!!!);

这里建议改成六的倍数(不只是吉利),这样的话会比较美观;

第一百行的主题名称改为之前让你复制的那个文件夹的名称(记得空格);

第一百零五行“type”改为“git”;

第一百零六行加上“repo”,然后加上链接——

(注意:不是GitHub Pages的链接,是GitHub Pages的库的链接!!)

第一百零七行加上“branch”,名字随便起一个;

完成这些之后,我们可以再次用“hexo s”这个指令查看预览,发现已经更新主题了。

部署阶段

整了这么多,你的网站也终究只在你的本地运行,那么怎么部署到GitHub Pages上呢——

首先,我们需要用指令下载一个插件,用于连接GitHub账户和Hexo:

1
npm install hexo-deployer-git --save

安装之后,如果想确认是否安装成功,可以输入这个指令:

1
npm list hexo-deployer-git 

出现了版本号,说明成功了;

接下来,输入指令——

1
hexo g -d

如果失败,则输入以下指令,之后再输入上面的指令:

1
git config --global credential.helper wincred

此时可能会有弹窗显示让你输入什么API,这个时候选择浏览器打开,之后登录按照要求填写你的GitHub账号密码;

之后,刷新一下你登录账号后的GitHub,会显示出现了一个新的分支(在上文,我的分支branch的名字是master);此时,如果没有其他分支的话,应该是有两个分支——main和master;

在设置中,删除原先的main分支,并把master分支的名字改为main;

懂了吧?

注意:此时Hexo根目录的_config文件里,最下面的branch也要改为main;

之后,就可以轻松地用Hexo在本地书写,在GitHub Pages上显示啦!

其他更多Hexo书写技巧,以及指令,请到Hexo官网查看


我是 听话的便当

Bye~

打赏
  • Copyrights © 2005-2021 听话的便当
  • 访问人数: | 浏览次数:

Thanks♪(・ω・)ノ 都是微信

支付宝
微信