GitHub+Hexo 搭建个人网站详细教程

花了几天搭建了个网站,先上链接,欢迎来访:Zevs的个人博客

​ 随着互联网浪潮的翻腾,国内外涌现出越来越多优秀的社交网站让用户分享信息更加便捷。然后,如果你是一个不甘寂寞的程序猿(媛),是否也想要搭建一个属于自己的个人网站,如果你曾经或者现在正有这样的想法,请跟随这篇文章发挥你的Geek精神,让你快速拥有自己的博客网站,写文章记录生活,享受这种从0到1的过程。

你见过的最棒的个人博客界面是什么样的?

现在市面上的博客很多,如CSDN,博客园,简书等平台,可以直接在上面发表,用户交互做的好,写的文章百度也能搜索的到。缺点是比较不自由,会受到平台的各种限制和恶心的广告。

而自己购买域名和服务器,搭建博客的成本实在是太高了,不光是说这些购买成本,单单是花力气去自己搭这么一个网站,还要定期的维护它,对于我们大多数人来说,实在是没有这样的精力和时间。

那么就有第三种选择,直接在 github page 平台上托管我们的博客。这样就可以安心的来写作,又不需要定期维护,而且hexo作为一个快速简洁的博客框架,用它来搭建博客真的非常容易。

Hexo简介


img

Hexo是一款基于Node.js的静态博客框架,依赖少易于安装使用,可以方便的生成静态网页托管在GitHub和Coding上,是搭建博客的首选框架。大家可以进入hexo官网进行详细查看,因为Hexo的创建者是台湾人,对中文的支持很友好,可以选择中文进行查看。

教程分三个部分:

  • 第一部分:hexo的初级搭建还有部署到github page上,以及个人域名的绑定。
  • 第二部分:hexo的基本配置,更换主题,实现多终端工作,以及在coding page部署实现国内外分流
  • 第三部分:hexo添加各种功能,包括搜索的SEO,阅读量统计,访问量统计和评论系统等。

第一部分

hexo的初级搭建还有部署到github page上,以及个人域名的绑定。

Hexo简介

Hexo是一款基于Node.js的静态博客框架,依赖少易于安装使用,可以方便的生成静态网页托管在GitHub和Coding上,是搭建博客的首选框架。大家可以进入hexo官网进行详细查看,因为Hexo的创建者是台湾人,对中文的支持很友好,可以选择中文进行查看。

Hexo搭建步骤

  1. 安装Git
  2. 安装Node.js
  3. 安装Hexo
  4. GitHub创建个人仓库
  5. 生成SSH添加到GitHub
  6. 将hexo部署到GitHub
  7. 设置个人域名
  8. 发布文章

1.安装Git

Git是目前世界上最先进的分布式版本控制系统,可以有效、高速的处理从很小到非常大的项目版本管理。也就是用来管理你的hexo博客文章,上传到GitHub的工具。Git非常强大,我觉得建议每个人都去了解一下。廖雪峰老师的Git教程写的非常好,大家可以了解一下。Git教程

windows:到git官网上下载,Download git,下载后会有一个Git Bash的命令行工具,以后就用这个工具来使用git。

2. 安装nodejs

Hexo是基于nodeJS编写的,所以需要安装一下nodeJs和里面的npm工具。

windows:nodejs选择LTS版本就行了。

安装完后,打开命令行。检查一下有没有安装成功

顺便说一下,windows在git安装完后,就可以直接使用git bash来敲命令行了,不用自带的cmd,cmd有点难用。

node -v
npm -v

3. 安装hexo

前面git和nodejs安装好后,就可以安装hexo了,你可以先创建一个文件夹blog,然后cd到这个文件夹下(或者在这个文件夹下直接右键git bash打开)。

输入命令

npm install -g hexo-cli

依旧用hexo -v查看一下版本,到这就全部安装完了。

接下来初始化一下hexo

hexo init myblog

这个myblog可以自己取什么名字都行,然后

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

新建完成后,指定文件夹目录下有:

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

打开hexo的服务,在浏览器输入localhost:4000就可以看到你生成的博客了。(使用ctrl+c可以把服务关掉。)

4. GitHub创建个人仓库

首先,你先要有一个GitHub账户,去注册一个吧。

(注:这里提示如果浏览器提示错误不支持等信息)

GitHub无法访问的错误,在hosts文件中加入下列IP,保存即可生效

windows下路径为:C:\Windows\System32\drivers\etc\hosts
Linux下路径:/etc/hosts

#github
192.30.253.113 github.com
192.30.253.113 github.com
192.30.253.118 gist.github.com
192.30.253.119 gist.github.com

登录到GitHub,如果没有GitHub帐号,使用你的邮箱注册GitHub帐号:Build software better, together 点击GitHub中的New repository创建新仓库,仓库名应该为:用户名.http://github.io 这个用户名使用你的GitHub帐号名称代替,这是固定写法,比如我的仓库名为:Zevs6.github.io

注册完登录后,在GitHub.com中看到一个New repository,新建仓库

创建一个和你用户名相同的仓库,后面加.github.io,只有这样,将来要部署到GitHub page的时候,才会被识别,也就是xxxx.github.io,其中xxx就是你注册GitHub的用户名。我这里是已经建过了。

点击create repository即可完成创建。(恭喜你离成功又近了一步)

5. 生成SSH添加到GitHub

回到你的git bash中,

输入一下命令,这里的yourname输入你的GitHub用户名,youremail输入你GitHub的邮箱。这样GitHub才能知道你是不是对应它的账户。

git config --global user.name "yourname"
git config --global user.email "youremail"

可以用以下两条,检查一下你有没有输对

git config user.name
git config user.email

然后创建SSH,一路回车

ssh-keygen -t rsa -C "youremail"

这个时候它会告诉你已经生成了.ssh的文件夹。在你的电脑中找到这个文件夹。

1.png

ssh,简单来讲,就是一个秘钥,其中,id_rsa是你这台电脑的私人秘钥,不能给别人看的,id_rsa.pub是公共秘钥,可以随便给别人看。把这个公钥放在GitHub上,这样当你链接GitHub自己的账户时,它就会根据公钥匹配你的私钥,当能够相互匹配时,才能够顺利的通过git上传你的文件到GitHub上。

2.png

将公钥添加到GitHub上

  • 详细教程请百度搜索
  • 点击用户头像->settings->SSH and GPG keys ->New SSH key
  • 将id_rsa.pub中的内容复制到key->文本框中,然后点击Add SSH key(添加SSH)按钮

3.png

4.png

5.png

Title为标题,任意填即可,将刚刚复制的id_rsa.pub内容粘贴进去,最后点击Add SSH key。
在Git Bash中检测GitHub公钥设置是否成功,输入 :

ssh -T git@github.com

6. 将hexo部署到GitHub

这一步,我们就可以将hexo和GitHub关联起来,也就是将hexo生成的文章部署到GitHub上,打开站点配置文件 _config.yml,翻到最后,修改为YourgithubName就是你的GitHub账户名称

deploy:
  type: git
  repo: https://github.com/YourgithubName/YourgithubName.github.io.git
  branch: master

用记事本打开

这个时候需要先安装deploy-git ,也就是部署的命令,这样你才能用命令部署到GitHub。

npm install hexo-deployer-git --save

然后输入

hexo clean
hexo generate
hexo deploy

其中 hexo clean清除了你之前生成的东西,也可以不加。
hexo generate 顾名思义,生成静态文章,可以用 hexo g缩写
hexo deploy 部署文章,可以用hexo d缩写

注意deploy时可能弹出对话框要你输入username和password。

最后恭喜您成功晋级!

  • 在浏览器中输入http://Zevs.github.io 就可以看到你的博客了,是不是很开心很兴奋啊,要控制住自己嘻嘻嘻嘻!
  • 清除gitbash中命令clear
  • 我们已部署成功http://yourname.github.io 这个网站看到你的博客了!!(yourname换成你的仓库名称哦!)

7. 设置个人域名

现在你的个人网站的地址是 yourname.github.io,如果觉得这个网址逼格不太够,这就需要你设置个人域名了。但是需要花钱。

注册一个阿里云账户,在阿里云上买一个域名,我买的是 zhsh666.xyz,各个后缀的价格不太一样,比如最广泛的.com就比较贵,看个人喜好咯。

你需要先去进行实名认证,然后在域名控制台中,看到你购买的域名。

点解析进去,添加解析。

包括添加三条解析记录,192.30.252.153是GitHub的地址,你也可以ping你的 Zevs6.github.io 的ip地址,填入进去。第三个记录类型是CNAME,CNAME的记录值是:你的用户名.http://github.io 这里千万别弄错了。

​ 第二步,登录GitHub,进入之前创建的仓库,点击settings,设置Custom domain,输入你的域名点击save保存。

​ 第三步,进入本地博客文件夹 ,进入blog/source目录下,创建一个记事本文件,输入你的域名,对,只要写进你自己的域名即可。如果带有www,那么以后访问的时候必须带有www完整的域名才可以访问,但如果不带有www,以后访问的时候带不带www都可以访问。所以建议,不要带有www。这里我还是写了www(不建议带有www):

保存,命名为CNAME ,注意保存成所有文件而不是txt文件

完成这三步,进入blog目录中,右键打开gitbash,依次输入:

hexo clean
hexo g
hexo d

过不了多久,再打开你的浏览器,输入你自己的域名,就可以看到搭建的网站啦!

接下来你就可以正式开始写文章了。(hexo n “博客名字”)

hexo new newpapername

然后在source/_post中打开markdown文件,就可以开始编辑了。当你写完的时候,再执行如下代码:

hexo clean
hexo g
hexo d

通过带有预览样式的Markdown编辑器实时预览书写的博文样式,也可以通过命令 hexo s –debug 在本地浏览器的localhost:4000 预览博文效果。写好博文并且样式无误后,通过hexo g、hexo d 生成、部署网页。随后可以在浏览器中输入域名浏览。

到这里感觉小伙伴的观看,相信你已经完成了自己的个人博客!欢迎在下方评论区留言哦!


一个好奇的人