Github+Hexo搭建个人网站详细教程

背景

​ 随着互联网浪潮的翻腾，国内外涌现出越来越多优秀的社交网站让用户分享信息更加便捷。然后，如果你是一个不甘寂寞的程序猿，是否也想要搭建一个属于自己的个人网站，如果你曾经或者现在正有这样的想法，请跟随这篇文章发挥你的Geek精神，让你快速拥有自己的博客网站，写文章记录生活，享受这种从0到1的过程。

准备

• Github账号
• 安装Git
• 安装Node.js

Github账号

​ 首先我们需要一个Github账号,若是没有的话,可以前往官网注册一个,不懂的话,可以参考Github账号注册

安装Git

什么是Git ?

简单来说Git是开源的分布式版本控制系统，用于敏捷高效地处理项目。我们网站在本地搭建好了，需要使用Git同步到GitHub上。

如果想要了解Git的细节，参看廖雪峰老师的Git教程：Git教程

从Git官网下载：Git - Downloading Package (git-scm.com)

现在的机子基本都是64位的，选择64位的安装包，下载后安装，在命令行里输入git测试是否安装成功，若安装失败，参看其他详细的Git安装教程。

安装成功后，将你的Git与GitHub帐号绑定，鼠标右击打开Git Bash

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

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

生成ssh密钥文件：

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

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

打开SSH and GPG keys (github.com)页面，新建new SSH Key

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

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

安装Node.js

Hexo基于Node.js，Node.js下载地址：Download | Node.js 下载安装包，注意安装Node.js会包含环境变量及npm的安装，安装后，检测Node.js是否安装成功，在命令行中输入 node -v :

检测npm是否安装成功，在命令行中输入npm -v :

到这了，安装Hexo的环境已经全部搭建完成。

创建Github仓库

打开https://github.com/，新建一个项目，如下所示：

然后如下图所示，输入自己的项目名字，后面一定要加.github.io后缀，README初始化也要勾上。名称一定要和你的github名字完全一样，比如你github名字叫abc，那么仓库名字一定要是abc.github.io

然后项目就建成了，点击Settings，向下拉到最后有个GitHub Pages，点击Choose a theme选择一个主题。然后等一会儿，再回到GitHub Pages，会变成下面这样：

点击那个链接，就会出现自己的网页啦，效果如下(我的是已经使用主题的页面,你们的页面可能不一样)：

安装Hexo

Hexo就是我们的个人博客网站的框架， 这里需要自己在电脑常里创建一个文件夹，可以命名为Blog，Hexo框架与以后你自己发布的网页都在这个文件夹中。创建好后，进入文件夹中，按住shift键，右击鼠标点击命令行

使用npm命令安装Hexo，输入：

npm install -g hexo-cli 

这个安装时间较长耐心等待，安装完成后，初始化我们的博客，输入：

hexo init blog

注意，这里的命令都是作用在刚刚创建的Blog文件夹中。

为了检测我们的网站雏形，分别按顺序输入以下三条命令：

hexo new test_my_site

hexo g

hexo s

这些命令在后面作介绍，完成后，打开浏览器输入地址：

http://localhost:4000

可以看出我们写出第一篇博客

Hexo常用命令

npm install hexo -g #安装Hexo
npm update hexo -g #升级
hexo init #初始化博客

命令简写
hexo n "我的博客" == hexo new "我的博客" #新建文章
hexo g == hexo generate #生成
hexo s == hexo server #启动服务预览
hexo d == hexo deploy #部署

hexo server #Hexo会监视文件变动并自动更新，无须重启服务器
hexo server -s #静态模式
hexo server -p 5000 #更改端口
hexo server -i 192.168.1.1 #自定义 IP
hexo clean #清除缓存，若是网页正常情况下可以忽略这条命令

刚刚的三个命令依次是新建一篇博客文章、生成网页、在本地预览的操作。

连接Github仓库

打开博客根目录下的_config.yml文件，这是博客的配置文件，在这里你可以修改与博客相关的各种信息。

修改最后一行的配置：

deploy:
- type: git
  repository: https://github.com/wangwangit/wangwangit.github.io.git
  branch: master

repository修改为你自己的github项目地址.

绑定域名

现在默认的域名还是xxx.github.io，是不是很没有牌面？想不想也像我一样弄一个专属域名呢，首先你得购买一个域名，xx云都能买，看你个人喜好了。

以我的谷歌域名为例，如下图所示，添加一条解析记录：

然后打开你的github博客项目，点击settings，拉到下面Custom domain处，填上你自己的域名，保存：

这时候你的项目根目录应该会出现一个名为CNAME的文件了。如果没有的话，打开你本地博客/source目录，我的是D:\study\program\blog\source，新建CNAME文件，注意没有后缀。然后在里面写上你的域名，保存。最后运行hexo g、hexo d上传到github

备份博客源文件

有时候我们想换一台电脑继续写博客，这时候就可以将博客目录下的所有源文件都上传到github上面。

首先在github博客仓库下新建一个分支hexo，然后git clone到本地，把.git文件夹拿出来，放在博客根目录下。

然后git checkout hexo切换到hexo分支，然后git add .，然后git commit -m "xxx"，最后git push origin hexo提交就行了。

替换主题

我使用的主题是这个:博客主题

具体操作可以参考该主题的文档

最后

对于图床使用可以参考我以下文章:

使用腾讯CDN优化github图床访问

使用Nginx自建CDN加速Hexo博客

[优秀的开源图床picGo]