github pages + hexo 搭建个人博客站点

github pages + hexo 搭建个人博客站点

突然很想拥有一个自己的站点博客，虽然可以写博客的地方挺多的，如CSDN，博客园，sina，简书等等，但是总觉得拥有一个自己的站点很cool，所以昨天开始着手搭建，效果如链接所示：我的个站

具体步骤可以分为

• Git的下载和使用
• 创建github pages
• node.js，hexo的下载和使用
• 注册域名，部署站点

---

Git的使用的下载

git是目前最受欢迎的开源的分布式版本控制系统，可用于敏捷高效地处理任何或小或大的项目，现在还不会用git的程序猿不是好程序猿：）

使用git首先我们要下载客户端并且安装，具体步骤可参考菜鸟教程git安装教程，安装成功后，先配置本地用户和邮箱，输入一下命令：

git config --global user.name "yourUsername" //设置用户名 
git config --global user.email "yourEmail" //设置邮箱

下面是一些git的常用命令，更多命令请参考git官网git命令行

检出仓库：$ git clone git://github.com/jquery/jquery.git
查看远程仓库：$ git remote -v
添加远程仓库：$ git remote add [name] [url]
删除远程仓库：$ git remote rm [name]
修改远程仓库：$ git remote set-url --push [name] [newUrl]
添加文件：$ git add .
提交文件到缓存区：$ git commit -m"description"
拉取远程仓库：$ git pull [remoteName] [localBranchName]
推送远程仓库：$ git push [remoteName] [localBranchName]

---

创建github pages

首先注册GitHub账号，这里就不多做说明了，相信你肯定会的，注册成功后，新建一个仓库，点击New repository

仓库名格式为 userName.github.io,uersName为你的github用户名，进入到仓库sitting页面

有一个Github Pages 的设置，点击 source 中的本来的 None ，使其变成 master 分支，也就是作为部署github pages 的分支，然后点击 save

页面刷新之后，再看 github pages 设置框处，多了一行网址，就是你的 github pages 的网址了,输入网址即可访问你的个人页面了。

本地git要连接到github需要配置ssh，打开git bash，输入命令ssh-keygen -t rsa -C "yourEamil@163.com", 使用该命令之后, 会出现提示选择ssh-key生成路径, 这里直接点回车默认即可, 生成的ssh-key在默认路径中

将ssh配置到GitHub中,进入生成的ssh目录 : C:\Documents and Settings\Administrator.ssh （或者 C:\Users\自己电脑用户名.ssh）中, 使用记事本打开 id_rsa.pub 文件, 将该文件中的内容复制,进入GitHub点击头像选择settings

选择SSH and GPG keys选项，点击New SSH key按钮，把复制内容粘贴上去

验证是否配置成功，输入命令ssh -T git@github.com，如果显示Hi han1202012! You’ve successfully authenticated, but GitHub does not provide shell access. 就说明配置成功, 可以连接上GitHub。

---

node.js，hexo的下载和使用

首先安装node.js, 这个直接下载安装，没什么好说的下载node.js,下载安装完成后，就可以安装hexo了，贴出官网教程hexo教程，首先创建一个文件夹,如blog,用户存放hexo的配置文件,然后进入blog里安装Hexo。在创建好的目录下运行git bash，在窗口中输入npm install -g hexo-cli，来试试安装成功没有，输入以下命令查看Hexo的版本信息hexo -v，如果出现类似内容说明安装成功啦！

安装 Hexo 完成后，在你刚刚创建的blog文件夹下执行以下命令，Hexo 将会在指定文件夹中新建所需要的文件：

cd E:\workspace\blog(你的自定义目录)
$ hexo init 
$ npm install

安装好了之后会看到一大串的信息，这里就不贴出来了。现在我们可以看到blog目录下的文件结构是这样的：

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

接下来我们就可以写文章了，执行下面这条命令来创建一篇新文章：

hexo new "hello_test"

然后会提示我们新建的文章所在路径,根据路径找到hello_test.md文件，Markdown编辑器或其他文本编辑器打开，里面已经有内容了，这是由模板生成的Front-Matter，在—前面的是文章的一些基本信息例如标题、日期及标签，还能添加其他一些选项如分类，具体参考上述给出的官网教程。

接下来，把新建的文章生成页面，运行以下命令：

hexo generate

然后就会看到一串类似下面这样的信息：

INFO  Generated: css/style.css
INFO  Generated: css/images/banner.jpg
INFO  Generated: css/fonts/fontawesome-webfont.woff
INFO  Generated: css/fonts/fontawesome-webfont.ttf
INFO  Generated: css/fonts/fontawesome-webfont.svg
INFO  Generated: css/fonts/fontawesome-webfont.eot
INFO  Generated: css/fonts/FontAwesome.otf
INFO  Generated: 2015/12/13/Hello/index.html
INFO  Generated: 2015/12/13/hello-world/index.html
INFO  Generated: archives/index.html
INFO  Generated: archives/2015/index.html
INFO  Generated: archives/2015/12/index.html
INFO  Generated: index.html
INFO  29 files generated in 2.19 s

表示博客页面已经生成完成，接下来我们可以用hexo本地服务器预览页面效果，输入以下配置：

hexo server

会有以下提示：

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

进入地址，就可以预览我们的博客页面啦。这里有个小坑，hexo默认端口是4000，我的4000端口被占用，导致无法正常启动，因此可以输入以下命令：

 Hexo server -p 5000

-p 后面输入你想用的端口，这样就可以正常启动了。

接下来我们需要改博客配置信息，找到博客根目录下的配置文件_config.yml，里面会有很多配置选项，具体不详细说明，可以参照上述给出的官网。注意一点，在config.yml中deploy节点下加入以下配置，以确保hexo可以连接上github：

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

这里推荐一款Markdown在线编辑器Markdown，也可以看一下Markdown语法Markdown语法

接下来选择自己喜欢的主题， 先给出hexo的github地址hexo，里面有很多主题，挑一个自己喜欢的hexo主题，这里我用的是yilia，运行以下命令安装主题：$ git clone https://github.com/litten/hexo-theme-yilia.git themes/yilia，修改hexo根目录下的 _config.yml ： theme: yilia来配置主题。

博客写好了，主题也选好了，在本地确认好样式和内容后，我们就可以像github提交修改的内容啦，输入以下命令：

npm install hexo-deployer-git --save

hexo deploy

然后再浏览器中输入 yourName.github.io 就行了，把yourName改成你github的账户名就行了, 这样我们就可以在github pages的域名下看到自己的博客了，惊不惊喜！

每次部署的步骤，都可按以下三步来进行。

hexo clean

hexo generate

hexo deploy

下面是一些常用命令：

hexo new"postName" #新建文章

hexo new page"pageName" #新建页面

hexo generate #生成静态页面至public目录

hexo server #开启预览访问端口（默认端口4000，'ctrl + c'关闭server）

hexo deploy #将.deploy目录部署到GitHub

hexo help # 查看帮助

hexo version #查看Hexo的版本

---

注册域名，部署站点

现在我们博客已经创建好了，内容也部署到github上去了，现在我们只需要注册一个域名然后指定到github pages上即可，万事俱备只欠东风。

首先，注册域名，有很多选择，这里我用的腾讯云，就以腾讯云为例，自行注册域名，注册完成，点击管理中心

点击域名管理

点击一级域名

点击自己的域名后选择添加记录，把域名指向自己的github地址

然后回到自己的github页面，进入博客仓库，选择Settings选项

在github pages选项下，Custom domain中输入自己的域名，点击save