最全的教程用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 [email protected]

如图所示:

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

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 [email protected]

回车就OK了。

将本地文件部署到GitHub

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

$ git config --global user.name "your name"     #仓库的名字
$ git config --global user.email "[email protected]"     #你的邮箱

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

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

  deploy:
          type: git
          repo: [email protected]: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主题使用文档


你可能感兴趣的:(最全的教程用Hexo+GitHub搭建个人博客)