通过GitHub和Hexo来搭建自己的个人博客

最近没有更新简书,Kotlin的文章就暂时告一段落了。。。

搭建个人博客在我大学的时候建过一次,那时候是用新浪云和Wordpress搭建的,那时候新浪云服务是免费的,后来变收费,博客就没有了。之前便想着再弄个自己的博客出来,这几天就着手弄了起来。
看到很多人的个人博客是用github来当服务器,然后通过Hexo来搭建博客框架,那么新建个人博客也用这两个来搭建吧。本文同步更新于旺仔的个人博客,访问可能有点慢,多刷新几次。

GitHub主页

创建仓库

想必大家都有自己的Github账号吧,没有的可以到GitHub官网注册账号,注册完后,我们来下一步,在我们的GitHub上面右上角的New repository来创建一个仓库。

仓库名必须遵守相应格式:your_username.github.io,这样子在访问主页的时候直接用your_username.github.io就能访问。

我这里因为是已经创建了一个仓库了,所以会有提示,然后点Create repository确定创建仓库。

设置Pages

接下来我们来设置我们的GitHub Pages,打开我们刚刚创建的仓库,然后创建一个主页index.html


然后在里面输入代码

<!DOCTYPE html>
<html>
<body>
<h1>Hello World</h1>
<p>I'm hosted with GitHub Pages.</p>
</body>
</html>

然后保存

接下来我们打开GitHub Pages的设置,点开Settings

移到下面的GitHub Pages

可以看出,我现在能用https://jowanxu.github.io/来访问我的github主页了,这里我是用我的一个新创建的号来演示的。

通过上面的配置,我们能通过your_username.github.io来访问我们的博客主页了。

Clone仓库

创建完仓库后(可直接安装Git,忽略Clone),我们需要将代码下载到本地,这里就需要用到Git了。

安装Git

  • Windows:下载并安装 gitmsysGit
  • Mac:使用 Homebrew, MacPortsbrew install git;或下载 安装程序 安装。
  • Linux (Ubuntu, Debian):sudo apt-get install git-core
  • Linux (Fedora, Red Hat, CentOS):sudo yum install git-core

安装完Git后,在命令行输入git --version,判断是否成功

如果出现不存在命令,那么就添加Git目录下bin目录的环境变量,添加完后要重新打开命令行,然后在判断是否成功。


这里我使用msysGit的Bash窗口来进行操作的。

配置Git参数

安装完Git后,需要配置本地Git的参数,右键一个文件夹,然后选择Git Bash,打开Bash窗口,然后

然后我们来设置Git的姓名和邮箱:

git config --global user.name "Firstname Lastname"
git config --global user.email "your_email@example.com"

配置完成后,会在~/.gitconfig中生成相应的本地Git配置信息。

添加SSH Key

GitHub上连接已有仓库是验证是通过SSH的公开密钥进行认证的,在这里我们来生成我们自己的SSH Key,输入下面的命令,输入完后回车,会让你输入密钥的文件名和密码,系统会在/Users/your_user_directory/.ssh/x下生成私有密钥id_rsa和公开密钥id_rsa.pub

ssh-keygen -t rsa -C "your_email@example.com"

我们可以看到生成的文件


id_rsa文件内容是这样的,由-----BEGIN RSA PRIVATE KEY-----开始,和-----END RSA PRIVATE KEY-----结束

id_rsa.pub的内容是这样的,由ssh-rsa开头的

然后我们在GitHub上面添加本地SSH密钥信息,在右上角选择Settings进入设置界面

然后选中SSH and GPG keys,点击New SSH key

Title可以随便填,打开公开密钥id_rsa.pub,复制里面的内容到Key里面,填完密钥后,点Add SSH key就OK了。

ssh-agent

我们要通过ssh-agent来添加刚刚创建的密钥,来登陆GitHub,ssh-agent是一种控制用来保存公钥身份验证所使用的私钥的程序,通过输入下面两条命令添加,第一条命令是反引号`,不是单引号'

eval `ssh-agent -s`
ssh-add hexo_rsa(上面创建的密钥文件名)

然后我们登陆一下GitHub,看是否登陆成功

ssh -T git@github.com

登陆成功~~~


Hexo框架

Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown(或其他渲染引擎)解析文章,在几秒内,即可利用靓丽的主题生成静态网页。
安装Hexo需要用到npm,而安装npm则需要安装Node.jsNode.js可以在官网下载,下载完成直接安装,然后通过命令行来判断是否安装完成

npm设置淘宝NPM镜像,来提高下载速度

npm install -g cnpm --registry=https://registry.npm.taobao.org

设置完镜像后,就可以安装Hexo了

npm install -g hexo-cli

然后用命令行查看是否安装成功

hexo -version

接下来我们需要创建一个文件夹,文件名随意,也可以在已存在的文件夹里面,但是里面必须是什么文件都没有,然后进入到文件夹里面,来初始化Hexo

hexo init

如果没有出现错误,那么我们的Hexo博客框架就安装完成了,生成的目录内容如下,其中_config.yml是网站的配置信息,我们大部分的参数都是在这个文件里面修改

接下来我们来启动Hexo服务

hexo s

也可以开启debug模式,debug模式可以实时更新,方便查看修改后的结果。

hexo s --debug

然后我们在浏览器上输入localhost:4000来打开Hexo

Hexo常用命令

new

如果我们要创建一篇文章的话,我们可以通过new命令来创建,也可以直接在博客目录下面的\source\_posts里面创建markdown文件。

hexo new [layout] <title>

如果标题包含空格的话,请使用引号括起来。

generate

generate命令是用来生成静态文件的,在我们发布到GitHub的仓库的时候,需要先生成,才能上传。

hexo generate

可以简写为

hexo g
server

开启服务器,网址为http://localhost:4000

hexo server

同样可以简写为

hexo s
deploy

部署网址,上传到我们的GitHub的仓库上面。

hexo deploy

同样可以简写为

hexo d
clean

清除缓存文件 (db.json) 和已生成的静态文件 (public)。在某些情况(尤其是更换主题后),如果对站点的更改无论如何也不生效,运行该命令。

hexo clean

Hexo配置Git

我们要上传GitHub必须要先设置一些内容,打开博客目录下面的配置文件_config.yml,找到deploy,然后在type那里输入git,在repo那里输入我们的仓库地址,在branch那里输入mastermessage为上传日志,可不写

一般我们上传到GitHub的时候我们用这条命令来执行,生成静态文件并且部署到服务器。

hexo g -d

上传完成之后,我们可以在博客文件夹里面的.deploy_git目录管理我们的仓库文件,那么我们上面就不需要Clone仓库下来了。

下一步我们来通过域名解析GitHub主页地址来访问个人博客。

域名

在本地搭建完个人博客后,我们就要将代码上传到我们的GitHub仓库上面去,然后我们就可以通过your_username.github.io来访问我们的博客主页了,但是我们如果要修改GitHub的域名的话是改不了的,只有我们自己去购买域名,然后通过域名解析将我们的GitHub主页的域名解析到我们自己买的域名上面,这样我们就可以通过我们自定义的域名来访问我们的博客了。

购买域名

购买域名可以在域名提供商购买一个价格合适的个人域名,在这里我用阿里云的上注册购买,阿里云直接用支付宝登陆就行,而且还有部分域名可以1元首年购买的优惠,打开阿里云域名注册官网,然后输入自己想要的域名,当然你也可以选中1元的域名,输入完点查询

然后选择自己想要的域名,加入清单,然后支付


支付完成后我们点击右上角的控制台,进入我们的管理界面,然后打开域名与网站(万网),里面就能看到我们刚刚购买的域名了

绑定域名

购买完域名后,我们需要在博客目录下的\source目录下建立CNAME文件(没有后缀名、全部大写),写入你所购买的域名地址。这里我写入的www.jowanxu.top

然后我们来绑定我们的GitHub主页,继续在阿里云管理控制台,然后选择云解析DNS选项界面

然后点击我们的域名,进入解析设置


默认会有两个解析,一个是CHAME,一个是ACHAME里面输入我们的GitHub主页your_username.github.ioA那里输入我们GitHub主页的IP,如何获取主页IP呢,通过命令行的ping来获取


然后保存就OK啦。


GitHub设置

上面弄完之后,我们还需要在我们GitHub仓库上面修改我们的source,才能搞定,打开我们的仓库,然后点击Settings

然后找到GitHub Pages,将source改为master branch,然后保存

并且填入我们自己购买的域名地址,然后保存


然后我们就能收到创建成功的邮件了。


最后我们的GitHub Pagers里面是这样子的,证明成功了

然后我们就能通过自己购买的域名来直接访问到我们放在GitHub上面的个人博客了,如我的博客


如果你觉得默认自带的主题不好看,可以自己去捣鼓其他的主题,Hexo支持特别多的主题,可以在这个网址上选择自己喜欢的,我这里用到的主题是NexT主题。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 162,408评论 4 371
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 68,690评论 2 307
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 112,036评论 0 255
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 44,726评论 0 221
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 53,123评论 3 296
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 41,037评论 1 225
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 32,178评论 2 318
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,964评论 0 213
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,703评论 1 250
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,863评论 2 254
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,333评论 1 265
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,658评论 3 263
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,374评论 3 244
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,195评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,988评论 0 201
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 36,167评论 2 285
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,970评论 2 279