最全的教程用Hexo+GitHub搭建个人博客

前言

思来想去,还是决定记录下我搭建的这个Blog的所有流程,这也算是我的处子作啦。首先要对Hexo表示感谢。我是Windows的系统,
所以本文讲的都是在本系统中是如何搭建的。即将毕业的我,突然感觉该需要一个东西来记录下我的所学所想。大概拖拖拉拉的用了好多天才最后搭建好,主要是提高下自己的功力。

下面我将分步详细介绍如何用Hexo和GitHubPages来搭建Blog。个人能力有限,以下流程有什么不懂的或者有好的知识与我分享欢迎联系我,大家共同进步。

What is Hexo

Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown(或其他渲染引擎)解析文章,在几秒内,即可利用靓丽的主题
生成静态网页。出自台湾大学生 tommy351 之手。是一个基于Node.js的静态博客程序。另外还有一个好处:使用 Hexo + GitHub 搭建博客
不需要购买域名和服务器,由 Github 提供域名和网站页面空间。支持多种框架主题,我选择的是Next主题,简约。

What is GitHub

GitHub 是一个面向开源及私有 软件项目的托管平台,因为只支持 Git 作为唯一的版本库格式进行托管。有足够的免费空间(1G),
自己管理资料,保存可靠。2018年10月19日,欧盟正式无条件批准了微软以75亿美元收购GitHub。


搭建前准备工作

  1. Hexo官方文档  (具体对hexo有什么问题可以查看文档)
  2. Git  (点进去可直接下载最新版本,具体的安装流程
  3. Node.js  (选个最新的下载就好,具体安装流程
  4. Next主题官网  (一些配置讲解的还是比较详细)
  5. 其他的一些主题可供参考  (根据自己的喜好风格,选择自己的主题)
  6. Notepad++(我用的是这个来编写Markdown文章的,如果文章出现乱码,可以用记事本打开另存为,然后选择UTF-8编码就好了)

开始搭建

说了那么多,准备工作也可以了,现在撸起袖子干吧!


安装环境依赖(Git and Node.js)

首先把前面说的Git和Node.js安装到电脑上(Windows系统),教程也有,对于聪明的你来说,不会难倒你。这是我们搭建博客基层的软件。以下所有的命令输入都是在Git软件里面进行的。


安装Hexo

在你安装好Git软件后,你可以在电脑空白地方或者桌面上右击鼠标,就会看到Git GUI Here和Git Bash Here,然后在你想把博客源文件
放的电脑哪个位置,在里面创建个文件夹用于保存Hexo生成的博客内容(文件夹名可为myblog)。
然后进入该文件夹,空白位置右击,然后点击Git Bash Here ,在里面输入:

npm install -g hexo-cli 

接着输入hexo -v然后输出以下内容就表示安装成功了(结果有可能不一样因为版本问题,但不影响使用)

$ hexo -v
hexo: 3.7.1
hexo-cli: 1.1.0
os: Windows_NT 10.0.10240 win32 x64
http_parser: 2.7.0
node: 7.0.0
v8: 5.4.500.36
uv: 1.9.1
zlib: 1.2.8
ares: 1.10.1-DEV
icu: 57.1
modules: 51
openssl: 1.0.2j

如果没有报错,就表示安装成功了。接下来继续输入:

hexo init  # 初始化组件

回车后npm就会自动安装博客所需的组件了,你要做的就是等待,等全部安装完就可以了。这时你就看到文件夹里会出现以下目录结构:

├── _config.yml
├── package.json
├── scaffolds
├── source
|   ├── _drafts
|   └── _posts
└── themes

验证以下hexo是否安装成功,还是在这个文件夹里右击找到Git Bash Here在里面输入命令

hexo g

等待加载完然后在输入命令

hexo s

出现这种样式,就启动成功了

INFO  Start processing
INFO  Hexo is running at http://localhost:4000 . Press Ctrl+C to stop.

然后打开你的浏览器,在网址栏里输入http://localhost:4000(默认端口为4000)。就会看到博客的原始状态,也就证明安装成功了如下图所示:


是不能访问。原因是:那是你的电脑端口被占用了,hexo默认的端口是4000,你应该换个端口运行,可换成hexo s -p 5000就可以访问了。
运行成功后,就在刚刚的Git Bash Here对话框中按键盘上的Ctrl+c停止服务,浏览器就不能浏览了。到此整个hexo搭建的博客结束了。此时感觉自己小有成就感。


部署到GitHub

首先你需要创建一个Github:https://github.com/账号。在你注册时,一定要记住你使用的注册的邮箱,GitHub大多数都是通过邮箱发送消息的。

申请成功后,会有邮箱通知,验证下就可以了。

创建代码仓库

这时用我们自己的GitHub用户名建立仓库,http://username.github.io这样的用户或访问站点,每个用户名只能建立一个。
首先,在保证登录的情况下,我们点击右上角的+号,点击New repository,新建一个仓库

进入后,在Repositoty name输入框里填写自己的用户名.github.io。例如我的用户名为xiayunhu,则填写xiayunhu.github.io

随后选择Setting进入设置,找到Github Pages如下:

然后我们需要任意选择一个主题,点击Choose a theme,然后选择好后,页面会跳转到仓库里如图所示:

此时你再打开Setting,我们会看到你开启了GitHub Pages之后得到的域名如下:

现在你可以使用https://UserName.github.io,访问自己的博客网站了。关于更多Github的使用和介绍,大家可以去菜鸟教程上或者百度自行了解。

配置SSH

本地博客和Github都做好了,接下来我们如何将本地Git项目和Github连接起来?就是用SSH。还是在博客文件夹里右击打开Git Bash Here输入以下命令

ssh -T git@github.com

如图所示:

输入命令回车,然后你会看到这样的反馈

The authenticity of host 'github.com (207.97.227.239)' can't be established. RSA key fingerprint is 16:27:ac:a5:76:28:2d:36:63:1b:56:4d:eb:df:a6:48. Are you sure you want to continue connecting (yes/no)?

直接在后面输入yes再回车,看到下面的图的结果,就证明配置成功了。

注意,问题来了哦,当你输入yes后,有可能会提示如下信息

因为大多数的情况是github账号没有添加ssh公钥信息,这是打开GitHub网站,在确保登录的情况下,找到网站的右上角找到Settings

点进去,在左边找到SSH and GPG keys后,点进去右上角找到New SSH key点进去后如下图所示:

如图片中的key提示,我们要原样复制~/.ssh/id_rsa.pub文件的内容。如果没有该文件在Git Bash Here里输入以下命令

ssh-keygen -t rsa

然后一直回车结束,然后在C盘的C:\Users\Administrator.ssh里找到id_rsa.pub文件,用记事本打开,Ctrl+A -> Ctrl+CNew SSH key里面Ctrl+V粘贴,点击Add SSh key保存就可以了。最后再输入

ssh -T git@github.com

回车就OK了。

将本地文件部署到GitHub

在把本地仓库传到github上去之前,还需要设置username和email,因为github每次commit都会记录他们。

$ git config --global user.name "your name"     #仓库的名字
$ git config --global user.email "your_email@youremail.com"     #你的邮箱

设置完后,我们每次使用hexo d命令时就不用每次都输入密码了。
接下来我们就要修改hexo中的_config.yml文件(也就是站点配置文件)如下图所示:

找到文件里面的deploy标签,改成如下列所示,Ctrl+S保存,此时要注意,冒号后边都要加上一个空格,否则会报错的。

  deploy:
          type: git
          repo: git@github.com:xiayunhu/xiayunhu.github.io.git
          branch: master

然后在文件夹里运行Git Bash Here输入以下命令

     npm install hexo-deployer-git --save

再依次输入

    hexo clean
    hexo generate  #可简写hexo g
    hexo deploy    #可简写hexo d

出现以下提示

那么恭喜你,个人博客已经部署到GitHub上了。你可以去你的GitHub仓库查看是否有信息,稍微等待一下就可以访问http://your_user_name.github.io(your_user_name也就是你的仓库名字),此时你就可以看到你的个人博客了。


将自己的域名和GitHub Pages的空间绑定

我们现在可以通过本地浏览或者GitHub Pages提供的域名访问了,但总感觉不是自己的东西,于是我就自己申请了一个域名,来浏览自己的博客,这样在介绍自己的博客的时候,明显的高大尚许多。我是在腾讯云的网站上申请的,需要备案(比较麻烦,需要半个多月),你也可以在阿里云上申请或者其他的地方购买,应该不腾讯云快,我介绍的是腾讯云上申请的域名。

申请域名

此时要注意的是:不需要购买服务器

进入到腾讯云的官网,在产品一栏,找到域名注册,这样就可以注册了,不同的域名价格不一,自行找个好记得就好。

具体备案,根据里面的流程自行备案。等备案好,然后对域名进行解析:

点击添加解析,记录类型选A或CNAME,A记录的记录值就是ip地址,github(官方文档)提供了两个IP地址,192.30.252.153和192.30.252.154,这两个IP地址为github的服务器地址,两个都要填上,解析记录设置两个www和@,线路就默认就行了,CNAME记录值填你的github博客网址。如我的是xiayunhu.github.io

这些全部设置完成后,此时你并不能要申请的域名访问你的博客。接着你需要做的是在hexo根目录的source文件夹里创建CNAME文件,不带任何后缀,里面添加你的域名信息,如:www.xyhwh.com
注意搭建完成访问出现404 :你认为配置没有问题,那么可能只是你的浏览器在捣鬼,可尝试清除浏览器缓存再访问或者换个浏览器访问。应该就解决了。

GitHub Pages里配置域名

进入GitHub,然后找到Settings如下图所示:

然后往下找,找到GitHub Pages一栏如图所示:

这样整个用Hexo+GitHub搭建的博客到现在就搭建完成了。


后记

以上所述,就是搭上建博客的全部流程,如果你有什么问题或者文章有错的地方,欢迎在下面留言。具体的主题配置,将会在下节详细介绍。


参考的资料:

Hexo中文文档
Next主题使用文档


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

推荐阅读更多精彩内容