Fork me on GitHub

Github+Hexo个人博客搭建

    用一天的时间跟随网上教程,完成了Github+Hexo博客的初步搭建,因此在这里记录一下自己博客的搭建历程。Hexo是一个基于Node.js的静态博客引擎,Hexo好处就是将写好的md格式的文本转换成静态的html文件,并可以将自己的静态博客托管到Github上。

预备工作

软件下载并安装

  1. 下载并安装Node.js

  2. 下载并安装Git

Github注册

访问github官网 ,点击sign up注册一个账号,记住自己注册的用户名。

新建一个Github仓库

点击new Repository之后,创建的仓库名由用户名+github.io构成,举个例子,我注册的github名字是我注册的github名是MichelleYang2017,则我的Repository name应该为MichelleYang2017.github.io,其余选择默认选项,点击”create Repository”。

Github仓库同步到本地

Git的配置

双击本地的Git Bash,在命令行输入:

1
$ cd ~/.ssh

输入之后如果能够进入到~/.ssh,则证明你不是第一次使用git,则跳过第SSH Key生成这一步,如果提示终端你:“NO such file or dictionary”,说明你是第一次使用git,这时候我们需要你要跳转到下一步来生成新的SSH key。

SSH key生成

双击本地的Git Bash,在命令行输入:

1
$ ssh-keygen -t rsa -C "邮件地址@youremail.com"

注意:-C后面输入的是你注册github时绑定的email。

测试自己有没有成功:
在命令行再次输入$ cd ~/.ssh,没有之前的错误提示,则证明成功。

添加SSH Key 到Github

在本地端的操作:
我们需要复制~/.ssh目录下面的id_rsa.pub内容到github相应位置,目前只需要你复制id_rsa.pub里面的内容,如果不知道id_rsa.pub文件在哪,可以在gitbash中输入$pwd,再从计算机中找到相应的文件目录。

在Github的操作:
右键头像,点击setting,选择SSH and GPG Keys进行配置,将刚刚复制的内容填写到Key那一栏,最后点击”Add Key”

测试:
在本地端Git Bash命令终端输入:

1
$ ssh -T git@github.com

如果能显示出自己注册的Github用户名,则证明成功。

完善个人信息:

1
2
$ git config --global user.name "michelleyang2017"//输入注册时的username
$ git config --global user.email "michelleyang2017a@gmail.com"//填写注册邮箱

搭建Hexo个人博客

安装Hexo

利用npm命令安装

1
2
$ cd
$ npm install -g hexo

创建关于博客的文件夹

在本地创建一个和仓库名同名的文件夹,然后右键Git bash here,则会打开一个新的gitbash
输入以下命令:

1
2
3
$ hexo init //初始化hexo主题
$ npm install //安装hexo所需要的一些依赖
$ npm install hexo-deployer-git --save //解决hexo新版本的部署问题

本地查看

输入以下命令:

1
2
$ hexo g //生成静态文件
$ hexo s //开启本地服务器

打开localhost:4000查看博客建站的效果,如果一直网页一直刷新不出来,可以输入以下命令:

1
$ hexo s -p 5000 //更换一个端口,打开localhost:5000测试博客建站效果

部署到github端

  1. 复制SSH码:
    进入自己新建的仓库,选择Clone ordownload,此时会出现SSH码,复制此SSH码

  2. 在本地端编辑配置文件
    编辑新建的文件夹下面的_config.yml,修改文档末尾:deploy部分

    1
    2
    3
    4
    deploy:
    type: git
    repository: git@github.com:username/username.github.io.git
    branch: master

    注意:在修改配置文件的时候冒号后面有一个空格,要不然会报错。

  3. 部署站点
    输入以下命令:

    1
    2
    $ hexo g  //生成静态文件
    $ hexo d //文件生成后立即同步到github端

更换Next主题

更换next主题
Next使用文档

美化博客网站

美化主题
设置多个tag
添加Disqus评论

参考资料

Github+Hexo建博客参考1
Github+Hexo建博客参考2
Next使用文档

坚持原创技术分享,您的支持将鼓励我继续创作