怎么把网页源码家入hexo博客_值得你阅读的hexo个人博客搭建:不用购买服务器,不用购买域名,不要钱,不用敲代码等等,是的,你没有看错,快来转载学习吧!...

点击Python数据分析与人工智能科技

右上角选择设置“星标公众号”

本文章可“开白”转载

文章末尾左下角点击可阅览我的博客网页

39153ca6986a5beffd3d2919563aac78.gif

Hexo快速搭建个人博客(2019/10/22更新)


使用到的工具(本教程统一在Windows系统下搭建)

Node.js、Hexo、Git、Github账号、Sublime Text3

请自行注册一个Github账号

最后的部署到网上的博客展示

1de779c3a25acfcb11dabce22ecb5bbc.png

文章目录:

前言

值得你知道的话

一、从创建到部署博客

二、博客的网页主题

三、更换域名+博客测试成功

前言

今天一直在钻研这个博客,并搜索了大量有关hexo搭建博客的教程进行学习。我作为一个第一次使用Hexo搭建个人博客的菜鸟,我发现我踩了不少坑,哈哈,在这里我不得不吐槽一下某些撰写Hexo搭建个人博客的技术人员,用一个字来形容他们的博客就是“乱”,乱是因为我读完他们的博客写的内容发现逻辑顺序简直看得我一头雾水、细节内容对于他们来说就是一个摆设,难怪有好多人看不懂也是应该的。当然,可能是我的水平不够,也或许是在拜读他们的大作时候不够认真和严谨。

但我还是要告诫一下一些技术编辑者:

如果是怕别人偷学你的内容,那就不要发在网上;如果你发在网上,请考虑我们读者的感受,要对自己花费那么多时间撰写的内容负责,要让别人看懂你的文章,让别人欣赏你的作品。其实,有时候还能看出一个人的品性。

吐槽到此结束~下面开始进入博客搭建环节


值得你知道到话:

是的,你没有看错!

不用服务器,不用注册域名,不用花钱,不用敲大代码等等

一个博客就值得你拥有 

9136b4d489ec6a62c4b0e5e40aa091f9.png


一、从创建到部署博客

1、安装好Node.js

别忘了用命令npm检验Node.js安装是否完成,

关于hexo的安装教程比较简单,网上有很多完整的教程,在这里就不再赘述。

安装Hexo 命令:

npm install -g hexo-cli

做完了这一步之后,恭喜你,前期的准备工作已经完成,环境这一步结束了。

2、安装好Git

5e36b7658587b33d39fe6aaeefa841f4.png

3、在C盘下创建hexo文件夹

591022d404d20ee505333362ea176133.png


4、打开Hexo文件夹下,右键点击Git bash 下执行命令

再使用一次这个命令:npm install hexo-cli -g

创建博客KangChou:hexo init KangChou

cd KangChou

npm install

1c118892ee1b490e1417d2c5a25adb71.png

d21cdeeba2c7dc6d1e7b39532b8778bb.png


5、命令hexo server启动github服务器

b4ad28395f30e0a6b20d787f2046d10a.png


6、浏览博客

安照5中提示的网址http://localhost:4000/

复制该网址在浏览器中打开,如下图所示:这样一个博客的架子就出来了。

767b9918e4e2c24445c019803ac1bc7b.png


7、部署前哨(一):添加Github仓库地址

在部署之前,我们需要先知道博客的部署地址,它需要对应 GitHub 的一个 Repository 的地址,这个信息需要我们来配置一下。(这里我就省略了,自己去布置),这是我的这个Github仓库

https://github.com/KangChou/KangChou.github.io.git

884edcd5a2803faf4c5a6ed18f7f52ab.png

打开文件Hexo下的KangChou文件根目录下的 _config.yml 文件,我使用编辑器Sublime Text3打开的(或者你使用其他代码编辑器打开,千万别用文本编辑器打开),找到 Deployment 这个地方(提示:文件最后),把刚才新建的 Repository 的地址贴过来

d3bd29ce3b7f5476cbb05567bfac15a3.png

8400dce5b0305c1de1666bddfa1957f8.png


8、部署前哨(二):部署插件

需要安装一个支持 Git 的部署插件: hexo-deployer-git,有了它我们才可以顺利将其部署到 GitHub 上面(如果不安装的话,在执行部署命令时会报错).

fc367dde4b7a9a62a8c659895bf082a2.png


9、下面开始部署到Github

如果8的插件部署没有问题就开始进行部署,首先输入部署命令如下:hexo deploy

ef9ed9497716350df19cb9b643a6f968.png

结尾....

47d9209527a99663b3db3e5a90ee9724.png

可以发现出现了上面的报错提示:

Error: Spawn failed    at ChildProcess.task.on.code (C:\Hexo\KangChou\node_modules\hexo-util\lib\spawn.js:51:21)

解决方法第一次:

经搜索大量资料发现了下面的这个博客出现类似上述的一样问题,看了这个解决办法,我就斗胆试一试:

https://blog.csdn.net/njc_sec/article/details/89021083

28113186771179570f0d48f6937b43ad.png

可惜我再重新安装上述的三个命令输入之后还是出先一样的错误。

解决方法第二次:

因此我怀疑可能是仓库的地址出错,因此去看看了看地址

这是原来的地址:

deploy:type: gitrepo: git@github.com:KangChou/KanChou.github.io.git#branch: master

我按照出现错误提示中的网址去打开它:

 https://hexo.io/docs/troubleshooting.html

f77566a60ad35afd965c8bc68fdeb8a8.png

并找到了部署到Github目前的语法规定的网页下

https://hexo.io/docs/github-pages

403390fed6caa55f91cd8cbe0835b09a.png

按照上面对部署仓库的地址,我将上述的Deploy的源码修改为

deploy:  type: git  repo: https://github.com/KangChou/KangChou.github.io.git  # example, https://github.com/hexojs/hexojs.github.io  branch: gh-pages

于是我再试了上述的三个命令:

hexo clean

hexo g

hexo d

最终出现下面的结果:说明出现的问题解决了

8585478aa670056083494e31195418bb.png

由于我起初没有部署仓库的密钥,所以要去仓库部署。


10、创建的 ssh 密钥的密码

(1)、我打开了我得仓库,并找到了设置

fd7825431a901e21d845b6887d41b05b.png

(2)查看部署密钥指南以了解更多信息

https://developer.github.com/v3/guides/managing-deploy-keys/#deploy-keys

找到了设置密码的步骤(经过翻译以后,目前我们进行到下面的5)

21d12d88a21f81c4566c30b9583c348b.png

(3)怎么创建SSH密钥?

步骤:

  • 找到本地环境:C:\Users\admin\.ssh   这个路径下的用户/名称/.ssh

  • 在这路径下,打开gitbub的命令控制台

  • (I): git  init  //初始化一下,看看路径对不对

       (II):ssh-keygen -t rsa -C "你的邮箱"

f76e0ae86df57084c6fb448da8a760a6.png

  • 到本地环境.ssh路径下查看,是否生成id_rsa,id_rsa.pub这个两个文件

e3a396d0af479968ee3a0eb2994e16cb.png

  • 生成后,现在把id_rsa.pub里面的内容复制到githubd 的add github key 的key里面(也就是刚刚仓库的密钥添加的地方)

3112bd568e2e5e89d5c533f04189e0f8.png

点击Add SSH key获得下面结果

注意:第一次提交,配置密钥,需要输入github的密码,如下就是添加秘钥成功

4c87e4b6c368e9d988a25b16e038d5c2.png

  • 密钥配置成功后,要验证一下是否配置成功

    命令:ssh -T git@github.com 

441c262e5193612d91842b6f6c876382.png

出现下面提示,说明配置成功。

Hi KangChou/KangChou.github.io! You've successfully authenticated, but GitHub does not provide shell access


11、再次使用密钥部署

仍然使用命令:

hexo clean

hexo g

hexo d

如果都没有问题就会出现下面的结果,输入你刚刚设置的SSH的密码

6d0d35a48268c0b1dd5c094c4a1ca0d7.png

但是这里又出错了

01eeb74080894cd54825ce80bbaab51b.png

追根溯源,我怀疑还是部署的仓库出现了问题:因此我再次打开,并做了修改

2c3b816fa6d3b955e6ecac3dc25963c9.png

命令hexo d执行又出错

b8c37b174143a5095af3939e91de3cae.png

下面终于找到了答案。这里要特别感谢@李典金 @崔庆才两位网络开发大佬的细节点拨才通过了上面的一个小环节,从而我力挽狂澜,一气呵成,搭建了后面的所有框架。


12、终于部署成功

最后终于找到了错误的原因,这是因为我创建的仓库下Github的SSH错误

因此,我去仓库找到了

346ce74ae8f5ed998e26780d8c2ec3a9.png

将红色的部分复制到hexo文件目录下也就是你的博客文件末尾,打开修改如下

d129a2947e0581b1eea5531652923c18.png

再次输入命令hexo d执行以后出现下面的结果,

出现Deploy done :git说明已经部署成功

b98684578579ab7f54589edf3b11e0e9.png

这时候我们访问一下 GitHub Repository 同名的链接,

比如我的 KangChou 博客的 Repository 名称取的是 KangChou.github.io,

那我就访问 http://KangChou.github.io

这时候我们就可以看到跟本地一模一样的博客内容了。

(此时你用手机同样可以打开该网站)

58cfb40ad745fa1b9c157cfdfe817ded.png

二、博客的网页主题

主题的设置包括中文页面、整个页面的样式、页面风格等等,

目前 Hexo 里面应用最多的主题基本就是 Next 主题,

这个主题还是挺好看的,并且它支持的一些插件和功能都极为丰富,

配置了这个主题,我们的博客可以支持更多的扩展功能,比如阅览进度条、中英文空格排版、图片懒加载等等。


13、下载主题

打开我的电脑创建的Hexo文件夹下的KangChou目录,

单击右键Git bush输入下面的命令,执行结果如下:

git clone https://github.com/theme-next/hexo-theme-next themes/next

将下载后的themes主题替换原文件landscape中里所有的文件,并输入启动服务器命令

hexo server

执行结果如下

2e74aff3d1ef5e349d5232621e7d163f.png


14、配置中文环境

在博客kangchou目录下打开_config.yml修改语言为中文汉语 zh-Hans

8c7e287dfbb62f8f69b4d0ef0b64669a.png

执行的结果如下

d61410a43e562e648450be05e768c4f6.png

由于这只是部分为中文,而我的目的是大部分是中文的,

为了方便还要在网页上手动添加更多中文描述


15、配置中文菜单栏

打开C:\Hexo\KangChou\themes\landscape\languages

发有三种汉语:简体中文、香港繁体、台湾繁体

836ac364c493124e78913ed54390b09f.png

然后点开zh-Hans.yml其中的配置项就是已经翻译的文本

b0c3d39df9ce8a93c68bbff2b0b0716a.png

网站会根据你站点配置yml中的语言配置来去读取对应的语言文件

打开你languages皮肤配置yml你会看到菜单栏基础配置:

321887b30b56913321f62d11fc5aafdb.png

发现home和archives菜单是开启的,

现在我们全部开,只需要去掉前面的#,刷新浏览器

55db1cc15236c314fcc3d9a18622e746.png

尝试修改站点配置yml语言,重启服务后刷新浏览器

1de779c3a25acfcb11dabce22ecb5bbc.png

显然结果很成功,下面关闭git,将结果上传到Github页面:

重新打开输入部署的三个命令:

hexo clean

hexo g

hexo d

结果和上面一样,此时就可以访问了.

访问网站https://kangchou.github.io/

b589b83e1cd205b1f8905a098510db51.png


实际上文章到这里就已经结束博客的搭建了,至于其他的

比如上传文章、上传图片,添加logo等这些我这里就不说了,

hexo官网以及其他网站都能搜索到具体的教程,

想继续完善博客网站部署的朋友可以去搜索相关文献学习。

三、更换域名

相信所有做互联网开发的科技工作者都知道,如果拥有属于自己的网站一定得看起来很专业、很官方、很大气。 因此,有些科技工作者就想更换自己网站的域名,让自己的域名看起来官方标准。也还有另一个原因,因为Github毕竟是外国网站,国内用户访问相对较慢,因此,如果有国内的域名作为辅助会事半功倍。 事实上,我个人觉得只要可以搭建网站,即便是不换域名也没什么区别。 不过,既然我给大家写这个教程,我还是有必要说一下,毕竟有很多人还是愿意换域名的。 如果不想花钱买域名的,这一小节可以跳过。 16、购买域名+注册阿里网+实名认证 自行注册,如果你是在校大学生,包括硕士、博士购买域名都是有学生价优惠的,但是 一定要使用自己在学校注册的电子邮箱 ,因为阿里云官网数据库可以识别你的学生信息的学年期限。此外,注册以后一定要进行学生认证、实名认证。 5e168cd0845dc2cf3b94ebaeb9da0ab7.png 然后去买域名,域名的形式有很多,按照自己的需求进行设置域名名称和域名后缀。(实名认证最快是两天的时间) https://www.aliyun.com/

10f1650f294ed218a50c77cda40a6b10.png

d59b84ea235fa16938600b5d81aa7b18.png

17、在阿里云添加域名解析

cmd+ping你的http://github.io域名,得到一个IP

3738ed075ad5f2b8d886cbb802459be4.png

修改你的域名解析记录

添加两个A记录,用得到的IP,一个主机记录为:“www”,一个为“@”,

这样通过https://kangchou001.cn/就能访问到你的博客了

3cf1576328dc0731b545ebb89b9350b5.png

0ee22027f73484b404502bd3b4643e45.png

18、 填写绑定的域名 在你的本地文件下也就是 hexo—>你的博客(我的是KangChou)本地目录下 找到 文件夹 source  ,并在该文件目录下面新建一个文件 CNAME文件, 那么一定要注意创建的CNAME文件 没有任何扩展名 (切记)

75b4879d26d70fd480b54f8a630f3bf8.png

再一次使用部署三命令 hexo clean hexo g hexo d 完成以后, 进入Github设置 , 找到 Custom domain添加域名后保存即可

c488e46cfcfefc9c1b6e1d32c63f1098.png

19、刷新网页+更改域名成功

如果上面的17没有出错的话,那么你填完域名保存以后会出现下面的结果

6c3f22ded054d8ab1e672f53b5f06f3c.png

那么就是更改域名成功了,此时你只需要点击上图的域名就可以访问啦。

35d26f2cfa6ef7c394e237d5047db3d1.png

……到此完成了本博客的搭建……

d488e1e7f69ab69c7e1efbcbc07eed51.png

投稿--->展示你的才华

请发邮件到

kangsinx@yeah.net

标题注明【投稿】

告诉我们

你是谁,从哪来,投什么

我们会及时回复你

0f31d200b21fb45474ac84f1bcc2e851.png

点击左下角“查看我的个人博客

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值