这可能是迄今为止最全的hexo博客搭建教程

   日期:2024-12-29    作者:9w3g6 移动:http://3jjewl.riyuangf.com/mobile/quote/80361.html

背景

这可能是迄今为止最全的hexo博客搭建教程

喜欢写 Blog 的人,会经历三个阶段。 第一阶段,刚接触 Blog,觉得很新鲜,试着选择一个免费空间来写。 第二阶段,发现免费空间限制太多,就自己购买域名和空间,搭建独立博客。 第三阶段,觉得独立博客的管理太麻烦,最好在保留控制权的前提下,让别人来管,自己只负责写文章。

这是阮一峰在博客中写到的关于 Blog 的想法,而这里的第三阶段的实现就是利用 GitHub Pages 搭建博客。

使用 GitHub Pages 功能搭建博客的好处有:

Hexo 是基于 Node.js 的一款静态博客框架,如果想要搭建博客,不想自己写页面的话可以考虑用 Hexo,其中有很多的简洁主题可供选择,同时 Hexo 支持 Markdown 语法,编辑文章更加方便,快捷。

注:此篇分享还以 Mac 为例哈

Hexo 文档有对 Hexo 安装及使用的详细介绍,推荐阅读。这里我主要写自己安装的步骤、踩过的坑以及一些优化的方法。

在正式安装 Hexo 之前,我们需要确认电脑中是否已安装下列应用程序:

当然,我们还需要 GitHub 账号,如果没有请注册。 注册之后记得一定要前往邮箱确认注册,否则无法使用 GitHub Pages。

所有必备的应用程序安装完成后,即可使用 npm 安装 Hexo。终端输入如下命令:

输入管理员密码( Mac 登录密码)即开始安装。

这里有个小坑:Hexo 官网上的安装命令是,安装时不要忘记前面加上,否则会因为权限问题报错。

初始化

使用终端到一个您指定的目录,执行以下命令(命令中的是您将要建立的文件夹的名称):

使用终端到文件夹下,执行以下命令,安装npm:

好了,现在可以试试看是否已经初始化成功,执行如下命令,开启本地 Hexo 服务器:

此时,浏览器中打开网址(默认是4000端口) http://localhost:4000 ,能看到如下页面:

Hexo 本地

这里我踩了个不算坑的坑,终端输入后没有成功,我也在网上搜到了很多解决办法,但是都没有奏效,后来我尝试改了下端口就成功了,也就是说默认的4000端口无法连接。如果您的情况跟我一样,尝试了网上的很多解决办法之后依然无效,那您也许可以尝试输入命令改一下端口试试看。

创建仓库

开启 GitHub Pages

点击,你将会打开这个库的 Settings 页面,向下拖动,直到看见 GitHub Pages,如图:

gh-p

修改全局配置文件

Hexo 官方文档中有对全局配置的详细说明,推荐阅读。

小坑提醒,修改本地所有的配置文件时,注意所有的冒号后边都要加一个空格,否则执行 Hexo 命令时会报错,一定注意。

找到本地文件夹下,打开后滑到最后,修改成下边的样子:

您需要将后的所有换成你自己的用户名,或者也可以在下图位置获取:

https 地址

然后,您需要为自己配置身份信息,终端输入和换成您自己的 GitHub 用户名和邮箱):

终端到文件夹下执行生成静态页面命令:

此时若出现如下报错:

尝试执行命令:

若无报错,自行忽略此步骤。

然后在当前目录下,终端输入:

这里踩了个坑,如果您执行命令仍然报错:无法连接 git 或找不到 git,则执行如下命令来安装:

完成安装之后,再次执行和命令。

随后按照提示,分别输入自己的 GitHub 用户名和密码,开始上传。

完成上传之后,通过 (换成您自己的仓库名,也就是用户名)来访问自己刚刚上传的网站。

终端到文件夹下,执行如下命令新建文章:

名为的文件会建在目录下。

所有的文章都会以形式保存在文件夹中,只要在文件夹中新建类型的文档,就能在执行的时候被渲染。新建的文章头需要添加一些信息,如下所示:

文章编辑完成后,终端到文件夹下,依次执行如下命令来发布:

至此,Mac 上搭建基于 GitHub Pages + Hexo 的博客就完成了。

下面的内容是介绍安装 Themes 、个性化设置以及优化。

如果您喜欢 Hexo 默认的主题的话,可以跳过这部分。如果您想换一个主题的话,可以到Hexo 主题挑选自己中意的主题。

这里以nexT 主题为例。

终端到目录下执行如下命令(这是目前的稳定版本,不是最新版。最新版有一些新特性,但是可能会不稳定,所以这里推荐选择安装稳定版):

如果想尝试最新版,请执行如下命令:

打开目录下的,找到修改为。

终端到目录下,依次执行如下命令(每次部署文章的步骤):

至于更改博客的名称、描述、头像等,只需要修改文件和文件中对应的属性名称即可(不要忘记冒号后加空格)。

为博客加上 GitHub 丝带

这里以 Next 主题为例(其他主题也差不多),添加 GitHub 丝带:在中加入相关代码,记得修改自己的链接。

添加 README.md

每个项目仓库下一般都有一个 文件,但是使用 hexo 部署到仓库后,项目仓库中是没有 文件的。

在 目录下的 目录下添加一个 文件,修改站点配置文件 ,将 参数的值设置为 。

保存退出即可。

为博客添加 LICENSE

在主题配置文件中添加下面这段代码(添加之前先看看您的主题配置文件是否已经包含这段代码,已经包含就不用添加了,因为重复会报错),LICENSE 会显示在侧边栏。

修改文章底部的带 `#` 号的标签

如果您觉得不好看,想改成图标,那么请按照下面修改。 打开,搜索(组合键+),将换成。

将阅读量改为热度

很多人将文章标题下的 阅读次数 改为了 热度,如果您喜欢的话可以这样修改。

打开文件,查找这几个字,可以看到,在中的被定义为,把这里的改为:

那么怎么在页面中显示呢?打开Next主题文件夹中,在这个文件里加上摄氏度的标志,在下面增加一行即可:

博文置顶

替换文件 内的代码为:

在文章 Front-matter 中添加 top 值,数值越大文章越靠前,如:

NexT 首页文章 加载更多 设置

这里只说一个方法:编辑文章时,在您希望显示 按钮的地方,加上:

more

首页分割线

  在 文件中添加以下代码,可以修改博客首页中每篇文章的分割线样式,是长度,是宽度。

小图标设置

博客中一切小图标都可以在fontawesome 图标库自行搜索(qq、微博、微信等图标是有的,但知乎、豆瓣等图标目前还没有)。

设置网站的图标Favicon

准备一张 icon 图标文件,放在 source 目录下就可以了,在中找到 favicon 的设置:

主页文章添加阴影效果

具体实现方法

打开文件,添加以下代码:

隐藏网页底部 powered By Hexo / 强力驱动

打开,使用 隐藏符号之间的代码即可,或者直接将这段代码删除。位置如图:

隐藏底部 Hexo

添加 SSH key 到 GitHub

终端执行如下命令,检查SSH keys是否存在。

如果显示如下信息(下面是我个人的显示,也许您跟我显示的不一样,但重点是只要有和),就说明 SSH keys 已经存在了:

如果存在,则直接跳过下一个步骤进入,否则请继续下一步骤 。

终端执行如下命令生成新的 SSH key,注意将换成你自己注册 GitHub 的邮箱地址。

默认会在相应路径下生成和两个文件。

1.3.将 SSH key 添加到 GitHub 中

终端依次输入:

复制所有显示的内容

进入GitHub –> Settings –> SSH and GPG keys –> NEW SSH key,如下图所示:

settings

ssh_key

Title 里任意添一个标题,将复制的内容粘贴到 Key 里,点击下方 Add SSH key 绿色按钮即可,如下图所示:

add_ssh_key

绑定独立域名

域名解析详细的步骤这里我就不写了,给个图:

dnspod

图中设置国内国外的原因是想让博客加载速度更快,方法请阅读后文 将个人博客同时部署到 GitHub 和 Coding

进入 目录下,添加并打开 文件,输入您的域名,重新上传您的博客。

在 GitHub 中打开您自己的博客仓库,进入库的 Settings 界面,如果看到了如下提示,说明配置成功了。

CNAME

在这一系列的操作中,修改 NS 服务器、设置解析等等,都需要一定的时间。短则10分钟,长则24小时,最长不会超过72小时。如果超过72小时,请检查自己的配置过程,或者修改自己本地的 DNS 服务器。

将个人博客同时部署到 GitHub 和 Coding

Coding 可以理解为国内的 GitHub。通过将博客同时部署到 GitHub 和 Coding,可以提升博客的加载速度。

这里有个提醒,Coding 会强制用户在网站上挂推广图标,通过 Coding 加载博客还会有5s广告,如果觉得这样不好,可以选择放弃部署在 Coding 上。还有一个选择,就是花钱成为 Coding 的会员,这样上述的问题就都没有了。

dnspod

这样就可以实现从国内访问就通过 Coding 加载博客项目,从国外访问就通过 GitHub 加载博客项目,从而提升加载博客的速度。

压缩代码

压缩代码也是一个优化加载速度的方法。

目前知道的有两个插件可以压缩博文,hexo-all-minifier 插件和 gulp 插件。hexo-all-minifier 使用比较简单,也可以压缩图片,不过对文章缩进不支持。如果您对文章缩进有要求,可以暂时使用 gulp 压缩手段。

安装 hexo-all-minifier,在站点的根目录下执行以下命令:

编译的时候就会自动压缩 HTML、JS、图片。详情参考插件介绍 hexo-all-minifier。

Hexo 依赖 gulp 插件安装,在站点的根目录下执行以下命令:

在目录下,新建 并填入以下内容:

生成博文时执行 就会根据 中的配置,对 public 目录中的静态资源文件进行压缩。

网站验证

验证方式有几种,推荐最简单的两种:文件验证和 CNAME 验证。

添加并提交sitemap

安装 Hexo 的 sitemap 网站地图生成插件,终端到:

在中任意位置添加如下代码,但要看清您的 Hexo 版本。

如果您的 Hexo 版本是 2.x.x

如果您的 Hexo 版本是 3.x.x

配置成功后,会生成和,前者适合提交给谷歌搜素引擎,后者适合提交百度搜索引擎。

百度 sitemap 提交如图,Google 也是一样的:

sitemap_yz

验证成功之后就可以开始推送了。Google 的收录比较快,通常第二天就能搜得到,百度就比较慢了。

主动推送

安装主动推送插件,终端到:

在根目录下,把以下内容配置到站点配置文件中:

至于上面提到的可在百度站长如下位置找到:

token

其次,记得查看中的,必须包含站长平台注册的域名,比如:

接下来添加一个新的 类型:

执行的时候,新的链接就会被推送了。原理:

自动推送

把 NexT 主题配置文件中的设置为,就可以了。

添加蜘蛛协议

在目录下新建一个文件,添加下面的一段代码(可根据自己的需要修改):

然后到站长(这里以百度为例,Google 一样)更新一下,就像这样:

robots

自己搭建博客时,很是折腾了一番,也学习到了很多知识,阅读了很多相关的博文,在此向相关博文的作者表示感谢,谢谢你们的文章让我进步。同时,我看到有很多人想拥有自己的博客或者优化自己的博客,期间可能会遇到很多问题,我也是这么一个坑一个坑踩过来的,所以我就写了这么一篇自己折腾博客的分享,希望可以在帮助自己的同时帮助到别人。(如果踩了新坑的话,一定会更新的。)


特别提示:本信息由相关用户自行提供,真实性未证实,仅供参考。请谨慎采用,风险自负。


举报收藏 0评论 0
0相关评论
相关最新动态
推荐最新动态
点击排行
{
网站首页  |  关于我们  |  联系方式  |  使用协议  |  隐私政策  |  版权隐私  |  网站地图  |  排名推广  |  广告服务  |  积分换礼  |  网站留言  |  RSS订阅  |  违规举报  |  鄂ICP备2020018471号