1.创建github个人仓库

github账户你值得拥有!

[Build software better, together]

https://github.com/

图标

创建一个自己的github账户,用户名设置清楚与仓库建立有关。

在个人主页点击Repositories,然后new一个

29$V79H2Y_AZXO8LW6XRGNK.png

注意,仓库名格式:用户名.github.io

2.环境配置

1.了解Hexo

Hexo是高效的静态站点生成框架,她基于Node.js。 通过 Hexo 你可以轻松地使用 Markdown 编写文章,除了 Markdown 本身的语法之外,还可以使用 Hexo 提供的标签插件来快速的插入特定形式的内容,而且相对于其他框架,Hexo在速度上也有很大优势。

2.搭建Node.js环境

我们了解到Hexo基于Node.js的,那么我们搭建博客网站首先需要安装Node.js环境。 Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境,可以在非浏览器环境下,解释运行 JS 代码。
下载地址:http://nodejs.cn/download
测试安装:命令行使用node -v 、mpm -v,查看显示版本号即成功。

3.安装Hexo博客框架工具

Hexo是一个建站工具,可以帮助我们快速生成基本的博客文件,安装它需要在控制台下使用如下命令:

1
npm install hexo-cli -g1

若报错,请尝试在命令前加上sudo

4.安装Git版本工具

Git是目前世界上最流行的分布式版本控制系统,是的,没有之一。使用Git可以帮助我们把本地的网页和文章等内容提交到Gihub上,实现同步。
下载地址:https://git-scm.com/downloads
Windows系统需下载,Mac系统因为自带Git无需操作。
测试安装:git - -version,查看显示版本号即成功。

3.开启GitHub Pages服务

搭建我们的个人博客需要一个唯一的域名,当然我们可以申请购买一个域名来使用,但是在不是太必要的情况下,我们也可以通过Github Pages获得一个免费使用的域名。

在第一步自己建立的仓库随后选择Setting进入设置,找到Github Pages如下

将你的Git与GitHub帐号绑定,鼠标右击blog文件夹打开Git Bash

img

或者在菜单里搜索Git Bash,设置user.name和user.email配置信息:

1
2
git config --global user.name "你的GitHub用户名"
git config --global user.email "你的GitHub注册邮箱"

生成ssh密钥文件:

1
ssh-keygen -t rsa -C "你的GitHub注册邮箱"

然后直接三个回车即可,默认不需要设置密码
然后找到生成的.ssh的文件夹中的id_rsa.pub密钥,将内容全部复制

img

打开GitHub_Settings_keys 页面,新建new SSH Key

img

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

img

如上则说明成功。这里之所以设置GitHub密钥原因是,通过非对称加密的公钥与私钥来完成加密,公钥放置在GitHub上,私钥放置在自己的电脑里。GitHub要求每次推送代码都是合法用户,所以每次推送都需要输入账号密码验证推送用户是否是合法用户,为了省去每次输入密码的步骤,采用了ssh,当你推送的时候,git就会匹配你的私钥跟GitHub上面的公钥是否是配对的,若是匹配就认为你是合法用户,则允许推送。这样可以保证每次的推送都是正确合法的。

hexoc初始化

  • 创建一个blog文件夹用于存放hexo。然后右键该文件夹使用
1
git bash here

命令就可以直接定位到当前目录。

然后使用

1
npm install hexo --save

初始化hexo基础配置文件。初始化时间比较长,不用急,等完成后输入

1
hexo init

初始化后,接着输入

1
npm install

配置node。然后输入

1
hexo g

加载hexo基础html、css、js等文件。
在这完成后等于已经在本地创建了一个网页,想查看的话,输入

1
hexo s

然后相当于开启了一个本地的服务器,在浏览器输入 http://localhost:4000/

img

你就可以看到你的本地博客了。

推送网站

接下来要做的就是就是推送网站,也就是发布网站,让我们的网站可以被更多的人访问。在设置之前,需要解释一个概念,在blog根目录里的_config.yml文件称为站点配置文件,如下图

img

进入根目录里的themes文件夹,里面也有个_config.yml文件,这个称为主题配置文件,如下图

img

下一步将我们的Hexo与GitHub关联起来,打开站点的配置文件_config.yml,翻到最后修改为:

deploy:
type: git
repo: 这里填入你之前在GitHub上创建仓库的完整路径,记得加上 .git
branch: master参考如下:

保存站点配置文件。

其实就是给hexo d 这个命令做相应的配置,让hexo知道你要把blog部署在哪个位置,很显然,我们部署在我们GitHub的仓库里。最后安装Git部署插件,输入命令:

1
npm install hexo-deployer-git --save

这时,我们分别输入三条命令:

1
2
3
hexo clean 
hexo g
hexo d

其实第三条的 hexo d 就是部署网站命令,d是deploy的缩写。完成后,打开浏览器,在地址栏输入你的放置个人网站的仓库路径,即 http://xxxx.github.io

比如我的xxxx就是我的GitHub用户名

你就会发现你的博客已经上线了,可以在网络上被访问了。

搭建完成,剩下美化教程就靠自己的资源利用能力了(百度不香吗???)