Hexo从0到1——搭建属于自己的Blog

不想成为CEO的程序员,不是好菜鸟!

一、瞧瞧兵器

  • 博客框架:Hexo 3,这是一款能快速、简洁且高效的博客框架,支持Markdown编辑,自动渲染出漂亮的静态页面。

  • 前端主题:Next,效果参考http://zanelove.github.io

  • 域名购买:类似万网的平台都可以,你可以选购自己名字的域名,一年几十元左右,两杯咖啡的钱。

  • SSL:CloudFlare

二、抄起家伙

1、GitHub Pages

在不购买服务器的前提下,我们的网站需要挂在GitHub Pages上!

  1. 需要拥有一个GitHub账号

  2. 进入GitHub Pages,按照上面所说的步骤一步一步做,完成后就能在浏览器上打开像http://zanelove.github.io了。

    • 注意:

    第二步Git命令需做修改:

    命令修改前:

    这里写图片描述

    命令修改后:

    $ git clone git@github.com:username/username.github.io.git

至此,我们已经利用GitHub Pages搭建好了个人博客雏形了。下面要做的,就是个性化了。

2、安装Hexo博客框架

经过上面步骤,我们已经拥有了一个初步域名:http://username.github.io 和 一个免费网络空间了,下面我们需要把空白的博客丰富起来。

放心,不需要你手写一大堆html、css文件,也不用找jQuery来实现酷炫的页面效果。Hexo是一款博客框架,它会帮我们搭建。

  1. 安装Hexo

    1.1 前提:

    安装 Hexo 相当简单。然而在安装前,您必须检查电脑中是否已安装下列应用程序:

    如果您的电脑中已经安装上述必备程序,那么恭喜您!接下来只需要使用 npm 即可完成 Hexo 的安装。

    $ npm install -g hexo-cli

    1.2 注意:

    如何使用npm命令,你只需要在任意位置点击鼠标右键,选择Git bash即可!

    如果,你出现了一下的问题:如图

    这里写图片描述

    请您放心,这不是问题,这是正常的现象!到此为止,Git、Node.js和Hexo就都安装成功了!

  2. GitHub管理

    为了让自己未来的博客和代码处在git管理之下,我们要把刚刚在Github上博客项目拉到本地。首先,在本地创建文件夹,名字任意,此处设为zaneblog,进入该文件夹,把项目代码clone下来。

    $ git@github.com:ZaneLove/zanelove.github.io.git

    好了,此时会自动在zaneblog目录下创建子文件夹zanelove.github.io,那里就是我们博客的代码,以后的操作都在git的管理之下了,此时默认的branch为master。

  3. 初始化Hexo

    在目录下(我这是zaneblog/zanelove.github.io目录)执行以下指令(在该目录内点击鼠标右键,选择Git bash),Hexo 将会自动在目标文件夹建立网站所需要的所有文件。

    $ hexo init

    或者不在该目录下执行,而是任意地方执行该命令,但必须指定目录。

    $ hexo init

3、配置NexT主题

Hexo主题非常多,可以参考丰富多彩的Hexo主题,本文选Next为主题,样式参考我的博客

进入配置阶段,最好的文档还是NexT主题的官方文档,简单得不能再细致了。

下面我还是提几点注意:

  • 第三方评论系统。评论系统很重要,你可以与读者进行更多交流,配置也简单,建议采用DISQUS,更国际化一点,配置见此。另外,前期建议开启不登陆评论,即在Disqus的Comment Rule里允许Guest comment。

  • 创建留言板。熟悉page的创建与使用,参考这里

  • 给自己博客做SEO。有好的SEO便于搜索引擎索引你的网站,随着以后读者增多,他们可以更好搜索到你的网站。具体方法见此

4、专属域名

  1. 购买域名

    速速前往万网或相关域名购买网站,按自己名字挑选一个闪闪发光的个人域名吧!

  2. 域名解析_1

    以购买的域名wingjay.com为例,我们希望在访问这个域名时能自动进入Github Pages,所以我们要在万网建立一个CNAME纪录来帮我们做一个域名跳转:wingjay.com -> wingjay.github.io,www.wingjay.com -> wingjay.github.io。添加方法参考这里,添加后可以看到两条记录:

    这里写图片描述

    然后万网会在世界各地的DNS服务器上添加这两条记录,当用户访问wingjay.com时会自动去访问wingjay.github.io。

  3. 域名解析_2

    但是,此时并不能成功访问,因为Github Pages是有限制的,它不允许任意域名都跳转过来,而是只限制一个域名,而且这个域名必须声明在CNAME文件中。

    所以,我们需要添加一个CNAME文件到项目的master中才行,参考这里。读者可以参考本人的CNAME文件内容

    不过,对于Hexo 3,这里有一个坑要注意:大家应该还记得上文说的,master分支里的内容都是自动生成的,而且会完全覆盖之前的内容。如果我们直接创建一个新文件CNAME,填好域名。但会发现在下一次部署后这个文件就消失了。不用惊讶,因为hexo并不会自动生成CNAME文件,所以在部署时被覆盖删除了。

    所以,我们就需要这个CNAME工具hexo-generator-cname,这时会自动在public里生成一个CNAME文件,把你的域名加进去再部署一下吧!

  4. HTTP -> HTTPS

    HTTPS是安全版的HTTP协议,它在http协议与TCP之间加入SSL层,采用端口443,不仅会对传输数据加密,还会进行身份验证。当然个人博客并没有强制性要求采用该协议,这也只是本人的好奇而为。

    目前Github Pages已经支持https了,但是不支持自定义证书。不过我们可以利用CloudFlare来实现。具体实现可以参考这里

    说明:po主网站的https正处在申请中

5、总结一些Bug

  • 有童鞋反应右键菜单中没有git bash选项,可以进入开始菜单找到git bash,然后通过cd进入相应目录执行命令。

  • 在github部署完成之后,马上访问可能出现404错误,这是正常的,(最多)等待十分钟左右就可以访问了。如果还不行,那很可能是 github 发送给你的验证邮件你没有打开看,据多方反映,验证后就没问题了。

  • 如果在hexo d之后出现fatal: ‘username.github.io’ does not appear to be a git repository,一是检查 repo 的名字是否合乎规范、是否含有大写字母、config.yml 中的 deploy 配置是否正确,二是把 git bash 关掉,重新打开再执行命令。

  • 有的童鞋可能不是 IT 界的,或者对shell 命令不太了解。在要求输入密码时,你输入之后密码是不显示的,这是为了安全,并非是你没输上。

  • 出现乱码的,不要使用 windows 中的「记事本」打开并编辑文件,推荐使用 sublime text,很简单。如果已经在「记事本」中编辑过,需要使用 sublime text 转码为「utf8」。

  • 安装 hexo 时卡在那儿不动,很可能是网络不给力,能全局 break wall 就好了。

  • 遇到什么其他的问题,不妨删除.deploy 和db.json 再重新生成试一试。

  • 执行命令:npm install -g hexo,报错如下:

这里写图片描述

莫非是因为被墙了?换国内镜像源试试。

$ npm config set registry=”http://registry.cnpmjs.org”

然后再次执行npm install -g hexo,成功!

  • 执行命令:hexo d,报错如下:

这里写图片描述

执行命令:npm install hexo-deployer-git –save,再次执行hexo d,如果再次报错:

这里写图片描述

估计必须要在GitHub上配置SSH,然后才可以上传文件。

配置SSH:

1、设置Git的user.name和user.email

在第一次使用Git时,你需要告诉你的协同开发者,你是谁以及你的邮箱,在你提交的时候,Git需要这两个信息。具体通过以下命令设置:

$ git config –global user.name “voidking”

$ git config –global user.email “voidking@qq.com”

需要注意的是,这里的name随意,邮箱是你的联系邮箱,与github完全无关。

查看配置命令:

$ git config –list

2、生成SSH密钥

$ ssh-keygen -t rsa -C “voidking@qq.com”,按3个回车,密码为空。

这里写图片描述

在C:\Users\Administrator.ssh下,得到两个文件id_rsa和id_rsa.pub。需要注意的是,命令中的-C参数,后面跟的内容是注释。也就是说,内容随意,与github完全无关。

3、在GitHub上添加SSH密钥

打开id_rsa.pub,复制全文。https://github.com/settings/ssh ,Add SSH key,粘贴进去。

4、测试

$ ssh git@github.com,提示:

这里写图片描述

5、再次部署

hexo d,根据提示输入用户名和密码,等待一会儿便成功了!

6、免责声明

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
使用Github hexo搭建个人博客的过程可以分为以下几个步骤: 1. 准备工作:首先需要安装两个必要的软件,一个是Git用于版本控制,另一个是Node.js用于运行Hexo。可以在官网下载并安装这两个软件。 2. 注册Github账号以及建立仓库:在Github官网上注册一个账号,并创建一个仓库用于存储博客的代码和文件。 3. 本地配置安装Hexo:在本地电脑上配置Hexo环境。打开命令行界面,使用npm安装Hexo,然后初始化Hexo项目。 4. 设置ssh:为了能够将本地的代码推送到Github仓库中,需要设置SSH密钥。可以通过命令行生成SSH密钥,并将公钥添加到Github账号的设置中。 5. 上传测试博客:在本地编写博客的内容,然后使用Hexo命令生成静态页面,并将生成的页面推送到Github仓库中。 以上就是使用Github hexo搭建个人博客的基本步骤。具体的每个步骤可以参考中提供的教程。值得注意的是,如果想要让博客更加美观和炫酷,可以在网上下载一些好看的主题样式,并进行相应的配置。同时,还可以使用hexo-abbrlink等插件来增加博客的功能[2]。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* [Github+Hexo搭建个人博客(图文详解)](https://blog.csdn.net/weixin_45377770/article/details/105228938)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *3* [hexo+github搭建博客(超级详细版,精细入微)](https://blog.csdn.net/victoryxa/article/details/103733655)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值