利用GitHub和HEXO免费搭建个人博客

CondorHero
1,776 阅读11分钟

写在前面 昨天为了搭建博客，硬是愣愣的搞到两点多钟，来来回回装了十几遍还没弄好。今天终于完成了。趁着现在手熟马上写一下博客，强化一下记忆。

前言 前天在逛 虫部落社区 时看到一个帖子。免服务器如何建立个性简约博客 因为好奇建博客还能免费，就点进去看了一下。别说思路还真行的通，更牛的是作者还是个高中生。厉害了。不过他文章写得太简单，估计很少有人能照他写的做出来。

一、准备

这里讲一下搭建博客的好处: 我为什么写博客 一直没动手写

  • 网上有不少的写作平台，程序员有各种博客站点。业余的也有「知乎」「简书」等平台。不过他们的板式太不够个性化了。身为 90后的你 00后的我怎么能容忍。
  • 拥有自己命名的博客，里面什么内容都是自己决定。写个人随笔，学习心得笔记等，最重要的是足够 酷。

下面简单梳理搭建博客的主要步骤：

  1. 安装 node 和 git 软件
  2. 安装 Hexo 配置 Hexo
  3. 注册 GitHub 并创建 库 且生成 GitHub Pages
  4. 配置SSH秘钥
  5. 本地的Hexo文件更新到Github的库中
  6. 新建第一个博客

相关名词解释： **Hexo：**一种常用的博客框架，有了它建立博客非常简单。你可以认为它是就是一种博客模板,若想详细了解Hexo的使用，移步 Hexo官方网站 。其作用相当于（以下「相当于」这三个字后面加粗的内容是给有基础的小伙伴看得，不理解的可以跳过不影响阅读）建博客的WordPress。

**Github：**一个全世界程序猿聚集的知名网站。免费的远程仓库和开源协作社区。我们需要利用网站里的Github Pages功能来托管需发布到网上的博客的相关文件和代码。相当于阿里云腾讯云提供 域名 服务器 提的供商

Git： 一种版本控制系统。我们在自己的本地电脑写博客，如何把博客同步到Github，然后发布到网上去？就需要用这个软件去写几行代码然后就能搞定，后期用的最多的就是它。相当于电脑的操作系统。

Node.js： 提供JavaScript的开发环境，安装好以后就不用跟它再打交道，所以不用太关注它。相当于我们的电脑吧。

把以上步骤熟读至背诵，因为操作过程出现的问题多半是不熟导致的。OK 了解大致步骤我们一起来操作。

操作平台:Win7 64位 其他系统步骤类似

二、安装 node 和 git 软件

1.安装node.js 进入 Nodejs 官网下载适配自己系统的版本 官网：nodejs.org/en/download… 除了改一下安装路径，其他不懂一路默认就行。

2. 安装git 进入官网 Git 选择适配版本下载 官网：git-scm.com/download/wi… 除了改一下安装路径，其他不懂一路默认就行。 PS：git官网下可能下载不了文件。原因：只能讲请遵守社会主义法律法规。这里送你个下载方法：访问链接： github.com/waylau/git-…
如果你会翻墙请忽略此方法。

3. 查看安装效果 检查以上两个软件是否安装成功。技巧 cmd制作 电脑桌面最左下方>右击>在搜索程序和文件里输入 cmd 回车 >分别输入以下内容

git version
node -v
npm -v

输入一次回车一次。将会返回版本号(version)。未返回请重新安装。 图示如下：

三个版本号
至此，软件安装步骤完成。

三、安装 Hexo 配置 Hexo

  • 安装Hexo
  1. 安装npm淘宝源 打开cmd下运行 npm install -g cnpm --registry=https://registry.npm.taobao.org 安装淘宝源只是为了让接下来的下载地址更换为国内下载链接，试了下载速度和安不安没啥区别，除非你下的东西特别多才能体现出来速度的差别。

下图里面出现WARN警告，没事，只要下面有版本号出现，就安装成功了。

安装淘宝源

  1. 下载Hexo及其插件 在桌面右击，选择Git Bash Here
    cnpm install hexo-cli -g 回车 自动下载hexo安装包 cnpm install hexo-deployer-git --save 回车 自动下载支持git的插件包 ps:如果你没安装第一步的淘宝源请把所有的cnpm换成npm，另外如果你重装系统或者因为别的原因卸载了git文件，但本地的文件还在那就只需要执行上两行代码，即可本地部署查看。
    安装图示
  2. 解压安装配置hexo 首先建立一个不在C盘的文件夹，我演示是建在D盘里 D:/blog 在此目录下右击鼠标点击Git Bash Here 进入Git命令框，执行下列操作： hexo init 回车 hexo的初始化 相当于解压

解压步骤
cnpm install 回车 hexo的安装

安装步骤

hexo generate #回车 构建静态文件 hexo server #回车 启动server 服务 其中这两行代码可以合成一行,如下： hexo s -g

生成网页
启动服务后访问http://localhost:4000/，即可查看本地服务器效果

最后效果图

说明：如果提示错误 ctr+c 停止本地服务器生成的网页也就无法访问了。 hexo server -p 4000

到此本地服务器设置完成。

四、注册 GitHub 并创建 库 且生成 GitHub Pages

1. 第一步：注册或者登陆GIthub账户

已有账号可跳过到第二步 Guthub官网：github.com/ 点击sign in

图一
图二
完成是可能会有邮件验证。打开输入账号密码验证下就行了。

第二步：创建项目代码库(reposistory)

1.登陆后点击New repository 

创建库
2.配置仓库信息如下图所示：  [图片上传失败...(image-2523a0-1548604607943)]

注意：仓库名字的格式为 username(用户名).github.io 与你刚刚注册的最好一样。最下面的 initialize请打上勾。点击 create repository 创建。

3. 第三步开启gh-pages功能

点击github主页点击头像下面的 Your profile,找到新建立的username.github.io文件打开，点击settings，往下拉动鼠标到GitHub Pages。点击选择choose a theme，随便选择一个，（之后我们要更改这些丑陋的模板），然后select theme保存就行了。

设置setting
select scheme
ps:第三步可以不做，因为下面链接本地和GitHub页面时，会覆盖掉。写在这里熟悉一下，顺便练练手。上面注册账号很像买域名，创建库就是买服务器，生成静态页面就是两者的绑定。 至此，服务器也完成了配置。

五、配置SSH密钥

到上面我们已经完成了一大半了。现在让我们电脑上生成的页面放GitHub上，上网输入网址就能看到我们的网址页面内容了。但首先的让它们认识一下。我称之为「握手」，也就是这里的「秘钥」，让它们打开彼此的大门。

第一步 看看是否存在SSH密钥(keys)

检查本机用户home目录下是否存在.ssh目录，防止万一两人提前认识，我们不是瞎忙活了吗！桌面右击，打开Git Bash,并运行: cd ~/.ssh 返回：bash: d:command ont found 这种简单的英语不用解释了吧。没有，紧接着我们创建秘钥。

第二步 创建一对新的SSH密钥(keys)

继续输入下面代码： ssh-keygen -t rsa -C "your_email@example.com" 这将按照你提供的邮箱地址，创建一对密，「your_email@example.com」里面是你的电子邮件地址。 连续回车三次，你会看到如下代码

Generating public/private rsa key pair.
Enter file in which to save the key (/c/Users/you/.ssh/id_rsa):
Enter passphrase (empty for no passphrase): 
Enter same passphrase again:

第一行问你是否创建公钥；第二行文件存储位置，不手动输入，默认方式存储；第三行输入密码；第四行密码确认。我们并没输入，因为没密码才是最安全的。其实是因为没用。哈哈哈。

效果图
这里还要复制一下秘钥，留着第三步粘贴用，两种方法：

  • 使用物理路径 根据上图 /c/Users/you/.ssh/id_rsa路径找到文件使用文本编辑器打开复制。
  • 代码方法 运行如下命令，会将公钥的内容复制到系统粘贴板(clipboard)中。 clip < ~/.ssh/id_rsa.pub 第三步 GitHub写入密钥(keys)

打开Github官网登录后点击头像，打开Settings设置

setting
New SSh keys
这里面title 是自己随便起的名字， key里面粘贴第二步复制的秘钥，然后点击添加
ADD keys
第四步 测试是否添加秘钥成功 继续写入代码： ssh -T git@github.com 回车后根据提示输入yes后会得到以下信息，在最后一行看到「Hi username」username你的用户名，说明ssh配置成功

The authenticity of host 'github.com (192.30.255.113)' can't be established.
RSA key fingerprint is SHA256:nThbg6kXUpJWGl7E1IGOCspRomTxdCARLviKw6E5SY8.
Are you sure you want to continue connecting (yes/no)? yes
Warning: Permanently added 'github.com,192.30.255.113' (RSA) to the list of known hosts.
Hi condorheroblog! You've successfully authenticated, but GitHub does not provide shell access.

第五步 设置用户信息 现在你已经可以通过SSH链接到GitHub了，还有一些个人信息需要完善的。 Git会根据用户的名字和邮箱来记录提交。GitHub也是用这些信息来做权限的处理，输入下面的代码进行个人信息的设置，把名称和邮箱替换成你自己的，名字根据自己的喜好自己取，而不是GitHub的昵称。分别输入回车（如果想重新设置 用户名和邮箱，同样的方法）：

git config --global user.name "username"//用户名
git config --global user.email  "youremail@163.com"//填写自己的邮箱

电脑和 GitHub 握手成功。继续下一个握手。

补充如何查看自己的 user.name 和 user.email git config user.name git config user.email

六、本地的Hexo文件更新到Github的库中

  1. 登陆GitHub打开自己的项目 username.github.io
  2. 复制Github项目仓库地址，即点击clone or download 绿色按钮，然后复制文本框里的url地址
    image.png
  3. 修改hexo配置文件 _config.yml 在我们创建D盘里的blog目录下找到_config.yml文件，然后右击用文本编辑器进行修改，打开直接滑到最后，进行替换或手写都行。其中repo后跟的是Github里复制的地址。
deploy:
  type: git
  repo: https://github.com/condorheroblog/condorheroblog.github.io.git
  branch: master

**注意：repo冒号后面一定要是英文的一个空格，**我就在这出错了。 4. 将hexo部署到Github 在本地blog目录下右击打开Git Bash，输入一下命令： hexo g -d 命令执行后，会提示输入Github的账号和密码，输入登陆后，blog项目会自动部署到Github上。

logo in
假如这时候，报错 ERROR Deployer not found: git，那么就是你的deployer没有安装成功，你需要执行如下命令再安装一次： cnpm install hexo-deployer-git --save 这样，你再执行hexo g -d，你的博客就部署到Github上了。 5. 访问博客 以上操作完成后，我们的博客就会部署到Github上了，我们只需要输入username.github.io就可以访问自己的博客了。
这个页面可以通过网址访问表示成功

七、新建第一个博客

接下来你可以自己新建一个文档来写下你的第一篇博客并在网页上测试。

同样在根目录D:\blog中右击git Bash here运行下面命令：

hexo new 第一篇博客 注：第一篇博客是名称可以随便修改 然后打开D:\blog\source_posts文件夹，就可以看到一个第一篇博客.md的文件。也可以直接在D:\blog\source_posts中新建一个md文件，我就是这么做的。用支持markdown语法的软件打开该文件进行编辑即可。 执行以下命令即可在我们的站点看到新的文章。 hexo clean #清除缓存 hexo g #生成文件夹 hexo d#部署 # hexo d与hexo g可合并为 hexo d -g 更多hexo命令参考hexo官方文档 然后，在网址中输入username.github.io即可看到你的博客上，出现第一篇博客这篇新的文章。

至此，你的个人博客初步搭建过程就完成了。

以上就是建博客的基本流程，基本上装个十几二十遍就熟了。下次写高级篇，进行博客美化。

时间：2019.01.30 23:51

avatar
文章
阅读
粉丝