Hexo-Github搭建博客

前言

有人说,作为一个真正的码农,不能没有自己的博客,在我看来,即使你不是码农,有一个自己的博客,作为自己的在线笔记本,做做学习记录,和大家分享自己学到的东西也是一件很酷的事情。

做的东西可以不值钱,但是它必须“酷” ——《选择重于一切》

其实使用第三方的博客服务也很方便,比如CSDN,博客园,简书等等,但是会受到平台的限制和各种各样的广告骚扰,自己购买域名和服务器搭建一个博客也是可以的,但是这样做的成本较高,对于我们这种白嫖大众来说显然不是一个好的选择。

这就有了第三种选择,也就是我想分享的用Hexo+Github搭建博客。

准备工作

1、要有git环境,guThub账号

GitHub账号:到GitHub官网注册一个账号就行了

Git环境:到git官网下载.exe文件,安装选项全部默认,在最后添加路径的时候选择Use Git from the Windows Command Prompt。

安装成功后再命令提示符中输入git --version验证是否安装成功:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-oxAjztCM-1625831854814)(https://s1.ax1x.com/2020/05/04/Y9lKUO.png?ynotemdtimestamp=1590542056216)]

2、要有node环境

Node.js中文网下载,安装选项全部默认,Next一路到底。安装好以后,按win+R,输入cmd打开命令提示符,node -vnpm -v,如果出现版本号,表示安装成功:

Y9l0Pg.png

3、npm换源

npm 是nodeJs环境下“安装”开源JS库的工具。由于网站服务器在国外,下载时会面临速度过慢或者下载异常,所以我们选择npm换源,其实就是把访问地址换成了淘宝的镜像,加快了访问速度,命令不变。

也是一行解决问题:

npm config set registry https://registry.npm.taobao.org

可以用npm config get registry来验证是否成功,如果返https://registry.npm.taobao.org,说明镜像配置成功,如下图:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-eOZhwHs5-1625831854820)(https://s1.ax1x.com/2020/05/04/Y9lcq0.png?ynotemdtimestamp=1590542056216)]

开始正式搭建博客

1、安装Hexo

可以先创建一个Blog的文件夹来存放博客文件,然后再这个文件夹下直接右键点击Git Bash Here,打开git的控制台窗口(之后所有的操作都在git控制台进行),输入npm install -g hexo-cli安装Hexo。这个过程中可能会有几个报错,不用管它们。

安装结束后输入hexo -v验证是否安装成功:

image-20200427151051197

2、初始化Hexo

输入hexo init初始化文件夹

hexo init Hexo

这个Hexo可以自己取名,然后接着输入 npm install安装必备的组件。

cd Hexo //进入这个Hexo文件夹
npm install

新建完成后,Hexo文件夹里面有:

  • node_modules: 依赖包
  • public:存放生成的页面
  • scaffolds:生成文章的一些模板
  • source:存放文章
  • themes:博客主题
  • _config.yml:博客的配置文件

然后输入hexo g生成静态网页,然后输入hexo s或者打开本地服务器,

hexo g
hexo server(或者简写为:hexo s)

image-20200427153715419

用浏览器打开http://localhost:4000/,就可以看到我们的博客了,效果如下:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Hm91rl8M-1625831854825)(https://s1.ax1x.com/2020/05/04/Y9t26g.png?ynotemdtimestamp=1590542056216)]

然后按 Ctrl+c关闭本地服务器:

image-20200427154118946

3、在GitHub创建个人仓库

打开https://github.com/,新建一个项目仓库 New repository

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5fTf59KI-1625831854827)(https://s1.ax1x.com/2020/05/04/Y9trkt.png?ynotemdtimestamp=1590542056216)]

然后输入自己的项目名字,项目名字一定要与你的用户名相同,后面加上.github.io后缀,README初始化也要勾选。如下图所示:image-20200427161517698

这里是因为我已经有一个同名的仓库了,所以仓库名会有警告,第一次创建的话是没有这个问题的。

4、生成ssh添加到GitHub

右键打开Git Bash Here,然后输入命令:

git config --global user.name "name"` `git config --global user.email "mail"

这里的name是指你GitHub用户名,mail是指你的GitHub邮箱,这样GitHub才知道你是不是对应的账户。

可以用两条语句验证一下你有没有输对:

git config user.name
git config user.email

然后创建ssh,一路回车

ssh-keygen -t rsa -C "mail"

然后他会告诉你生成了.ssh文件夹,在电脑中找到这个文件夹,或者在Git Bash Here中输入

cat ~/.ssh/id_rsa.pub

将输出的内容复制保存:

image-20200427163050177

打开GitHub,在头像下面打开settings:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hZOdx9O6-1625831854830)(https://s1.ax1x.com/2020/05/04/Y9tRXQ.png?ynotemdtimestamp=1590542056216)]

再点击SSH and GPG keys,新建一个ssh key,随便取一个名字,把id_rsa.pub里面的信息复制进去:image-20200427164010184

Git Bash Here输入ssh -T git@github.com进行验证,如果出现你的用户名,就表示成功了:

image-20200427164309193

5、将Hexo部署到GitHub

打开博客根目录下面的_config.yml文件,这个是博客的配置文件,修改最后一行的配置:

deploy:` `type: git` `repository: https://github.com/RJHhome/RJHhome.github.io.git` `branch: master

将repository修改为你自己的GitHub项目地址。

安装deploy-git,即部署的命令,这样才能用命令将Hexo部署到GitHub。

npm install hexo-deployer-git --save

然后

hexo clean(清除之前生成的东西)
hexo generate(生成静态文章,也可简写为:hexo g)
hexo deploy(部署文章,也可简写为:hexo d)

得到下图就说明部署成功了,等几分钟就可以在http://name.github.io这个网址看到你的博客了:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-y8ttsLRs-1625831854836)(https://s1.ax1x.com/2020/05/04/Y9t47n.png?ynotemdtimestamp=1590542056216)]

6、付费升级

现在你的博客网址是name.github.io,如果觉得这个网址不能体现你的个性,这就需要设置个人域名了,当然,这是需要付费的。

*这部分不是必须的,如果想白嫖到底,可以跳过这个步骤*

首先要购买一个个人域名,XX云都可以购买,因为我是在阿里云购买的,这里以阿里云为例:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lmHqZcFx-1625831854837)(https://s1.ax1x.com/2020/05/04/Y9tHpT.png?ynotemdtimestamp=1590542056216)]

实名认证并且备案之后(备案可能要花费十几天的时间),来到控制台,进入云解析DNS,进入你购买的域名添加两条解析记录,如图所示:[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2BicCHuf-1625831854839)(https://s1.ax1x.com/2020/05/04/Y9tb1U.png?ynotemdtimestamp=1590542056216)]

image-20200427204327975

然后回到GitHub,进入为博客建立的项目,点击setting:[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-yu132fks-1625831854841)(https://s1.ax1x.com/2020/05/04/Y9tot0.png?ynotemdtimestamp=1590542056216)]

直接下拉到GitHub Pages部分,找到Custom domain部分,填上域名,保存:image-20200427203829995

这时你的博客根目录应该会有一个CNAME文件。如果没有就需要自己来建立。

打开本地博客/source目录,新建CNAME文件,然后在里面写上域名,保存,注意这个CNAME文件没有后缀名,如图:

image-20200427204731629

最后运行 hexo cleanhexo ghexo d上传到GitHub。

*虽然很多人觉得 hexo clean是可有可无的。但我个人的建议是加上比较好,避免不必要的麻烦*

等待几分钟的时间,在浏览器输入你的域名,就可以看到你搭建的网站了。

7、发布文章

博客建立好了,自然就要开始写作了

首先在博客根目录右键Git Bash Here,安装一个扩展 npm i hexo-deployer-git

然后输入 hexo new post "article title",新建一篇文章。

接着打开D:\blog\Hexo\source\_posts目录,可以看到多了一个.md文件和一个文件夹,文件夹用来存放图片等数据,而.md文件就是新建立的文章文件。

可以使用vscode编写markdown文件,可以实时预览,也可以使用其他可以编辑markdown的软件,个人推荐Typora+有道云笔记结合,这样既能享受Typora一流的用户体验,又弥补了它不能云的缺陷。

编辑完以后,在 博客根目录的Git Bash Here中输入hexo cleanhexo g生成静态网页,hexo s可以开启本地服务器,预览文章效果,如果满意的话Ctrl+c关闭本地服务器,输入hexo d上传到GitHub,等待几分钟,就可以在博客主页上面看到发布的文章了。

尾声

1、Hexo补充

这只是搭建好了博客,对于一个博客来说,个性化自然是必不可少的,Hexo官网上面有很多主题,因为不同的主题更换以后想要做进一步的个性化,在很多细节上还是有很多区别的,所以就不再赘述,后面更换了主题想要再次自定义的可以搜一下Hexo相关主题的教程,切记,一定要搜对应主题的教程,不然bug可是会层出不穷的。

2、选择补充

一个是对于静态博客的选择,静态的博客生成器典型代表有:Hexo、Jekyll、Octopress、Hugo等,之所以选择Hexo是因为自己搭建博客,bug是无法避免的,而Hexo因为解决方案比较成熟,如果遇到什么问题在网上找解决方案也是比较方便的。

另一个是使用域名+服务器搭建博客,如果没有别的需求要用到云服务器,只是搭建博客的话,使用树莓派或者NanoPi开发板也是可以的,这就留给你们自己去玩喽!


个人博客地址:
www.renjiahong.cn

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值